@principal-ai/principal-view-react 0.15.6 → 0.15.8

package/src/stories/FileCitySequence.stories.tsx

@@ -161,7 +161,6 @@ export const CacheHitFlow: Story = {
       edges={workflowData.workflows[0].edges}
       height={600}
       layoutOptions={{
-        namespaceStrategy: 'first',
         laneWidth: 200,
         eventSpacing: 80,
       }}
@@ -204,7 +203,6 @@ export const GenerateNewFlow: Story = {
       edges={workflowData.workflows[1].edges}
       height={700}
       layoutOptions={{
-        namespaceStrategy: 'first',
         laneWidth: 200,
         eventSpacing: 80,
       }}
@@ -242,7 +240,6 @@ export const NoFileTreeFlow: Story = {
       edges={workflowData.workflows[2].edges}
       height={600}
       layoutOptions={{
-        namespaceStrategy: 'first',
         laneWidth: 200,
         eventSpacing: 80,
       }}
@@ -281,7 +278,6 @@ export const ErrorFlow: Story = {
       edges={workflowData.workflows[3].edges}
       height={650}
       layoutOptions={{
-        namespaceStrategy: 'first',
         laneWidth: 200,
         eventSpacing: 80,
       }}
@@ -313,7 +309,6 @@ export const ComparisonView: Story = {
             edges={workflowData.workflows[0].edges}
             height={600}
             layoutOptions={{
-              namespaceStrategy: 'first',
               laneWidth: 180,
               eventSpacing: 70,
             }}
@@ -328,7 +323,6 @@ export const ComparisonView: Story = {
             edges={workflowData.workflows[1].edges}
             height={600}
             layoutOptions={{
-              namespaceStrategy: 'first',
               laneWidth: 180,
               eventSpacing: 70,
             }}
@@ -384,7 +378,6 @@ export const AllPathsOverview: Story = {
               edges={workflow.edges}
               height={400}
               layoutOptions={{
-                namespaceStrategy: 'first',
                 laneWidth: 160,
                 eventSpacing: 60,
                 laneGap: 40,
@@ -447,7 +440,6 @@ export const UsingWorkflowWrapper: Story = {
             scenario={scenario}
             height="100%"
             layoutOptions={{
-              namespaceStrategy: 'first',
               laneWidth: 200,
               eventSpacing: 80,
             }}
@@ -466,57 +458,36 @@ export const UsingWorkflowWrapper: Story = {
 };
 
 /**
- * **Interactive Namespace Strategy**
+ * **Interactive Drill-Down**
  *
- * Demonstrates different namespace grouping strategies.
- * Toggle between showing full event namespaces vs collapsed participants.
+ * Lanes default to top-level participants. Use the ▶ chevrons on a lane
+ * header to drill into its sub-namespaces, and ‹ on a child lane to step
+ * back out.
  */
-export const InteractiveNamespaceStrategy: Story = {
+export const InteractiveDrillDown: Story = {
   render: () => {
-    const [strategy, setStrategy] = React.useState<'first' | 'all-but-last'>('first');
+    const [opened, setOpened] = React.useState<string[]>([]);
+
+    const handleToggle = (namespace: string) => {
+      setOpened((prev) =>
+        prev.includes(namespace)
+          ? prev.filter((n) => n !== namespace)
+          : [...prev, namespace]
+      );
+    };
 
     return (
       <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
         <div style={{
           padding: '12px',
           background: '#1e1e1e',
-          borderBottom: '1px solid #3e3e3e'
+          borderBottom: '1px solid #3e3e3e',
+          color: '#d4d4d4',
         }}>
-          <label style={{ marginRight: 16, color: '#d4d4d4' }}>
-            <strong>Namespace Strategy:</strong>
-          </label>
-          <button
-            onClick={() => setStrategy('first')}
-            style={{
-              padding: '8px 16px',
-              marginRight: 8,
-              background: strategy === 'first' ? '#3B82F6' : '#2a2a2a',
-              color: '#d4d4d4',
-              border: '1px solid #3e3e3e',
-              borderRadius: 4,
-              cursor: 'pointer',
-            }}
-          >
-            First Segment (Participants)
-          </button>
-          <button
-            onClick={() => setStrategy('all-but-last')}
-            style={{
-              padding: '8px 16px',
-              background: strategy === 'all-but-last' ? '#3B82F6' : '#2a2a2a',
-              color: '#d4d4d4',
-              border: '1px solid #3e3e3e',
-              borderRadius: 4,
-              cursor: 'pointer',
-            }}
-          >
-            Detailed Namespaces
-          </button>
+          <strong>Opened:</strong>{' '}
+          {opened.length ? opened.join(', ') : 'none (top-level participants)'}
           <p style={{ fontSize: 13, color: '#858585', marginTop: 8, marginBottom: 0 }}>
-            {strategy === 'first'
-              ? 'Showing high-level participants (renderer.*, main.*) - participant-focused view'
-              : 'Showing detailed event namespaces - event-focused view'
-            }
+            ▶ on a lane drills into its sub-namespaces. ‹ on a child lane steps back out.
           </p>
         </div>
         <div style={{ flex: 1 }}>
@@ -525,10 +496,11 @@ export const InteractiveNamespaceStrategy: Story = {
             edges={workflowData.workflows[1].edges}
             height={700}
             layoutOptions={{
-              namespaceStrategy: strategy,
+              openedNamespaces: opened,
               laneWidth: 200,
               eventSpacing: 80,
             }}
+            onToggleNamespace={handleToggle}
           />
         </div>
       </div>
@@ -537,7 +509,7 @@ export const InteractiveNamespaceStrategy: Story = {
   parameters: {
     docs: {
       description: {
-        story: 'Toggle between participant-level and detailed namespace views.',
+        story: 'Drill into participant lanes to reveal their sub-namespaces.',
       },
     },
   },

package/src/stories/SequenceDiagram.stories.tsx

@@ -142,30 +142,14 @@ export const ComplexFlow: Story = {
 };
 
 /**
- * Flow with hierarchical namespaces to test sub-namespace handling
+ * Flow with hierarchical namespaces. By default, lanes group at the first
+ * dotted segment — drill in via `openedNamespaces` (see `WithDrillDown`).
  */
 export const HierarchicalNamespaces: Story = {
   args: {
     events: hierarchicalFlow.events,
     edges: hierarchicalFlow.edges,
     height: 500,
-    layoutOptions: {
-      namespaceStrategy: 'all-but-last',
-    },
-  },
-};
-
-/**
- * Same story but with first-segment namespace strategy
- */
-export const HierarchicalCollapsedToFirst: Story = {
-  args: {
-    events: hierarchicalFlow.events,
-    edges: hierarchicalFlow.edges,
-    height: 500,
-    layoutOptions: {
-      namespaceStrategy: 'first',
-    },
   },
 };
 
@@ -181,14 +165,15 @@ export const SameNamespaceEdges: Story = {
 };
 
 /**
- * Interactive example with collapse toggle
+ * Interactive drill-down. Click ▶ on a lane header to split it into
+ * its sub-namespaces; click ‹ on a child lane to step back out.
  */
-export const WithCollapseToggle: Story = {
+export const WithDrillDown: Story = {
   render: () => {
-    const [collapsed, setCollapsed] = useState<string[]>([]);
+    const [opened, setOpened] = useState<string[]>([]);
 
     const handleToggle = (namespace: string) => {
-      setCollapsed((prev) =>
+      setOpened((prev) =>
         prev.includes(namespace)
           ? prev.filter((n) => n !== namespace)
           : [...prev, namespace]
@@ -198,19 +183,17 @@ export const WithCollapseToggle: Story = {
     return (
       <div>
         <div style={{ marginBottom: 16 }}>
-          <strong>Collapsed namespaces:</strong>{' '}
-          {collapsed.length ? collapsed.join(', ') : 'none'}
+          <strong>Opened namespaces:</strong>{' '}
+          {opened.length ? opened.join(', ') : 'none'}
           <br />
-          <small>Click on lane headers with children to toggle collapse</small>
+          <small>▶ on a lane header drills in. ‹ on a child lane steps back out.</small>
         </div>
         <SequenceDiagramRenderer
           events={hierarchicalFlow.events}
           edges={hierarchicalFlow.edges}
           height={500}
-          layoutOptions={{
-            collapsedNamespaces: collapsed,
-          }}
-          onToggleCollapse={handleToggle}
+          layoutOptions={{ openedNamespaces: opened }}
+          onToggleNamespace={handleToggle}
         />
       </div>
     );

package/src/stories/WorkflowSequenceDiagram.stories.tsx

@@ -278,7 +278,6 @@ export const ClickDiagnostic: Story = {
             selectedEventIndex={selectedIndex}
             onEventIndexChange={handleClick}
             layoutOptions={{
-              namespaceStrategy: 'first',
               eventSpacing: 100,
             }}
           />
@@ -296,7 +295,6 @@ export const BasicScenario: Story = {
     scenario: simpleAuthScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
     },
   },
@@ -311,7 +309,6 @@ export const WithCanvasMetadata: Story = {
     canvas: sampleCanvas,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
     },
   },
@@ -325,7 +322,6 @@ export const ComplexWorkflow: Story = {
     scenario: orderProcessingScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       laneWidth: 200,
       eventSpacing: 70,
     },
@@ -340,7 +336,6 @@ export const MicroservicesPattern: Story = {
     scenario: microservicesScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       laneWidth: 220,
       eventSpacing: 75,
     },
@@ -355,7 +350,6 @@ export const ErrorHandling: Story = {
     scenario: errorHandlingScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
     },
   },
@@ -380,7 +374,6 @@ export const LongSwimlaneTitles: Story = {
     scenario: longTitlesScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
       headerHeight: 100,
     },
@@ -449,7 +442,6 @@ export const WithEventSelection: Story = {
             selectedEventIndex={selectedIndex}
             onEventIndexChange={setSelectedIndex}
             layoutOptions={{
-              namespaceStrategy: 'first',
               eventSpacing: 80,
               nodeWidth: 14,
               nodeHeight: 14,
@@ -508,7 +500,6 @@ export const InteractiveSelection: Story = {
             selectedEventIndex={selectedIndex}
             onEventIndexChange={setSelectedIndex}
             layoutOptions={{
-              namespaceStrategy: 'first',
               eventSpacing: 80,
             }}
           />
@@ -553,7 +544,6 @@ export const EdgeLabelsVsNodeLabels: Story = {
               onEventIndexChange={setSelectedLeft}
               showEventLabels={false}
               layoutOptions={{
-                namespaceStrategy: 'first',
                 eventSpacing: 100,
               }}
             />
@@ -583,7 +573,6 @@ export const EdgeLabelsVsNodeLabels: Story = {
               onEventIndexChange={setSelectedRight}
               showEventLabels={true}
               layoutOptions={{
-                namespaceStrategy: 'first',
                 eventSpacing: 100,
                 nodeWidth: 80,
                 nodeHeight: 50,
@@ -597,34 +586,38 @@ export const EdgeLabelsVsNodeLabels: Story = {
 };
 
 /**
- * Comparison of different namespace strategies
+ * Comparison of default lanes vs fully-drilled lanes
  */
-export const NamespaceStrategies: Story = {
+export const DefaultVsDrilled: Story = {
   render: () => {
+    const allTopSegments = Array.from(
+      new Set(
+        Object.keys(orderProcessingScenario.template.events ?? {})
+          .map((name) => name.split('.')[0])
+          .filter(Boolean)
+      )
+    );
+
     return (
       <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', height: '100%', gap: 16 }}>
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <h3 style={{ margin: '0 0 12px 0' }}>First Segment (Participants)</h3>
+          <h3 style={{ margin: '0 0 12px 0' }}>Default (top-level lanes)</h3>
           <div style={{ flex: 1, border: '1px solid #ddd', borderRadius: 4 }}>
             <WorkflowSequenceDiagram
               scenario={orderProcessingScenario}
               height="100%"
-              layoutOptions={{
-                namespaceStrategy: 'first',
-                laneWidth: 180,
-                eventSpacing: 60,
-              }}
+              layoutOptions={{ laneWidth: 180, eventSpacing: 60 }}
             />
           </div>
         </div>
         <div style={{ display: 'flex', flexDirection: 'column' }}>
-          <h3 style={{ margin: '0 0 12px 0' }}>All But Last (Detailed)</h3>
+          <h3 style={{ margin: '0 0 12px 0' }}>All top-level lanes drilled</h3>
           <div style={{ flex: 1, border: '1px solid #ddd', borderRadius: 4 }}>
             <WorkflowSequenceDiagram
               scenario={orderProcessingScenario}
               height="100%"
               layoutOptions={{
-                namespaceStrategy: 'all-but-last',
+                openedNamespaces: allTopSegments,
                 laneWidth: 180,
                 eventSpacing: 60,
               }}
@@ -644,7 +637,6 @@ export const CompactLayout: Story = {
     scenario: simpleAuthScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       laneWidth: 150,
       laneGap: 30,
       eventSpacing: 50,
@@ -660,7 +652,6 @@ export const SpaciousLayout: Story = {
     scenario: simpleAuthScenario,
     height: '100%',
     layoutOptions: {
-      namespaceStrategy: 'first',
       laneWidth: 250,
       laneGap: 100,
       eventSpacing: 120,
@@ -677,7 +668,6 @@ export const WithoutControls: Story = {
     height: '100%',
     showControls: false,
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
     },
   },
@@ -692,7 +682,6 @@ export const WithBackground: Story = {
     height: '100%',
     showBackground: true,
     layoutOptions: {
-      namespaceStrategy: 'first',
       eventSpacing: 80,
     },
   },
@@ -802,7 +791,6 @@ export const FullFeatured: Story = {
             showControls={showControls}
             showBackground={showBackground}
             layoutOptions={{
-              namespaceStrategy: 'first',
               laneWidth: 200,
               eventSpacing: 70,
             }}