pkgviz 0.7.7 → 0.8.0

package/src/components/Settings.tsx

@@ -1,189 +0,0 @@
-'use client';
-import dynamic from 'next/dynamic';
-import { ChevronDownIcon, DownloadIcon } from 'lucide-react';
-import { Select, Slider } from 'radix-ui';
-import type React from 'react';
-import Setting from '@/components/Setting';
-import Switch from '@/components/Switch';
-import { useSettings } from '@/contexts/SettingsContext';
-import { t } from '@/i18n/i18n';
-import { downloadAuditJsonAction, downloadAuditXmlAction } from '@/app/actions/audit.actions';
-
-const Settings: React.FC = () => {
-  const {
-    cytoscapeLayout,
-    cytoscapeLayoutSpacing,
-    maxSubPackageDepth,
-    showCompoundNodes,
-    showVendorPackages,
-    subPackageDepth,
-    setCytoscapeLayout,
-    setCytoscapeLayoutSpacing,
-    setSubPackageDepth,
-    toggleShowCompoundNodes,
-    toggleShowVendorPackages,
-  } = useSettings();
-
-  const handleDownloadJson = async () => {
-    const { data, filename } = await downloadAuditJsonAction();
-    const blob = new Blob([data], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  const handleDownloadXml = async () => {
-    const { data, filename } = await downloadAuditXmlAction();
-    const blob = new Blob([data], { type: 'application/xml' });
-    const url = URL.createObjectURL(blob);
-    const a = document.createElement('a');
-    a.href = url;
-    a.download = filename;
-    a.click();
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <div className="md:pt-14 border-r bg-neutral-100 border-r-neutral-200 dark:border-r-neutral-800 dark:bg-neutral-950">
-      {/* Audit Download */}
-      <h3>{t('settings.download')}</h3>
-      <div>
-        {/* JSON Audit Download */}
-        <Setting>
-          <button
-            onClick={handleDownloadJson}
-            className="flex flex-row items-center content-start text-xs cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
-          >
-            <DownloadIcon size={8} className="mr-1" />
-            <span>JSON</span>
-          </button>
-        </Setting>
-        {/* XML Audit Download */}
-        <Setting>
-          <button
-            onClick={handleDownloadXml}
-            className="flex flex-row items-center content-start text-xs cursor-pointer hover:text-blue-600 dark:hover:text-blue-400"
-          >
-            <DownloadIcon size={8} className="mr-1" />
-            <span>XML</span>
-          </button>
-        </Setting>
-      </div>
-
-      <h3>{t('settings.filter')}</h3>
-      {/* Whether to show vendor packages */}
-      <Setting>
-        <Switch
-          id="switch-show-vendor-packages"
-          label={t('settings.showVendorPackages')}
-          onToggle={() => {
-            toggleShowVendorPackages();
-          }}
-          value={showVendorPackages}
-        />
-      </Setting>
-
-      {/* Whether to show compound nodes */}
-      <Setting>
-        <Switch
-          id="switch-show-compound-nodes"
-          label={t('settings.showCompoundNodes')}
-          onToggle={() => {
-            toggleShowCompoundNodes();
-          }}
-          value={showCompoundNodes}
-        />
-      </Setting>
-
-      {/* How many sub package levels to show */}
-      <>
-        <h3>{`${t('settings.subPackageDepth')}: ${subPackageDepth}`}</h3>
-        <Setting>
-          <Slider.Root
-            id="subPackageDepth"
-            min={1}
-            max={maxSubPackageDepth}
-            step={1}
-            value={[subPackageDepth]}
-            onValueChange={([v]) => setSubPackageDepth(Number(v.toFixed(1)))}
-            aria-label="Subpackage depth"
-            className="relative flex h-5 w-56 touch-none select-none items-center"
-          >
-            <Slider.Track className="relative h-1.5 grow rounded-full bg-neutral-200 dark:bg-neutral-800">
-              <Slider.Range className="absolute h-1.5 rounded-full bg-blue-600 dark:bg-blue-400" />
-            </Slider.Track>
-            <Slider.Thumb className="block h-4 w-4 rounded-full border border-neutral-300 bg-white shadow focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-100" />
-          </Slider.Root>
-        </Setting>
-      </>
-
-      <h3>{t('settings.layout')}</h3>
-      <Setting>
-        <Select.Root value={cytoscapeLayout} onValueChange={setCytoscapeLayout}>
-          <Select.Trigger
-            aria-label={t('cytoscapeLayout')}
-            className="inline-flex items-center justify-between w-44 h-9 rounded-md px-3 border"
-          >
-            <Select.Value className="text-foreground" />
-            <Select.Icon>
-              <ChevronDownIcon />
-            </Select.Icon>
-          </Select.Trigger>
-          <Select.Portal>
-            <Select.Content
-              position="popper"
-              side="bottom"
-              align="start"
-              sideOffset={6}
-              className="z-50 min-w-(--radix-select-trigger-width) rounded-md border bg-white dark:bg-neutral-900 shadow-md"
-            >
-              <Select.Viewport className="p-1">
-                <Select.Group>
-                  {['breadthfirst', 'circle', 'concentric', 'elk', 'grid'].map(layout => (
-                    <Select.Item
-                      key={layout}
-                      value={layout}
-                      textValue={t(layout)}
-                      className="px-2 py-1.5 rounded hover:bg-neutral-100 dark:hover:bg-neutral-800"
-                    >
-                      <Select.ItemText>{t(layout)}</Select.ItemText>
-                    </Select.Item>
-                  ))}
-                </Select.Group>
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </Setting>
-
-      <h3>
-        {t('settings.layoutSpacing')}: {cytoscapeLayoutSpacing}
-      </h3>
-      {/* Which Cytoscape layout spacing */}
-      <Setting>
-        <Slider.Root
-          id="spacing"
-          min={0.1}
-          max={1}
-          step={0.1}
-          value={[cytoscapeLayoutSpacing]}
-          onValueChange={([v]) => setCytoscapeLayoutSpacing(Number(v.toFixed(1)))}
-          aria-label="Layout spacing"
-          className="relative flex h-5 w-56 touch-none select-none items-center"
-        >
-          <Slider.Track className="relative h-1.5 grow rounded-full bg-neutral-200 dark:bg-neutral-800">
-            <Slider.Range className="absolute h-1.5 rounded-full bg-blue-600 dark:bg-blue-400" />
-          </Slider.Track>
-          <Slider.Thumb className="block h-4 w-4 rounded-full border border-neutral-300 bg-white shadow focus:outline-none focus:ring-2 focus:ring-blue-500 dark:border-neutral-600 dark:bg-neutral-100" />
-        </Slider.Root>
-      </Setting>
-    </div>
-  );
-};
-
-export default dynamic(() => Promise.resolve(Settings), {
-  ssr: false,
-});

package/src/components/ZoomInput.tsx

@@ -1,94 +0,0 @@
-'use client';
-import React, { useEffect, useState } from 'react';
-import { Core } from 'cytoscape';
-import { CircleDotDashedIcon } from 'lucide-react';
-
-interface IZoomInput {
-  readonly cyInstance: Core | null;
-}
-
-export default function ZoomInput({ cyInstance }: IZoomInput) {
-  const [zoom, setZoom] = useState<number>(1);
-  const [minZoom, setMinZoom] = useState<number>(0.1);
-  const [maxZoom, setMaxZoom] = useState<number>(2);
-
-  // Sync initial zoom + bounds + subscribe to zoom events
-  useEffect(() => {
-    if (!cyInstance) return;
-
-    // Initialize from cy
-    setZoom(cyInstance.zoom());
-    setMinZoom(cyInstance.minZoom());
-    setMaxZoom(cyInstance.maxZoom());
-
-    const handleZoom = () => {
-      setZoom(cyInstance.zoom());
-    };
-
-    cyInstance.on('zoom', handleZoom);
-
-    return () => {
-      cyInstance.off('zoom', handleZoom);
-    };
-  }, [cyInstance]);
-
-  // Slider change -> set zoom, anchored at viewport centre
-  const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    if (!cyInstance) return;
-    const level = parseFloat(e.target.value);
-
-    // Clamp to current min/max just in case
-    const clamped = Math.min(maxZoom, Math.max(minZoom, level));
-
-    // Anchor zoom around the canvas centre (in rendered coords)
-    const renderedPosition = {
-      x: cyInstance.width() / 2,
-      y: cyInstance.height() / 2,
-    };
-
-    cyInstance.zoom({ level: clamped, renderedPosition });
-    setZoom(clamped);
-  };
-
-  // Zoom to fit button
-  const handleZoomToFit = () => {
-    if (!cyInstance) return;
-
-    // Fit all elements with a bit of padding
-    cyInstance.fit(undefined, 50);
-
-    const nextZoom = cyInstance.zoom();
-    setZoom(nextZoom);
-    // If you want, you could also refresh min/max here:
-    // setMinZoom(cyInstance.minZoom());
-    // setMaxZoom(cyInstance.maxZoom());
-  };
-
-  return (
-    <div className="p-4 flex items-center justify-center gap-2 border-t border-t-gray-200 dark:border-t-gray-800">
-      <label htmlFor="zoom">Zoom:</label>
-
-      <button
-        type="button"
-        title="Zoom to fit"
-        onClick={handleZoomToFit}
-        className="p-1 rounded hover:bg-gray-100 dark:hover:bg-gray-800"
-      >
-        <CircleDotDashedIcon className="cursor-pointer" />
-      </button>
-
-      <input
-        id="zoom"
-        type="range"
-        min={minZoom}
-        max={maxZoom}
-        step="0.05"
-        value={zoom}
-        onChange={handleSliderChange}
-        className="w-64"
-      />
-
-      <span className="text-sm">{(zoom * 100).toFixed(0)}%</span>
-    </div>
-  );
-}

package/src/components/useCytoscape.ts

@@ -1,343 +0,0 @@
-'use client';
-import { useTheme } from 'next-themes';
-import { useCallback, useEffect, useRef, useState } from 'react';
-
-import cytoscape, {
-  Core,
-  LayoutOptions,
-  type ElementsDefinition,
-  type NodeDefinition,
-  type Layouts,
-} from 'cytoscape';
-
-import { useSettings } from '@/contexts/SettingsContext';
-import { getStyle as getCommonStyle, getCanvasBg } from '@/layouts/style';
-import {
-  getBreadthfirstStyle,
-  getCircleStyle,
-  getConcentricStyle,
-  getElkStyle,
-  getGridStyle,
-} from '@/layouts';
-import { LAYOUTS } from '@/layouts/constants';
-
-import { filterByPackagePrefix } from '@/utils/filter/filterByPackagePrefix';
-import { filterVendorPackages } from '@/utils/filter/filterVendorPackages';
-import { filterEmptyPackages } from '@/utils/filter/filterEmptyPackages';
-import { filterSubPackagesByDepth, getMaxDepth } from '@/utils/filter/filterSubPackagesFromDepth';
-import { toggleCompoundNodes } from '@/utils/filter/toggleCompoundNodes';
-import { hasChildren } from '@/utils/hasChildren';
-
-export function useCytoscape(
-  elements: ElementsDefinition | null,
-  currentPackage: string,
-  setCurrentPackage: (path: string) => void
-) {
-  const cyRef = useRef<HTMLDivElement>(null);
-  const [filteredElements, setFilteredElements] = useState<ElementsDefinition | null>(null);
-  const [cyInstance, setCyInstance] = useState<Core | null>(null);
-
-  // Keep the running layout so we can stop it on swap
-  const layoutRef = useRef<Layouts | null>(null);
-
-  // Refs for latest data so event handlers don't need to be re-created
-  const elementsRef = useRef<ElementsDefinition | null>(null);
-  const filteredElementsRef = useRef<ElementsDefinition | null>(null);
-  elementsRef.current = elements;
-  filteredElementsRef.current = filteredElements;
-
-  const {
-    cytoscapeLayout,
-    cytoscapeLayoutSpacing,
-    showCompoundNodes,
-    showVendorPackages,
-    subPackageDepth,
-    setMaxSubPackageDepth,
-  } = useSettings();
-
-  const { resolvedTheme } = useTheme();
-  const theme = (resolvedTheme === 'dark' ? 'dark' : 'light') as 'dark' | 'light';
-
-  /** 1) Compute filteredElements when inputs change */
-  useEffect(() => {
-    if (!elements) return;
-
-    const afterCompoundNodeFilter = toggleCompoundNodes(
-      elements,
-      showCompoundNodes,
-      currentPackage
-    );
-
-    const afterPkgFilter = filterByPackagePrefix(
-      afterCompoundNodeFilter,
-      currentPackage.replace(/\//g, '.')
-    );
-
-    const afterSubPkgFilter = filterSubPackagesByDepth(afterPkgFilter, true, subPackageDepth);
-
-    const afterVendorPkgFilter = showVendorPackages
-      ? afterSubPkgFilter
-      : filterVendorPackages(afterSubPkgFilter);
-
-    const nonEmptyCurrentPackage = filterEmptyPackages(currentPackage, afterVendorPkgFilter);
-    if (nonEmptyCurrentPackage !== currentPackage) {
-      setCurrentPackage(nonEmptyCurrentPackage);
-      return;
-    }
-
-    const finalElements: ElementsDefinition = {
-      nodes: afterVendorPkgFilter.nodes.map(node => {
-        const label = !currentPackage.length
-          ? node.data.id
-          : node.data.id?.slice(currentPackage.length + 1);
-        return {
-          group: 'nodes',
-          classes: node.classes || '',
-          data: { ...node.data, label },
-        } as NodeDefinition;
-      }),
-      edges: afterVendorPkgFilter.edges,
-    };
-
-    setFilteredElements(finalElements);
-    setMaxSubPackageDepth(getMaxDepth(elements));
-  }, [
-    elements,
-    currentPackage,
-    setCurrentPackage,
-    showCompoundNodes,
-    showVendorPackages,
-    subPackageDepth,
-    setMaxSubPackageDepth,
-  ]);
-
-  /** 2) Helper for layout options */
-  const makeLayoutOpts = useCallback(
-    (name: LayoutOptions['name']): LayoutOptions & { [k: string]: unknown } => ({
-      ...LAYOUTS[name],
-      spacingFactor: cytoscapeLayoutSpacing,
-      nodeDimensionsIncludeLabels: true,
-      fit: true,
-      animate: false,
-      animationDuration: 400,
-    }),
-    [cytoscapeLayoutSpacing]
-  );
-
-  /** 3) Run (or re-run) layout safely; stop any previous instance */
-  const runLayoutSafe = useCallback(
-    (cy: Core, name: LayoutOptions['name']) => {
-      try {
-        layoutRef.current?.stop();
-      } catch {
-        // Ignore
-      }
-      layoutRef.current = null;
-
-      if (!cy || cy.destroyed()) return;
-
-      cy.resize();
-
-      requestAnimationFrame(() => {
-        if (!cy || cy.destroyed()) return;
-
-        const layout = cy.layout(makeLayoutOpts(name));
-        layoutRef.current = layout;
-
-        const onStop = () => {
-          if (cy.destroyed()) return;
-          cy.fit(undefined, 50);
-        };
-        cy.one('layoutstop', onStop);
-
-        layout.run();
-      });
-    },
-    [makeLayoutOpts]
-  );
-
-  /** 4) Init Cytoscape ONCE (step 1 already applied: [] deps) */
-  useEffect(() => {
-    if (!cyRef.current) return;
-
-    const cy = cytoscape({
-      container: cyRef.current,
-      elements: [],
-      hideEdgesOnViewport: true,
-      minZoom: 0.01,
-      maxZoom: 2,
-      selectionType: 'additive',
-      style: getCommonStyle({ nodes: [], edges: [] } as ElementsDefinition, 'light'),
-      userPanningEnabled: true,
-    });
-
-    setCyInstance(cy);
-    cyRef.current.style.background = getCanvasBg('light');
-
-    const handleResize = () => {
-      if (cy.destroyed()) return;
-      cy.fit(undefined, 50);
-    };
-    const observer = new ResizeObserver(() => requestAnimationFrame(handleResize));
-    observer.observe(cyRef.current);
-
-    return () => {
-      try {
-        layoutRef.current?.stop();
-      } catch {
-        // Ignore
-      }
-      layoutRef.current = null;
-
-      observer.disconnect();
-      cy.destroy();
-      setCyInstance(null);
-    };
-  }, []);
-
-  /**
-   * 5) Data Update
-   * - This effect updates the elements and node classes/handlers
-   * - It DOES NOT run layout anymore
-   * - Layout runs only in effect (6) => avoids double layout runs
-   */
-  useEffect(() => {
-    if (!cyInstance || !filteredElements || cyInstance.destroyed()) return;
-
-    cyInstance.batch(() => {
-      cyInstance.elements().remove();
-      cyInstance.add(filteredElements);
-    });
-
-    // Mark parents + dblclick handler based on latest elementsRef
-    cyInstance.nodes().forEach(node => {
-      const rawNode = filteredElementsRef.current?.nodes.find(
-        elm => elm.data.id === node.data().id
-      ) as NodeDefinition | undefined;
-
-      const allNodes = elementsRef.current?.nodes ?? [];
-      node.removeClass('isParent');
-      node.off('dblclick');
-
-      if (!rawNode) return;
-      if (!hasChildren(rawNode, allNodes)) return;
-
-      node.addClass('isParent');
-      node.on('dblclick', () => setCurrentPackage(node.id().replace(/\./g, '/')));
-    });
-  }, [cyInstance, filteredElements, setCurrentPackage]);
-
-  /**
-   * 6) Single Layout Trigger
-   *
-   * Runs when:
-   * - filteredElements changes (new data)
-   * - layout name changes
-   * - spacing changes
-   *
-   * - This is now the ONLY place that calls runLayoutSafe
-   */
-  useEffect(() => {
-    if (!cyInstance || !filteredElements || cyInstance.destroyed()) return;
-    runLayoutSafe(cyInstance, cytoscapeLayout as LayoutOptions['name']);
-  }, [cyInstance, filteredElements, cytoscapeLayout, cytoscapeLayoutSpacing, runLayoutSafe]);
-
-  /** 7) Attach interactive event handlers once (using refs for latest data) */
-  useEffect(() => {
-    if (!cyInstance) return;
-    const cy = cyInstance;
-
-    const updateHighlights = () => {
-      if (cy.destroyed()) return;
-      const selectedNodes = cy.nodes(':selected');
-      const all = cy.elements();
-      all.removeClass('hushed highlight highlight-outgoer highlight-incomer');
-      if (selectedNodes.empty()) return;
-      const keep = selectedNodes.union(selectedNodes.neighborhood());
-      all.difference(keep).addClass('hushed');
-      selectedNodes.addClass('highlight');
-      selectedNodes.outgoers().addClass('highlight-outgoer');
-      selectedNodes.incomers().addClass('highlight-incomer');
-    };
-
-    cy.on('select unselect', 'node', updateHighlights);
-
-    cy.on('mouseover', 'node', event => {
-      if (cy.destroyed()) return;
-      const node = event.target;
-
-      const fe = filteredElementsRef.current;
-      const el = elementsRef.current;
-      const rawNode = fe?.nodes.find(n => n.data.id === node.data().id) as
-        | NodeDefinition
-        | undefined;
-
-      if (rawNode && el && hasChildren(rawNode, el.nodes)) {
-        document.body.style.cursor = 'pointer';
-        if (fe && hasChildren(rawNode, fe.nodes)) return;
-      }
-
-      cy.elements()
-        .subtract(node.outgoers())
-        .subtract(node.incomers())
-        .subtract(node)
-        .addClass('hushed');
-      node.addClass('highlight');
-      node.outgoers().addClass('highlight-outgoer');
-      node.incomers().addClass('highlight-incomer');
-    });
-
-    cy.on('mouseout', 'node', () => {
-      if (cy.destroyed()) return;
-      document.body.style.cursor = 'default';
-      updateHighlights();
-    });
-
-    let highlightDelay: ReturnType<typeof setTimeout>;
-    cy.on('mouseover', 'edge', e => {
-      if (cy.destroyed()) return;
-      const edge = e.target;
-      edge.addClass('highlight-dependency');
-      highlightDelay = setTimeout(() => {
-        if (cy.destroyed()) return;
-        edge.source().addClass('highlight-dependency');
-        edge.target().addClass('highlight-dependency');
-      }, 150);
-    });
-
-    cy.on('mouseout', 'edge', e => {
-      if (cy.destroyed()) return;
-      const edge = e.target;
-      edge.removeClass('highlight-dependency');
-      clearTimeout(highlightDelay);
-      edge.source().removeClass('highlight-dependency');
-      edge.target().removeClass('highlight-dependency');
-    });
-
-    return () => {
-      cy.removeAllListeners?.();
-      document.body.style.cursor = 'default';
-    };
-  }, [cyInstance]);
-
-  /** 8) Theme + layout-style live update */
-  useEffect(() => {
-    if (!cyInstance || !filteredElements || !cyRef.current) return;
-
-    const getLayoutStyle =
-      cytoscapeLayout === 'breadthfirst'
-        ? getBreadthfirstStyle
-        : cytoscapeLayout === 'circle'
-          ? getCircleStyle
-          : cytoscapeLayout === 'elk'
-            ? getElkStyle
-            : cytoscapeLayout === 'grid'
-              ? getGridStyle
-              : getConcentricStyle;
-
-    cyInstance.style([...getCommonStyle(filteredElements, theme), ...getLayoutStyle()]).update();
-    cyRef.current.style.background = getCanvasBg(theme);
-  }, [cyInstance, filteredElements, theme, cytoscapeLayout]);
-
-  return { cyRef, cyInstance };
-}

package/src/layouts/getLayoutStyle.ts

@@ -1,19 +0,0 @@
-import type { LayoutOptions } from 'cytoscape';
-
-import { getStyle as getBreadthfirstStyle } from '@/layouts/breadthfirst/style';
-import { getStyle as getCircleStyle } from '@/layouts/circle/style';
-import { getStyle as getConcentricStyle } from '@/layouts/concentric/style';
-import { getStyle as getGridStyle } from '@/layouts/grid/style';
-
-export function getLayoutStyle(cytoscapeLayout: LayoutOptions['name']) {
-  switch (cytoscapeLayout) {
-    case 'breadthfirst':
-      return getBreadthfirstStyle();
-    case 'circle':
-      return getCircleStyle();
-    case 'concentric':
-      return getConcentricStyle();
-    case 'grid':
-      return getGridStyle();
-  }
-}