Improve marking performance

memory.ts

@@ -8,7 +8,7 @@ export default class Memory extends EventEmitter {
   private throttle = makeThrottle(200);
   async register(request: ExtendedRequest) {
     await request.init();
-    console.log("registering request for", request.origin);
+    // console.log("registering request for", request.origin);
     if (!request.isThirdParty()) {
       return;
     }

report-window/domain-summary.tsx

@@ -15,6 +15,13 @@ const emailSources: Record<Sources, string> = {
   queryparams: "jako część adresu URL (query-params)",
 };
 
+const source_priority: Array<Sources> = [
+  "cookie",
+  "pathname",
+  "queryparams",
+  "header",
+];
+
 export default function DomainSummary({
   cluster,
 }: {
@@ -27,13 +34,37 @@ export default function DomainSummary({
         <li>Mój adres IP</li>
         {cluster
           .getMarks()
-          .sort((markA, markB) =>
+          .sort((markA, markB) => {
-            markA.entry.value > markB.entry.value ? -1 : 1
+            if (markA.entry.value > markB.entry.value) {
-          )
+              return -1;
+            } else if (markA.entry.value > markB.entry.value) {
+              return 1;
+            } else {
+              const indexA = source_priority.indexOf(markA.source);
+              const indexB = source_priority.indexOf(markB.source);
+              if (indexA < indexB) {
+                return -1;
+              } else if (indexA > indexB) {
+                return 1;
+              } else {
+                return markA.name > markB.name ? -1 : 1;
+              }
+            }
+          })
+          .filter((_, index, array) => {
+            if (index == 0) {
+              return true;
+            }
+            if (array[index].valuePreview === array[index - 1].valuePreview) {
+              return false;
+            } else {
+              return true;
+            }
+          })
           .map((mark) => (
             <li>
               {emailClassifications[mark.classification]}{" "}
-              {emailSources[mark.source]} (nazwa: {mark.name},{" "}
+              {emailSources[mark.source]} (nazwa: <code>{mark.name}</code>,{" "}
               {mark.key ? (
                 <>
                   pozycja <code>{mark.key}</code>,

report-window/report-window.tsx

@@ -59,7 +59,7 @@ function Report() {
               >
                 {mark.valuePreview}
                 {/* always gonna have
-                one key, because unwrapEntry is calle above */}
+                one key, because unwrapEntry is called above */}
               </td>
               <td>
                 <select
@@ -67,7 +67,6 @@ function Report() {
                   onChange={(e) => {
                     mark.classification = e.target
                       .value as keyof typeof Classifications;
-                    console.log("changed classification!");
                     refresh();
                   }}
                 >

sidebar/sidebar.tsx

@@ -17,7 +17,9 @@ const Sidebar = () => {
   const [origin, setOrigin] = useState<string | null>(null);
   const [minValueLength, setMinValueLength] = useState<number | null>(7);
   const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
-  const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = useState<boolean>(true);
+  const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = useState<boolean>(
+    false
+  );
   const [counter, setCounter] = useEmitter(getMemory());
 
   useEffect(() => {

sidebar/stolen-data-cluster.tsx

@@ -1,8 +1,15 @@
 import React from "react";
 import { getMemory } from "../memory";
-import { MergedStolenDataEntry, Sources } from "../stolen-data-entry";
+import { RequestCluster } from "../request-cluster";
+import {
+  MergedStolenDataEntry,
+  Sources,
+  StolenDataEntry,
+} from "../stolen-data-entry";
 
-import { hyphenate } from "../util";
+import { hyphenate, useEmitter } from "../util";
+
+const MAX_STRING_VALUE_LENGTH = 100;
 
 function StolenDataValueTable({
   entry,
@@ -14,24 +21,29 @@ function StolenDataValueTable({
   return (
     <table>
       <tbody>
-        {Object.keys(entry.getParsedValues(prefixKey)[0]).map((key) => (
+        {Object.keys(entry.getParsedValues(prefixKey)[0]).map((key) => {
+          const subkey = `${prefixKey}.${key}`;
+          return (
             <tr key={`${prefixKey}.${key}`}>
               <th
                 onClick={(e) => {
-                entry.toggleMark(prefixKey);
+                  entry.toggleMark(subkey);
                   e.stopPropagation();
                 }}
+                style={{
+                  border: entry.hasMark(subkey)
+                    ? "2px solid red"
+                    : "2px solid transparent",
+                }}
               >
                 {hyphenate(key)}
               </th>
               <td>
-              <StolenDataValue
+                <StolenDataValue entry={entry} prefixKey={subkey} />
-                entry={entry}
-                prefixKey={`${prefixKey}.${key}`}
-              />
               </td>
             </tr>
-        ))}
+          );
+        })}
       </tbody>
     </table>
   );
@@ -44,14 +56,24 @@ function StolenDataValue({
   entry: MergedStolenDataEntry;
   prefixKey?: string;
 }) {
+  const [version] = useEmitter(entry);
   const value = entry.getParsedValues(prefixKey)[0];
   let body = null;
   if (!value) {
     body = <></>;
   } else if (typeof value === "string") {
+    const content = entry.getParsedValues(prefixKey)[0] as string;
     body = (
-      <div style={{ border: entry.hasMark(prefixKey) ? "2px solid red" : "" }}>
+      <div
-        {entry.getParsedValues(prefixKey)[0] as string}
+        style={{
+          border: entry.hasMark(prefixKey)
+            ? "2px solid red"
+            : "2px solid transparent",
+        }}
+        data-version={version}
+      >
+        {content.slice(0, MAX_STRING_VALUE_LENGTH)}{" "}
+        {content.length > MAX_STRING_VALUE_LENGTH ? "(...)" : ""}
       </div>
     );
   } else {
@@ -70,6 +92,45 @@ function StolenDataValue({
   );
 }
 
+const icons: Record<Sources, string> = {
+  cookie: "🍪",
+  pathname: "🛣",
+  queryparams: "🅿",
+  header: "H",
+};
+
+function StolenDataRow({
+  entry,
+  cluster,
+}: {
+  entry: MergedStolenDataEntry;
+  cluster: RequestCluster;
+}) {
+  const [version] = useEmitter(entry);
+  return (
+    <tr
+      key={origin + cluster.id + entry.getUniqueKey()}
+      data-key={origin + cluster.id + entry.getUniqueKey()}
+      data-version={version}
+    >
+      <th
+        style={{
+          width: "100px",
+          overflowWrap: "anywhere",
+          border: entry.hasMark("") ? "2px solid red" : "2px solid transparent",
+        }}
+        onClick={() => entry.toggleMark("")}
+      >
+        {entry.getNames().map(hyphenate).join(", ")}
+      </th>
+      <td>{entry.getSources().map((source) => icons[source])}</td>
+      <td style={{ wordWrap: "anywhere" as any }}>
+        <StolenDataValue entry={entry} />
+      </td>
+    </tr>
+  );
+}
+
 export default function StolenDataCluster({
   origin,
   shorthost,
@@ -85,12 +146,6 @@ export default function StolenDataCluster({
   cookiesOrOriginOnly: boolean;
 }) {
   const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
-  const icons: Record<Sources, string> = {
-    cookie: "🍪",
-    pathname: "🛣",
-    queryparams: "🅿",
-    header: "H",
-  };
   return (
     <div>
       <h2>
@@ -114,25 +169,13 @@ export default function StolenDataCluster({
           {cluster
             .getStolenData({ minValueLength, cookiesOnly, cookiesOrOriginOnly })
             .map((entry) => (
-              <tr
+              <StolenDataRow
-                key={origin + cluster.id + entry.getUniqueKey()}
+                {...{
-                data-key={origin + cluster.id + entry.getUniqueKey()}
+                  entry,
-              >
+                  cluster,
-                <th
+                  key: origin + cluster.id + entry.getUniqueKey(),
-                  style={{
-                    width: "100px",
-                    overflowWrap: "anywhere",
-                    border: entry.hasMark("") ? "2px solid red" : "",
                 }}
-                  onClick={() => entry.addMark("")}
+              />
-                >
-                  {entry.getNames().map(hyphenate).join(", ")}
-                </th>
-                <td>{entry.getSources().map((source) => icons[source])}</td>
-                <td style={{ wordWrap: "anywhere" as any }}>
-                  <StolenDataValue entry={entry} />
-                </td>
-              </tr>
             ))}
         </tbody>
       </table>

stolen-data-entry.ts

@@ -1,7 +1,7 @@
 import { TCModel } from "@iabtcf/core";
+import { EventEmitter } from "events";
 import ExtendedRequest, { HAREntry } from "./extended-request";
 import Mark from "./mark";
-import { getMemory } from "./memory";
 import {
   getshorthost,
   isJSONObject,
@@ -29,7 +29,7 @@ const id = (function* id() {
   }
 })();
 
-export class StolenDataEntry {
+export class StolenDataEntry extends EventEmitter {
   public isIAB = false;
   public iab: TCModel | null = null;
   public id: number;
@@ -47,6 +47,7 @@ export class StolenDataEntry {
     //   // console.log(this.iab);
     //   this.isIAB = true;
     // } catch (e) {}
+    super();
     this.id = id.next().value as number;
     this.classification = this.classify();
   }
@@ -81,8 +82,26 @@ export class StolenDataEntry {
       return object;
     } else if (isURL(value)) {
       const url = new URL(value);
+      let hash = url.hash;
+      if (hash.includes("=")) {
+        //facebook sometimes includes querystring-encoded data into the hash... attempt to parse it
+        try {
+          hash = Object.fromEntries(
+            hash
+              .slice(1)
+              .split("&")
+              .map((kv) => kv.split("="))
+          );
+        } catch (e) {
+          // failed to parse as query string
+          console.log(
+            "Failed attempt to parse hash location as query string, probably safe to ignore:",
+            e
+          );
+        }
+      }
       const object = {
-        [Symbol.for("originalURL")]: value,
+        [Symbol.for("originalURL")]: value, // so it doesn't appear raw in the table but can be easily retrieved later
         host: url.host,
         path: url.pathname,
         ...Object.fromEntries(
@@ -90,6 +109,7 @@ export class StolenDataEntry {
             entries: () => Iterable<[string, string]>;
           }).entries()
         ),
+        ...(hash === "" ? {} : typeof hash === "string" ? { hash } : hash),
       };
       return object;
     } else {
@@ -108,7 +128,7 @@ export class StolenDataEntry {
 
   addMark(key: string) {
     this.marks.push(new Mark(this, key));
-    getMemory().emit("change", true); // to trigger rerender
+    this.emit("change");
   }
 
   hasMark(key?: string) {
@@ -121,7 +141,7 @@ export class StolenDataEntry {
 
   removeMark(key: string) {
     this.marks = this.marks.filter((mark) => mark.key != key);
-    getMemory().emit("change"); // to trigger rerender
+    this.emit("change");
   }
 
   toggleMark(key: string) {
@@ -163,7 +183,7 @@ export class StolenDataEntry {
   getValuePreview(key = ""): string {
     const value = this.getParsedValue(key);
     const str = value.toString();
-    if (this.classification == "id") {
+    if (typeof value !== "object" && this.classification == "id") {
       return (
         str.slice(0, Math.min(str.length / 3, ID_PREVIEW_MAX_LENGTH)) + "(...)"
       );
@@ -175,8 +195,9 @@ export class StolenDataEntry {
   }
 }
 
-export class MergedStolenDataEntry {
+export class MergedStolenDataEntry extends EventEmitter {
   constructor(public entries: StolenDataEntry[]) {
+    super();
     const all_marks = unique(
       entries.map((entry) => entry.marks).reduce(reduceConcat, [])
     );
@@ -186,6 +207,20 @@ export class MergedStolenDataEntry {
     // getMemory().emit("change"); // to trigger render
   }
 
+  on(event: string, listener: () => void) {
+    for (const entry of this.entries) {
+      entry.on(event, listener);
+    }
+    return this;
+  }
+
+  removeListener(event: string, listener: () => void) {
+    for (const entry of this.entries) {
+      entry.removeListener(event, listener);
+    }
+    return this;
+  }
+
   hasValue(value: string) {
     return this.entries.some((entry) => entry.value === value);
   }

util.ts

@@ -1,6 +1,5 @@
 import { EventEmitter } from "events";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import Memory from "./memory";
 
 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;