Progress on treemap

package.json

@@ -29,12 +29,15 @@
     "@material-ui/core": "^4.12.3",
     "apexcharts": "^3.27.3",
     "lodash": "^4.17.21",
-    "parcel": "^2.0.0-beta.2",
+    "parcel": "^2.11.0",
     "react": "^17.0.2",
     "react-apexcharts": "^1.3.9",
     "react-dom": "^17.0.2",
     "react-vis": "^1.12.1",
     "tachyons": "^4.12.0",
     "typescript": "^4.3.5"
+  },
+  "@parcel/transformer-css": {
+    "errorRecovery": true
   }
 }

src/App.tsx

@@ -5,6 +5,8 @@ import Select from "@material-ui/core/Select";
 import {reduce} from "lodash";
 import * as React from "react";
 
+import "tachyons";
+
 import Bars from "./Bars";
 import TreeMap from "./TreeMap";
 import {formatBytes, formatTime} from "./Util";

src/TreeMap.tsx

@@ -1,5 +1,6 @@
 
 import {size} from "lodash";
+import {useMemo} from "react";
 import {Treemap as RVTreeMap} from "react-vis";
 
 import * as styles from "react-vis/dist/style.css";
@@ -18,6 +19,34 @@ export default function TreeMap({aggregate, data}: Props) {
 
   console.log("modulesList", modulesList);
 
+  const nestedData = useMemo(() => {
+    const ret = {
+      title: "Top-level",
+      value: 0,
+      children: {},
+    };
+
+    for (const module of modulesList) {
+      let current = ret;
+      let soFar = "";
+      const parts = module.module.split(".");
+      for (const part of parts) {
+        soFar += "." + part;
+        current.children[part] = current.children[part] || {
+          title: soFar,
+          value: 0,
+          children: {}
+        }
+        current = current.children[part];
+        current.value += (aggregate === "time" ? module["time"]: module["alloc"]);
+      }
+    }
+
+    console.log("Built nestedData", ret);
+
+    return ret;
+  }, [modulesList]);
+
   const myData = {
     "title": "analytics",
     "color": "#12939A",
@@ -55,10 +84,10 @@ export default function TreeMap({aggregate, data}: Props) {
   return (
     <RVTreeMap
       title={'My New Treemap'}
-      width={300}
-      height={300}
+      width={500}
+      height={500}
       data={myData}
-      mode="binary"
+      mode="squarify"
     />
   );
 }