example-filesize.ts

import * as L from "lodash";

const files = `
109 CLI/CLIClass.ts
67 CLI/index.ts
 3 index.ts
45 Models/DisplayMap.ts
 1 Models/Environment.ts
 6 Models/index.ts
 5 Models/Options.ts
22 Models/ParserTree.ts
93 Models/Spec.ts
35 Models/Types.ts
36 plugins/apollo/index.spec.ts
59 plugins/apollo/index.ts
35 plugins/react-query/index.spec.ts
56 plugins/react-query/index.ts
26 plugins/stuccoSubscriptions/index.spec.ts
56 plugins/stuccoSubscriptions/index.ts
51 plugins/typed-document-node/index.spec.ts
42 plugins/typed-document-node/index.ts
 1 __tests__/TestUtils.ts
37 __tests__/TreeToJSONSchema/TreeToJSONSchema.spec.ts
17 __tests__/TreeToTS/Chain.spec.ts
22 __tests__/TreeToTS/EsModule.spec.ts
16 __tests__/TreeToTS/Extend.spec.ts
104 __tests__/TreeToTS/Field.spec.ts
71 __tests__/TreeToTS/Interface.spec.ts
17 __tests__/TreeToTS/Selectors.spec.ts
24 __tests__/TreeToTS/Thunder.spec.ts
54 __tests__/TreeToTS/TypeDefinitions.spec.ts
38 TranslateGraphQL/index.ts
122 TreeToJSONSchema/index.ts
 8 TreeToTS/functions/buildQuery.ts
13 TreeToTS/functions/fullChainConstruct.ts
11 TreeToTS/functions/fullSubscriptionConstruct.ts
16 TreeToTS/functions/index.ts
29 TreeToTS/functions/inspectVariables.ts
52 TreeToTS/functions/isArrayFunction.ts
 3 TreeToTS/functions/models.ts
 8 TreeToTS/functions/objectToTree.ts
 8 TreeToTS/functions/queryConstruct.ts
 8 TreeToTS/functions/resolveKV.ts
19 TreeToTS/functions/resolverFor.ts
26 TreeToTS/functions/ScalarResolver.ts
34 TreeToTS/functions/seekForAliases.ts
38 TreeToTS/functions/traverseToSeekArrays.ts
70 TreeToTS/functions/TypesPropsResolver.ts
 7 TreeToTS/functions/variable.ts
 5 TreeToTS/functions/ZeusSelect.ts
142 TreeToTS/index.ts
116 TreeToTS/templates/resolveValueTypes.ts
89 TreeToTS/templates/returnedModelTypes.ts
43 TreeToTS/templates/returnedPropTypes.ts
36 TreeToTS/templates/returnedReturns.ts
114 TreeToTS/templates/returnedTypes.ts
 1 TreeToTS/templates/truthy.ts
39 TreeToTS/templates/typescript/browser/apiSubscription.ts
47 TreeToTS/templates/typescript/browser/fetchFunction.ts
 1 TreeToTS/templates/typescript/browser/fetchImport.ts
 1 TreeToTS/templates/typescript/browser/websocketsImport.ts
11 TreeToTS/templates/typescript/error.ts
38 TreeToTS/templates/typescript/functions.ts
 7 TreeToTS/templates/typescript/indexImports.ts
 4 TreeToTS/templates/typescript/index.ts
40 TreeToTS/templates/typescript/node/apiSubscription.ts
56 TreeToTS/templates/typescript/node/fetchFunction.ts
 1 TreeToTS/templates/typescript/node/fetchImport.ts
 1 TreeToTS/templates/typescript/node/websocketsImport.ts
83 TreeToTS/templates/typescript/operations.ts
95 TreeToTS/templates/typescript/types.ts
64 Utils/index.ts
`;

const sizePathPairs = files
  .split("\n")
  .filter((line) => line.trim().length > 0)
  .map((line) => line.trim().split(" ") as [string, string])
  .map(([size, path]) => ({ size: Number(size), path }));

export type Tree = {
  name: string;
  path: string;
  value: number;
  children: Tree[];
};

const groupList = (
  pairs: Array<{ size: number; path: string }>,
  parentPath: string[] = [""]
): Tree[] => {
  const groups = L.groupBy(pairs, ({ path }) => path.split("/")[0]);
  return L.map(groups, (g, k) => ({
    name: k,
    path: parentPath.concat([k]).join("/"),
    value: g.length === 1 ? g[0].size : 0,
    // value: L.sumBy(g, "size"),
    children:
      g.length > 1
        ? groupList(
            g.map((child) => ({
              path: child.path.substring(child.path.indexOf("/") + 1),
              size: child.size,
            })),
            parentPath.concat([k])
          )
        : [],
  }));
};

const subtrees = groupList(sizePathPairs);

export const tree: Tree = {
  name: "/",
  path: "/",
  value: L.sumBy(subtrees, "size"),
  children: subtrees,
};

index.tsx

import React, { useState } from "react";
import * as ReactDOM from "react-dom";

import * as h from "d3-hierarchy";
import { Tree, tree } from "./example-filesize";

const hh = h.hierarchy(tree);

const W = 1500,
  H = 900;

const layout = h
  .treemap<Tree>()
  .size([W, H])
  .padding(2)
  .paddingTop(30)
  .tile(h.treemapSquarify);

const rectangles = layout(
  hh
    .sum((d) => d.value)
    .sort((a, b) => b.height - a.height || b.value! - a.value!)
);

const hasParent = (
  parent: h.HierarchyRectangularNode<Tree>,
  node: h.HierarchyRectangularNode<Tree>
) => {
  if (node === parent) return true;
  for (let p = node.parent; p != null; p = p.parent)
    if (p === parent) return true;

  return false;
};

export let RenderNode: React.FunctionComponent<{
  parents: h.HierarchyRectangularNode<Tree>[];
  node: h.HierarchyRectangularNode<Tree>;
  level: number;
  onClick: (node: any) => void;
  selectedRoot: h.HierarchyRectangularNode<Tree>;
}> = (props) => {
  const { parents, node, level, onClick, selectedRoot } = props;

  const rootWidth = selectedRoot.x1 - selectedRoot.x0;
  const rootHeight = selectedRoot.y1 - selectedRoot.y0;

  const displayAsLeaf =
    level == selectedRoot.depth + 2 || !node.children?.length;

  const displayModifier =
    level >= selectedRoot.depth &&
    level <= selectedRoot.depth + 2 &&
    hasParent(selectedRoot, node)
      ? {}
      : { visibility: "hidden" };

  const bgColor = displayAsLeaf ? "#aca" : "#ddd";
  const style = {
    position: "absolute" as const,
    top: ((node.y0 - selectedRoot.y0) / rootHeight) * H,
    height: ((node.y1 - node.y0) / rootHeight) * H,
    left: ((node.x0 - selectedRoot.x0) / rootWidth) * W,
    width: ((node.x1 - node.x0) / rootWidth) * W,
    backgroundColor: bgColor,
    overflow: "hidden" as const,
    transition: "0.33s ease-out",
    ...displayModifier,
  };

  return (
    <>
      <div
        key={`div-${node.data.path}`}
        id={`div-${node.data.path}`}
        style={style}
        onClick={() => onClick(node)}
      >
        <span style={{ padding: 5, display: "inline-block" }}>
          {node.data.name}
        </span>
      </div>
      {node.children &&
        node.children.map((child) => (
          <RenderNode
            parents={parents}
            key={child.data.path}
            selectedRoot={selectedRoot}
            onClick={onClick}
            level={level + 1}
            node={child}
          />
        ))}
    </>
  );
};

export let App: React.FunctionComponent = () => {
  const [selectedNode, setSelectedNode] = useState(rectangles);

  const onClick = (node: h.HierarchyRectangularNode<Tree>) => {
    if (selectedNode.depth === 0) {
      setSelectedNode(node);
    } else {
      setSelectedNode(rectangles);
    }
  };

  let parents: h.HierarchyRectangularNode<Tree>[] = [selectedNode],
    p = selectedNode.parent;

  while (p) {
    parents.unshift(p);
    p = p.parent;
  }

  return (
    <div
      style={{ position: "relative", width: W, height: H, overflow: "hidden" }}
    >
      <RenderNode
        key={"__root__"}
        parents={parents}
        selectedRoot={selectedNode}
        onClick={onClick}
        node={rectangles}
        level={0}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("main"));