Performance improvements

report-window/domain-summary.tsx

@@ -1,6 +1,10 @@
 import React from "react";
 import { RequestCluster } from "../request-cluster";
-import { Classifications, Sources } from "../stolen-data-entry";
+import {
+  Classifications,
+  Sources,
+  StolenDataEntry,
+} from "../stolen-data-entry";
 
 const emailClassifications: Record<keyof typeof Classifications, string> = {
   id: "sztucznie nadane mi ID",
@@ -25,11 +29,10 @@ export default function DomainSummary({
       Właścicielowi domeny <strong>{cluster.id}</strong> zostały ujawnione:{" "}
       <ul>
         <li>Mój adres IP</li>
-        {cluster
-          .getRepresentativeStolenData()
+        {cluster.representativeStolenData
           .filter((entry) => entry.isMarked)
           .map((entry) => (
-            <li>
+            <li key={entry.id}>
               {emailClassifications[entry.classification]}{" "}
               {emailSources[entry.source]} (nazwa: <code>{entry.name}</code>,{" "}
               wartość: <code>{entry.getValuePreview()}</code>)

report-window/report-window.tsx

@@ -1,90 +1,123 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import ReactDOM from "react-dom";
 import { getMemory } from "../memory";
-import { Classifications } from "../stolen-data-entry";
+import { Classifications, StolenDataEntry } from "../stolen-data-entry";
 import { reduceConcat, useEmitter } from "../util";
 import EmailTemplate from "./email-template";
 import HARConverter from "./har-converter";
 
+function DataPreview({
+  entries,
+  refresh,
+}: {
+  entries: StolenDataEntry[];
+  refresh: () => void;
+}) {
+  // currently not used, maybe scraped entirely in the future
+  return (
+    <table>
+      <thead>
+        <tr>
+          <th>Adres docelowy</th>
+          <th>Źródło danych</th>
+          <th>Treść danych</th>
+          <th>Klasyfikacja</th>
+        </tr>
+      </thead>
+      <tbody>
+        {entries.map((entry) => (
+          <tr
+            key={entry.id}
+            style={{
+              backgroundColor:
+                entry.classification == "id" ? "yellow" : "white",
+            }}
+          >
+            <td>{entry.request.shorthost}</td>
+            <td style={{ overflowWrap: "anywhere" }}>
+              {entry.source}:{entry.name}
+            </td>
+            <td
+              style={{
+                width: "400px",
+                overflowWrap: "anywhere",
+                backgroundColor: entry.isRelatedToID() ? "#ffff0054" : "white",
+              }}
+            >
+              {entry.getValuePreview()}
+              {/* always gonna have
+                one key, because unwrapEntry is called above */}
+            </td>
+            <td>
+              <select
+                value={entry.classification}
+                onChange={(e) => {
+                  entry.classification = e.target
+                    .value as keyof typeof Classifications;
+                  refresh();
+                }}
+              >
+                {[
+                  ["history", "Historia przeglądania"],
+                  ["id", "Sztucznie nadane id"],
+                  ["location", "Lokalizacja"],
+                ].map(([key, name]) => (
+                  <option key={key} value={key}>
+                    {name}
+                  </option>
+                ))}
+              </select>
+            </td>
+          </tr>
+        ))}
+      </tbody>
+    </table>
+  );
+}
+
 function Report() {
+  console.time("getOrigin");
   const origin = new URL(document.location.toString()).searchParams.get(
     "origin"
   );
+  console.timeEnd("getOrigin");
+  console.time("useMemory");
   const [counter, setCounter] = useEmitter(getMemory());
+  console.timeEnd("useMemory");
   function refresh() {
     setCounter((c) => c + 1);
   }
+  console.time("getClustersForOrigin");
   const clusters = getMemory().getClustersForOrigin(origin);
-  const entries = Object.values(clusters)
-    .map((cluster) => cluster.getRepresentativeStolenData())
-    .reduce(reduceConcat, [])
-    .filter((entry) => entry.isMarked);
-  return (
+  console.timeEnd("getClustersForOrigin");
+  const [entries, setEntries] = useState<StolenDataEntry[]>([]);
+  console.time("useEffect report-window");
+  useEffect(() => {
+    setEntries(
+      Object.values(clusters)
+        .map((cluster) => {
+          cluster.calculatetRepresentativeStolenData();
+          return cluster.representativeStolenData;
+        })
+        .reduce(reduceConcat, [])
+        .filter((entry) => entry.isMarked)
+    );
+  }, []);
+  console.timeEnd("useEffect report-window");
+  if (entries.length == 0) {
+    return <>Wczytywanie...</>;
+  }
+  console.time("rendering template");
+  const result = (
     <div {...{ "data-version": counter }}>
+      {/*<DataPreview {...{entries, refresh}} */}
       <h1>Generuj treść maila dla {origin}</h1>
-      <table>
-        <thead>
-          <tr>
-            <th>Adres docelowy</th>
-            <th>Źródło danych</th>
-            <th>Treść danych</th>
-            <th>Klasyfikacja</th>
-          </tr>
-        </thead>
-        <tbody>
-          {entries.map((entry) => (
-            <tr
-              key={entry.id}
-              style={{
-                backgroundColor:
-                  entry.classification == "id" ? "yellow" : "white",
-              }}
-            >
-              <td>{entry.request.shorthost}</td>
-              <td style={{ overflowWrap: "anywhere" }}>
-                {entry.source}:{entry.name}
-              </td>
-              <td
-                style={{
-                  width: "400px",
-                  overflowWrap: "anywhere",
-                  backgroundColor: entry.isRelatedToID()
-                    ? "#ffff0054"
-                    : "white",
-                }}
-              >
-                {entry.getValuePreview()}
-                {/* always gonna have
-                one key, because unwrapEntry is called above */}
-              </td>
-              <td>
-                <select
-                  value={entry.classification}
-                  onChange={(e) => {
-                    entry.classification = e.target
-                      .value as keyof typeof Classifications;
-                    refresh();
-                  }}
-                >
-                  {[
-                    ["history", "Historia przeglądania"],
-                    ["id", "Sztucznie nadane id"],
-                    ["location", "Lokalizacja"],
-                  ].map(([key, name]) => (
-                    <option key={key} value={key}>
-                      {name}
-                    </option>
-                  ))}
-                </select>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
       <EmailTemplate {...{ entries, clusters, version: counter }} />
       <HARConverter {...{ entries }} />
     </div>
   );
+  console.timeEnd("rendering template");
+  return result;
 }
 
 ReactDOM.render(<Report />, document.getElementById("app"));

request-cluster.ts

@@ -13,6 +13,7 @@ const source_priority: Array<Sources> = [
 
 export class RequestCluster extends EventEmitter {
   public requests: ExtendedRequest[] = [];
+  public representativeStolenData: StolenDataEntry[] = [];
   constructor(public id: string) {
     super();
   }
@@ -30,14 +31,14 @@ export class RequestCluster extends EventEmitter {
     return false;
   }
 
-  getRepresentativeStolenData(
+  calculatetRepresentativeStolenData(
     filter: {
       minValueLength: number;
       cookiesOnly: boolean;
       cookiesOrOriginOnly: boolean;
     } = { minValueLength: 0, cookiesOnly: false, cookiesOrOriginOnly: false }
   ): StolenDataEntry[] {
-    return this.requests
+    this.representativeStolenData = this.requests
       .map((request) => request.stolenData)
 
       .reduce((a, b) => a.concat(b), [])
@@ -120,6 +121,7 @@ export class RequestCluster extends EventEmitter {
       .sort((entry1, entry2) =>
         entry1.getPriority() > entry2.getPriority() ? -1 : 1
       );
+    return this.representativeStolenData;
   }
 
   static sortCompare(a: RequestCluster, b: RequestCluster) {
@@ -165,7 +167,8 @@ export class RequestCluster extends EventEmitter {
   }
 
   autoMark() {
-    this.getRepresentativeStolenData().forEach((entry) => {
+    this.calculatetRepresentativeStolenData();
+    this.representativeStolenData.forEach((entry) => {
       entry.autoMark();
     });
   }

sidebar/stolen-data-cluster.tsx

@@ -125,13 +125,15 @@ export default function StolenDataCluster({
       </h2>
       <div>
         {cluster.getFullHosts().map((host) => (
-          <a href={`https://${host}`}>{host}, </a>
+          <a key={host} href={`https://${host}`}>
+            {host},{" "}
+          </a>
         ))}
       </div>
       <table>
         <tbody>
           {cluster
-            .getRepresentativeStolenData({
+            .calculatetRepresentativeStolenData({
               minValueLength,
               cookiesOnly,
               cookiesOrOriginOnly,