implement the cluster in time transitions

src/components/AggregatedClusterView.tsx

@@ -1,33 +1,45 @@
-import { ClusterView } from "@/lib/clusteringOverTime";
 import { cn } from "@/lib/utils";
+import { useRawDataStore } from "@/store/useRawDataStore";
 import { useViewModelStore } from "@/store/useViewModelStore";
+import { useViewSettingsStore } from "@/store/useViewSettingsStore";
+import {
+  utcDay,
+  utcFormat,
+  utcHour,
+  utcMinute,
+  utcMonth,
+  utcSecond,
+  utcWeek,
+  utcYear,
+} from "d3";
+import { useEffect } from "react";
 import { clusterColors } from "./clusterColors";
 
 export const AggregatedClusterView = () => {
-  // const values = useRawDataStore((state) => state.values);
-  // // const dimensions = useRawDataStore((state) => state.dimensions);
+  const values = useRawDataStore((state) => state.values);
 
-  // const presentationSettings = useViewSettingsStore();
+  const presentationSettings = useViewSettingsStore();
 
-  // const { colsAccordingToAggregation, processData } = useViewModelStore();
+  const { clustersInTime, processClustersInTimeData } = useViewModelStore();
 
-  // useEffect(() => {
-  //   processData();
-  // }, [presentationSettings, values]);
-
-  const { colsAccordingToAggregation } = useViewModelStore();
-
-  const clustersInTime: ClusterView[] = [
-    { timestamp: "asdf", clusters: colsAccordingToAggregation },
-    { timestamp: "asdf", clusters: colsAccordingToAggregation },
-    { timestamp: "asdf", clusters: colsAccordingToAggregation },
+  useEffect(() => {
+    processClustersInTimeData();
+  }, [presentationSettings, values]);
+  const interestingTimestampIndizes = [
+    0,
+    Math.floor(clustersInTime.length / 4),
+    Math.floor(clustersInTime.length / 2),
+    Math.floor((clustersInTime.length * 3) / 4),
+    clustersInTime.length - 1,
   ];
+
   return (
-    <div className="flex flex-1 flex-row w-full my-2">
+    <div className="flex flex-1 flex-row w-full my-2 pb-8 relative">
       {clustersInTime.map(({ timestamp, clusters }, groupIndex) => (
         <div
+          key={`${groupIndex}-${timestamp}`}
           className={cn(
-            "flex flex-1 flex-col flex-shrink items-center overflow-hidden",
+            "flex flex-1 flex-col flex-shrink items-center overflow-hidden ",
             groupIndex > 0 ? "border-l-[0.5px] border-white" : "rounded-l-sm"
           )}
         >
@@ -41,9 +53,49 @@ export const AggregatedClusterView = () => {
               )}
             ></div>
           ))}
-          <div>{timestamp}</div>
+
+          {!!interestingTimestampIndizes.includes(groupIndex) && (
+            <div
+              className={cn(
+                "bg-gray-200 overflow-visible absolute",
+                "bottom-0",
+                "h-8 p-2 rounded-sm text-xs"
+              )}
+            >
+              {multiFormat(new Date(Number(timestamp)))}
+            </div>
+          )}
         </div>
       ))}
     </div>
   );
 };
+
+const formatMillisecond = utcFormat(".%L"),
+  formatSecond = utcFormat(":%S"),
+  formatMinute = utcFormat("%I:%M"),
+  formatHour = utcFormat("%I %p"),
+  formatDay = utcFormat("%a %d"),
+  formatWeek = utcFormat("%b %d"),
+  formatMonth = utcFormat("%B"),
+  formatYear = utcFormat("%Y");
+
+function multiFormat(date: Date) {
+  return (
+    utcSecond(date) < date
+      ? formatMillisecond
+      : utcMinute(date) < date
+        ? formatSecond
+        : utcHour(date) < date
+          ? formatMinute
+          : utcDay(date) < date
+            ? formatHour
+            : utcMonth(date) < date
+              ? utcWeek(date) < date
+                ? formatDay
+                : formatWeek
+              : utcYear(date) < date
+                ? formatMonth
+                : formatYear
+  )(date);
+}

src/lib/clustering.worker.ts

@@ -1,9 +1,11 @@
 import * as Comlink from "comlink";
 import { aggregator } from "./clustering";
+import { clusteringOverTime } from "./clusteringOverTime";
 
 // Define the functions that will be available in the worker
 const workerFunctions = {
   aggregator: aggregator,
+  clusteringOverTime: clusteringOverTime,
 };
 
 export type ClusteringWorker = typeof workerFunctions;

src/lib/clusteringOverTime.ts

@@ -29,7 +29,9 @@ export const clusteringOverTime = (
   // ----------------
   // Clustering context window: The amount of data entries that should be taken into consideration for handling the clusters later on.
   // ----------------
-  const clusteringContextWindow = settings.dataTicks ?? 20; // 20 just as a dump fallback value
+  const clusteringContextWindow = !!settings.dataTicks
+    ? settings.dataTicks
+    : 20; // 20 just as a dump fallback value
 
   for (
     let dataEntryIndex = 0;
@@ -52,6 +54,7 @@ export const clusteringOverTime = (
         : "";
 
     const aggregated = clusteringData(dataToBeClustered, dimensions, settings);
+
     const clusters: [string, number][] = dimensions.map((val) => [
       val,
       aggregated.findIndex((entries) => Object.keys(entries[0]).includes(val)),

src/main.tsx

@@ -3,7 +3,6 @@ import ReactDOM from "react-dom/client";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorPage from "./error-page";
 import "./index.css";
-import AggregatedClusters from "./routes/aggregated-clusters";
 import AggrLine from "./routes/aggregated-line";
 import Anu from "./routes/anu";
 import Home from "./routes/home";
@@ -35,11 +34,6 @@ const router = createBrowserRouter([
         element: <MutliAggregatedLine />,
         errorElement: <ErrorPage />,
       },
-      {
-        path: "aggregated-clusters",
-        element: <AggregatedClusters />,
-        errorElement: <ErrorPage />,
-      },
     ],
   },
 ]);

src/routes/multi-aggregated-line.tsx

@@ -6,8 +6,7 @@ import { useViewSettingsStore } from "@/store/useViewSettingsStore";
 
 export default function MutliAggregatedLine() {
   const mode = useViewSettingsStore((state) => state.mode);
-
-  const { aggregated } = useViewModelStore();
+  const aggregated = useViewModelStore((data) => data.aggregated);
 
   return (
     <div className="container w-full my-2 flex flex-col flex-wrap gap-2">

src/routes/root.tsx

@@ -8,7 +8,6 @@ export default function Root() {
     { title: "Multi Line", href: "multi-line" },
     { title: "Aggregation", href: "aggregated-line" },
     { title: "Multi Aggregation", href: "multi-aggregated-line" },
-    { title: "Cluster Aggregation", href: "aggregated-clusters" },
   ];
 
   return (

src/store/useViewModelStore.ts

@@ -5,14 +5,21 @@ import { create } from "zustand";
 import { useRawDataStore } from "./useRawDataStore";
 import { useViewSettingsStore } from "./useViewSettingsStore";
 
+import { ClusterView } from "@/lib/clusteringOverTime";
 import Worker from "../lib/clustering.worker?worker";
 
 interface DataStore {
   aggregated: Record<string, number>[][];
   yDomain: [number, number];
   colsAccordingToAggregation: [string, number][];
 
+  /**
+   * This data is needed only for certain views. It should only be calculated when needed.
+   */
+  clustersInTime: ClusterView[];
+
   processData: () => void;
+  processClustersInTimeData: () => void;
 }
 
 const workerInstance = new Worker({ name: "aggregator" });
@@ -22,10 +29,9 @@ export const useViewModelStore = create<DataStore>((set) => {
   console.log("init view model store");
 
   const throttledDataProcess = _.throttle(async () => {
-    console.count("Throttled process data");
     const timerName = Date.now();
 
-    console.time("ViewModel process duration " + String(timerName));
+    console.time("ViewModel basic data process duration " + String(timerName));
     const dimensions = useRawDataStore.getState().dimensions;
     const values = useRawDataStore.getState().values;
     const { updateSettings, ...presentationSettings } =
@@ -37,19 +43,45 @@ export const useViewModelStore = create<DataStore>((set) => {
       dimensions,
       presentationSettings
     );
-    console.timeEnd("ViewModel process duration " + String(timerName));
+    console.timeEnd(
+      "ViewModel basic data process duration " + String(timerName)
+    );
 
     set(aggregated);
   }, 2000);
 
+  const throttledClustersInTimeProcess = _.throttle(async () => {
+    const timerName = Date.now();
+
+    console.time(
+      "ViewModel cluster in time process duration " + String(timerName)
+    );
+    const dimensions = useRawDataStore.getState().dimensions;
+    const values = useRawDataStore.getState().values;
+    const { updateSettings, ...presentationSettings } =
+      useViewSettingsStore.getState();
+    console.log("Settings: ", presentationSettings);
+
+    const { clustersInTime } = await workerApi.clusteringOverTime(
+      values,
+      dimensions,
+      presentationSettings
+    );
+
+    console.timeEnd(
+      "ViewModel cluster in time process duration " + String(timerName)
+    );
+
+    set({ clustersInTime });
+  }, 10000);
+
   return {
     aggregated: [],
     yDomain: [0, 10],
     colsAccordingToAggregation: [],
+    clustersInTime: [],
 
-    processData: async () => {
-      console.count("Process data with worker");
-      throttledDataProcess();
-    },
+    processData: throttledDataProcess,
+    processClustersInTimeData: throttledClustersInTimeProcess,
   };
 });

src/store/useViewSettingsStore.ts

@@ -1,6 +1,6 @@
+import { ChartPresentationSettings } from "@/lib/ChartPresentationSettings";
 import { create } from "zustand";
 import { useRawDataStore } from "./useRawDataStore";
-import { ChartPresentationSettings } from "@/lib/ChartPresentationSettings";
 
 export type ViewSettingsStore = ChartPresentationSettings & {
   updateSettings: (
@@ -9,7 +9,7 @@ export type ViewSettingsStore = ChartPresentationSettings & {
 };
 
 export const useViewSettingsStore = create<ViewSettingsStore>((set, get) => {
-  const dataTicks = useRawDataStore.getState().values.length ?? 20;
+  const dataTicks = Math.min(useRawDataStore.getState().values.length ?? 50);
   return {
     eps: 8,
     dataTicks,