@atlaspack/inspector-frontend 0.1.1

package/src/ui/app/treemap/ui/FocusBreadcrumbs/FocusBreadcrumbs.tsx

@@ -0,0 +1,49 @@
+import {observer} from 'mobx-react-lite';
+import {Link, useSearchParams} from 'react-router';
+import {viewModel} from '../../../../model/ViewModel';
+import * as styles from './FocusBreadcrumbs.module.css';
+import qs from 'qs';
+
+export const FocusBreadcrumbs = observer(() => {
+  const [searchParams] = useSearchParams();
+  const bundleEl = viewModel.focusedBundle ? (
+    <Link to={`/app/treemap?bundle=${viewModel.focusedBundle.id}`}>
+      {viewModel.focusedBundle.label}
+    </Link>
+  ) : null;
+
+  const focusedGroup = viewModel.focusedGroup
+    ? viewModel.focusedGroup.id.split('/').map((part, i, arr) => {
+        const candidatePath = arr.slice(0, i + 1).join('/');
+        return (
+          <div key={i}>
+            <Link
+              to={`/app/treemap?${qs.stringify({
+                bundle:
+                  viewModel.focusedBundle?.id ?? searchParams.get('bundle'),
+                focusedBundleId: viewModel.focusedBundle?.id,
+                focusedGroupId: candidatePath,
+              })}`}
+            >
+              {part}
+            </Link>
+          </div>
+        );
+      })
+    : [];
+
+  const breadcrumEls = [
+    <Link to="/app/treemap">Root</Link>,
+    bundleEl,
+    ...focusedGroup,
+  ];
+
+  return (
+    <div className={styles.focusBreadcrumbs}>
+      {breadcrumEls.flatMap((el, i) => [
+        <div key={i}>{el}</div>,
+        i < breadcrumEls.length - 1 && <div key={i + '-separator'}>&gt;</div>,
+      ])}
+    </div>
+  );
+});

package/src/ui/app/treemap/ui/SigmaGraph.module.css

@@ -0,0 +1,5 @@
+.expander {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}

package/src/ui/app/treemap/ui/SigmaGraph.module.css.d.ts

@@ -0,0 +1,3 @@
+export const __esModule: true;
+export const expander: string;
+

package/src/ui/app/treemap/ui/SigmaGraph.tsx

@@ -0,0 +1,80 @@
+import Graphology from 'graphology';
+import {useRef} from 'react';
+import forceAtlas2 from 'graphology-layout-forceatlas2';
+import FA2Layout from 'graphology-layout-forceatlas2/worker';
+import {useEffect} from 'react';
+import Sigma from 'sigma';
+
+import {Graph} from '../../../types/Graph';
+import * as styles from './SigmaGraph.module.css';
+
+/**
+ * Renders `Graph` visualisation using Sigma.js.
+ */
+export function SigmaGraph<T>({graph}: {graph: Graph<T>}) {
+  const visualizationRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (visualizationRef.current) {
+      const graphology = new Graphology();
+      const nodes = new Set<string>();
+      const edges = new Set<string>();
+      for (let node of graph.nodes) {
+        if (nodes.has(node.id)) {
+          continue;
+        }
+        nodes.add(node.id);
+
+        graphology.addNode(node.id, {
+          label: node.displayName,
+          x: Math.random() * 10000,
+          y: Math.random() * 10000,
+          size: 6,
+        });
+      }
+
+      for (let node of graph.nodes) {
+        for (let edge of node.edges) {
+          if (nodes.has(node.id) && nodes.has(edge)) {
+            if (edges.has(`${node.id} -> ${edge}`)) {
+              continue;
+            }
+
+            edges.add(`${node.id} -> ${edge}`);
+
+            graphology.addEdge(node.id, edge, {});
+          }
+        }
+      }
+
+      const sensibleSettings = forceAtlas2.inferSettings(graphology);
+      const fa2Layout = new FA2Layout(graphology, {
+        settings: {
+          ...sensibleSettings,
+        },
+      });
+      fa2Layout.start();
+
+      const renderer = new Sigma(graphology, visualizationRef.current, {
+        allowInvalidContainer: true,
+        defaultDrawNodeHover: () => {},
+        labelRenderedSizeThreshold: 0,
+      });
+
+      // TODO: Listen to enter/leave and highlight the rows
+      // renderer.on('enterNode', (e) => {
+      //   console.log(e);
+      // });
+      // renderer.on('leaveNode', (e) => {
+      //   console.log(e);
+      // });
+
+      return () => {
+        fa2Layout.stop();
+        renderer.kill();
+      };
+    }
+  }, [graph]);
+
+  return <div className={styles.expander} ref={visualizationRef} />;
+}

package/src/ui/app/treemap/ui/Treemap.tsx

@@ -0,0 +1,14 @@
+export type AssetTreeNode = {
+  id: string;
+  children: Record<string, AssetTreeNode>;
+  size: number;
+  path: string;
+};
+
+export interface Bundle {
+  id: string;
+  size: number;
+  displayName: string;
+  filePath: string;
+  assetTree: AssetTreeNode;
+}

package/src/ui/app/treemap/ui/TreemapRenderer/ImpactScore.module.css

@@ -0,0 +1,32 @@
+.impactScore {
+  position: relative;
+  height: 30px;
+  border-radius: 4px;
+  background-color: var(--ds-surface-sunken);
+  border: 1px solid var(--ds-border);
+  overflow: hidden;
+}
+
+.impactScoreBar {
+  position: absolute;
+  border-radius: 4px;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  opacity: 0.5;
+  background-color: green;
+}
+
+.impactScoreMessage {
+  position: absolute;
+  left: 0;
+  right: 0;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/ui/app/treemap/ui/TreemapRenderer/ImpactScore.module.css.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const impactScore: string;
+export const impactScoreBar: string;
+export const impactScoreMessage: string;
+

package/src/ui/app/treemap/ui/TreemapRenderer/ImpactScore.tsx

@@ -0,0 +1,24 @@
+import * as styles from './ImpactScore.module.css';
+
+export function ImpactScore({
+  parentSize,
+  groupSize,
+  message,
+}: {
+  parentSize: number;
+  groupSize: number;
+  message: string;
+}) {
+  return (
+    <div className={styles.impactScore}>
+      <div
+        className={styles.impactScoreBar}
+        style={{width: `${Math.min(1, groupSize / parentSize) * 100}%`}}
+      />
+
+      <div className={styles.impactScoreMessage}>
+        <div>{message}</div>
+      </div>
+    </div>
+  );
+}

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapRenderer.module.css

@@ -0,0 +1,14 @@
+.expander {
+  height: 100%;
+  width: 100%;
+  min-height: 100px;
+  min-width: 100px;
+  flex: 1;
+}
+
+.treemapRenderer {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  position: relative;
+}

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapRenderer.module.css.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const expander: string;
+export const treemapRenderer: string;
+

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapRenderer.tsx

@@ -0,0 +1,271 @@
+import {useCallback, useEffect, useRef} from 'react';
+// @ts-expect-error
+import CarrotSearchFoamTree from '@carrotsearch/foamtree';
+import {useSuspenseQuery} from '@tanstack/react-query';
+import {AssetTreeNode, Bundle} from '../Treemap';
+import {SetURLSearchParams, useSearchParams} from 'react-router';
+import qs from 'qs';
+import {autorun, runInAction} from 'mobx';
+import {observer} from 'mobx-react-lite';
+import {BundleData, Group, viewModel} from '../../../../model/ViewModel';
+import {TreemapTooltip} from './TreemapTooltip';
+import * as styles from './TreemapRenderer.module.css';
+import {useStableCallback} from './controllers/useStableCallback';
+import {useMouseMoveController} from './useMouseMoveController';
+
+function setup(
+  visualization: HTMLDivElement,
+  setSearchParams: SetURLSearchParams,
+  isDetailView: boolean,
+  maxLevels: number,
+  stacking: string,
+) {
+  // Foam Tree docs:
+  // https://get.carrotsearch.com/foamtree/demo/api/index.html
+  // Some options from Atlaspack 1 Visualizer:
+  // https://github.com/gregtillbrook/parcel-plugin-bundle-visualiser/blob/ca5440fc61c85e40e7abc220ad99e274c7c104c6/src/buildReportAssets/init.js#L4
+  // and Webpack Bundle Analyzer:
+  // https://github.com/webpack-contrib/webpack-bundle-analyzer/blob/4a232f0cf7bbfed907a5c554879edd5d6f4b48ce/client/components/Treemap.jsx
+  let foamtree = new CarrotSearchFoamTree({
+    element: visualization,
+    // dataObject: bundleData,
+    layout: 'squarified',
+    stacking,
+    pixelRatio: window.devicePixelRatio || 1,
+    maxGroups: Infinity,
+    groupLabelMinFontSize: 3,
+    maxGroupLevelsDrawn: maxLevels,
+    maxGroupLabelLevelsDrawn: maxLevels,
+    maxGroupLevelsAttached: maxLevels,
+    rolloutDuration: 0,
+    pullbackDuration: 0,
+    maxLabelSizeForTitleBar: 0, // disable the title bar
+    onGroupHover(e: {group: Group; xAbsolute: number; yAbsolute: number}) {
+      runInAction(() => {
+        if (
+          e.group == null ||
+          e.group.label == null ||
+          e.group.weight == null
+        ) {
+          viewModel.tooltipState = null;
+          return;
+        }
+
+        viewModel.tooltipState = {
+          group: e.group,
+        };
+      });
+    },
+    onGroupClick(e: {group: Group}) {
+      if (!isDetailView) {
+        if (e.group.type === 'bundle') {
+          setSearchParams((prev) => {
+            prev.set('focusedBundleId', e.group.id);
+            prev.delete('focusedGroupId');
+            return prev;
+          });
+        }
+      } else if (e.group) {
+        const focusGroup = e.group;
+        this.open(focusGroup);
+        this.zoom(focusGroup);
+
+        setSearchParams((prev) => {
+          prev.set('focusedGroupId', focusGroup.id);
+          return prev;
+        });
+      }
+    },
+    onGroupDoubleClick(e: {group: Group}) {
+      this.zoom(e.group);
+
+      if (e.group.type === 'bundle') {
+        setSearchParams((prev) => {
+          prev.set('bundle', e.group.id);
+          return prev;
+        });
+      }
+    },
+  });
+
+  const onResize = debounce(() => {
+    foamtree.resize();
+  }, 100);
+
+  const resizeObserver = new ResizeObserver(onResize);
+  resizeObserver.observe(visualization);
+
+  function debounce(fn: (...args: any[]) => void, delay: number): () => void {
+    let timeout: NodeJS.Timeout | null = null;
+
+    return function (...args: any[]) {
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+
+      timeout = setTimeout(() => {
+        fn(...args);
+      }, delay);
+    };
+  }
+
+  return {
+    foamtree,
+    cleanup: () => {
+      resizeObserver.disconnect();
+      foamtree.dispose();
+    },
+  };
+}
+
+function toBundleData(bundles: Array<Bundle>): BundleData {
+  function assetTreeToGroup(assetTree: AssetTreeNode): Group {
+    return {
+      id: assetTree.id,
+      type: 'asset',
+      label: assetTree.path,
+      weight: assetTree.size,
+      groups: Object.entries(assetTree.children).map(([_key, child]) =>
+        assetTreeToGroup(child),
+      ),
+    };
+  }
+
+  return {
+    groups: bundles.map((bundle) => {
+      return {
+        id: bundle.id,
+        type: 'bundle',
+        label: bundle.displayName,
+        weight: bundle.size,
+        assetTreeSize: bundle.assetTree.size,
+        groups: Object.entries(bundle.assetTree.children).map(([_key, child]) =>
+          assetTreeToGroup(child),
+        ),
+      };
+    }),
+  };
+}
+
+export const TreemapRenderer = observer(() => {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const {data} = useSuspenseQuery<{
+    bundles: Array<Bundle>;
+    totalSize: number;
+  }>({
+    queryKey: [
+      '/api/treemap?' +
+        qs.stringify({
+          offset: searchParams.get('offset') ?? 0,
+          limit: searchParams.get('limit') ?? 10000,
+          bundle: searchParams.get('bundle') ?? undefined,
+        }),
+    ],
+  });
+
+  const visualizationRef = useRef<HTMLDivElement>(null);
+  const setSearchParamsMemo = useStableCallback(setSearchParams);
+  const bundle = searchParams.get('bundle');
+  const foamtreeRef = useRef<CarrotSearchFoamTree | null>(null);
+  const maxLevels = Number(searchParams.get('maxLevels') ?? Infinity);
+  const stacking = searchParams.get('stacking') ?? 'hierarchical';
+  useEffect(() => {
+    if (visualizationRef.current) {
+      const {cleanup, foamtree} = setup(
+        visualizationRef.current,
+        setSearchParamsMemo,
+        bundle != null,
+        maxLevels,
+        stacking,
+      );
+      foamtreeRef.current = foamtree;
+
+      return () => {
+        cleanup();
+      };
+    }
+  }, [bundle, setSearchParamsMemo, maxLevels, stacking]);
+
+  useEffect(() => {
+    return autorun(() => {
+      if (!foamtreeRef.current) {
+        return;
+      }
+
+      if (viewModel.relatedBundles) {
+        const relatedBundlesSet = new Set(
+          viewModel.relatedBundles.childBundles.map((b: any) => b.id),
+        );
+        const bundleData = toBundleData(
+          data.bundles.filter(
+            (group) =>
+              group.id === viewModel.focusedBundle?.id ||
+              relatedBundlesSet.has(group.id),
+          ),
+        );
+        runInAction(() => {
+          viewModel.data = bundleData;
+        });
+        foamtreeRef.current.set({
+          dataObject: bundleData,
+        });
+        return;
+      }
+
+      const bundleData = toBundleData(data.bundles);
+      runInAction(() => {
+        viewModel.data = bundleData;
+      });
+      if (data.bundles.length === 1) {
+        setSearchParams((prev) => {
+          prev.set('focusedBundleId', bundleData.groups[0].id);
+          return prev;
+        });
+      }
+      foamtreeRef.current.set({
+        dataObject: bundleData,
+      });
+    });
+  }, [data, setSearchParams]);
+
+  useEffect(() => {
+    return autorun(() => {
+      if (viewModel.hasDetails) {
+        return;
+      }
+
+      if (!viewModel.focusedBundle) {
+        return;
+      }
+      if (!viewModel.relatedBundles) {
+        return;
+      }
+
+      foamtreeRef.current?.expose([
+        viewModel.focusedBundle.id,
+        ...viewModel.relatedBundles.childBundles.map((b) => b.id),
+      ]);
+    });
+  }, []);
+
+  useMouseMoveController();
+
+  const onMouseLeave = useCallback(() => {
+    runInAction(() => {
+      viewModel.tooltipState = null;
+    });
+  }, []);
+
+  return (
+    <div
+      className={styles.treemapRenderer}
+      onMouseLeave={onMouseLeave}
+      onMouseOut={onMouseLeave}
+    >
+      <div ref={visualizationRef} className={styles.expander} />
+
+      <TreemapTooltip />
+    </div>
+  );
+});

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapTooltip.module.css

@@ -0,0 +1,15 @@
+.treemapTooltip {
+  position: absolute;
+  background-color: var(--ds-background-input);
+  padding: 10px;
+  border-radius: 4px;
+  border: 1px solid var(--ds-border);
+  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 400px;
+}
+
+.parent {
+  padding-left: 10px;
+  border-left: 3px solid var(--ds-border);
+}

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapTooltip.module.css.d.ts

@@ -0,0 +1,4 @@
+export const __esModule: true;
+export const parent: string;
+export const treemapTooltip: string;
+

package/src/ui/app/treemap/ui/TreemapRenderer/TreemapTooltip.tsx

@@ -0,0 +1,111 @@
+import {observer} from 'mobx-react-lite';
+import {viewModel} from '../../../../model/ViewModel';
+import {formatBytes} from '../../../../util/formatBytes';
+import * as styles from './TreemapTooltip.module.css';
+import {Inline, Stack} from '@atlaskit/primitives';
+import {Code} from '@atlaskit/code';
+import {ImpactScore} from './ImpactScore';
+
+export const TreemapTooltip = observer(() => {
+  const position = {
+    left: viewModel.mouseState.x + 30,
+    top: viewModel.mouseState.y,
+  };
+
+  if (!viewModel.tooltipState) {
+    return null;
+  }
+
+  const focusedGroup =
+    viewModel.focusedGroup?.id !== viewModel.tooltipState.group.id
+      ? viewModel.focusedGroup
+      : null;
+
+  const focusedBundle =
+    viewModel.focusedBundle?.id !== focusedGroup?.id
+      ? viewModel.focusedBundle
+      : null;
+
+  return (
+    <div
+      className={styles.treemapTooltip}
+      style={{
+        left: position.left,
+        top: position.top,
+      }}
+    >
+      <Stack space="space.100">
+        <Stack space="space.100">
+          <Inline space="space.100">
+            <strong>{viewModel.tooltipState.group.label}</strong>
+            <div>(group)</div>
+          </Inline>
+          <Inline space="space.100">
+            <div>Unminified size</div>
+            <Code>{formatBytes(viewModel.tooltipState.group.weight)}</Code>
+          </Inline>
+        </Stack>
+
+        {focusedGroup && (
+          <div className={styles.parent}>
+            <Stack space="space.100">
+              <Inline space="space.100">
+                <strong>{focusedGroup.label}</strong>
+                <div>(focused group)</div>
+              </Inline>
+
+              <Inline space="space.100">
+                <div>Unminified size</div>
+                <Code>
+                  {formatBytes(
+                    focusedGroup.assetTreeSize ?? focusedGroup.weight,
+                  )}
+                </Code>
+              </Inline>
+
+              {focusedGroup.assetTreeSize != null && (
+                <Inline space="space.100">
+                  <div>Output size on disk</div>
+                  <Code>{formatBytes(focusedGroup.weight)}</Code>
+                </Inline>
+              )}
+
+              <ImpactScore
+                parentSize={focusedGroup.weight}
+                groupSize={viewModel.tooltipState.group.weight}
+                message={`${viewModel.tooltipState.group.label} is ${Math.round(Math.min(1, viewModel.tooltipState.group.weight / focusedGroup.weight) * 100)}% of ${focusedGroup.label}`}
+              />
+            </Stack>
+          </div>
+        )}
+
+        {focusedBundle && (
+          <div className={styles.parent}>
+            <Stack space="space.100">
+              <Inline space="space.100">
+                <strong>{focusedBundle.label}</strong>
+                <div>(focused bundle)</div>
+              </Inline>
+
+              <Inline space="space.100">
+                <div>Unminified size</div>
+                <Code>{formatBytes(focusedBundle.assetTreeSize ?? 0)}</Code>
+              </Inline>
+
+              <Inline space="space.100">
+                <div>Output size on disk</div>
+                <Code>{formatBytes(focusedBundle.weight)}</Code>
+              </Inline>
+
+              <ImpactScore
+                parentSize={focusedBundle.assetTreeSize ?? 0}
+                groupSize={viewModel.tooltipState.group.weight}
+                message={`${viewModel.tooltipState.group.label} is ${Math.round(Math.min(1, viewModel.tooltipState.group.weight / (focusedBundle.assetTreeSize ?? 0)) * 100)}% of ${focusedBundle.label}`}
+              />
+            </Stack>
+          </div>
+        )}
+      </Stack>
+    </div>
+  );
+});

package/src/ui/app/treemap/ui/TreemapRenderer/controllers/useStableCallback.test.ts

@@ -0,0 +1,27 @@
+import {renderHook} from '@testing-library/react';
+import {useStableCallback} from './useStableCallback';
+
+describe('useStableCallback', () => {
+  it('should return a stable callback', () => {
+    const callback1 = jest.fn();
+    const {result, rerender} = renderHook(useStableCallback, {
+      initialProps: callback1,
+    });
+
+    expect(result.current).toBeInstanceOf(Function);
+
+    result.current();
+    result.current();
+    const previousRef = result.current;
+    expect(callback1).toHaveBeenCalledTimes(2);
+
+    const callback2 = jest.fn();
+    rerender(callback2);
+    expect(result.current).toBe(previousRef);
+
+    result.current();
+    result.current();
+    expect(callback1).toHaveBeenCalledTimes(2);
+    expect(callback2).toHaveBeenCalledTimes(2);
+  });
+});

package/src/ui/app/treemap/ui/TreemapRenderer/controllers/useStableCallback.ts

@@ -0,0 +1,21 @@
+import {useCallback, useEffect, useRef} from 'react';
+
+/**
+ * Like `useCallback` but the callback never changes even if the fn captures change.
+ *
+ * @example
+ *
+ *     const onClick = useStableCallback(() => {
+ *       console.log(props.value);
+ *     });
+ *
+ */
+export function useStableCallback(fn: (...args: any[]) => void) {
+  const ref = useRef(fn);
+
+  useEffect(() => {
+    ref.current = fn;
+  }, [fn]);
+
+  return useCallback((...args: any[]) => ref.current(...args), []);
+}