Adapt to new treemap-renderer dependency

hpicgs · Dec 5, 2024 · 411e4b2 · 411e4b2
1 parent b5b2c66
commit 411e4b2
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 50 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -27,7 +27,7 @@
     "react": "18.1.0",
     "react-dom": "18.1.0",
     "react-router-dom": "6",
-    "treemap": "./treemaps"
+    "treemap-renderer": "./treemap-renderer"
   },
   "devDependencies": {
     "@octokit/types": "^6.38.1",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/Metrics.tsx b/frontend/src/components/Metrics.tsx
@@ -37,7 +37,7 @@ export default function Metrics({
       try {
         const [metricsBlob] = await getMetricsBlob(owner, repo, commitSHA);
         const parsedData = parseMetrics(metricsBlob.content);
-        console.log("parsedData:", parsedData);
+        // console.log("parsedData:", parsedData);
         setData(parsedData);
         setSize(metricsBlob.size);
       } catch (e) {

diff --git a/frontend/src/components/Repo.tsx b/frontend/src/components/Repo.tsx
@@ -33,10 +33,10 @@ export default function Repo({ owner, repo }: RepoParams) {
   useEffect(() => {
     async function fetchData() {
       const branches = await getBranches(owner, repo);
-      console.log(branches);
+      // console.log(branches);
       setBranches(branches);
       const refs = await getMetricCommits(owner, repo);
-      console.log(refs);
+      // console.log(refs);
       setRefs(refs);
     }
     fetchData();

diff --git a/frontend/src/components/Treemap.tsx b/frontend/src/components/Treemap.tsx
@@ -8,7 +8,7 @@ import {
   Configuration,
   Visualization,
   Renderer,
-} from "treemap";
+} from "treemap-renderer";
 
 export default function Treemap({ header, rows }: MetricsTableData) {
   const fileTree = createFileTree(rows);
@@ -31,19 +31,19 @@ export default function Treemap({ header, rows }: MetricsTableData) {
     canvas.dispose();
     // canvas.frameScale = [ 1.0, 1.0 ];
     canvas.renderer = visualization.renderer as Renderer;
-    console.log("cfg:", config);
+    // console.log("cfg:", config);
     loadConfig();
     //debugInit();
   }, []);
 
   function loadConfig() {
-    console.log("loadConfig");
+    // console.log("loadConfig");
     if (config && visualization && canvas) {
       visualization.configuration = config;
 
-      console.log("Visualization:", visualization);
-      console.log("Config:", visualization.configuration);
-      console.log("Canvas:", canvas);
+      // console.log("Visualization:", visualization);
+      // console.log("Config:", visualization.configuration);
+      // console.log("Canvas:", canvas);
 
       canvas.controller.update();
     } else {
@@ -52,11 +52,6 @@ export default function Treemap({ header, rows }: MetricsTableData) {
   }
 
   function debugInit() {
-    // TODO: input(s) for debug logging / exposing global variables?
-
-    // Enable debug logging
-    visualization.debug = true;
-
     (window as any)["gloperate"] = gloperate;
     (window as any)["canvas"] = canvas;
     (window as any)["context"] = canvas?.context;

diff --git a/frontend/src/utils/github.ts b/frontend/src/utils/github.ts
@@ -42,9 +42,9 @@ export async function getMetricsBlob(
     tree_sha,
   });
 
-  response.data.tree.map((object) => {
-    console.log(object.path, prettyBytes(object.size!));
-  });
+  // response.data.tree.map((object) => {
+  //   console.log(object.path, prettyBytes(object.size!));
+  // });
 
   return await Promise.all(
     files.map(async (file) => {
@@ -69,7 +69,7 @@ export async function getMetricsBlob(
         console.warn(`${file} not found in blob object`);
         return { content: "", size: 0 };
       }
-      console.log(blob_string);
+      // console.log(blob_string);
       return { content: blob_string, size: blob.data.size } as MetricsBlob;
     })
   );

diff --git a/frontend/src/utils/treemap_helpers.ts b/frontend/src/utils/treemap_helpers.ts
@@ -1,5 +1,5 @@
 import { FileMetrics, Metrics, TreeNode } from "@analytics/types";
-import { Configuration, NodeSort, Visualization } from "treemap";
+import { Configuration, NodeSort } from "treemap-renderer";
 
 interface ValueMapping {
   weights: keyof Metrics;
@@ -29,7 +29,7 @@ export function createFileTree(rows: FileMetrics[]): TreeNode {
     }, rootNode);
   });
 
-  console.log(rootNode);
+  // console.log(rootNode);
   if (rootNode.children.length === 1) {
     return rootNode.children[0];
   }
@@ -74,19 +74,19 @@ export function configFromFileTree(
   }
   buildEdges(fileTreeRoot);
 
-  console.log("names", names);
-  console.log("edges", edges);
-  console.log("weights", weights);
-  console.log("heights", heights);
-  console.log("colors", colors);
+  // console.log("names", names);
+  // console.log("edges", edges);
+  // console.log("weights", weights);
+  // console.log("heights", heights);
+  // console.log("colors", colors);
 
   config.colors = [
-    { identifier: "emphasis", space: "hex", value: "#00b0ff" },
-    { identifier: "auxiliary", space: "hex", values: ["#00aa5e", "#71237c"] },
-    { identifier: "inner", space: "hex", values: ["#e8eaee", "#eef0f4"] },
+    { identifier: "emphasis", colorspace: "hex", value: "#00b0ff" },
+    { identifier: "auxiliary", colorspace: "hex", values: ["#00aa5e", "#71237c"] },
+    { identifier: "inner", colorspace: "hex", values: ["#e8eaee", "#eef0f4"] },
     {
       identifier: "leaf",
-      space: "hex",
+      colorspace: "hex",
       values: [
         "#4575b4",
         "#91bfdb",
@@ -121,13 +121,11 @@ export function configFromFileTree(
 
   config.geometry = {
     parentLayer: { showRoot: false },
-    leafLayers: [
-      {
-        colorMap: "color:leaf",
-        height: "bufferView:heights-normalized",
-        colors: "bufferView:colors-normalized",
-      },
-    ],
+    leafLayer: {
+      colorMap: "color:leaf",
+      height: "bufferView:heights-normalized",
+      colors: "bufferView:colors-normalized",
+    },
     emphasis: { outline: new Array<number>(), highlight: new Array<number>() },
     heightScale: 0.5,
   };
@@ -138,13 +136,9 @@ export function configFromFileTree(
     numTopWeightNodes: 6,
     numTopHeightNodes: 6,
     numTopColorNodes: 6,
+    names: names
   };
 
-  config.labels.callback = (
-    idsToLabel: Set<number>,
-    callback: Visualization.NameSetCallback
-  ) => callback(names);
-
   config!.altered!.alter("labels");
 
   config.topology = {
@@ -200,6 +194,6 @@ export function configFromFileTree(
     },
   ];
 
-  console.log("Config", JSON.stringify(config, null, 2));
+  // console.log("Config", JSON.stringify(config, null, 2));
   return config;
 }
diff --git a/frontend/vite.config-embed.ts b/frontend/vite.config-embed.ts
@@ -13,7 +13,7 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     optimizeDeps: {
-      include: ["treemap"],
+      include: ["treemap-renderer"],
     },
     build: {
       emptyOutDir: true,
@@ -25,7 +25,7 @@ export default defineConfig(({ command, mode }) => {
         fileName: "embed",
       },
       commonjsOptions: {
-        include: [/treemap/, /node_modules/],
+        include: [/treemap-renderer/, /node_modules/],
       },
     },
   };

diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
@@ -12,11 +12,11 @@ export default defineConfig(({ command, mode }) => {
       },
     },
     optimizeDeps: {
-      include: ["treemap"],
+      include: ["treemap-renderer"],
     },
     build: {
       commonjsOptions: {
-        include: [/treemap/, /node_modules/],
+        include: [/treemap-renderer/, /node_modules/],
       },
     },
   };