Working on treemap

src/App.tsx

@@ -6,6 +6,7 @@ import {reduce} from "lodash";
 import * as React from "react";
 
 import Bars from "./Bars";
+import TreeMap from "./TreeMap";
 import {formatBytes, formatTime} from "./Util";
 
 
@@ -74,6 +75,11 @@ export default function App() {
                data={data}
                numModulesToShow={numModulesToShow} />
         }
+
+        {visualization === "treemap" &&
+         <TreeMap aggregate={aggregate}
+                  data={data} />
+        }
     </div>
   );
 }

src/Bars.tsx

@@ -1,5 +1,6 @@
 
 import {map, size} from "lodash";
+import {useMemo} from "react";
 import * as React from "react";
 
 import Chart from "./Chart";
@@ -17,7 +18,7 @@ export default function Bars({aggregate, data, numModulesToShow}: Props) {
   const phasesList = aggregate === "time" ? data.phasesByTime : data.phasesByAlloc;
   const numModules = size(modulesList);
 
-  const [moduleToIndex, moduleNames] = React.useMemo(() => {
+  const [moduleToIndex, moduleNames] = useMemo(() => {
     const ret = {};
     const names = [];
     let counter = 0;
@@ -28,7 +29,7 @@ export default function Bars({aggregate, data, numModulesToShow}: Props) {
     return [ret, names]
   }, [modulesList]);
 
-  const series = React.useMemo(() => {
+  const series = useMemo(() => {
     const ret = [];
 
     const phaseToIndex = {};
@@ -51,7 +52,7 @@ export default function Bars({aggregate, data, numModulesToShow}: Props) {
     return ret;
   }, [phasesList, moduleToIndex, aggregate]);
 
-  const [finalSeries, finalModuleNames] = React.useMemo(() => {
+  const [finalSeries, finalModuleNames] = useMemo(() => {
     const finalSeries = map(series, (x) => ({
       name: x.name,
       data: x.data.slice(0, numModulesToShow)

src/TreeMap.tsx

@@ -0,0 +1,64 @@
+
+import {size} from "lodash";
+import {Treemap as RVTreeMap} from "react-vis";
+
+import "react-vis/dist/style.css";
+
+// import {formatBytes, formatTime} from "./Util";
+
+
+interface Props {
+  aggregate: Aggregate;
+  data: ModuleData;
+}
+
+export default function TreeMap({aggregate, data}: Props) {
+  const modulesList = aggregate === "time" ? data.modulesByTime : data.modulesByAlloc;
+  const numModules = size(modulesList);
+
+  console.log("modulesList", modulesList);
+
+  const myData = {
+    "title": "analytics",
+    "color": "#12939A",
+    "children": [
+      {
+        "title": "cluster",
+        "children": [
+          {"title": "AgglomerativeCluster", "color": "#12939A", "size": 3938},
+          {"title": "CommunityStructure", "color": "#12939A", "size": 3812},
+          {"title": "HierarchicalCluster", "color": "#12939A", "size": 6714},
+          {"title": "MergeEdge", "color": "#12939A", "size": 743}
+        ]
+      },
+      {
+        "title": "graph",
+        "children": [
+          {"title": "BetweennessCentrality", "color": "#12939A", "size": 3534},
+          {"title": "LinkDistance", "color": "#12939A", "size": 5731},
+          {"title": "MaxFlowMinCut", "color": "#12939A", "size": 7840},
+          {"title": "ShortestPaths", "color": "#12939A", "size": 5914},
+          {"title": "SpanningTree", "color": "#12939A", "size": 3416}
+        ]
+      },
+      {
+        "title": "optimization",
+        "children": [
+          {"title": "AspectRatioBanker", "color": "#12939A", "size": 7074}
+        ]
+      }
+    ]
+  }
+
+  // Modes: squarify, resquarify, slice, dice, slicedice, binary, circlePack, partition, partition-pivot
+
+  return (
+    <RVTreeMap
+      title={'My New Treemap'}
+      width={300}
+      height={300}
+      data={myData}
+      mode="binary"
+    />
+  );
+}