@atlaspack/inspector-frontend 0.1.1

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/CollapsibleTable/CollapsibleTable.tsx

@@ -0,0 +1,123 @@
+import {observer} from 'mobx-react-lite';
+import {CollapsibleTableModel} from './CollapsibleTableModel';
+import {runInAction} from 'mobx';
+import {CollapsibleTableRow} from './CollapsibleTableRow';
+
+import * as styles from './CollapsibleTable.module.css';
+
+function limit(value: number, len: number) {
+  if (value < 0) {
+    return len - (Math.abs(value) % len);
+  }
+  return value % len;
+}
+
+interface CollapsibleTableProps {
+  model: CollapsibleTableModel;
+}
+
+export const CollapsibleTable = observer(({model}: CollapsibleTableProps) => {
+  function focusOnNode(nodeId: string) {
+    runInAction(() => {
+      model.focusedNodeId = nodeId;
+    });
+
+    const node = document.querySelector(
+      `[data-nodeid="${model.focusedNodeId}"]`,
+    );
+    if (node) {
+      node.scrollIntoView({behavior: 'smooth', block: 'center'});
+      (node as HTMLElement).focus();
+    }
+  }
+
+  /**
+   * Handles keyboard navigation in 4 directions.
+   */
+  function onKeyDown(e: React.KeyboardEvent<HTMLTableElement>) {
+    if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      runInAction(() => {
+        const current = model.flatNodeList.findIndex(
+          (node: any) => node.id === model.focusedNodeId,
+        );
+        if (current === -1) {
+          focusOnNode(model.flatNodeList[0].id);
+        } else {
+          const increment = e.key === 'ArrowDown' ? 1 : -1;
+          focusOnNode(
+            model.flatNodeList[
+              limit(current + increment, model.flatNodeList.length)
+            ].id,
+          );
+        }
+      });
+    } else if (e.key === 'ArrowRight') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const current = model.flatNodeList.findIndex(
+        (node: any) => node.id === model.focusedNodeId,
+      );
+      runInAction(() => {
+        if (current !== -1) {
+          model.flatNodeList[current].isExpanded = true;
+
+          const newNode =
+            model.flatNodeList[limit(current + 1, model.flatNodeList.length)];
+          if (newNode.level > model.flatNodeList[current].level) {
+            focusOnNode(newNode.id);
+          }
+        }
+      });
+    } else if (e.key === 'ArrowLeft') {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const current = model.flatNodeList.find(
+        (node: any) => node.id === model.focusedNodeId,
+      );
+      if (current && current.isExpanded) {
+        runInAction(() => {
+          current.isExpanded = false;
+        });
+      } else if (current && current.parent) {
+        focusOnNode(current.parent);
+      }
+    }
+  }
+
+  /**
+   * When a node is focused, walk up until we find the `data-nodeid` of the focused row,
+   * then update view model to focus on that node.
+   */
+  function onFocus(e: React.FocusEvent<HTMLTableElement>) {
+    let current = e.target as HTMLElement;
+    while (current && !current.getAttribute('data-nodeid')) {
+      current = current.parentElement as HTMLElement;
+    }
+
+    runInAction(() => {
+      model.focusedNodeId = current.getAttribute('data-nodeid');
+    });
+  }
+
+  return (
+    <div className={styles.collapsibleTable}>
+      <table onKeyDown={onKeyDown} onFocus={onFocus}>
+        <tbody>
+          {model.flatNodeList.map((node, i) => (
+            <CollapsibleTableRow
+              key={i}
+              node={node}
+              level={node.level}
+              model={model}
+            />
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+});

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/CollapsibleTable/CollapsibleTableModel.tsx

@@ -0,0 +1,18 @@
+export interface CollapsibleTableModel {
+  nodes: CollapsibleTableNode[];
+  focusedNodeId: string | null;
+  flatNodeList: CollapsibleTableNode[];
+}
+
+export interface CollapsibleTableNode {
+  id: string;
+  path: string;
+  sourceCodeUrl: {
+    url: string;
+    type: 'github' | 'bitbucket';
+  } | null;
+  isExpanded: boolean;
+  children: CollapsibleTableNode[];
+  parent: string | null;
+  level: number;
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/CollapsibleTable/CollapsibleTableRow.module.css

@@ -0,0 +1,20 @@
+.collapsibleTableRow {
+  height: 20px;
+}
+
+.collapsibleTableRowPath {
+  vertical-align: baseline;
+  padding-left: 16px;
+  display: flex;
+  gap: 8px;
+}
+
+.collapsibleTableRowPathButton {
+  border: none;
+  background: none;
+  width: 16px;
+}
+
+.collapsibleTableRowPathPlaceholder {
+  width: 16px;
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/CollapsibleTable/CollapsibleTableRow.module.css.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const collapsibleTableRow: string;
+export const collapsibleTableRowPath: string;
+export const collapsibleTableRowPathButton: string;
+export const collapsibleTableRowPathPlaceholder: string;
+

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/CollapsibleTable/CollapsibleTableRow.tsx

@@ -0,0 +1,79 @@
+import {Fragment, useEffect} from 'react';
+import {observer} from 'mobx-react-lite';
+import {runInAction} from 'mobx';
+import {BitbucketIcon} from '@atlaskit/logo';
+
+import * as styles from './CollapsibleTableRow.module.css';
+import {
+  CollapsibleTableModel,
+  CollapsibleTableNode,
+} from './CollapsibleTableModel';
+
+interface CollapsibleTableRowProps {
+  model: CollapsibleTableModel;
+  node: CollapsibleTableNode;
+  level: number;
+}
+
+export const CollapsibleTableRow = observer(
+  ({node, level, model}: CollapsibleTableRowProps) => {
+    useEffect(() => {
+      if (model.focusedNodeId === node.id) {
+        const row = document.querySelector(
+          `[data-nodeid="${model.focusedNodeId}"]`,
+        );
+        if (row) {
+          (row as HTMLElement).focus();
+        }
+      }
+    }, [model, node]);
+
+    return (
+      <Fragment>
+        <tr
+          className={styles.collapsibleTableRow}
+          data-nodeid={node.id}
+          tabIndex={0}
+          autoFocus={model.focusedNodeId === node.id}
+        >
+          <td
+            className={styles.collapsibleTableRowPath}
+            style={{paddingLeft: level * 16}}
+          >
+            {node.children.length > 0 ? (
+              <button
+                onClick={() => {
+                  runInAction(() => {
+                    node.isExpanded = !node.isExpanded;
+                  });
+                }}
+                className={styles.collapsibleTableRowPathButton}
+              >
+                {node.isExpanded ? '▼' : '▶'}
+              </button>
+            ) : (
+              <span className={styles.collapsibleTableRowPathPlaceholder} />
+            )}
+
+            {node.path}
+          </td>
+          {node.sourceCodeUrl && (
+            <td>
+              <a
+                href={node.sourceCodeUrl.url}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                {node.sourceCodeUrl.type === 'github' ? (
+                  <>GitHub link</>
+                ) : (
+                  <BitbucketIcon size="small" />
+                )}
+              </a>
+            </td>
+          )}
+        </tr>
+      </Fragment>
+    );
+  },
+);

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/getFileURL.test.ts

@@ -0,0 +1,19 @@
+import {getFileURL} from './getFileURL';
+
+describe('getFileURL', () => {
+  it('should return the correct URL for a file in the project', () => {
+    const fileURL = getFileURL(
+      'jira/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/AssetTable.tsx',
+      {
+        owner: 'atlassian',
+        repo: 'atlassian-frontend',
+        type: 'bitbucket',
+      },
+    );
+
+    expect(fileURL).toEqual({
+      type: 'bitbucket',
+      url: 'https://bitbucket.org/atlassian/atlassian-frontend/src/master/jira/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/AssetTable.tsx',
+    });
+  });
+});

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/AssetTable/getFileURL.ts

@@ -0,0 +1,24 @@
+import {SourceCodeURL} from '../SourceCodeURL';
+
+export function getFileURL(
+  filePath: string,
+  sourceCodeURL: SourceCodeURL | null,
+): {url: string; type: 'github' | 'bitbucket'} | null {
+  if (!sourceCodeURL) {
+    return null;
+  }
+
+  if (sourceCodeURL.type === 'github') {
+    return {
+      url: `https://github.com/${sourceCodeURL.owner}/${sourceCodeURL.repo}/blob/master/${filePath}`,
+      type: 'github',
+    };
+  } else if (sourceCodeURL.type === 'bitbucket') {
+    return {
+      url: `https://bitbucket.org/${sourceCodeURL.owner}/${sourceCodeURL.repo}/src/master/${filePath}`,
+      type: 'bitbucket',
+    };
+  }
+
+  return null;
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfo.module.css

@@ -0,0 +1,20 @@
+.focusedGroupInfoBundleGraph {
+  height: 100%;
+  width: 100%;
+  padding-top: 8px;
+}
+
+.focusedGroupInfoAdvancedSettings {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: calc(100% - 8px);
+  width: 100%;
+}
+
+.focusedGroupInfoAssetTable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  margin-top: 8px;
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfo.module.css.d.ts

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const focusedGroupInfoAdvancedSettings: string;
+export const focusedGroupInfoAssetTable: string;
+export const focusedGroupInfoBundleGraph: string;
+

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfo.tsx

@@ -0,0 +1,42 @@
+import {useSearchParams} from 'react-router';
+import {observer} from 'mobx-react-lite';
+import Tabs, {Tab, TabList, TabPanel} from '@atlaskit/tabs';
+import {viewModel} from '../../../../../model/ViewModel';
+import {GraphContainer} from './GraphContainer';
+import {BundleGraphRenderer} from '../../BundleGraphRenderer';
+import {AdvancedSettings} from './AdvancedSettings';
+import * as styles from './FocusedGroupInfo.module.css';
+import {FocusedGroupInfoInner} from './FocusedGroupInfoInner';
+
+export const FocusedGroupInfo = observer(() => {
+  const [searchParams] = useSearchParams();
+  const bundle = searchParams.get('bundle');
+  if (!viewModel.focusedGroup || !bundle) {
+    return (
+      <Tabs id="focused-group-info-tabs">
+        <TabList>
+          <Tab>Bundle graph</Tab>
+          <Tab>Advanced settings</Tab>
+        </TabList>
+
+        <TabPanel>
+          <div className={styles.focusedGroupInfoBundleGraph}>
+            <GraphContainer fullWidth>
+              <BundleGraphRenderer />
+            </GraphContainer>
+          </div>
+        </TabPanel>
+
+        <TabPanel>
+          <div className={styles.focusedGroupInfoAdvancedSettings}>
+            <AdvancedSettings />
+          </div>
+        </TabPanel>
+      </Tabs>
+    );
+  }
+
+  return (
+    <FocusedGroupInfoInner group={viewModel.focusedGroup} bundle={bundle} />
+  );
+});

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfoInner.module.css

@@ -0,0 +1,29 @@
+.focusedGroupInfoInner {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+  gap: 8px;
+  padding-bottom: 8px;
+}
+
+.focusedGroupInfoInnerAdvancedSettings {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: calc(100% - 8px);
+  width: 100%;
+}
+
+.focusedGroupInfoInnerAssetTable {
+  overflow-x: hidden;
+  overflow-y: auto;
+  height: 100%;
+  width: 100%;
+  margin-top: 8px;
+}
+
+.focusedGroupInfoInnerGraphContainer {
+  height: 100%;
+  width: 400px;
+  display: flex;
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfoInner.module.css.d.ts

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const focusedGroupInfoInner: string;
+export const focusedGroupInfoInnerAdvancedSettings: string;
+export const focusedGroupInfoInnerAssetTable: string;
+export const focusedGroupInfoInnerGraphContainer: string;
+

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/FocusedGroupInfoInner.tsx

@@ -0,0 +1,107 @@
+import {observer} from 'mobx-react-lite';
+import Tabs, {Tab, TabList, TabPanel} from '@atlaskit/tabs';
+import {Group, viewModel} from '../../../../../model/ViewModel';
+import {GraphContainer} from './GraphContainer';
+import {AdvancedSettings} from './AdvancedSettings';
+import {useSuspenseQuery} from '@tanstack/react-query';
+import {useMemo} from 'react';
+import {Graph} from '../../../../../types/Graph';
+import {formatBytes} from '../../../../../util/formatBytes';
+import {SigmaGraph} from '../../SigmaGraph';
+import {AssetTable} from './AssetTable/AssetTable';
+import qs from 'qs';
+import {Stack} from '@atlaskit/primitives';
+
+import * as styles from './FocusedGroupInfoInner.module.css';
+import {SourceCodeURL} from './SourceCodeURL';
+
+export const FocusedGroupInfoInner = observer(
+  ({group, bundle}: {group: Group; bundle: string}) => {
+    const {data} = useSuspenseQuery<{
+      relevantPaths: string[][];
+      sourceCodeURL: SourceCodeURL | null;
+      projectRoot: string;
+      repositoryRoot: string;
+    }>({
+      queryKey: [
+        '/api/treemap/reasons?' +
+          qs.stringify({
+            path:
+              group.type === 'asset' ? group.id.split('::')[1].slice(1) : '',
+            bundle,
+          }),
+      ],
+    });
+
+    const graph = useMemo(() => {
+      const graph: Graph<any> = {
+        nodes: [],
+      };
+
+      for (const path of data.relevantPaths) {
+        for (let i = 0; i < path.length; i++) {
+          const node = {
+            id: path[i],
+            nodeId: path[i],
+            displayName: path[i],
+            path: path,
+            level: i,
+            edges: i < path.length - 1 ? [path[i + 1]] : [],
+            extra: null,
+          };
+          graph.nodes.push(node);
+        }
+      }
+
+      return graph;
+    }, [data]);
+
+    return (
+      <div className={styles.focusedGroupInfoInner}>
+        <Tabs id="focused-group-info-tabs">
+          <TabList>
+            <Tab>Bottom-up</Tab>
+            <Tab>Top-down</Tab>
+            <Tab>Advanced settings</Tab>
+          </TabList>
+
+          <TabPanel>
+            <div className={styles.focusedGroupInfoInnerAssetTable}>
+              <AssetTable data={data} isBottomUp />
+            </div>
+          </TabPanel>
+
+          <TabPanel>
+            <div className={styles.focusedGroupInfoInnerAssetTable}>
+              <AssetTable data={data} isBottomUp={false} />
+            </div>
+          </TabPanel>
+
+          <TabPanel>
+            <div className={styles.focusedGroupInfoInnerAdvancedSettings}>
+              <AdvancedSettings />
+            </div>
+          </TabPanel>
+        </Tabs>
+
+        <div className={styles.focusedGroupInfoInnerGraphContainer}>
+          <Stack space="space.100" grow="fill">
+            <Stack space="space.050">
+              <strong>{viewModel.focusedGroup!.label}</strong>
+              {formatBytes(
+                viewModel.focusedGroup?.assetTreeSize ??
+                  viewModel.focusedGroup!.weight,
+              )}
+            </Stack>
+
+            <Stack grow="fill">
+              <GraphContainer>
+                <SigmaGraph graph={graph} />
+              </GraphContainer>
+            </Stack>
+          </Stack>
+        </div>
+      </div>
+    );
+  },
+);

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/GraphContainer.module.css

@@ -0,0 +1,7 @@
+.graphContainer {
+  height: 100%;
+  width: 100%;
+  border: 1px solid var(--ds-border);
+  border-radius: 8px;
+  background-color: var(--ds-surface-sunken);
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/GraphContainer.module.css.d.ts

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

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/GraphContainer.tsx

@@ -0,0 +1,20 @@
+import * as styles from './GraphContainer.module.css';
+
+export function GraphContainer({
+  children,
+  fullWidth = false,
+}: {
+  children: React.ReactNode;
+  fullWidth?: boolean;
+}) {
+  return (
+    <div
+      className={styles.graphContainer}
+      style={{
+        width: fullWidth ? '100%' : 300,
+      }}
+    >
+      {children}
+    </div>
+  );
+}

package/src/ui/app/treemap/ui/BottomPanel/FocusedGroupInfo/SourceCodeURL.tsx

@@ -0,0 +1,5 @@
+export interface SourceCodeURL {
+  owner: string;
+  repo: string;
+  type: 'github' | 'bitbucket';
+}

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

@@ -0,0 +1,13 @@
+.expander {
+  height: 100%;
+  width: 100%;
+  flex: 1;
+}
+
+.loadingIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}

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

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

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

@@ -0,0 +1,95 @@
+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 {useSearchParams} from 'react-router';
+import {useQuery} from '@tanstack/react-query';
+import qs from 'qs';
+import Spinner from '@atlaskit/spinner';
+
+import {Graph} from '../../../types/Graph';
+import * as styles from './BundleGraphRenderer.module.css';
+
+function setup(container: HTMLDivElement, graph: Graphology) {
+  const sensibleSettings = forceAtlas2.inferSettings(graph);
+  const fa2Layout = new FA2Layout(graph, {
+    settings: sensibleSettings,
+  });
+  fa2Layout.start();
+
+  const renderer: any = new Sigma(graph, container, {
+    allowInvalidContainer: true,
+  });
+
+  return () => {
+    renderer.kill();
+  };
+}
+
+type BundleGraph = Graph<{size: number}>;
+
+export function BundleGraphRenderer() {
+  const [searchParams] = useSearchParams();
+  const rootNodeId = searchParams.get('rootNodeId');
+  const visualizationRef = useRef<HTMLDivElement>(null);
+  const {
+    data: bundleGraph,
+    isLoading: isLoadingBundleGraph,
+    error: errorBundleGraph,
+  } = useQuery<BundleGraph>({
+    queryKey: [`/api/bundle-graph?${qs.stringify({rootNodeId})}`],
+  });
+
+  useEffect(() => {
+    if (visualizationRef.current && bundleGraph) {
+      const graph = new Graphology();
+      const nodes = new Set<string>();
+      for (let node of bundleGraph.nodes) {
+        nodes.add(node.id);
+        graph.addNode(node.id, {
+          label: node.displayName,
+          // color: getRandomDarkerColor(node.displayName).family[2],
+          x: Math.random() * 10000,
+          y: Math.random() * 10000,
+          size:
+            node.id === '@@root'
+              ? 4
+              : node.extra?.size
+                ? node.extra.size / 500000
+                : 2,
+        });
+      }
+      for (let node of bundleGraph.nodes) {
+        for (let edge of node.edges) {
+          if (nodes.has(node.id) && nodes.has(edge)) {
+            graph.addEdge(node.id, edge, {
+              size: 0.1,
+            });
+          }
+        }
+      }
+
+      return setup(visualizationRef.current, graph);
+    }
+  }, [bundleGraph]);
+
+  if (isLoadingBundleGraph) {
+    return (
+      <div className={styles.loadingIndicator}>
+        <Spinner size="large" />
+      </div>
+    );
+  }
+
+  if (errorBundleGraph) {
+    return <div>Error: {errorBundleGraph.message}</div>;
+  }
+
+  if (!bundleGraph) {
+    throw new Error('No bundle graph');
+  }
+
+  return <div className={styles.expander} ref={visualizationRef} />;
+}

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

@@ -0,0 +1,6 @@
+.focusBreadcrumbs {
+  padding: 4px;
+  display: flex;
+  flex-direction: row;
+  gap: 4px;
+}

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

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