@upbound/monarch-blocks 0.5.0 → 0.6.0
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 +17 -0
- package/dist/cel-filter-bar.js +9 -3
- package/dist/cel-filter-bar.js.map +1 -1
- package/dist/chart.js.map +1 -1
- package/dist/chat-interface.js +1 -1
- package/dist/chat-interface.js.map +1 -1
- package/dist/code-block.js.map +1 -1
- package/dist/data-table.d.ts +4 -176
- package/dist/data-table.js +57 -14
- package/dist/data-table.js.map +1 -1
- package/dist/empty-view-DO36LNvk.d.ts +179 -0
- package/dist/filter-bar.js +12 -3
- package/dist/filter-bar.js.map +1 -1
- package/dist/floating-widget.js.map +1 -1
- package/dist/graph.css +73 -0
- package/dist/graph.d.ts +182 -0
- package/dist/graph.js +1780 -0
- package/dist/graph.js.map +1 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.js +1004 -31
- package/dist/index.js.map +1 -1
- package/dist/page-header.js.map +1 -1
- package/dist/relative-time.js.map +1 -1
- package/dist/section-header.js.map +1 -1
- package/dist/section-nav.js.map +1 -1
- package/dist/timeline.js.map +1 -1
- package/package.json +7 -3
package/dist/graph.d.ts
ADDED
|
@@ -0,0 +1,182 @@
|
|
|
1
|
+
import { Node, NodeProps, Edge, EdgeProps, NodeTypes, EdgeTypes } from 'reactflow';
|
|
2
|
+
export { Edge, Node } from 'reactflow';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
import { ColumnDef, ColumnFiltersState } from '@tanstack/react-table';
|
|
5
|
+
import { D as DataTableEmptyConfig, T as TableDataState } from './empty-view-DO36LNvk.js';
|
|
6
|
+
import '@upbound/monarch-core';
|
|
7
|
+
|
|
8
|
+
type GraphBadgeVariant = 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link' | 'healthy' | 'unhealthy' | 'warning' | 'stale' | 'info' | 'unknown';
|
|
9
|
+
type BadgeWithTooltip = {
|
|
10
|
+
variant?: GraphBadgeVariant;
|
|
11
|
+
tooltipContent?: string;
|
|
12
|
+
children: React.ReactNode;
|
|
13
|
+
};
|
|
14
|
+
interface NodeData<T extends object = object> {
|
|
15
|
+
rawData: T;
|
|
16
|
+
title: string;
|
|
17
|
+
subtitle: string;
|
|
18
|
+
name: string;
|
|
19
|
+
typeDescriptors: {
|
|
20
|
+
className?: string;
|
|
21
|
+
default: string;
|
|
22
|
+
compact?: string;
|
|
23
|
+
};
|
|
24
|
+
badges: {
|
|
25
|
+
default: BadgeWithTooltip[];
|
|
26
|
+
compact?: BadgeWithTooltip[];
|
|
27
|
+
};
|
|
28
|
+
compact?: boolean;
|
|
29
|
+
state?: 'default' | 'progressing' | 'paused';
|
|
30
|
+
onClick?: (nodeId: string, data: NodeData) => void;
|
|
31
|
+
expanded?: boolean;
|
|
32
|
+
onExpandToggle?: (nodeId: string) => void;
|
|
33
|
+
isExpandable?: boolean;
|
|
34
|
+
isHighlighted?: boolean;
|
|
35
|
+
}
|
|
36
|
+
type NodeLoading = Node & {
|
|
37
|
+
type: 'loading';
|
|
38
|
+
data?: {};
|
|
39
|
+
};
|
|
40
|
+
type NodeDefault<T extends object = object> = Node<NodeData<T>> & {
|
|
41
|
+
type?: 'default';
|
|
42
|
+
};
|
|
43
|
+
declare function isDefaultNode(node: NodeLoading | NodeDefault): node is NodeDefault;
|
|
44
|
+
type GraphNodeProps<T extends NodeData | {}> = NodeProps<T>;
|
|
45
|
+
declare function GraphNode<T extends NodeData = NodeData>({ id, data, ...props }: GraphNodeProps<T>): React.JSX.Element;
|
|
46
|
+
declare function GraphNodeSkeleton(_props: NodeProps<{}>): React.JSX.Element;
|
|
47
|
+
|
|
48
|
+
interface GraphActionsProviderProps {
|
|
49
|
+
initialNodes?: (NodeLoading | NodeDefault)[];
|
|
50
|
+
initialEdges?: Edge[];
|
|
51
|
+
children: React.ReactNode;
|
|
52
|
+
}
|
|
53
|
+
interface GraphActionsProviderRef {
|
|
54
|
+
addNodes: (newNodes: (NodeLoading | NodeDefault)[]) => void;
|
|
55
|
+
addEdges: (newEdges: Edge[]) => void;
|
|
56
|
+
setNodes: (nodes: (NodeLoading | NodeDefault)[]) => void;
|
|
57
|
+
setEdges: (edges: Edge[]) => void;
|
|
58
|
+
toggleNodeExpansion: (nodeId: string) => void;
|
|
59
|
+
updateNode: (nodeId: string, node: NodeLoading | NodeDefault) => void;
|
|
60
|
+
reset: () => void;
|
|
61
|
+
}
|
|
62
|
+
declare const GraphActionsProvider: React.ForwardRefExoticComponent<GraphActionsProviderProps & React.RefAttributes<GraphActionsProviderRef>>;
|
|
63
|
+
|
|
64
|
+
declare const GraphEdge: React.FC<EdgeProps & {
|
|
65
|
+
stopOpacity?: number;
|
|
66
|
+
}>;
|
|
67
|
+
|
|
68
|
+
interface GraphOptions<T extends object> {
|
|
69
|
+
data: T[];
|
|
70
|
+
nodeTransform: (item: T, data: T[]) => NodeLoading | NodeDefault | (NodeLoading | NodeDefault)[];
|
|
71
|
+
edgeTransform: (item: T) => Edge[] | undefined;
|
|
72
|
+
nodeTypes?: NodeTypes;
|
|
73
|
+
edgeTypes?: EdgeTypes;
|
|
74
|
+
}
|
|
75
|
+
type GraphDataState = TableDataState;
|
|
76
|
+
interface GraphEmptyView {
|
|
77
|
+
empty?: DataTableEmptyConfig;
|
|
78
|
+
error?: DataTableEmptyConfig;
|
|
79
|
+
filter?: DataTableEmptyConfig;
|
|
80
|
+
}
|
|
81
|
+
interface GraphProps<T extends object> {
|
|
82
|
+
id: string;
|
|
83
|
+
viewportFocusNodeId?: string;
|
|
84
|
+
config: GraphOptions<T>;
|
|
85
|
+
columnDefinitions?: ColumnDef<T, unknown>[];
|
|
86
|
+
title?: React.ReactNode;
|
|
87
|
+
loading?: boolean;
|
|
88
|
+
showError?: boolean;
|
|
89
|
+
className?: string;
|
|
90
|
+
emptyView?: GraphEmptyView;
|
|
91
|
+
ActionsComponent?: React.ComponentType<{
|
|
92
|
+
state: GraphDataState;
|
|
93
|
+
}>;
|
|
94
|
+
disableSearch?: boolean;
|
|
95
|
+
disableFilters?: boolean;
|
|
96
|
+
searchTerm?: string;
|
|
97
|
+
onSearchTermChange?: React.Dispatch<React.SetStateAction<string>>;
|
|
98
|
+
filters?: ColumnFiltersState;
|
|
99
|
+
onFiltersChange?: React.Dispatch<React.SetStateAction<ColumnFiltersState>>;
|
|
100
|
+
}
|
|
101
|
+
declare const defaultGraphErrorConfig: DataTableEmptyConfig;
|
|
102
|
+
declare const defaultGraphEmptyConfig: DataTableEmptyConfig;
|
|
103
|
+
declare const defaultGraphNoFilterFoundConfig: DataTableEmptyConfig;
|
|
104
|
+
declare function Graph<T extends object>({ id, viewportFocusNodeId, config, columnDefinitions, title, emptyView, showError, className, loading, ActionsComponent: Actions, disableSearch, disableFilters, searchTerm: parentGlobalFilter, onSearchTermChange: parentSetGlobalFilter, filters: parentColumnFilters, onFiltersChange: parentSetColumnFilters, children, }: React.PropsWithChildren<GraphProps<T>>): React.JSX.Element;
|
|
105
|
+
|
|
106
|
+
declare const GraphView: React.ForwardRefExoticComponent<{
|
|
107
|
+
viewportFocusNodeId?: string;
|
|
108
|
+
defaultNodes?: (NodeLoading | NodeDefault)[];
|
|
109
|
+
defaultEdges?: Edge[];
|
|
110
|
+
nodeTypes?: NodeTypes;
|
|
111
|
+
edgeTypes?: EdgeTypes;
|
|
112
|
+
children?: React.ReactNode;
|
|
113
|
+
} & {
|
|
114
|
+
children?: React.ReactNode | undefined;
|
|
115
|
+
} & React.RefAttributes<GraphActionsProviderRef>>;
|
|
116
|
+
|
|
117
|
+
/**
|
|
118
|
+
* Auto Layout Algorithm for Graph Positioning
|
|
119
|
+
*
|
|
120
|
+
* This hook implements a tree-based layout algorithm that positions nodes in a hierarchical graph.
|
|
121
|
+
* The algorithm ensures proper spacing and positioning by finding the actual lowest positioned nodes.
|
|
122
|
+
*
|
|
123
|
+
* Flow Overview:
|
|
124
|
+
* 1. Filter visible nodes (exclude hidden nodes from layout calculations)
|
|
125
|
+
* 2. Build tree structure from nodes and edges using getTrees()
|
|
126
|
+
* 3. Position nodes recursively with positionNodes():
|
|
127
|
+
* - Calculate X position based on node depth in hierarchy
|
|
128
|
+
* - Calculate Y position based on actual lowest positioned node in previous sibling's subtree
|
|
129
|
+
* - Use getLowestPositionYInSubtree() to find the real bottom of each subtree
|
|
130
|
+
* 4. Flatten positioned tree back to array of nodes
|
|
131
|
+
* 5. Return only visible nodes with their calculated positions
|
|
132
|
+
*
|
|
133
|
+
* Key Features:
|
|
134
|
+
* - Sibling nodes are positioned below the actual lowest node in previous sibling's entire subtree
|
|
135
|
+
* - Uses Math.max to find the deepest positioned node across all child subtrees
|
|
136
|
+
* - Proper horizontal spacing based on hierarchy depth
|
|
137
|
+
* - Vertical spacing prevents node overlapping by using real node positions
|
|
138
|
+
* - Hidden nodes are completely excluded from ReactFlow
|
|
139
|
+
* - Loading nodes are properly displayed when parent is expanded
|
|
140
|
+
*
|
|
141
|
+
*/
|
|
142
|
+
|
|
143
|
+
interface AutoLayoutReturn {
|
|
144
|
+
nodes: (NodeLoading | NodeDefault)[];
|
|
145
|
+
edges: Edge[];
|
|
146
|
+
nodeMap: Map<string, NodeLoading | NodeDefault>;
|
|
147
|
+
}
|
|
148
|
+
declare const useAutoLayout: (nodes: (NodeLoading | NodeDefault)[], edges: Edge[], { viewportFocusNodeId }: {
|
|
149
|
+
viewportFocusNodeId?: string;
|
|
150
|
+
}) => AutoLayoutReturn;
|
|
151
|
+
|
|
152
|
+
interface UseNodeVisibilityReturn {
|
|
153
|
+
nodes: (NodeLoading | NodeDefault)[];
|
|
154
|
+
edges: Edge[];
|
|
155
|
+
}
|
|
156
|
+
declare const useNodeVisibility: (nodes: (NodeLoading | NodeDefault)[], edges: Edge[]) => UseNodeVisibilityReturn;
|
|
157
|
+
|
|
158
|
+
interface GraphActions {
|
|
159
|
+
nodes: (NodeLoading | NodeDefault)[];
|
|
160
|
+
edges: Edge[];
|
|
161
|
+
addNodes: (newNodes: (NodeLoading | NodeDefault)[]) => void;
|
|
162
|
+
addEdges: (newEdges: Edge[]) => void;
|
|
163
|
+
removeNodes: (nodeIds: string[]) => void;
|
|
164
|
+
removeEdges: (edgeIds: string[]) => void;
|
|
165
|
+
setNodes: (nodes: (NodeLoading | NodeDefault)[]) => void;
|
|
166
|
+
setEdges: (edges: Edge[]) => void;
|
|
167
|
+
updateNode: (nodeId: string, node: NodeLoading | NodeDefault) => void;
|
|
168
|
+
toggleNodeExpansion: (nodeId: string) => void;
|
|
169
|
+
resetGraph: () => void;
|
|
170
|
+
}
|
|
171
|
+
declare const useGraphActions: (initialNodes?: (NodeLoading | NodeDefault)[], initialEdges?: Edge[]) => GraphActions;
|
|
172
|
+
|
|
173
|
+
declare const useGraphActionsContext: () => GraphActions;
|
|
174
|
+
|
|
175
|
+
declare const useGetViewportNodeIds: (debounceDelay?: number) => string[];
|
|
176
|
+
|
|
177
|
+
declare const getGraphDescendants: (node: Node, nodes: Node[], edges: Edge[]) => {
|
|
178
|
+
nodes: Node[];
|
|
179
|
+
edges: Edge[];
|
|
180
|
+
};
|
|
181
|
+
|
|
182
|
+
export { type AutoLayoutReturn, Graph, type GraphActions, GraphActionsProvider, type GraphActionsProviderRef, type GraphBadgeVariant, type GraphDataState, GraphEdge, type GraphEmptyView, GraphNode, type GraphNodeProps, GraphNodeSkeleton, type GraphOptions, type GraphProps, GraphView, type NodeData, type NodeDefault, type NodeLoading, type UseNodeVisibilityReturn, defaultGraphEmptyConfig, defaultGraphErrorConfig, defaultGraphNoFilterFoundConfig, getGraphDescendants, isDefaultNode, useAutoLayout, useGetViewportNodeIds, useGraphActions, useGraphActionsContext, useNodeVisibility };
|