@atlaspack/inspector-frontend 0.1.1

package/src/ui/app/cache-invalidation/ui/CacheFileList.tsx

@@ -0,0 +1,185 @@
+import {useNavigate, useSearchParams} from 'react-router';
+import {useVirtualizer} from '@tanstack/react-virtual';
+import {useEffect, useMemo, useRef} from 'react';
+import {useInfiniteQuery} from '@tanstack/react-query';
+import qs from 'qs';
+import axios from 'axios';
+import Button, {LinkButton} from '@atlaskit/button/new';
+import {Box} from '@atlaskit/primitives';
+
+import * as styles from './CacheFileList.module.css';
+import * as appStyles from '../../../App.module.css';
+
+export function CacheFileList() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const sortBy = searchParams.get('sortBy') || 'invalidationCount';
+  const setSortBy = (value: string) => {
+    searchParams.set('sortBy', value);
+    setSearchParams(searchParams);
+  };
+
+  const {
+    data: cacheFiles,
+    isLoading,
+    error,
+    fetchNextPage,
+    isFetchingNextPage,
+    hasNextPage,
+  } = useInfiniteQuery<{
+    files: {
+      id: string;
+    }[];
+    count: number;
+    hasNextPage: boolean;
+    nextPageCursor: string | null;
+  }>({
+    queryFn: async ({pageParam}) => {
+      const backendUrl = process.env.ATLASPACK_INSPECTOR_BACKEND_URL;
+      const {data} = await axios.get(
+        `${backendUrl}/api/cache-invalidation-files/?` +
+          qs.stringify({cursor: pageParam, sortBy}),
+      );
+      return data;
+    },
+    queryKey: ['/api/cache-invalidation-files/?' + qs.stringify({sortBy})],
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => lastPage.nextPageCursor,
+  });
+
+  const allFiles = useMemo(
+    () => cacheFiles?.pages.flatMap((page) => page.files) ?? [],
+    [cacheFiles?.pages],
+  );
+  const lastPage = cacheFiles?.pages[cacheFiles.pages.length - 1];
+  const parentRef = useRef<HTMLDivElement>(null);
+  const rowVirtualizer = useVirtualizer({
+    count: lastPage?.hasNextPage ? allFiles.length + 1 : allFiles.length,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => 35,
+  });
+
+  const virtualItems = rowVirtualizer.getVirtualItems();
+  useEffect(() => {
+    const lastVirtualItem = virtualItems[virtualItems.length - 1];
+    const loaderRowIsShown =
+      allFiles[lastVirtualItem?.index] == null && lastPage?.hasNextPage;
+
+    if (hasNextPage && loaderRowIsShown && !isFetchingNextPage) {
+      fetchNextPage();
+    }
+  }, [
+    allFiles,
+    allFiles.length,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    lastPage,
+    lastPage?.hasNextPage,
+    virtualItems,
+  ]);
+
+  const navigate = useNavigate();
+
+  const renderItems = () => {
+    if (isLoading) {
+      return (
+        <div className={styles.cacheFilePlaceholderContainer}>Loading...</div>
+      );
+    }
+
+    if (error) {
+      return (
+        <div className={styles.cacheFilePlaceholderContainer}>
+          Error: {error.message}
+        </div>
+      );
+    }
+
+    if (!allFiles.length) {
+      return (
+        <div className={styles.cacheFilePlaceholderContainer}>
+          No cache files
+        </div>
+      );
+    }
+
+    return (
+      <div className={styles.cacheFileListItemsContainer} ref={parentRef}>
+        <div
+          className={styles.cacheFileListItemsContainerInner}
+          style={{
+            height: `${rowVirtualizer.getTotalSize()}px`,
+          }}
+        >
+          {rowVirtualizer.getVirtualItems().map((virtualItem) => {
+            const file = allFiles[virtualItem.index];
+            const isLoaderRow = file == null && lastPage?.hasNextPage;
+            const rowStyle = {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              width: '100%',
+              height: `${virtualItem.size}px`,
+              transform: `translateY(${virtualItem.start}px)`,
+            } as const;
+
+            if (isLoaderRow) {
+              return (
+                <div
+                  key="loader"
+                  className={appStyles.sidebarItem}
+                  style={rowStyle}
+                >
+                  Loading...
+                </div>
+              );
+            }
+            const href = `/app/cache-invalidation/${encodeURIComponent(
+              file.id,
+            )}?${searchParams.toString()}`;
+
+            return (
+              <div
+                key={virtualItem.index}
+                className={appStyles.sidebarItem}
+                style={rowStyle}
+              >
+                <LinkButton
+                  appearance="subtle"
+                  href={href}
+                  onClick={(e) => {
+                    e.preventDefault();
+                    navigate(href);
+                  }}
+                >
+                  {file.id}
+                </LinkButton>
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  };
+
+  return (
+    <div className={styles.cacheFileList}>
+      <Box>
+        <Button
+          appearance="subtle"
+          onClick={() => {
+            if (sortBy === 'order') {
+              setSortBy('invalidationCount');
+            } else {
+              setSortBy('order');
+            }
+          }}
+        >
+          Sorting by {sortBy}
+        </Button>
+      </Box>
+
+      <div className={styles.cacheFileListInner}>{renderItems()}</div>
+    </div>
+  );
+}

package/src/ui/app/treemap/BottomPanelResizeState.test.ts

@@ -0,0 +1,25 @@
+import {ViewModel} from '../../model/ViewModel';
+import {BottomPanelResizeState} from './BottomPanelResizeState';
+
+describe('BottomPanelResizeState', () => {
+  it('should resize the bottom panel', () => {
+    const viewModel = new ViewModel();
+    viewModel.bottomPanelHeight = 100;
+    const resizeState = new BottomPanelResizeState(viewModel);
+
+    resizeState.startResize({clientY: 100} as React.MouseEvent);
+    expect(viewModel.bottomPanelHeight).toBe(100);
+
+    resizeState.onMouseMove({clientY: 50} as MouseEvent);
+    expect(viewModel.bottomPanelHeight).toBe(150);
+
+    resizeState.onMouseMove({clientY: 30} as MouseEvent);
+    expect(viewModel.bottomPanelHeight).toBe(170);
+
+    resizeState.onMouseMove({clientY: 110} as MouseEvent);
+    expect(viewModel.bottomPanelHeight).toBe(90);
+
+    resizeState.stopResize();
+    expect(viewModel.bottomPanelHeight).toBe(90);
+  });
+});

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

@@ -0,0 +1,48 @@
+import {makeAutoObservable} from 'mobx';
+import {ViewModel} from '../../model/ViewModel';
+
+/**
+ * View model for bottom panel UI.
+ */
+export class BottomPanelResizeState {
+  isResizing = false;
+  /**
+   * Last known Y mouse coordinate
+   */
+  lastMouseY = 0;
+  isHovering = false;
+  viewModel: ViewModel;
+
+  constructor(viewModel: ViewModel) {
+    this.viewModel = viewModel;
+    makeAutoObservable(this);
+  }
+
+  startResize = (e: React.MouseEvent) => {
+    this.isResizing = true;
+    this.lastMouseY = e.clientY;
+    document.addEventListener('mousemove', this.onMouseMove);
+  };
+
+  mouseEnter = () => {
+    this.isHovering = true;
+  };
+
+  mouseLeave = () => {
+    this.isHovering = false;
+  };
+
+  stopResize = () => {
+    this.isResizing = false;
+    document.removeEventListener('mousemove', this.onMouseMove);
+  };
+
+  onMouseMove = (e: MouseEvent) => {
+    if (this.isResizing) {
+      const deltaY = this.lastMouseY - e.clientY;
+      this.viewModel.bottomPanelHeight =
+        this.viewModel.bottomPanelHeight + deltaY;
+      this.lastMouseY = e.clientY;
+    }
+  };
+}

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

@@ -0,0 +1,24 @@
+.foamTreemapPage {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.foamTreemapPageRenderer {
+  flex: 1;
+}
+
+.foamTreemapPageBottomPanel {
+  border-top: 2px solid var(--ds-border);
+  position: relative;
+}
+
+.foamTreemapPageBottomPanelResizeHandle {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 10px;
+  cursor: row-resize;
+}

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

@@ -0,0 +1,6 @@
+export const __esModule: true;
+export const foamTreemapPage: string;
+export const foamTreemapPageBottomPanel: string;
+export const foamTreemapPageBottomPanelResizeHandle: string;
+export const foamTreemapPageRenderer: string;
+

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

@@ -0,0 +1,47 @@
+import {observer} from 'mobx-react-lite';
+import {RelatedBundlesController} from './controllers/RelatedBundlesController';
+import {BottomPanel} from './ui/BottomPanel/BottomPanel';
+import {FocusBreadcrumbs} from './ui/FocusBreadcrumbs/FocusBreadcrumbs';
+import {TreemapRenderer} from './ui/TreemapRenderer/TreemapRenderer';
+import {UrlFocusController} from './controllers/UrlFocusController';
+
+import * as styles from './FoamTreemapPage.module.css';
+import {viewModel} from '../../model/ViewModel';
+import {BottomPanelResizeState} from './BottomPanelResizeState';
+
+const bottomPanelResizeState = new BottomPanelResizeState(viewModel);
+
+export const FoamTreemapPage = observer(() => {
+  return (
+    <div className={styles.foamTreemapPage}>
+      <FocusBreadcrumbs />
+
+      <div className={styles.foamTreemapPageRenderer}>
+        <TreemapRenderer />
+      </div>
+
+      <div
+        className={styles.foamTreemapPageBottomPanel}
+        style={{
+          height: `${viewModel.bottomPanelHeight}px`,
+          borderColor: bottomPanelResizeState.isHovering
+            ? 'var(--ds-border-accent-blue)'
+            : 'var(--ds-border)',
+        }}
+      >
+        <div
+          className={styles.foamTreemapPageBottomPanelResizeHandle}
+          onMouseDown={bottomPanelResizeState.startResize}
+          onMouseUp={bottomPanelResizeState.stopResize}
+          onMouseEnter={bottomPanelResizeState.mouseEnter}
+          onMouseLeave={bottomPanelResizeState.mouseLeave}
+        />
+
+        <BottomPanel />
+      </div>
+
+      <RelatedBundlesController />
+      <UrlFocusController />
+    </div>
+  );
+});

package/src/ui/app/treemap/controllers/RelatedBundlesController.tsx

@@ -0,0 +1,41 @@
+import {useSearchParams} from 'react-router';
+import {useQuery} from '@tanstack/react-query';
+import {observer} from 'mobx-react-lite';
+import {useEffect} from 'react';
+import {runInAction} from 'mobx';
+import {RelatedBundles, viewModel} from '../../../model/ViewModel';
+import qs from 'qs';
+
+export const RelatedBundlesController = observer(() => {
+  const [searchParams] = useSearchParams();
+  const focusedBundleId = searchParams.get('focusedBundleId');
+  const {data} = useQuery<RelatedBundles>({
+    queryKey: [
+      '/api/bundle-graph/related-bundles?' +
+        qs.stringify({
+          bundle: focusedBundleId,
+        }),
+    ],
+    enabled: focusedBundleId != null,
+  });
+
+  useEffect(() => {
+    if (data && data.childBundles.length > 0) {
+      runInAction(() => {
+        viewModel.relatedBundles = data;
+      });
+    }
+  }, [data]);
+
+  const searchParamsBundle = searchParams.get('bundle');
+  useEffect(() => {
+    if (searchParamsBundle != null) {
+      runInAction(() => {
+        viewModel.relatedBundles = null;
+        viewModel.hasDetails = true;
+      });
+    }
+  }, [searchParamsBundle]);
+
+  return null;
+});

package/src/ui/app/treemap/controllers/UrlFocusController.tsx

@@ -0,0 +1,33 @@
+import {observer} from 'mobx-react-lite';
+import {useEffect} from 'react';
+import {useSearchParams} from 'react-router';
+import {viewModel} from '../../../model/ViewModel';
+import {runInAction} from 'mobx';
+
+export const UrlFocusController = observer(() => {
+  const [searchParams] = useSearchParams();
+  const focusedBundleId = searchParams.get('focusedBundleId');
+  const focusedGroupId = searchParams.get('focusedGroupId');
+
+  useEffect(() => {
+    if (focusedBundleId !== viewModel.focusedBundle?.id) {
+      runInAction(() => {
+        viewModel.focusedBundle = focusedBundleId
+          ? (viewModel.groupsById.get(focusedBundleId) ?? null)
+          : null;
+      });
+    }
+  }, [focusedBundleId]);
+
+  useEffect(() => {
+    if (focusedGroupId !== viewModel.focusedGroup?.id) {
+      runInAction(() => {
+        viewModel.focusedGroup = focusedGroupId
+          ? (viewModel.groupsById.get(focusedGroupId) ?? null)
+          : null;
+      });
+    }
+  }, [focusedGroupId]);
+
+  return null;
+});

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

@@ -0,0 +1,24 @@
+.bottomPanel {
+  border-left: 1px solid var(--border-color);
+  height: 100%;
+  display: flex;
+}
+
+.bottomPanelInner {
+  display: flex;
+  flex-direction: row;
+  gap: 8px;
+  padding: 8px;
+  width: 100%;
+  height: 100%;
+}
+
+.loadingIndicator {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 16px;
+  height: 100%;
+  width: 100%;
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const bottomPanel: string;
+export const bottomPanelInner: string;
+export const loadingIndicator: string;
+

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

@@ -0,0 +1,24 @@
+import {Suspense} from 'react';
+import Spinner from '@atlaskit/spinner';
+import {FocusedGroupInfo} from './FocusedGroupInfo/FocusedGroupInfo';
+
+import * as styles from './BottomPanel.module.css';
+
+export function BottomPanel() {
+  return (
+    <div className={styles.bottomPanel} onClick={(e) => e.stopPropagation()}>
+      <div className={styles.bottomPanelInner}>
+        <Suspense
+          fallback={
+            <div className={styles.loadingIndicator}>
+              <Spinner size="large" />
+              <h2>Loading bundle graph data...</h2>
+            </div>
+          }
+        >
+          <FocusedGroupInfo />
+        </Suspense>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,13 @@
+.advancedSettings {
+  padding: 8px 0;
+}
+
+.advancedSettingsInner {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.advancedSettingsLabel {
+  font-weight: bold;
+}

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

@@ -0,0 +1,5 @@
+export const __esModule: true;
+export const advancedSettings: string;
+export const advancedSettingsInner: string;
+export const advancedSettingsLabel: string;
+

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

@@ -0,0 +1,53 @@
+import {useSearchParams} from 'react-router';
+
+import * as styles from './AdvancedSettings.module.css';
+
+export function AdvancedSettings() {
+  const [searchParams, setSearchParams] = useSearchParams();
+  const bundle = searchParams.get('bundle');
+  const isDetailView = bundle != null;
+  const maxLevels = searchParams.get('maxLevels') ?? 0;
+  const stacking = searchParams.get('stacking') ?? 'hierarchical';
+
+  return (
+    <div className={styles.advancedSettings}>
+      <div className={styles.advancedSettingsInner}>
+        <label className={styles.advancedSettingsLabel}>
+          Max levels: {maxLevels}
+        </label>
+
+        <input
+          disabled={!isDetailView}
+          type="range"
+          min={0}
+          max={10}
+          value={maxLevels}
+          onChange={(e) =>
+            setSearchParams((prev) => {
+              prev.set('maxLevels', e.target.value);
+              return prev;
+            })
+          }
+        />
+      </div>
+
+      <div className={styles.advancedSettingsInner}>
+        <label className={styles.advancedSettingsLabel}>Stacking</label>
+
+        <select
+          disabled={!isDetailView}
+          value={stacking}
+          onChange={(e) =>
+            setSearchParams((prev) => {
+              prev.set('stacking', e.target.value);
+              return prev;
+            })
+          }
+        >
+          <option value="hierarchical">Hierarchical</option>
+          <option value="flattened">Flattened</option>
+        </select>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,135 @@
+import {observer} from 'mobx-react-lite';
+import {useMemo} from 'react';
+import {makeAutoObservable} from 'mobx';
+import {
+  CollapsibleTableModel,
+  CollapsibleTableNode,
+} from './CollapsibleTable/CollapsibleTableModel';
+import {CollapsibleTable} from './CollapsibleTable/CollapsibleTable';
+import {SourceCodeURL} from '../SourceCodeURL';
+import {getFileURL} from './getFileURL';
+
+export const AssetTable = observer(
+  ({
+    data,
+    isBottomUp,
+  }: {
+    data: {
+      relevantPaths: string[][];
+      sourceCodeURL: SourceCodeURL | null;
+      projectRoot: string;
+      repositoryRoot: string;
+    };
+    isBottomUp: boolean;
+  }) => {
+    const model: CollapsibleTableModel = useMemo(() => {
+      // this is horrible ; but let's just hope there aren't that many children
+      // anyway things won't perform properly in that case
+      const expanded = (node: any) => {
+        if (node.isExpanded) {
+          return [
+            node,
+            ...node.children.flatMap((child: any) => expanded(child)),
+          ];
+        }
+        return [node];
+      };
+      const model: CollapsibleTableModel = makeAutoObservable({
+        nodes: [],
+        focusedNodeId: null,
+        get flatNodeList() {
+          return this.nodes.flatMap((node) => {
+            return expanded(node);
+          });
+        },
+      });
+
+      if (isBottomUp) {
+        const seenRoots = new Set();
+        for (let path of data.relevantPaths) {
+          const node = path.slice();
+          node.reverse();
+
+          if (seenRoots.has(node[0])) {
+            continue;
+          }
+          seenRoots.add(node[0]);
+
+          const root: CollapsibleTableNode = makeAutoObservable({
+            id: node[0],
+            path: node[0],
+            sourceCodeUrl: getFileURL(node[0], data.sourceCodeURL),
+            isExpanded: false,
+            children: [],
+            parent: null,
+            level: 0,
+          });
+          let current: CollapsibleTableNode = root;
+
+          for (let i = 1; i < node.length; i++) {
+            const newNode = makeAutoObservable({
+              id: current.id + '--->>>>' + node[i],
+              path: node[i],
+              sourceCodeUrl: getFileURL(node[i], data.sourceCodeURL),
+              isExpanded: false,
+              children: [],
+              parent: current.id,
+              level: i,
+            });
+            current.children.push(newNode);
+            current = newNode;
+          }
+
+          model.nodes.push(root);
+        }
+      } else {
+        const roots = new Map();
+        for (let path of data.relevantPaths) {
+          const node = path.slice();
+
+          if (!roots.has(node[0])) {
+            const root = makeAutoObservable({
+              id: node[0],
+              path: node[0],
+              sourceCodeUrl: getFileURL(node[0], data.sourceCodeURL),
+              isExpanded: false,
+              children: [] as any[],
+              parent: null,
+              level: 0,
+            });
+            roots.set(node[0], root);
+            model.nodes.push(root);
+          }
+
+          const root = roots.get(node[0]);
+          let current = root;
+
+          for (let i = 1; i < node.length; i++) {
+            const existingNode = current.children.find(
+              (child: any) => child.path === node[i],
+            );
+            if (existingNode) {
+              current = existingNode as any;
+              continue;
+            }
+
+            const newNode = makeAutoObservable({
+              id: current.id + '--->>>>' + node[i],
+              path: node[i],
+              isExpanded: false,
+              children: [],
+              parent: current.id,
+              level: i,
+            });
+            current.children.push(newNode);
+            current = newNode;
+          }
+        }
+      }
+
+      return model;
+    }, [data, isBottomUp]);
+
+    return <CollapsibleTable model={model} />;
+  },
+);

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

@@ -0,0 +1,7 @@
+.collapsibleTable {
+  width: 100%;
+}
+
+.collapsibleTable table {
+  width: 100%;
+}

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

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