@principal-ai/subsystems-react 0.20.6 → 0.21.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +1 -1
- package/dist/graphify/anchor.d.ts +17 -0
- package/dist/graphify/anchor.d.ts.map +1 -1
- package/dist/graphify/anchor.js +41 -0
- package/dist/graphify/anchor.js.map +1 -1
- package/dist/graphify/consolidated.d.ts +40 -1
- package/dist/graphify/consolidated.d.ts.map +1 -1
- package/dist/index.d.ts +5 -5
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +2 -2
- package/dist/index.js.map +1 -1
- package/dist/pierre/{PierreThroughlineCodeView.d.ts → PierreWalkthroughCodeView.d.ts} +7 -7
- package/dist/pierre/{PierreThroughlineCodeView.d.ts.map → PierreWalkthroughCodeView.d.ts.map} +1 -1
- package/dist/pierre/{PierreThroughlineCodeView.js → PierreWalkthroughCodeView.js} +28 -36
- package/dist/pierre/PierreWalkthroughCodeView.js.map +1 -0
- package/dist/pierre/index.d.ts +2 -2
- package/dist/pierre/index.js +1 -1
- package/dist/pierre/pierreFileLang.d.ts +1 -1
- package/dist/pierre/pierreFileLang.js +1 -1
- package/dist/stories/Subsystem/ComponentGraph/fixtures.d.ts +14 -2
- package/dist/stories/Subsystem/ComponentGraph/fixtures.d.ts.map +1 -1
- package/dist/stories/Subsystem/ComponentGraph/fixtures.js +86 -20
- package/dist/stories/Subsystem/ComponentGraph/fixtures.js.map +1 -1
- package/dist/subsystem/FileDrawer.d.ts +2 -2
- package/dist/subsystem/FileDrawer.js +2 -2
- package/dist/subsystem/SubsystemComponentGraph.d.ts +25 -24
- package/dist/subsystem/SubsystemComponentGraph.d.ts.map +1 -1
- package/dist/subsystem/SubsystemComponentGraph.js +204 -199
- package/dist/subsystem/SubsystemComponentGraph.js.map +1 -1
- package/dist/subsystem/formatDeclaration.d.ts +2 -1
- package/dist/subsystem/formatDeclaration.d.ts.map +1 -1
- package/dist/subsystem/formatDeclaration.js +57 -33
- package/dist/subsystem/formatDeclaration.js.map +1 -1
- package/dist/subsystem/model.d.ts +85 -35
- package/dist/subsystem/model.d.ts.map +1 -1
- package/dist/subsystem/model.js +85 -6
- package/dist/subsystem/model.js.map +1 -1
- package/dist/subsystem/nodes.d.ts.map +1 -1
- package/dist/subsystem/nodes.js +30 -13
- package/dist/subsystem/nodes.js.map +1 -1
- package/dist/subsystem/tokenizeComponent.js +2 -2
- package/dist/subsystem/tokenizeComponent.js.map +1 -1
- package/package.json +3 -3
- package/src/graphify/anchor.test.ts +31 -2
- package/src/graphify/anchor.ts +46 -0
- package/src/graphify/consolidated.ts +43 -1
- package/src/index.ts +13 -5
- package/src/pierre/{PierreThroughlineCodeView.tsx → PierreWalkthroughCodeView.tsx} +39 -47
- package/src/pierre/index.ts +2 -2
- package/src/pierre/pierreFileLang.ts +1 -1
- package/src/stories/Pierre/CodeView.stories.tsx +3 -3
- package/src/stories/Subsystem/ComponentDeclarationAudit.stories.tsx +14 -14
- package/src/stories/Subsystem/ComponentGraph/Appearance.stories.tsx +13 -15
- package/src/stories/Subsystem/ComponentGraph/Basics.stories.tsx +8 -8
- package/src/stories/Subsystem/ComponentGraph/Captures.stories.tsx +14 -14
- package/src/stories/Subsystem/ComponentGraph/CustomEntities.stories.tsx +11 -10
- package/src/stories/Subsystem/ComponentGraph/DetailPanel.stories.tsx +13 -14
- package/src/stories/Subsystem/ComponentGraph/Flows.stories.tsx +31 -66
- package/src/stories/Subsystem/ComponentGraph/FrameworkStereotype.stories.tsx +2 -2
- package/src/stories/Subsystem/ComponentGraph/GraphTitle.stories.tsx +4 -4
- package/src/stories/Subsystem/ComponentGraph/Processes.stories.tsx +3 -3
- package/src/stories/Subsystem/ComponentGraph/Proposed.stories.tsx +1 -1
- package/src/stories/Subsystem/ComponentGraph/Scenarios.stories.tsx +518 -33
- package/src/stories/Subsystem/ComponentGraph/Spotlights.stories.tsx +13 -13
- package/src/stories/Subsystem/ComponentGraph/fixtures.ts +105 -21
- package/src/subsystem/FileDrawer.tsx +2 -2
- package/src/subsystem/SubsystemComponentGraph.tsx +268 -259
- package/src/subsystem/formatDeclaration.test.ts +76 -1
- package/src/subsystem/formatDeclaration.ts +57 -33
- package/src/subsystem/model.test.ts +27 -15
- package/src/subsystem/model.ts +175 -45
- package/src/subsystem/nodes.tsx +47 -13
- package/src/subsystem/tokenizeComponent.ts +2 -2
- package/dist/components/ConfigurationSelector.d.ts +0 -35
- package/dist/components/ConfigurationSelector.d.ts.map +0 -1
- package/dist/components/ConfigurationSelector.js +0 -63
- package/dist/components/ConfigurationSelector.js.map +0 -1
- package/dist/components/GraphRenderer.d.ts +0 -295
- package/dist/components/GraphRenderer.d.ts.map +0 -1
- package/dist/components/GraphRenderer.js +0 -2008
- package/dist/components/GraphRenderer.js.map +0 -1
- package/dist/components/MultiCanvasRenderer.d.ts +0 -75
- package/dist/components/MultiCanvasRenderer.d.ts.map +0 -1
- package/dist/components/MultiCanvasRenderer.js +0 -203
- package/dist/components/MultiCanvasRenderer.js.map +0 -1
- package/dist/components/NodeTooltip.d.ts +0 -24
- package/dist/components/NodeTooltip.d.ts.map +0 -1
- package/dist/components/NodeTooltip.js +0 -160
- package/dist/components/NodeTooltip.js.map +0 -1
- package/dist/components/SelectionSidebar.d.ts +0 -18
- package/dist/components/SelectionSidebar.d.ts.map +0 -1
- package/dist/components/SelectionSidebar.js +0 -190
- package/dist/components/SelectionSidebar.js.map +0 -1
- package/dist/components/SequenceDiagramRenderer.d.ts +0 -77
- package/dist/components/SequenceDiagramRenderer.d.ts.map +0 -1
- package/dist/components/SequenceDiagramRenderer.js +0 -604
- package/dist/components/SequenceDiagramRenderer.js.map +0 -1
- package/dist/components/WorkflowSequenceDiagram.d.ts +0 -63
- package/dist/components/WorkflowSequenceDiagram.d.ts.map +0 -1
- package/dist/components/WorkflowSequenceDiagram.js +0 -147
- package/dist/components/WorkflowSequenceDiagram.js.map +0 -1
- package/dist/components/dashboard/DashboardRenderer.d.ts +0 -10
- package/dist/components/dashboard/DashboardRenderer.d.ts.map +0 -1
- package/dist/components/dashboard/DashboardRenderer.js +0 -179
- package/dist/components/dashboard/DashboardRenderer.js.map +0 -1
- package/dist/components/dashboard/MetricPanel.d.ts +0 -10
- package/dist/components/dashboard/MetricPanel.d.ts.map +0 -1
- package/dist/components/dashboard/MetricPanel.js +0 -103
- package/dist/components/dashboard/MetricPanel.js.map +0 -1
- package/dist/components/dashboard/MockDataProvider.d.ts +0 -30
- package/dist/components/dashboard/MockDataProvider.d.ts.map +0 -1
- package/dist/components/dashboard/MockDataProvider.js +0 -270
- package/dist/components/dashboard/MockDataProvider.js.map +0 -1
- package/dist/components/dashboard/components/BarChart.d.ts +0 -10
- package/dist/components/dashboard/components/BarChart.d.ts.map +0 -1
- package/dist/components/dashboard/components/BarChart.js +0 -167
- package/dist/components/dashboard/components/BarChart.js.map +0 -1
- package/dist/components/dashboard/components/LineChart.d.ts +0 -10
- package/dist/components/dashboard/components/LineChart.d.ts.map +0 -1
- package/dist/components/dashboard/components/LineChart.js +0 -141
- package/dist/components/dashboard/components/LineChart.js.map +0 -1
- package/dist/components/dashboard/components/MetricCard.d.ts +0 -9
- package/dist/components/dashboard/components/MetricCard.d.ts.map +0 -1
- package/dist/components/dashboard/components/MetricCard.js +0 -163
- package/dist/components/dashboard/components/MetricCard.js.map +0 -1
- package/dist/components/dashboard/components/SourceLink.d.ts +0 -9
- package/dist/components/dashboard/components/SourceLink.d.ts.map +0 -1
- package/dist/components/dashboard/components/SourceLink.js +0 -39
- package/dist/components/dashboard/components/SourceLink.js.map +0 -1
- package/dist/components/dashboard/components/TimeRangeSelector.d.ts +0 -9
- package/dist/components/dashboard/components/TimeRangeSelector.d.ts.map +0 -1
- package/dist/components/dashboard/components/TimeRangeSelector.js +0 -167
- package/dist/components/dashboard/components/TimeRangeSelector.js.map +0 -1
- package/dist/components/dashboard/components/index.d.ts +0 -6
- package/dist/components/dashboard/components/index.d.ts.map +0 -1
- package/dist/components/dashboard/components/index.js +0 -6
- package/dist/components/dashboard/components/index.js.map +0 -1
- package/dist/components/dashboard/index.d.ts +0 -6
- package/dist/components/dashboard/index.d.ts.map +0 -1
- package/dist/components/dashboard/index.js +0 -8
- package/dist/components/dashboard/index.js.map +0 -1
- package/dist/components/dashboard/types.d.ts +0 -74
- package/dist/components/dashboard/types.d.ts.map +0 -1
- package/dist/components/dashboard/types.js +0 -8
- package/dist/components/dashboard/types.js.map +0 -1
- package/dist/components/state-view/PipelineView.d.ts +0 -14
- package/dist/components/state-view/PipelineView.d.ts.map +0 -1
- package/dist/components/state-view/PipelineView.js +0 -195
- package/dist/components/state-view/PipelineView.js.map +0 -1
- package/dist/components/state-view/index.d.ts +0 -14
- package/dist/components/state-view/index.d.ts.map +0 -1
- package/dist/components/state-view/index.js +0 -12
- package/dist/components/state-view/index.js.map +0 -1
- package/dist/components/state-view/types.d.ts +0 -188
- package/dist/components/state-view/types.d.ts.map +0 -1
- package/dist/components/state-view/types.js +0 -10
- package/dist/components/state-view/types.js.map +0 -1
- package/dist/components/state-view/useStateView.d.ts +0 -32
- package/dist/components/state-view/useStateView.d.ts.map +0 -1
- package/dist/components/state-view/useStateView.js +0 -129
- package/dist/components/state-view/useStateView.js.map +0 -1
- package/dist/contexts/GraphEditContext.d.ts +0 -20
- package/dist/contexts/GraphEditContext.d.ts.map +0 -1
- package/dist/contexts/GraphEditContext.js +0 -8
- package/dist/contexts/GraphEditContext.js.map +0 -1
- package/dist/contexts/TooltipPortalContext.d.ts +0 -8
- package/dist/contexts/TooltipPortalContext.d.ts.map +0 -1
- package/dist/contexts/TooltipPortalContext.js +0 -8
- package/dist/contexts/TooltipPortalContext.js.map +0 -1
- package/dist/edges/CustomEdge.d.ts +0 -24
- package/dist/edges/CustomEdge.d.ts.map +0 -1
- package/dist/edges/CustomEdge.js +0 -222
- package/dist/edges/CustomEdge.js.map +0 -1
- package/dist/edges/GenericEdge.d.ts +0 -18
- package/dist/edges/GenericEdge.d.ts.map +0 -1
- package/dist/edges/GenericEdge.js +0 -10
- package/dist/edges/GenericEdge.js.map +0 -1
- package/dist/graphify/kind.d.ts +0 -23
- package/dist/graphify/kind.d.ts.map +0 -1
- package/dist/graphify/kind.js +0 -77
- package/dist/graphify/kind.js.map +0 -1
- package/dist/hooks/usePathBasedEvents.d.ts +0 -42
- package/dist/hooks/usePathBasedEvents.d.ts.map +0 -1
- package/dist/hooks/usePathBasedEvents.js +0 -119
- package/dist/hooks/usePathBasedEvents.js.map +0 -1
- package/dist/hooks/useSequenceLayout.d.ts +0 -186
- package/dist/hooks/useSequenceLayout.d.ts.map +0 -1
- package/dist/hooks/useSequenceLayout.js +0 -327
- package/dist/hooks/useSequenceLayout.js.map +0 -1
- package/dist/hooks/useUndoRedo.d.ts +0 -80
- package/dist/hooks/useUndoRedo.d.ts.map +0 -1
- package/dist/hooks/useUndoRedo.js +0 -70
- package/dist/hooks/useUndoRedo.js.map +0 -1
- package/dist/nodes/CustomNode.d.ts +0 -28
- package/dist/nodes/CustomNode.d.ts.map +0 -1
- package/dist/nodes/CustomNode.js +0 -820
- package/dist/nodes/CustomNode.js.map +0 -1
- package/dist/nodes/GenericNode.d.ts +0 -20
- package/dist/nodes/GenericNode.d.ts.map +0 -1
- package/dist/nodes/GenericNode.js +0 -20
- package/dist/nodes/GenericNode.js.map +0 -1
- package/dist/nodes/otel/OtelBoundaryNode.d.ts +0 -55
- package/dist/nodes/otel/OtelBoundaryNode.d.ts.map +0 -1
- package/dist/nodes/otel/OtelBoundaryNode.js +0 -81
- package/dist/nodes/otel/OtelBoundaryNode.js.map +0 -1
- package/dist/nodes/otel/OtelEventNode.d.ts +0 -59
- package/dist/nodes/otel/OtelEventNode.d.ts.map +0 -1
- package/dist/nodes/otel/OtelEventNode.js +0 -82
- package/dist/nodes/otel/OtelEventNode.js.map +0 -1
- package/dist/nodes/otel/OtelResourceNode.d.ts +0 -53
- package/dist/nodes/otel/OtelResourceNode.d.ts.map +0 -1
- package/dist/nodes/otel/OtelResourceNode.js +0 -105
- package/dist/nodes/otel/OtelResourceNode.js.map +0 -1
- package/dist/nodes/otel/OtelScopeNode.d.ts +0 -53
- package/dist/nodes/otel/OtelScopeNode.d.ts.map +0 -1
- package/dist/nodes/otel/OtelScopeNode.js +0 -81
- package/dist/nodes/otel/OtelScopeNode.js.map +0 -1
- package/dist/nodes/otel/OtelSpanConventionNode.d.ts +0 -61
- package/dist/nodes/otel/OtelSpanConventionNode.d.ts.map +0 -1
- package/dist/nodes/otel/OtelSpanConventionNode.js +0 -131
- package/dist/nodes/otel/OtelSpanConventionNode.js.map +0 -1
- package/dist/nodes/otel/index.d.ts +0 -17
- package/dist/nodes/otel/index.d.ts.map +0 -1
- package/dist/nodes/otel/index.js +0 -13
- package/dist/nodes/otel/index.js.map +0 -1
- package/dist/nodes/otel/shared/NodeBadges.d.ts +0 -10
- package/dist/nodes/otel/shared/NodeBadges.d.ts.map +0 -1
- package/dist/nodes/otel/shared/NodeBadges.js +0 -178
- package/dist/nodes/otel/shared/NodeBadges.js.map +0 -1
- package/dist/nodes/otel/shared/NodeContent.d.ts +0 -10
- package/dist/nodes/otel/shared/NodeContent.d.ts.map +0 -1
- package/dist/nodes/otel/shared/NodeContent.js +0 -96
- package/dist/nodes/otel/shared/NodeContent.js.map +0 -1
- package/dist/nodes/otel/shared/index.d.ts +0 -8
- package/dist/nodes/otel/shared/index.d.ts.map +0 -1
- package/dist/nodes/otel/shared/index.js +0 -8
- package/dist/nodes/otel/shared/index.js.map +0 -1
- package/dist/nodes/otel/shared/types.d.ts +0 -129
- package/dist/nodes/otel/shared/types.d.ts.map +0 -1
- package/dist/nodes/otel/shared/types.js +0 -5
- package/dist/nodes/otel/shared/types.js.map +0 -1
- package/dist/nodes/otel/shared/useNodeBehavior.d.ts +0 -42
- package/dist/nodes/otel/shared/useNodeBehavior.d.ts.map +0 -1
- package/dist/nodes/otel/shared/useNodeBehavior.js +0 -61
- package/dist/nodes/otel/shared/useNodeBehavior.js.map +0 -1
- package/dist/pierre/PierreThroughlineCodeView.js.map +0 -1
- package/dist/subsystem/SubsystemCarousel.d.ts +0 -36
- package/dist/subsystem/SubsystemCarousel.d.ts.map +0 -1
- package/dist/subsystem/SubsystemCarousel.js +0 -163
- package/dist/subsystem/SubsystemCarousel.js.map +0 -1
- package/dist/utils/animationMapping.d.ts +0 -53
- package/dist/utils/animationMapping.d.ts.map +0 -1
- package/dist/utils/animationMapping.js +0 -126
- package/dist/utils/animationMapping.js.map +0 -1
- package/dist/utils/canvasBounds.d.ts +0 -50
- package/dist/utils/canvasBounds.d.ts.map +0 -1
- package/dist/utils/canvasBounds.js +0 -88
- package/dist/utils/canvasBounds.js.map +0 -1
- package/dist/utils/graphConverter.d.ts +0 -18
- package/dist/utils/graphConverter.d.ts.map +0 -1
- package/dist/utils/graphConverter.js +0 -114
- package/dist/utils/graphConverter.js.map +0 -1
- package/dist/utils/iconResolver.d.ts +0 -29
- package/dist/utils/iconResolver.d.ts.map +0 -1
- package/dist/utils/iconResolver.js +0 -30
- package/dist/utils/iconResolver.js.map +0 -1
- package/dist/utils/orientationUtils.d.ts +0 -19
- package/dist/utils/orientationUtils.d.ts.map +0 -1
- package/dist/utils/orientationUtils.js +0 -62
- package/dist/utils/orientationUtils.js.map +0 -1
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* PipelineView Component
|
|
3
|
-
*
|
|
4
|
-
* A state-driven visualization showing data flowing through pipeline stages.
|
|
5
|
-
* Demonstrates the state view pattern with animations.
|
|
6
|
-
*/
|
|
7
|
-
import React from 'react';
|
|
8
|
-
import type { PipelineEvent, EventSource } from './types';
|
|
9
|
-
export interface PipelineViewProps {
|
|
10
|
-
eventSource: EventSource<PipelineEvent>;
|
|
11
|
-
title?: string;
|
|
12
|
-
}
|
|
13
|
-
export declare function PipelineView({ eventSource, title }: PipelineViewProps): React.JSX.Element;
|
|
14
|
-
//# sourceMappingURL=PipelineView.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PipelineView.d.ts","sourceRoot":"","sources":["../../../src/components/state-view/PipelineView.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAEV,aAAa,EAEb,WAAW,EAEZ,MAAM,SAAS,CAAC;AAmLjB,MAAM,WAAW,iBAAiB;IAChC,WAAW,EAAE,WAAW,CAAC,aAAa,CAAC,CAAC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,YAAY,CAAC,EAAE,WAAW,EAAE,KAAuB,EAAE,EAAE,iBAAiB,qBAoJvF"}
|
|
@@ -1,195 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useStateView } from './useStateView';
|
|
3
|
-
// =============================================================================
|
|
4
|
-
// Reducer
|
|
5
|
-
// =============================================================================
|
|
6
|
-
const initialPipelineState = {
|
|
7
|
-
stages: {
|
|
8
|
-
disk: { id: 'disk', label: 'Disk', lastEventTime: null, isActive: false },
|
|
9
|
-
watch: { id: 'watch', label: 'Watch', lastEventTime: null, isActive: false },
|
|
10
|
-
cache: { id: 'cache', label: 'Cache', lastEventTime: null, isActive: false, count: 0 },
|
|
11
|
-
event: { id: 'event', label: 'Events', lastEventTime: null, isActive: false, count: 0 },
|
|
12
|
-
},
|
|
13
|
-
repos: new Map(),
|
|
14
|
-
totalEvents: 0,
|
|
15
|
-
};
|
|
16
|
-
function pipelineReducer(state, event) {
|
|
17
|
-
const now = event.timestamp;
|
|
18
|
-
switch (event.type) {
|
|
19
|
-
case 'FS_CHANGE':
|
|
20
|
-
return {
|
|
21
|
-
...state,
|
|
22
|
-
stages: {
|
|
23
|
-
...state.stages,
|
|
24
|
-
disk: { ...state.stages.disk, lastEventTime: now, isActive: true },
|
|
25
|
-
},
|
|
26
|
-
totalEvents: state.totalEvents + 1,
|
|
27
|
-
};
|
|
28
|
-
case 'WATCH_DETECTED':
|
|
29
|
-
return {
|
|
30
|
-
...state,
|
|
31
|
-
stages: {
|
|
32
|
-
...state.stages,
|
|
33
|
-
watch: { ...state.stages.watch, lastEventTime: now, isActive: true },
|
|
34
|
-
},
|
|
35
|
-
};
|
|
36
|
-
case 'CACHE_REBUILD':
|
|
37
|
-
case 'CACHE_HIT': {
|
|
38
|
-
const newRepos = new Map(state.repos);
|
|
39
|
-
if (event.payload.repo) {
|
|
40
|
-
newRepos.set(event.payload.repo, {
|
|
41
|
-
path: event.payload.repo,
|
|
42
|
-
lastEventTime: now,
|
|
43
|
-
lastEventType: event.type,
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
return {
|
|
47
|
-
...state,
|
|
48
|
-
stages: {
|
|
49
|
-
...state.stages,
|
|
50
|
-
cache: {
|
|
51
|
-
...state.stages.cache,
|
|
52
|
-
lastEventTime: now,
|
|
53
|
-
isActive: true,
|
|
54
|
-
count: (state.stages.cache.count ?? 0) + 1,
|
|
55
|
-
},
|
|
56
|
-
},
|
|
57
|
-
repos: newRepos,
|
|
58
|
-
};
|
|
59
|
-
}
|
|
60
|
-
case 'EVENT_BROADCAST':
|
|
61
|
-
return {
|
|
62
|
-
...state,
|
|
63
|
-
stages: {
|
|
64
|
-
...state.stages,
|
|
65
|
-
event: {
|
|
66
|
-
...state.stages.event,
|
|
67
|
-
lastEventTime: now,
|
|
68
|
-
isActive: true,
|
|
69
|
-
count: (state.stages.event.count ?? 0) + 1,
|
|
70
|
-
},
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
default:
|
|
74
|
-
return state;
|
|
75
|
-
}
|
|
76
|
-
}
|
|
77
|
-
// =============================================================================
|
|
78
|
-
// Transitions
|
|
79
|
-
// =============================================================================
|
|
80
|
-
const pipelineTransitions = [
|
|
81
|
-
{ watch: 'stages.disk.lastEventTime', condition: 'changed', animate: 'pulse', target: 'stage-disk' },
|
|
82
|
-
{ watch: 'stages.watch.lastEventTime', condition: 'changed', animate: 'pulse', target: 'stage-watch' },
|
|
83
|
-
{ watch: 'stages.cache.lastEventTime', condition: 'changed', animate: 'pulse', target: 'stage-cache' },
|
|
84
|
-
{ watch: 'stages.event.lastEventTime', condition: 'changed', animate: 'pulse', target: 'stage-event' },
|
|
85
|
-
{ watch: 'stages.event.count', condition: 'increased', animate: 'particle-flow', target: 'flow-cache-event' },
|
|
86
|
-
];
|
|
87
|
-
function StageBox({ stage, isAnimating }) {
|
|
88
|
-
const baseStyle = {
|
|
89
|
-
display: 'flex',
|
|
90
|
-
flexDirection: 'column',
|
|
91
|
-
alignItems: 'center',
|
|
92
|
-
justifyContent: 'center',
|
|
93
|
-
width: 100,
|
|
94
|
-
height: 80,
|
|
95
|
-
borderRadius: 8,
|
|
96
|
-
backgroundColor: stage.isActive ? '#3b82f6' : '#374151',
|
|
97
|
-
color: 'white',
|
|
98
|
-
fontFamily: 'system-ui, sans-serif',
|
|
99
|
-
transition: 'all 0.3s ease',
|
|
100
|
-
boxShadow: isAnimating ? '0 0 20px rgba(59, 130, 246, 0.8)' : 'none',
|
|
101
|
-
transform: isAnimating ? 'scale(1.05)' : 'scale(1)',
|
|
102
|
-
};
|
|
103
|
-
return (_jsxs("div", { id: `stage-${stage.id}`, style: baseStyle, children: [_jsx("div", { style: { fontWeight: 'bold', fontSize: 14 }, children: stage.label }), stage.count !== undefined && (_jsx("div", { style: { fontSize: 20, fontWeight: 'bold' }, children: stage.count })), stage.lastEventTime && (_jsx("div", { style: { fontSize: 10, opacity: 0.7 }, children: formatTimeAgo(stage.lastEventTime) }))] }));
|
|
104
|
-
}
|
|
105
|
-
function FlowArrow({ id, isAnimating }) {
|
|
106
|
-
const style = {
|
|
107
|
-
display: 'flex',
|
|
108
|
-
alignItems: 'center',
|
|
109
|
-
justifyContent: 'center',
|
|
110
|
-
width: 60,
|
|
111
|
-
height: 40,
|
|
112
|
-
color: isAnimating ? '#3b82f6' : '#6b7280',
|
|
113
|
-
fontSize: 24,
|
|
114
|
-
transition: 'color 0.3s ease',
|
|
115
|
-
};
|
|
116
|
-
return (_jsx("div", { id: id, style: style, children: isAnimating ? (_jsx("span", { style: { animation: 'pulse 0.5s ease-in-out' }, children: "\u2192\u2192\u2192" })) : ('→') }));
|
|
117
|
-
}
|
|
118
|
-
function formatTimeAgo(timestamp) {
|
|
119
|
-
const seconds = Math.floor((Date.now() - timestamp) / 1000);
|
|
120
|
-
if (seconds < 60)
|
|
121
|
-
return `${seconds}s ago`;
|
|
122
|
-
const minutes = Math.floor(seconds / 60);
|
|
123
|
-
if (minutes < 60)
|
|
124
|
-
return `${minutes}m ago`;
|
|
125
|
-
const hours = Math.floor(minutes / 60);
|
|
126
|
-
return `${hours}h ago`;
|
|
127
|
-
}
|
|
128
|
-
export function PipelineView({ eventSource, title = 'Pipeline View' }) {
|
|
129
|
-
const { state, animations, isReplay, reset } = useStateView({
|
|
130
|
-
initialState: initialPipelineState,
|
|
131
|
-
reducer: pipelineReducer,
|
|
132
|
-
eventSource,
|
|
133
|
-
transitions: pipelineTransitions,
|
|
134
|
-
});
|
|
135
|
-
const isStageAnimating = (stageId) => animations.some((a) => a.target === `stage-${stageId}`);
|
|
136
|
-
const isFlowAnimating = (flowId) => animations.some((a) => a.target === flowId);
|
|
137
|
-
const containerStyle = {
|
|
138
|
-
fontFamily: 'system-ui, sans-serif',
|
|
139
|
-
backgroundColor: '#1f2937',
|
|
140
|
-
color: 'white',
|
|
141
|
-
padding: 24,
|
|
142
|
-
borderRadius: 12,
|
|
143
|
-
minWidth: 600,
|
|
144
|
-
};
|
|
145
|
-
const headerStyle = {
|
|
146
|
-
display: 'flex',
|
|
147
|
-
justifyContent: 'space-between',
|
|
148
|
-
alignItems: 'center',
|
|
149
|
-
marginBottom: 24,
|
|
150
|
-
};
|
|
151
|
-
const pipelineStyle = {
|
|
152
|
-
display: 'flex',
|
|
153
|
-
alignItems: 'center',
|
|
154
|
-
justifyContent: 'center',
|
|
155
|
-
gap: 8,
|
|
156
|
-
marginBottom: 24,
|
|
157
|
-
};
|
|
158
|
-
const statsStyle = {
|
|
159
|
-
display: 'flex',
|
|
160
|
-
gap: 24,
|
|
161
|
-
justifyContent: 'center',
|
|
162
|
-
padding: '16px 0',
|
|
163
|
-
borderTop: '1px solid #374151',
|
|
164
|
-
};
|
|
165
|
-
const statBoxStyle = {
|
|
166
|
-
textAlign: 'center',
|
|
167
|
-
};
|
|
168
|
-
const repoListStyle = {
|
|
169
|
-
marginTop: 16,
|
|
170
|
-
padding: 16,
|
|
171
|
-
backgroundColor: '#111827',
|
|
172
|
-
borderRadius: 8,
|
|
173
|
-
maxHeight: 200,
|
|
174
|
-
overflowY: 'auto',
|
|
175
|
-
};
|
|
176
|
-
return (_jsxs("div", { style: containerStyle, children: [_jsxs("div", { style: headerStyle, children: [_jsx("h2", { style: { margin: 0 }, children: title }), _jsxs("div", { style: { display: 'flex', gap: 8, alignItems: 'center' }, children: [isReplay && (_jsx("span", { style: { fontSize: 12, color: '#f59e0b' }, children: "REPLAY" })), _jsx("button", { onClick: reset, style: {
|
|
177
|
-
padding: '4px 12px',
|
|
178
|
-
borderRadius: 4,
|
|
179
|
-
border: 'none',
|
|
180
|
-
backgroundColor: '#374151',
|
|
181
|
-
color: 'white',
|
|
182
|
-
cursor: 'pointer',
|
|
183
|
-
}, children: "Reset" })] })] }), _jsxs("div", { style: pipelineStyle, children: [_jsx(StageBox, { stage: state.stages.disk, isAnimating: isStageAnimating('disk') }), _jsx(FlowArrow, { id: "flow-disk-watch", isAnimating: isFlowAnimating('flow-disk-watch') }), _jsx(StageBox, { stage: state.stages.watch, isAnimating: isStageAnimating('watch') }), _jsx(FlowArrow, { id: "flow-watch-cache", isAnimating: isFlowAnimating('flow-watch-cache') }), _jsx(StageBox, { stage: state.stages.cache, isAnimating: isStageAnimating('cache') }), _jsx(FlowArrow, { id: "flow-cache-event", isAnimating: isFlowAnimating('flow-cache-event') }), _jsx(StageBox, { stage: state.stages.event, isAnimating: isStageAnimating('event') })] }), _jsxs("div", { style: statsStyle, children: [_jsxs("div", { style: statBoxStyle, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 'bold' }, children: state.repos.size }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: "Repos" })] }), _jsxs("div", { style: statBoxStyle, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 'bold' }, children: state.stages.cache.count }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: "Cache Ops" })] }), _jsxs("div", { style: statBoxStyle, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 'bold' }, children: state.stages.event.count }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: "Events" })] }), _jsxs("div", { style: statBoxStyle, children: [_jsx("div", { style: { fontSize: 24, fontWeight: 'bold' }, children: state.totalEvents }), _jsx("div", { style: { fontSize: 12, color: '#9ca3af' }, children: "Total" })] })] }), state.repos.size > 0 && (_jsxs("div", { style: repoListStyle, children: [_jsx("div", { style: { fontSize: 12, color: '#9ca3af', marginBottom: 8 }, children: "Active Repositories" }), Array.from(state.repos.values()).map((repo) => (_jsxs("div", { style: {
|
|
184
|
-
display: 'flex',
|
|
185
|
-
justifyContent: 'space-between',
|
|
186
|
-
padding: '4px 0',
|
|
187
|
-
borderBottom: '1px solid #374151',
|
|
188
|
-
}, children: [_jsx("span", { style: { fontSize: 13 }, children: repo.path }), _jsxs("span", { style: { fontSize: 11, color: '#9ca3af' }, children: [repo.lastEventType, " - ", formatTimeAgo(repo.lastEventTime)] })] }, repo.path)))] })), _jsx("style", { children: `
|
|
189
|
-
@keyframes pulse {
|
|
190
|
-
0%, 100% { opacity: 1; }
|
|
191
|
-
50% { opacity: 0.5; }
|
|
192
|
-
}
|
|
193
|
-
` })] }));
|
|
194
|
-
}
|
|
195
|
-
//# sourceMappingURL=PipelineView.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"PipelineView.js","sourceRoot":"","sources":["../../../src/components/state-view/PipelineView.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* State View Components
|
|
3
|
-
*
|
|
4
|
-
* A pattern for state-driven visualizations where:
|
|
5
|
-
* - Telemetry events are processed into state changes
|
|
6
|
-
* - State has a defined shape
|
|
7
|
-
* - State changes trigger animations/transitions
|
|
8
|
-
*/
|
|
9
|
-
export * from './types';
|
|
10
|
-
export { useStateView } from './useStateView';
|
|
11
|
-
export type { UseStateViewOptions, UseStateViewResult } from './useStateView';
|
|
12
|
-
export { PipelineView } from './PipelineView';
|
|
13
|
-
export type { PipelineViewProps } from './PipelineView';
|
|
14
|
-
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/state-view/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,mBAAmB,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* State View Components
|
|
3
|
-
*
|
|
4
|
-
* A pattern for state-driven visualizations where:
|
|
5
|
-
* - Telemetry events are processed into state changes
|
|
6
|
-
* - State has a defined shape
|
|
7
|
-
* - State changes trigger animations/transitions
|
|
8
|
-
*/
|
|
9
|
-
export * from './types';
|
|
10
|
-
export { useStateView } from './useStateView';
|
|
11
|
-
export { PipelineView } from './PipelineView';
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/state-view/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAEH,cAAc,SAAS,CAAC;AACxB,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}
|
|
@@ -1,188 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* State View Types
|
|
3
|
-
*
|
|
4
|
-
* A state-based visualization system where:
|
|
5
|
-
* - Telemetry events are processed into state changes
|
|
6
|
-
* - State has a defined shape
|
|
7
|
-
* - State changes trigger animations/transitions
|
|
8
|
-
*/
|
|
9
|
-
/**
|
|
10
|
-
* A state event extracted from telemetry (OTEL spans, etc.)
|
|
11
|
-
*/
|
|
12
|
-
export interface StateEvent<TPayload = Record<string, unknown>> {
|
|
13
|
-
/** Event type identifier */
|
|
14
|
-
type: string;
|
|
15
|
-
/** When this event occurred */
|
|
16
|
-
timestamp: number;
|
|
17
|
-
/** Event-specific data */
|
|
18
|
-
payload: TPayload;
|
|
19
|
-
/** Optional trace correlation */
|
|
20
|
-
traceId?: string;
|
|
21
|
-
spanId?: string;
|
|
22
|
-
}
|
|
23
|
-
/**
|
|
24
|
-
* Source of events - can be live (IPC/WebSocket) or replay (from storage)
|
|
25
|
-
*/
|
|
26
|
-
export interface EventSource<TEvent extends StateEvent = StateEvent> {
|
|
27
|
-
/** Subscribe to events, returns unsubscribe function */
|
|
28
|
-
subscribe(handler: (event: TEvent) => void): () => void;
|
|
29
|
-
/** Optional: current mode */
|
|
30
|
-
mode?: 'live' | 'replay';
|
|
31
|
-
}
|
|
32
|
-
/**
|
|
33
|
-
* A reducer that applies events to state
|
|
34
|
-
*/
|
|
35
|
-
export type StateReducer<TState, TEvent extends StateEvent> = (state: TState, event: TEvent) => TState;
|
|
36
|
-
/**
|
|
37
|
-
* Describes what changed between two states (for animations)
|
|
38
|
-
*/
|
|
39
|
-
export interface StateDiff<TState> {
|
|
40
|
-
/** Previous state */
|
|
41
|
-
prev: TState;
|
|
42
|
-
/** New state */
|
|
43
|
-
next: TState;
|
|
44
|
-
/** Which paths changed (dot notation) */
|
|
45
|
-
changedPaths: string[];
|
|
46
|
-
/** The event that caused this change */
|
|
47
|
-
event: StateEvent;
|
|
48
|
-
}
|
|
49
|
-
export type AnimationType = 'pulse' | 'glow' | 'flash' | 'shake' | 'slide-in' | 'slide-out' | 'fade-in' | 'fade-out' | 'particle-flow' | 'increment' | 'decrement' | 'bar-change';
|
|
50
|
-
export interface TransitionDefinition {
|
|
51
|
-
/** Condition: which state path to watch */
|
|
52
|
-
watch: string;
|
|
53
|
-
/** Condition type */
|
|
54
|
-
condition: 'changed' | 'increased' | 'decreased' | 'added' | 'removed';
|
|
55
|
-
/** Animation to trigger */
|
|
56
|
-
animate: AnimationType;
|
|
57
|
-
/** Target element (CSS selector or element ID) */
|
|
58
|
-
target?: string;
|
|
59
|
-
/** Duration in ms */
|
|
60
|
-
duration?: number;
|
|
61
|
-
/** Additional params */
|
|
62
|
-
params?: Record<string, unknown>;
|
|
63
|
-
}
|
|
64
|
-
export interface ActiveAnimation {
|
|
65
|
-
id: string;
|
|
66
|
-
type: AnimationType;
|
|
67
|
-
target: string;
|
|
68
|
-
startTime: number;
|
|
69
|
-
duration: number;
|
|
70
|
-
params?: Record<string, unknown>;
|
|
71
|
-
}
|
|
72
|
-
export interface ReplayControls {
|
|
73
|
-
/** Current playback state */
|
|
74
|
-
state: 'playing' | 'paused' | 'stopped';
|
|
75
|
-
/** Playback speed multiplier */
|
|
76
|
-
speed: number;
|
|
77
|
-
/** Current replay time (event time, not wall time) */
|
|
78
|
-
currentTime: number;
|
|
79
|
-
/** Start of replay range */
|
|
80
|
-
startTime: number;
|
|
81
|
-
/** End of replay range */
|
|
82
|
-
endTime: number;
|
|
83
|
-
/** Control methods */
|
|
84
|
-
play: () => void;
|
|
85
|
-
pause: () => void;
|
|
86
|
-
stop: () => void;
|
|
87
|
-
seek: (time: number) => void;
|
|
88
|
-
setSpeed: (speed: number) => void;
|
|
89
|
-
}
|
|
90
|
-
export interface PipelineStage {
|
|
91
|
-
id: string;
|
|
92
|
-
label: string;
|
|
93
|
-
lastEventTime: number | null;
|
|
94
|
-
isActive: boolean;
|
|
95
|
-
count?: number;
|
|
96
|
-
}
|
|
97
|
-
export interface PipelineRepoState {
|
|
98
|
-
path: string;
|
|
99
|
-
lastEventTime: number;
|
|
100
|
-
lastEventType: string;
|
|
101
|
-
}
|
|
102
|
-
export interface PipelineState {
|
|
103
|
-
stages: Record<string, PipelineStage>;
|
|
104
|
-
repos: Map<string, PipelineRepoState>;
|
|
105
|
-
totalEvents: number;
|
|
106
|
-
}
|
|
107
|
-
export type PipelineEventType = 'FS_CHANGE' | 'WATCH_DETECTED' | 'CACHE_REBUILD' | 'CACHE_HIT' | 'EVENT_BROADCAST';
|
|
108
|
-
export interface PipelineEvent extends StateEvent {
|
|
109
|
-
type: PipelineEventType;
|
|
110
|
-
payload: {
|
|
111
|
-
repo?: string;
|
|
112
|
-
stage?: string;
|
|
113
|
-
slice?: string;
|
|
114
|
-
eventType?: string;
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
export interface RoomState {
|
|
118
|
-
id: string;
|
|
119
|
-
userCount: number;
|
|
120
|
-
users: Set<string>;
|
|
121
|
-
}
|
|
122
|
-
export interface ActivityState {
|
|
123
|
-
rooms: Map<string, RoomState>;
|
|
124
|
-
totalUsers: number;
|
|
125
|
-
syncRatePerMinute: number;
|
|
126
|
-
recentSyncs: number[];
|
|
127
|
-
}
|
|
128
|
-
export type ActivityEventType = 'ROOM_JOIN' | 'ROOM_LEAVE' | 'SYNC_BROADCAST';
|
|
129
|
-
export interface ActivityEvent extends StateEvent {
|
|
130
|
-
type: ActivityEventType;
|
|
131
|
-
payload: {
|
|
132
|
-
roomId?: string;
|
|
133
|
-
userId?: string;
|
|
134
|
-
userLogin?: string;
|
|
135
|
-
syncType?: string;
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
export interface UserQuotaState {
|
|
139
|
-
userId: number;
|
|
140
|
-
userLogin: string;
|
|
141
|
-
remaining: number;
|
|
142
|
-
limit: number;
|
|
143
|
-
resetTime: number;
|
|
144
|
-
callsThisHour: number;
|
|
145
|
-
cacheHits: number;
|
|
146
|
-
byOperation: Map<string, {
|
|
147
|
-
total: number;
|
|
148
|
-
apiCalls: number;
|
|
149
|
-
}>;
|
|
150
|
-
byRepo: Map<string, {
|
|
151
|
-
total: number;
|
|
152
|
-
apiCalls: number;
|
|
153
|
-
}>;
|
|
154
|
-
}
|
|
155
|
-
export interface QuotaDistributionState {
|
|
156
|
-
users: Map<number, UserQuotaState>;
|
|
157
|
-
serverRemaining: number;
|
|
158
|
-
serverResetTime: number;
|
|
159
|
-
}
|
|
160
|
-
export type QuotaEventType = 'GITHUB_REQUEST';
|
|
161
|
-
export interface QuotaEvent extends StateEvent {
|
|
162
|
-
type: QuotaEventType;
|
|
163
|
-
payload: {
|
|
164
|
-
userId?: number;
|
|
165
|
-
userLogin?: string;
|
|
166
|
-
tokenType: 'user' | 'server';
|
|
167
|
-
operation: string;
|
|
168
|
-
repoOwner?: string;
|
|
169
|
-
repoName?: string;
|
|
170
|
-
cacheHit: boolean;
|
|
171
|
-
cacheTier?: string;
|
|
172
|
-
ratelimitRemaining?: number;
|
|
173
|
-
ratelimitLimit?: number;
|
|
174
|
-
ratelimitReset?: number;
|
|
175
|
-
};
|
|
176
|
-
}
|
|
177
|
-
export interface StateViewDefinition<TState, TEvent extends StateEvent> {
|
|
178
|
-
id: string;
|
|
179
|
-
name: string;
|
|
180
|
-
description?: string;
|
|
181
|
-
/** Initial state */
|
|
182
|
-
initialState: TState;
|
|
183
|
-
/** Reducer function or reference */
|
|
184
|
-
reducer: StateReducer<TState, TEvent>;
|
|
185
|
-
/** Transition definitions for animations */
|
|
186
|
-
transitions?: TransitionDefinition[];
|
|
187
|
-
}
|
|
188
|
-
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/state-view/types.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* State View Types
|
|
3
|
-
*
|
|
4
|
-
* A state-based visualization system where:
|
|
5
|
-
* - Telemetry events are processed into state changes
|
|
6
|
-
* - State has a defined shape
|
|
7
|
-
* - State changes trigger animations/transitions
|
|
8
|
-
*/
|
|
9
|
-
export {};
|
|
10
|
-
//# sourceMappingURL=types.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/state-view/types.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG"}
|
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* useStateView Hook
|
|
3
|
-
*
|
|
4
|
-
* Manages state accumulation from events and provides replay controls.
|
|
5
|
-
*/
|
|
6
|
-
import type { StateEvent, EventSource, StateReducer, StateDiff, ReplayControls, ActiveAnimation, TransitionDefinition } from './types';
|
|
7
|
-
export interface UseStateViewOptions<TState, TEvent extends StateEvent> {
|
|
8
|
-
/** Initial state */
|
|
9
|
-
initialState: TState;
|
|
10
|
-
/** Reducer to apply events */
|
|
11
|
-
reducer: StateReducer<TState, TEvent>;
|
|
12
|
-
/** Event source (live or replay) */
|
|
13
|
-
eventSource: EventSource<TEvent>;
|
|
14
|
-
/** Transition definitions for animations */
|
|
15
|
-
transitions?: TransitionDefinition[];
|
|
16
|
-
/** Callback when state changes */
|
|
17
|
-
onStateChange?: (diff: StateDiff<TState>) => void;
|
|
18
|
-
}
|
|
19
|
-
export interface UseStateViewResult<TState> {
|
|
20
|
-
/** Current state */
|
|
21
|
-
state: TState;
|
|
22
|
-
/** Active animations */
|
|
23
|
-
animations: ActiveAnimation[];
|
|
24
|
-
/** Whether we're in replay mode */
|
|
25
|
-
isReplay: boolean;
|
|
26
|
-
/** Replay controls (if in replay mode) */
|
|
27
|
-
replayControls?: ReplayControls;
|
|
28
|
-
/** Reset state to initial */
|
|
29
|
-
reset: () => void;
|
|
30
|
-
}
|
|
31
|
-
export declare function useStateView<TState, TEvent extends StateEvent>({ initialState, reducer, eventSource, transitions, onStateChange, }: UseStateViewOptions<TState, TEvent>): UseStateViewResult<TState>;
|
|
32
|
-
//# sourceMappingURL=useStateView.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useStateView.d.ts","sourceRoot":"","sources":["../../../src/components/state-view/useStateView.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,KAAK,EACV,UAAU,EACV,WAAW,EACX,YAAY,EACZ,SAAS,EACT,cAAc,EACd,eAAe,EACf,oBAAoB,EACrB,MAAM,SAAS,CAAC;AAEjB,MAAM,WAAW,mBAAmB,CAAC,MAAM,EAAE,MAAM,SAAS,UAAU;IACpE,oBAAoB;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,8BAA8B;IAC9B,OAAO,EAAE,YAAY,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IACtC,oCAAoC;IACpC,WAAW,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACjC,4CAA4C;IAC5C,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC;CACnD;AAED,MAAM,WAAW,kBAAkB,CAAC,MAAM;IACxC,oBAAoB;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,wBAAwB;IACxB,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,mCAAmC;IACnC,QAAQ,EAAE,OAAO,CAAC;IAClB,0CAA0C;IAC1C,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,6BAA6B;IAC7B,KAAK,EAAE,MAAM,IAAI,CAAC;CACnB;AA6ED,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,SAAS,UAAU,EAAE,EAC9D,YAAY,EACZ,OAAO,EACP,WAAW,EACX,WAAgB,EAChB,aAAa,GACd,EAAE,mBAAmB,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,kBAAkB,CAAC,MAAM,CAAC,CAgFlE"}
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* useStateView Hook
|
|
3
|
-
*
|
|
4
|
-
* Manages state accumulation from events and provides replay controls.
|
|
5
|
-
*/
|
|
6
|
-
import { useState, useEffect, useRef, useCallback } from 'react';
|
|
7
|
-
/**
|
|
8
|
-
* Get changed paths between two objects (shallow comparison)
|
|
9
|
-
*/
|
|
10
|
-
function getChangedPaths(prev, next, prefix = '') {
|
|
11
|
-
const paths = [];
|
|
12
|
-
if (prev === next)
|
|
13
|
-
return paths;
|
|
14
|
-
if (typeof prev !== 'object' ||
|
|
15
|
-
typeof next !== 'object' ||
|
|
16
|
-
prev === null ||
|
|
17
|
-
next === null) {
|
|
18
|
-
return prefix ? [prefix] : [];
|
|
19
|
-
}
|
|
20
|
-
const prevObj = prev;
|
|
21
|
-
const nextObj = next;
|
|
22
|
-
const allKeys = new Set([...Object.keys(prevObj), ...Object.keys(nextObj)]);
|
|
23
|
-
for (const key of allKeys) {
|
|
24
|
-
const path = prefix ? `${prefix}.${key}` : key;
|
|
25
|
-
if (prevObj[key] !== nextObj[key]) {
|
|
26
|
-
paths.push(path);
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
return paths;
|
|
30
|
-
}
|
|
31
|
-
/**
|
|
32
|
-
* Check if a transition should fire based on state change
|
|
33
|
-
*/
|
|
34
|
-
function shouldTriggerTransition(transition, prev, next, changedPaths) {
|
|
35
|
-
// Check if the watched path changed
|
|
36
|
-
if (!changedPaths.some((p) => p.startsWith(transition.watch))) {
|
|
37
|
-
return false;
|
|
38
|
-
}
|
|
39
|
-
const prevValue = getValueAtPath(prev, transition.watch);
|
|
40
|
-
const nextValue = getValueAtPath(next, transition.watch);
|
|
41
|
-
switch (transition.condition) {
|
|
42
|
-
case 'changed':
|
|
43
|
-
return prevValue !== nextValue;
|
|
44
|
-
case 'increased':
|
|
45
|
-
return typeof nextValue === 'number' && typeof prevValue === 'number' && nextValue > prevValue;
|
|
46
|
-
case 'decreased':
|
|
47
|
-
return typeof nextValue === 'number' && typeof prevValue === 'number' && nextValue < prevValue;
|
|
48
|
-
case 'added':
|
|
49
|
-
return prevValue === undefined && nextValue !== undefined;
|
|
50
|
-
case 'removed':
|
|
51
|
-
return prevValue !== undefined && nextValue === undefined;
|
|
52
|
-
default:
|
|
53
|
-
return false;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
function getValueAtPath(obj, path) {
|
|
57
|
-
const parts = path.split('.');
|
|
58
|
-
let current = obj;
|
|
59
|
-
for (const part of parts) {
|
|
60
|
-
if (current === null || current === undefined)
|
|
61
|
-
return undefined;
|
|
62
|
-
current = current[part];
|
|
63
|
-
}
|
|
64
|
-
return current;
|
|
65
|
-
}
|
|
66
|
-
export function useStateView({ initialState, reducer, eventSource, transitions = [], onStateChange, }) {
|
|
67
|
-
const [state, setState] = useState(initialState);
|
|
68
|
-
const [animations, setAnimations] = useState([]);
|
|
69
|
-
const prevStateRef = useRef(initialState);
|
|
70
|
-
const animationIdRef = useRef(0);
|
|
71
|
-
const triggerAnimation = useCallback((transition, _event) => {
|
|
72
|
-
const id = `anim-${++animationIdRef.current}`;
|
|
73
|
-
const duration = transition.duration ?? 500;
|
|
74
|
-
const animation = {
|
|
75
|
-
id,
|
|
76
|
-
type: transition.animate,
|
|
77
|
-
target: transition.target ?? transition.watch,
|
|
78
|
-
startTime: Date.now(),
|
|
79
|
-
duration,
|
|
80
|
-
params: transition.params,
|
|
81
|
-
};
|
|
82
|
-
setAnimations((prev) => [...prev, animation]);
|
|
83
|
-
// Auto-remove after duration
|
|
84
|
-
setTimeout(() => {
|
|
85
|
-
setAnimations((prev) => prev.filter((a) => a.id !== id));
|
|
86
|
-
}, duration);
|
|
87
|
-
}, []);
|
|
88
|
-
const handleEvent = useCallback((event) => {
|
|
89
|
-
setState((prevState) => {
|
|
90
|
-
const nextState = reducer(prevState, event);
|
|
91
|
-
const changedPaths = getChangedPaths(prevState, nextState);
|
|
92
|
-
// Trigger animations based on transitions
|
|
93
|
-
for (const transition of transitions) {
|
|
94
|
-
if (shouldTriggerTransition(transition, prevState, nextState, changedPaths)) {
|
|
95
|
-
triggerAnimation(transition, event);
|
|
96
|
-
}
|
|
97
|
-
}
|
|
98
|
-
// Notify listener
|
|
99
|
-
if (onStateChange && changedPaths.length > 0) {
|
|
100
|
-
onStateChange({
|
|
101
|
-
prev: prevState,
|
|
102
|
-
next: nextState,
|
|
103
|
-
changedPaths,
|
|
104
|
-
event,
|
|
105
|
-
});
|
|
106
|
-
}
|
|
107
|
-
prevStateRef.current = nextState;
|
|
108
|
-
return nextState;
|
|
109
|
-
});
|
|
110
|
-
}, [reducer, transitions, onStateChange, triggerAnimation]);
|
|
111
|
-
// Subscribe to event source
|
|
112
|
-
useEffect(() => {
|
|
113
|
-
const unsubscribe = eventSource.subscribe(handleEvent);
|
|
114
|
-
return unsubscribe;
|
|
115
|
-
}, [eventSource, handleEvent]);
|
|
116
|
-
const reset = useCallback(() => {
|
|
117
|
-
setState(initialState);
|
|
118
|
-
setAnimations([]);
|
|
119
|
-
prevStateRef.current = initialState;
|
|
120
|
-
}, [initialState]);
|
|
121
|
-
const isReplay = eventSource.mode === 'replay';
|
|
122
|
-
return {
|
|
123
|
-
state,
|
|
124
|
-
animations,
|
|
125
|
-
isReplay,
|
|
126
|
-
reset,
|
|
127
|
-
};
|
|
128
|
-
}
|
|
129
|
-
//# sourceMappingURL=useStateView.js.map
|