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,27 +1,20 @@
-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 Report() {
-  const origin = new URL(document.location.toString()).searchParams.get(
-    "origin"
-  );
-  const [counter, setCounter] = useEmitter(getMemory());
-  function refresh() {
-    setCounter((c) => c + 1);
-  }
-  const clusters = getMemory().getClustersForOrigin(origin);
-  const entries = Object.values(clusters)
-    .map((cluster) => cluster.getRepresentativeStolenData())
-    .reduce(reduceConcat, [])
-    .filter((entry) => entry.isMarked);
+function DataPreview({
+  entries,
+  refresh,
+}: {
+  entries: StolenDataEntry[];
+  refresh: () => void;
+}) {
+  // currently not used, maybe scraped entirely in the future
   return (
-    <div {...{ "data-version": counter }}>
-      <h1>Generuj treść maila dla {origin}</h1>
     <table>
       <thead>
         <tr>
@@ -48,9 +41,7 @@ function Report() {
               style={{
                 width: "400px",
                 overflowWrap: "anywhere",
-                  backgroundColor: entry.isRelatedToID()
-                    ? "#ffff0054"
-                    : "white",
+                backgroundColor: entry.isRelatedToID() ? "#ffff0054" : "white",
               }}
             >
               {entry.getValuePreview()}
@@ -81,10 +72,52 @@ function Report() {
         ))}
       </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);
+  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>
       <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,