Merge pull request #945 from jupyter-naas/refactor-sidebar

Refactor sidebar

Author: FlorentRvl

.gitignore

@@ -136,3 +136,4 @@ website/build
 .pnpm-store/
 node_modules/
 
+CLAUDE.md

libs/naas-abi-marketplace/uv.lock

@@ -1,7 +1,18 @@
+const path = require('path');
+
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
   transpilePackages: ['@nexus/ui', '@embedpdf/snippet'],
+  webpack(config) {
+    // pnpm's strict package isolation stops webpack from resolving this ESM-only
+    // package through normal module lookup; point it directly to the bundle file.
+    config.resolve.alias['@embedpdf/snippet'] = path.resolve(
+      __dirname,
+      'node_modules/@embedpdf/snippet/dist/embedpdf.js'
+    );
+    return config;
+  },
   async rewrites() {
     return [
       {

libs/naas-abi/naas_abi/apps/nexus/apps/web/next.config.js

@@ -539,8 +539,8 @@ export default function GraphPage() {
     edges: GraphEdge[];
   }>>([]);
 
-  // Relations filter — on by default
-  const [showRelations, setShowRelations] = useState(true);
+  // Relations filter — off by default
+  const [showRelations, setShowRelations] = useState(false);
 
   // Increment to trigger physics re-layout in VisNetwork
   const [stabilizeKey, setStabilizeKey] = useState(0);
@@ -2261,7 +2261,9 @@ export default function GraphPage() {
                   <div className="flex h-full items-center justify-center">
                     <div className="flex items-center gap-2 text-muted-foreground">
                       <Loader2 size={20} className="animate-spin" />
-                      <span>Loading NEXUS Knowledge Graph...</span>
+                      <span>
+                        Loading {graphOptions.find((g) => g.id === selectedGraphId)?.name ?? 'Knowledge Graph'}…
+                      </span>
                     </div>
                   </div>
                 ) : error ? (
@@ -2322,6 +2324,7 @@ export default function GraphPage() {
                       onNodeSelect={setSelectedNodeId}
                       onEdgeSelect={setSelectedEdgeId}
                       stabilizeKey={stabilizeKey}
+                      layoutDirection={showRelations ? undefined : 'LR'}
                     />
                     {filteredNodes.length > 0 && (
                       <div className="absolute bottom-4 left-4 z-10 flex flex-col gap-1.5 rounded-lg border bg-card/95 px-3 py-2 shadow-lg backdrop-blur-sm w-52">

libs/naas-abi/naas_abi/apps/nexus/apps/web/src/app/workspace/[workspaceId]/graph/page.tsx

@@ -132,6 +132,79 @@ const LR_NODE_SLOT   = 110; // px per leaf slot in cross-axis (y)
 const TD_LEVEL_GAP   = 180; // px between depth levels  (main axis = y)
 const TD_NODE_SLOT   = 168; // px per leaf slot in cross-axis (x)
 
+// Bucket grid layout constants (flat / no-edge case)
+const GRID_BUCKET_ORDER = [
+  'Material Entity', 'Process', 'Quality', 'Realizable',
+  'Temporal Region', 'Site', 'GDC', 'Unknown',
+];
+const GRID_ZONE_COLS    = 3;    // bucket zones per row
+const GRID_ZONE_W       = 1400; // px between bucket zone centres (x)
+const GRID_ZONE_H       = 900;  // px between bucket zone centres (y)
+const GRID_NODE_W       = 240;  // horizontal node spacing within a zone
+const GRID_NODE_H       = 160;  // vertical node spacing within a zone
+const GRID_NODES_PER_ROW = 5;   // nodes per row inside a zone
+
+/**
+ * 2-D bucket grid layout used when no is_a edges exist.
+ * Zones are arranged in a GRID_ZONE_COLS-column grid; nodes within each zone
+ * are arranged in rows of GRID_NODES_PER_ROW, sorted alphabetically.
+ */
+function computeBucketGridPositions(
+  nodes: GraphNode[],
+  nodesById: Map<string, GraphNode>,
+): Map<string, { x: number; y: number }> {
+  const byBucket = new Map<string, string[]>();
+  for (const node of nodes) {
+    const bucket = resolveNodeBucketKey(node, nodesById);
+    const list = byBucket.get(bucket) ?? [];
+    list.push(node.id);
+    byBucket.set(bucket, list);
+  }
+
+  for (const [, ids] of byBucket) {
+    ids.sort((a, b) =>
+      (nodesById.get(a)?.label ?? a).localeCompare(nodesById.get(b)?.label ?? b)
+    );
+  }
+
+  const activeBuckets = [
+    ...GRID_BUCKET_ORDER.filter((b) => byBucket.has(b)),
+    ...Array.from(byBucket.keys()).filter((b) => !GRID_BUCKET_ORDER.includes(b)),
+  ];
+
+  const positions = new Map<string, { x: number; y: number }>();
+
+  activeBuckets.forEach((bucket, zoneIdx) => {
+    const ids = byBucket.get(bucket) ?? [];
+    const zoneCol = zoneIdx % GRID_ZONE_COLS;
+    const zoneRow = Math.floor(zoneIdx / GRID_ZONE_COLS);
+    const zoneOriginX = zoneCol * GRID_ZONE_W;
+    const zoneOriginY = zoneRow * GRID_ZONE_H;
+    const cols = GRID_NODES_PER_ROW;
+    const usedW = (Math.min(ids.length, cols) - 1) * GRID_NODE_W;
+    const usedH = (Math.ceil(ids.length / cols) - 1) * GRID_NODE_H;
+
+    ids.forEach((id, i) => {
+      positions.set(id, {
+        x: zoneOriginX - usedW / 2 + (i % cols) * GRID_NODE_W,
+        y: zoneOriginY - usedH / 2 + Math.floor(i / cols) * GRID_NODE_H,
+      });
+    });
+  });
+
+  if (positions.size > 0) {
+    const xs = Array.from(positions.values()).map((p) => p.x);
+    const ys = Array.from(positions.values()).map((p) => p.y);
+    const cx = (Math.min(...xs) + Math.max(...xs)) / 2;
+    const cy = (Math.min(...ys) + Math.max(...ys)) / 2;
+    for (const [id, pos] of positions) {
+      positions.set(id, { x: pos.x - cx, y: pos.y - cy });
+    }
+  }
+
+  return positions;
+}
+
 // Resolve a stable bucket key for a node (used to sort / group siblings)
 function resolveNodeBucketKey(
   node: GraphNode,
@@ -179,6 +252,11 @@ function computeHierarchicalPositions(
   const nodeIds    = new Set(nodes.map((n) => n.id));
   const isaEdges   = edges.filter((e) => e.properties?.relation_kind === 'is_a');
 
+  // Flat case: no is_a edges → use the 2-D bucket grid instead of a 1-D tree row.
+  if (isaEdges.length === 0) {
+    return computeBucketGridPositions(nodes, nodesById);
+  }
+
   // ── 1. Build tree ──────────────────────────────────────────────────────────
   const childrenOf = new Map<string, string[]>();
   const parentOf   = new Map<string, string>();

libs/naas-abi/naas_abi/apps/nexus/apps/web/src/components/graph/vis-network.tsx

@@ -6,7 +6,7 @@ import { useWorkspaceStore } from '@/stores/workspace';
 import { CollapsibleSection } from './collapsible-section';
 import { getWorkspacePath } from './utils';
 
-export function AppsSection({ collapsed }: { collapsed: boolean }) {
+export function AppsSection({ collapsed, detailOnly }: { collapsed: boolean; detailOnly?: boolean }) {
   const { currentWorkspaceId } = useWorkspaceStore();
 
   return (
@@ -17,6 +17,7 @@ export function AppsSection({ collapsed }: { collapsed: boolean }) {
       description="Extensions and integrations"
       href={getWorkspacePath(currentWorkspaceId, '/apps')}
       collapsed={collapsed}
+      detailOnly={detailOnly}
     >
       <button
         className={cn(

libs/naas-abi/naas_abi/apps/nexus/apps/web/src/components/shell/sidebar/apps-section.tsx

@@ -220,7 +220,7 @@ const ProjectGroup = React.memo(function ProjectGroup({
   );
 });
 
-export function ChatSection({ collapsed }: { collapsed: boolean }) {
+export function ChatSection({ collapsed, detailOnly }: { collapsed: boolean; detailOnly?: boolean }) {
   const router = useRouter();
   const pathname = usePathname();
   const [agentsExpanded, setAgentsExpanded] = useState(true);
@@ -291,6 +291,7 @@ export function ChatSection({ collapsed }: { collapsed: boolean }) {
       description="Interact with ABI-powered agents"
       href={getWorkspacePath(currentWorkspaceId, '/chat')}
       collapsed={collapsed}
+      detailOnly={detailOnly}
       onNavigate={() => setActiveConversation(null)}
     >
       {/* New Chat button */}

libs/naas-abi/naas_abi/apps/nexus/apps/web/src/components/shell/sidebar/chat-section.tsx

@@ -16,6 +16,7 @@ export interface SectionProps {
   href: string;
   collapsed: boolean;
   suppressActiveHighlight?: boolean;
+  detailOnly?: boolean;
   children?: React.ReactNode;
   onAdd?: () => void;
   onNavigate?: () => void;
@@ -29,20 +30,26 @@ export function CollapsibleSection({
   href,
   collapsed,
   suppressActiveHighlight = false,
+  detailOnly = false,
   children,
   onAdd,
   onNavigate,
 }: SectionProps) {
   const pathname = usePathname();
   const { expandedSections, toggleSection, sidebarCollapsed, toggleSidebar } = useWorkspaceStore();
   const isExpanded = expandedSections.includes(id);
-  const isActive = pathname.startsWith(href);
-  const hasChildren = Boolean(children);
-  const showSectionActive = isActive && !suppressActiveHighlight;
   const [showTooltip, setShowTooltip] = useState(false);
   const [tooltipPosition, setTooltipPosition] = useState({ top: 0, left: 0 });
   const sectionRef = useRef<HTMLDivElement>(null);
 
+  if (detailOnly) {
+    return <div className="space-y-0.5">{children}</div>;
+  }
+
+  const isActive = pathname.startsWith(href);
+  const hasChildren = Boolean(children);
+  const showSectionActive = isActive && !suppressActiveHighlight;
+
   const handleIconClick = (e: React.MouseEvent) => {
     if (collapsed && sidebarCollapsed) {
       e.preventDefault();

libs/naas-abi/naas_abi/apps/nexus/apps/web/src/components/shell/sidebar/collapsible-section.tsx

@@ -9,7 +9,7 @@ import { useWorkspaceStore } from '@/stores/workspace';
 import { CollapsibleSection } from './collapsible-section';
 import { getWorkspacePath } from './utils';
 
-export function FilesSection({ collapsed }: { collapsed: boolean }) {
+export function FilesSection({ collapsed, detailOnly }: { collapsed: boolean; detailOnly?: boolean }) {
   const router = useRouter();
   const { currentWorkspaceId } = useWorkspaceStore();
   const {
@@ -29,6 +29,7 @@ export function FilesSection({ collapsed }: { collapsed: boolean }) {
       description="Workspace file storage"
       href={getWorkspacePath(currentWorkspaceId, '/files')}
       collapsed={collapsed}
+      detailOnly={detailOnly}
     >
       {/* Local section */}
       <div className="space-y-0.5">