pkgviz 0.7.2 → 0.7.3

package/src/layouts/elk/layout.ts

@@ -0,0 +1,55 @@
+import cytoscape from 'cytoscape';
+import elk from 'cytoscape-elk';
+cytoscape.use(elk as cytoscape.Ext);
+
+type ElkLayoutOptions = cytoscape.BaseLayoutOptions &
+  cytoscape.AnimatedLayoutOptions & {
+    readonly name: 'elk';
+    readonly animate: boolean;
+    readonly animateFilter: (node: cytoscape.NodeSingular, i: number) => boolean;
+    readonly animationDuration: number;
+    readonly animationEasing: string | undefined;
+    readonly fit: boolean;
+    readonly nodeDimensionsIncludeLabels: boolean;
+    readonly nodeLayoutOptions?: (node: cytoscape.NodeSingular) => Record<string, unknown> | void;
+    readonly elk: Record<string, unknown>;
+    readonly priority: (edge: cytoscape.EdgeSingular) => number | null;
+    readonly padding?: number;
+  };
+
+/***
+ * @url https://eclipse.dev/elk/reference/algorithms/org-eclipse-elk-layered.html
+ */
+export const layout: ElkLayoutOptions = {
+  name: 'elk',
+
+  /***
+   * @url http://www.eclipse.org/elk/reference.html
+   * @info Drop prefix from options name, e.g. org.eclipse.elk.direction becomes elk.direction
+   * @info Enums use the name of the enum as string Direction.DOWN becomes elk.direction: 'DOWN'
+   */
+  elk: {
+    algorithm: 'layered',
+    'elk.direction': 'DOWN',
+    'elk.hierarchyHandling': 'INCLUDE_CHILDREN',
+  },
+  animate: true, // Whether to transition the node positions
+  animateFilter: function (/* node, i */) {
+    return true;
+  }, // Whether to animate specific nodes when animation is on; non-animated nodes immediately go to their final positions
+  animationDuration: 500, // Duration of animation in ms if enabled
+  animationEasing: undefined, // Easing of animation if enabled
+
+  fit: true, // Whether to fit
+  nodeDimensionsIncludeLabels: false, // Boolean which changes whether label dimensions are included when calculating node dimensions
+  nodeLayoutOptions: undefined, // Per-node options function
+  // padding: 20, // Padding on fit
+  transform: function (_node, pos) {
+    return pos;
+  }, // A function that applies a transform to the final node position
+  ready: undefined, // Callback on layoutready
+  stop: undefined, // Callback on layoutstop
+  priority: function (/* edge */) {
+    return null;
+  }, // Edges with a non-nil value are skipped when geedy edge cycle breaking is enabled
+};

package/src/layouts/elk/style.ts

@@ -0,0 +1,14 @@
+import type { StylesheetJson } from 'cytoscape';
+
+export function getStyle() {
+  const style: StylesheetJson = [
+    {
+      selector: 'node',
+      style: {
+        'edge-distances': 'intersection', // 'node-position',
+      },
+    },
+  ];
+
+  return style;
+}

package/src/layouts/getLayoutStyle.ts

@@ -0,0 +1,19 @@
+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();
+  }
+}

package/src/layouts/getWeightBuckets.ts

@@ -0,0 +1,58 @@
+import type { ElementsDefinition } from 'cytoscape';
+
+export function getWeightBuckets(
+  categoryCount: number,
+  algorithm: 'linear' | 'log' | 'quantile' = 'linear',
+  filteredElements: ElementsDefinition
+) {
+  if (!filteredElements) return { thresholds: [], counts: [] };
+
+  const weights = filteredElements.edges.map(e => Number(e.data.weight));
+  const max = getMaxEdgeWeight(filteredElements);
+
+  const thresholds: number[] = [];
+  const counts = new Array(categoryCount).fill(0);
+
+  if (algorithm === 'linear') {
+    for (let i = 1; i < categoryCount; i++) {
+      thresholds.push((i * max) / categoryCount);
+    }
+    thresholds.push(max);
+  } else if (algorithm === 'log') {
+    const logMax = Math.log(max);
+    for (let i = 1; i < categoryCount; i++) {
+      thresholds.push(Math.exp((i * logMax) / categoryCount));
+    }
+    thresholds.push(max);
+  } else if (algorithm === 'quantile') {
+    const sorted = [...weights].sort((a, b) => a - b);
+    for (let i = 1; i < categoryCount; i++) {
+      const qIndex = Math.floor((i * sorted.length) / categoryCount);
+      thresholds.push(sorted[qIndex]);
+    }
+    thresholds.push(max);
+  }
+
+  // Count how many weights fall into each bucket
+  weights.forEach(w => {
+    for (let i = 0; i < thresholds.length; i++) {
+      if (w <= thresholds[i]) {
+        counts[i]++;
+        break;
+      }
+    }
+  });
+
+  return {
+    thresholds: thresholds.map(Math.round),
+    counts,
+  };
+}
+
+export function getMaxEdgeWeight(filteredElements: ElementsDefinition) {
+  return (
+    filteredElements?.edges.reduce((max, edge) => {
+      return edge.data.weight > max ? edge.data.weight : max;
+    }, 0) ?? 0
+  );
+}

package/src/layouts/grid/layout.ts

@@ -0,0 +1,11 @@
+import type { GridLayoutOptions, NodeSingular } from 'cytoscape';
+
+export const layout: GridLayoutOptions = {
+  name: 'grid',
+  // fit: true,
+  // padding: 30, // Add some space around the graph
+  avoidOverlap: true,
+
+  // Sort nodes alphabetically by their ID
+  sort: (a: NodeSingular, b: NodeSingular) => a.data('id').localeCompare(b.data('id')),
+};

package/src/layouts/grid/style.ts

@@ -0,0 +1,20 @@
+import type { StylesheetJson } from 'cytoscape';
+
+export function getStyle() {
+  const style: StylesheetJson = [
+    {
+      selector: 'node',
+      style: {
+        shape: 'rectangle',
+      },
+    },
+    {
+      selector: 'edge',
+      style: {
+        'text-margin-x': 0, // Reset text margins for straight lines
+        'text-margin-y': 0,
+      },
+    },
+  ];
+  return style;
+}

package/src/layouts/index.ts

@@ -0,0 +1,14 @@
+export { layout as breadthfirstLayout } from '@/layouts/breadthfirst/layout';
+export { getStyle as getBreadthfirstStyle } from '@/layouts/breadthfirst/style';
+
+export { layout as circleLayout } from '@/layouts/circle/layout';
+export { getStyle as getCircleStyle } from '@/layouts/circle/style';
+
+export { layout as concentricLayout } from '@/layouts/concentric/layout';
+export { getStyle as getConcentricStyle } from '@/layouts/concentric/style';
+
+export { layout as elkLayout } from '@/layouts/elk/layout';
+export { getStyle as getElkStyle } from '@/layouts/elk/style';
+
+export { layout as gridLayout } from '@/layouts/grid/layout';
+export { getStyle as getGridStyle } from '@/layouts/grid/style';

package/src/layouts/style.ts

@@ -0,0 +1,191 @@
+import type { ElementsDefinition, NodeSingular, StylesheetJson } from 'cytoscape';
+
+import { getWeightBuckets } from '@/layouts/getWeightBuckets';
+
+export type ThemeKey = 'dark' | 'light';
+
+const palette = {
+  light: {
+    canvasBg: '#ffffff',
+    // edge: '#9E9E9E',
+    edge: '#000',
+    weightXs: '#000',
+    weightMd: '#000',
+    weightXl: '#000',
+
+    nodeBg: '#E8F1FF',
+    nodeBorder: '#0B5FFF',
+    nodeBorderVendor: '#E2D5FF',
+    nodeBgVendor: '#D1C4FF',
+    nodeText: '#0B5FFF',
+
+    selectedFill: '#0B5FFF',
+    selectedFillVendor: '#a025aa',
+    selectedRing: '#0B5FFF',
+    selectedText: '#FFF',
+  },
+  dark: {
+    canvasBg: '#171717',
+    edge: '#707070',
+    weightXs: '#5A5A5A',
+    weightMd: '#8A8A8A',
+    weightXl: '#C0C0C0',
+
+    nodeBg: '#1E2533',
+    nodeBgVendor: '#241431',
+    nodeBorder: '#2A3A4A',
+    nodeBorderVendor: '#351542',
+    nodeText: '#E8F0FF',
+
+    selectedFill: '#2E6FFF',
+    selectedFillVendor: '#4E25AA',
+    selectedRing: '#BBD3FF',
+    selectedText: '#FFFFFF',
+  },
+} as const;
+
+export const getCanvasBg = (theme: ThemeKey) => palette[theme].canvasBg;
+
+export function getStyle(filteredElements: ElementsDefinition, theme: ThemeKey): StylesheetJson {
+  const colors = palette[theme];
+  const { thresholds } = getWeightBuckets(3, 'linear', filteredElements);
+
+  return [
+    {
+      selector: 'node',
+      style: {
+        shape: 'bottom-round-rectangle',
+        'background-color': colors.nodeBg,
+        'border-color': colors.nodeBorder,
+        color: colors.nodeText,
+        label: 'data(name)',
+        'text-valign': 'center',
+        'text-halign': 'center',
+        width: (node: NodeSingular) => {
+          return node.data('name').length * 7;
+        },
+        height: (node: NodeSingular) => {
+          return node.height() / 2 + 10;
+        },
+        padding: '8px 8px',
+        'border-width': 1,
+        'font-size': '14px',
+        'overlay-opacity': 0, // avoid gray overlay
+      },
+    },
+    {
+      selector: 'node.isVendor',
+      style: {
+        'background-color': colors.nodeBgVendor,
+      },
+    },
+    { selector: 'node.packageCycle', style: { 'border-color': '#d80303', 'border-width': 3 } },
+    { selector: 'node.isParent', style: { 'font-weight': 'bold' } },
+    {
+      selector: 'node:selected',
+      style: {
+        'background-color': colors.selectedFill,
+        'border-color': colors.selectedRing,
+        'border-width': 3,
+        color: colors.selectedText,
+        'background-opacity': 1,
+        opacity: 1,
+        'overlay-opacity': 0,
+      },
+    },
+    {
+      selector: 'node.isVendor:selected',
+      style: { 'background-color': colors.selectedFillVendor },
+    },
+    {
+      selector: 'node:parent, node:parent:selected',
+      style: {
+        'background-opacity': 0.3,
+        'background-color': colors.selectedFill,
+        color: colors.nodeText,
+        'border-width': 2,
+        'border-color': colors.nodeBorder,
+        'text-valign': 'top',
+        'text-margin-y': -5,
+        padding: '10px',
+        'padding-top': '20px',
+        'text-halign': 'center',
+        'font-size': 14,
+        'font-weight': 'bold',
+        'font-style': 'italic',
+        label: 'data(name)',
+      },
+    },
+    {
+      selector: 'node:parent.isVendor, node:parent.isVendor:selected',
+      style: {
+        'background-color': colors.nodeBgVendor,
+        'border-color': colors.nodeBorderVendor,
+      },
+    },
+    {
+      selector: 'edge',
+      style: {
+        'arrow-scale': 1,
+        'target-arrow-color': colors.edge,
+        'target-arrow-shape': 'chevron',
+        'target-arrow-fill': 'filled',
+        'line-color': colors.edge,
+        'curve-style': 'straight',
+        opacity: 1,
+        'line-opacity': 1,
+      },
+    },
+    {
+      selector: 'edge.hushed',
+      style: {
+        opacity: 0.04,
+      },
+    },
+    {
+      selector: 'edge.highlight-outgoer, edge.highlight-incomer, edge.highlight-dependency',
+      style: {
+        opacity: 1,
+        'line-opacity': 1,
+        width: 4,
+        'line-color': colors.weightXl,
+        'target-arrow-color': colors.weightXl,
+        'source-arrow-color': colors.weightXl,
+      },
+    },
+    { selector: 'edge[weight <= 1]', style: { label: '' } },
+    {
+      selector: `edge[weight > 1][weight <= ${thresholds[0]}]`,
+      style: {
+        width: 1,
+        'line-color': colors.weightXs,
+        'target-arrow-color': colors.weightXs,
+      },
+    },
+    {
+      selector: `edge[weight > ${thresholds[0]}][weight <= ${thresholds[1]}]`,
+      style: {
+        width: 4,
+        'arrow-scale': 2,
+        'line-color': colors.weightMd,
+        'target-arrow-color': colors.weightMd,
+      },
+    },
+    {
+      selector: `edge[weight > ${thresholds[1]}]`,
+      style: {
+        width: 8,
+        'line-color': colors.weightXl,
+        'target-arrow-color': colors.weightXl,
+      },
+    },
+    {
+      selector: 'edge.packageCycle',
+      style: { 'line-color': '#d80303', 'target-arrow-color': '#d80303' },
+    },
+    {
+      selector: 'edge.packageCycle',
+      style: { 'line-color': '#d80303', 'target-arrow-color': '#d80303' },
+    },
+  ];
+}

package/src/screens/home/Home.tsx

@@ -0,0 +1,48 @@
+'use client';
+import type { ElementsDefinition } from 'cytoscape';
+
+import { useEffect, useState } from 'react';
+import { getGraphAction } from '@/app/actions/graph.actions';
+import Breadcrumb from '@/components/Breadcrumb';
+import Header from '@/components/Header';
+import Loader from '@/components/Loader';
+import Settings from '@/components/Settings';
+import { Cytoscape } from '@/components/Cytoscape';
+import { SettingsProvider } from '@/contexts/SettingsContext';
+
+export default function HomeScreen() {
+  const [currentPackage, setCurrentPackage] = useState<string>('');
+  const [packageGraph, setPackageGraph] = useState<ElementsDefinition | null>(null);
+
+  useEffect(() => {
+    if (!packageGraph) {
+      getGraphAction().then(setPackageGraph);
+    }
+  }, [packageGraph]);
+
+  return (
+    <>
+      <Header title="nav.packages">
+        <Breadcrumb
+          path={currentPackage.replace(/\./g, '/')}
+          onNavigate={(path: string) => setCurrentPackage(path.replace(/\//g, '.'))}
+        />
+      </Header>
+
+      <SettingsProvider>
+        <main data-testid="main" className="flex flex-1 flex-row dark:bg-[#171717]">
+          <Settings />
+          {packageGraph ? (
+            <Cytoscape
+              currentPackage={currentPackage}
+              setCurrentPackage={setCurrentPackage}
+              packageGraph={packageGraph}
+            />
+          ) : (
+            <Loader />
+          )}
+        </main>
+      </SettingsProvider>
+    </>
+  );
+}

package/src/shared/constants/index.ts

@@ -0,0 +1,7 @@
+////////////////////////////////////////////////////////////////////////////
+// Shared Constants
+
+/**
+ * Java source root directory
+ */
+export const JAVA_ROOT = 'src/main/java';

package/src/shared/types/index.ts

@@ -0,0 +1,68 @@
+///////////////////////////////////////////////////////////////////////////
+// Language Detection Types
+
+/**
+ * List of supported coding languages
+ */
+export enum Language {
+  Cpp = 'cpp',
+  Delphi = 'delphi',
+  JavaScript = 'javascript',
+  Kotlin = 'kotlin',
+  Python = 'python',
+  TypeScript = 'typescript',
+  Java = 'java',
+  Unknown = 'unknown',
+}
+
+/**
+ * Language Detection Result
+ */
+export interface LanguageDetectionResult {
+  language: Language;
+  confidence: number;
+  indicators: string[];
+}
+
+//////////////////////////////////////////////////////////////////////////
+// Parser Types
+
+export interface ParsedFile {
+  readonly calls: MethodCall[];
+  readonly className: string;
+  readonly imports: ImportDefinition[];
+  readonly methods: MethodDefinition[];
+  readonly package: string;
+  readonly path: string; // Relative path from project root
+}
+
+export interface ParsedDirectory {
+  [k: string]: ParsedDirectory | ParsedFile;
+}
+
+/**
+ * Method Definition
+ */
+export interface MethodDefinition {
+  readonly name: string;
+  readonly returnType: string;
+  readonly parameters: string[];
+  readonly visibility: 'public' | 'protected' | 'private' | 'default';
+}
+
+/**
+ * Method Call
+ */
+export interface MethodCall {
+  readonly callee: string;
+  readonly method: string;
+}
+
+/**
+ * Import Definition
+ */
+export interface ImportDefinition {
+  readonly name: string;
+  readonly pkg: string;
+  readonly isIntrinsic?: boolean;
+}