Report improvements

extended-request.ts

@@ -303,4 +303,8 @@ export default class ExtendedRequest {
       connection: "443",
     };
   }
+
+  getMaxPriority() {
+    return Math.max(...this.stolenData.map((entry) => entry.getPriority()));
+  }
 }

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/email-template-2.tsx

@@ -192,18 +192,20 @@ export default function EmailTemplate2({
             .
           </>
         ) : (
-          /* HTML */ `o ile po wejściu na stronę wcisnąłem w wyskakującym
-          okienku przycisk „${config.popup_accept_all_text}”, o tyle nie stanowi
-          to według mnie ważnej w świetle RODO zgody, gdyż brakowało w tym
-          okienku równie łatwo osiągalnego przycisku, którego kliknięcie
-          skutkowałoby zasygnalizowaniem braku mojej zgody na takie
-          przetwarzanie moich danych. Mówiąc wprost &mdash; wyrażenie „zgody”
-          było łatwiejsze niż jej niewyrażenie. Niewyrażenie zgody wiąże się z
-          negatywną konsekwencją konieczności przechodzenia przez dodatkowe
-          kroki w wyskakującym okienku. Zatem tak otrzymana przez Państwo moja
-          „zgoda” nie jest poprawną podstawą prawną do przetwarzania moich
-          danych osobowych, gdyż nie spełnia warunku dobrowolności wspomnianego
-          w Art. 4. pkt 11. RODO.`
+          <>
+            o ile po wejściu na stronę wcisnąłem w wyskakującym okienku przycisk
+            „{config.popup_accept_all_text}”, o tyle nie stanowi to według mnie
+            ważnej w świetle RODO zgody, gdyż brakowało w tym okienku równie
+            łatwo osiągalnego przycisku, którego kliknięcie skutkowałoby
+            zasygnalizowaniem braku mojej zgody na takie przetwarzanie moich
+            danych. Mówiąc wprost &mdash; wyrażenie „zgody” było łatwiejsze niż
+            jej niewyrażenie. Niewyrażenie zgody wiąże się z negatywną
+            konsekwencją konieczności przechodzenia przez dodatkowe kroki w
+            wyskakującym okienku. Zatem tak otrzymana przez Państwo moja „zgoda”
+            nie jest poprawną podstawą prawną do przetwarzania moich danych
+            osobowych, gdyż nie spełnia warunku dobrowolności wspomnianego w
+            Art. 4. pkt 11. RODO.
+          </>
         )}{" "}
         Za zgodę nie można też uznać posiadania włączonej obsługi cookies w
         przeglądarce, jakichkolwiek innych ustawień przeglądarki, ani pasywnych
@@ -380,4 +382,5 @@ export default function EmailTemplate2({
       </p>
     </>
   );
+  return result;
 }

report-window/har-converter.tsx

@@ -22,9 +22,36 @@ function handleNewFile(
 }
 
 function generateFakeHAR(entries: StolenDataEntry[]) {
-  const requests = entries
-    .sort((entry1, entry2) => entry2.getPriority() - entry1.getPriority())
-    .map((entry) => entry.request);
+  const requests = unique(entries.map((entry) => entry.request))
+    .sort((request1, request2) => {
+      if (request1.shorthost < request2.shorthost) {
+        return -1;
+      } else if (request1.shorthost > request2.shorthost) {
+        return 1;
+      } else {
+        return request2.getMaxPriority() - request1.getMaxPriority();
+      }
+    })
+    .filter((_, index, array) => {
+      if (index !== 0 && array[index].shorthost == array[index - 1].shorthost) {
+        return false;
+      }
+      return true;
+    })
+    .sort(
+      (entry1, entry2) => entry2.getMaxPriority() - entry1.getMaxPriority()
+    );
+
+  console.log(
+    "GENERATEHAR! Got",
+    entries.length,
+    "entries, ",
+    unique(entries.map((e) => e.request)),
+    "requests. Filtered down to",
+    requests.length,
+    "requests"
+  );
+
   return {
     log: {
       version: "1.2",
@@ -47,7 +74,7 @@ function generateFakeHAR(entries: StolenDataEntry[]) {
           },
         },
       ],
-      entries: unique(requests).map((r) => r.toHAR()),
+      entries: requests.map((r) => r.toHAR()),
     },
   };
 }

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,

util.ts

@@ -1,5 +1,11 @@
 import { EventEmitter } from "events";
-import { Dispatch, SetStateAction, useEffect, useState } from "react";
+import {
+  Dispatch,
+  ReactChildren,
+  SetStateAction,
+  useEffect,
+  useState,
+} from "react";
 
 export type Unpromisify<T> = T extends Promise<infer R> ? R : T;
 export type Unarray<T> = T extends Array<infer R> ? R : T;
@@ -39,6 +45,8 @@ export function getshorthost(host: string) {
   let lookback = parts.at(-2).length > 3 ? -2 : -3;
   if (parts.at(-2) == "doubleclick") {
     lookback = -4; // to distinguish between google ads and stats
+  } else if (parts.at(-2) == "google") {
+    lookback = -3; // to distinguish various google services
   }
   return parts.slice(lookback).join(".");
 }