@principal-ade/dynamic-file-tree 0.2.35 → 0.2.37
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/dist/index.mjs +53 -9
- package/dist/src/components/CanvasListTree/CanvasListTree.stories.d.ts +12 -0
- package/dist/src/components/CanvasListTree/CanvasListTree.stories.d.ts.map +1 -1
- package/dist/src/components/CanvasListTree/CanvasListTreeCore.d.ts.map +1 -1
- package/dist/src/components/CanvasListTree/types.d.ts +5 -2
- package/dist/src/components/CanvasListTree/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -3141,21 +3141,18 @@ var WorkflowScenarioTreeCore = ({
|
|
|
3141
3141
|
}, NodeRenderer));
|
|
3142
3142
|
};
|
|
3143
3143
|
// src/components/CanvasListTree/CanvasListTreeCore.tsx
|
|
3144
|
-
import { Package as Package3, Folder, LayoutDashboard as LayoutDashboard2, FileText, Layers, Network, BarChart3 } from "lucide-react";
|
|
3144
|
+
import { Package as Package3, Folder, LayoutDashboard as LayoutDashboard2, FileText, Layers, Network, BarChart3, Gauge } from "lucide-react";
|
|
3145
3145
|
import React15, { useMemo as useMemo11, useRef as useRef6 } from "react";
|
|
3146
3146
|
import { Tree as Tree5 } from "react-arborist";
|
|
3147
|
-
var buildTreeData = (canvases, gitStatusMap) => {
|
|
3147
|
+
var buildTreeData = (canvases, dashboards, gitStatusMap) => {
|
|
3148
3148
|
const resourcesScopesCanvases = [];
|
|
3149
3149
|
const spansCanvases = [];
|
|
3150
|
-
const dashboardCanvases = [];
|
|
3151
3150
|
const regularCanvases = [];
|
|
3152
3151
|
for (const canvas of canvases) {
|
|
3153
3152
|
if (canvas.type === "resources" || canvas.type === "scopes") {
|
|
3154
3153
|
resourcesScopesCanvases.push(canvas);
|
|
3155
3154
|
} else if (canvas.type === "spans") {
|
|
3156
3155
|
spansCanvases.push(canvas);
|
|
3157
|
-
} else if (canvas.type === "dashboard") {
|
|
3158
|
-
dashboardCanvases.push(canvas);
|
|
3159
3156
|
} else {
|
|
3160
3157
|
regularCanvases.push(canvas);
|
|
3161
3158
|
}
|
|
@@ -3264,8 +3261,17 @@ var buildTreeData = (canvases, gitStatusMap) => {
|
|
|
3264
3261
|
children: spansNodes
|
|
3265
3262
|
});
|
|
3266
3263
|
}
|
|
3267
|
-
if (
|
|
3268
|
-
const dashboardNodes =
|
|
3264
|
+
if (dashboards.length > 0) {
|
|
3265
|
+
const dashboardNodes = dashboards.map((dashboard) => {
|
|
3266
|
+
const gitStatus = gitStatusMap ? lookupGitStatus(dashboard.path, gitStatusMap) : null;
|
|
3267
|
+
return {
|
|
3268
|
+
id: `dashboard:${dashboard.id}`,
|
|
3269
|
+
name: dashboard.name,
|
|
3270
|
+
type: "canvas",
|
|
3271
|
+
dashboard,
|
|
3272
|
+
gitStatus
|
|
3273
|
+
};
|
|
3274
|
+
}).sort((a, b) => a.name.localeCompare(b.name));
|
|
3269
3275
|
result.push({
|
|
3270
3276
|
id: "architecture-group:dashboards",
|
|
3271
3277
|
name: "Dashboards",
|
|
@@ -3297,6 +3303,26 @@ var getDefaultCanvasDragConfig = (node) => {
|
|
|
3297
3303
|
const CLI = "npx @principal-ai/principal-view-cli@latest";
|
|
3298
3304
|
switch (node.type) {
|
|
3299
3305
|
case "canvas":
|
|
3306
|
+
if (node.dashboard) {
|
|
3307
|
+
const content = [
|
|
3308
|
+
`# Dashboard: ${node.dashboard.name}`,
|
|
3309
|
+
`# For more information: ${CLI}`,
|
|
3310
|
+
node.dashboard.path
|
|
3311
|
+
].join(`
|
|
3312
|
+
`);
|
|
3313
|
+
return {
|
|
3314
|
+
dataType: DATA_TYPES.TEXT_SELECTION,
|
|
3315
|
+
primaryData: content,
|
|
3316
|
+
metadata: {
|
|
3317
|
+
name: node.dashboard.name,
|
|
3318
|
+
type: "dashboard",
|
|
3319
|
+
path: node.dashboard.path
|
|
3320
|
+
},
|
|
3321
|
+
suggestedActions: [DRAG_ACTIONS.INSERT_PATH, DRAG_ACTIONS.OPEN],
|
|
3322
|
+
sourcePanel: "canvas-list",
|
|
3323
|
+
dragPreview: `Dashboard: ${node.dashboard.name}`
|
|
3324
|
+
};
|
|
3325
|
+
}
|
|
3300
3326
|
if (node.canvas) {
|
|
3301
3327
|
const canvasType = node.canvas.type === "otel" ? "OTEL Canvas" : "Canvas";
|
|
3302
3328
|
const content = [
|
|
@@ -3374,6 +3400,7 @@ var getDefaultCanvasDragConfig = (node) => {
|
|
|
3374
3400
|
};
|
|
3375
3401
|
var CanvasListTreeCore = ({
|
|
3376
3402
|
canvases,
|
|
3403
|
+
dashboards = [],
|
|
3377
3404
|
theme,
|
|
3378
3405
|
onClick,
|
|
3379
3406
|
onContextMenu,
|
|
@@ -3401,10 +3428,11 @@ var CanvasListTreeCore = ({
|
|
|
3401
3428
|
const borderHeight = 2;
|
|
3402
3429
|
return contentLineHeight + paddingValue * 2 + borderHeight;
|
|
3403
3430
|
}, [verticalNodePadding]);
|
|
3404
|
-
const treeData = useMemo11(() => buildTreeData(canvases, gitStatusMap), [canvases, gitStatusMap]);
|
|
3431
|
+
const treeData = useMemo11(() => buildTreeData(canvases, dashboards, gitStatusMap), [canvases, dashboards, gitStatusMap]);
|
|
3405
3432
|
const NodeRenderer = (props) => {
|
|
3406
3433
|
const { node } = props;
|
|
3407
3434
|
const data = node.data;
|
|
3435
|
+
const isDashboard = !!data.dashboard;
|
|
3408
3436
|
const icon = data.type === "architecture-group" ? data.architectureGroupType === "resources-scopes" ? /* @__PURE__ */ React15.createElement(Layers, {
|
|
3409
3437
|
size: 16
|
|
3410
3438
|
}) : data.architectureGroupType === "spans" ? /* @__PURE__ */ React15.createElement(Network, {
|
|
@@ -3419,10 +3447,12 @@ var CanvasListTreeCore = ({
|
|
|
3419
3447
|
size: 16
|
|
3420
3448
|
}) : data.type === "overview" ? /* @__PURE__ */ React15.createElement(FileText, {
|
|
3421
3449
|
size: 16
|
|
3450
|
+
}) : isDashboard ? /* @__PURE__ */ React15.createElement(Gauge, {
|
|
3451
|
+
size: 16
|
|
3422
3452
|
}) : /* @__PURE__ */ React15.createElement(LayoutDashboard2, {
|
|
3423
3453
|
size: 16
|
|
3424
3454
|
});
|
|
3425
|
-
const nameColor = data.type === "architecture-group" ? theme.colors.info || "#3b82f6" : data.type === "package" ? theme.colors.primary : data.type === "canvas-folder" ? theme.colors.textSecondary : data.type === "overview" ? theme.colors.info || "#3b82f6" : theme.colors.warning || "#f59e0b";
|
|
3455
|
+
const nameColor = data.type === "architecture-group" ? theme.colors.info || "#3b82f6" : data.type === "package" ? theme.colors.primary : data.type === "canvas-folder" ? theme.colors.textSecondary : data.type === "overview" ? theme.colors.info || "#3b82f6" : isDashboard ? theme.colors.success || "#22c55e" : theme.colors.warning || "#f59e0b";
|
|
3426
3456
|
const nodeHorizontalPadding = data.type === "overview" || data.type === "canvas" ? `calc(${horizontalNodePadding} + 12px)` : horizontalNodePadding;
|
|
3427
3457
|
const rightContent = (() => {
|
|
3428
3458
|
if (data.gitStatus && (data.type === "canvas" || data.type === "overview")) {
|
|
@@ -3458,20 +3488,34 @@ var CanvasListTreeCore = ({
|
|
|
3458
3488
|
const lastSelectionRef = useRef6(null);
|
|
3459
3489
|
const lastClickEventRef = useRef6(null);
|
|
3460
3490
|
const handleSelect = (selectedNodes) => {
|
|
3491
|
+
console.log("[CanvasListTreeCore] handleSelect called:", {
|
|
3492
|
+
nodeCount: selectedNodes.length
|
|
3493
|
+
});
|
|
3461
3494
|
if (selectedNodes.length === 0)
|
|
3462
3495
|
return;
|
|
3463
3496
|
const node = selectedNodes[0];
|
|
3464
3497
|
const nodeData = node.data;
|
|
3498
|
+
console.log("[CanvasListTreeCore] Selected node:", {
|
|
3499
|
+
id: nodeData.id,
|
|
3500
|
+
name: nodeData.name,
|
|
3501
|
+
type: nodeData.type,
|
|
3502
|
+
hasDashboard: !!nodeData.dashboard,
|
|
3503
|
+
hasCanvas: !!nodeData.canvas
|
|
3504
|
+
});
|
|
3465
3505
|
const now = Date.now();
|
|
3466
3506
|
const lastSelection = lastSelectionRef.current;
|
|
3467
3507
|
if (lastSelection && lastSelection.nodeId === nodeData.id && now - lastSelection.timestamp < 50) {
|
|
3508
|
+
console.log("[CanvasListTreeCore] Skipping duplicate selection");
|
|
3468
3509
|
return;
|
|
3469
3510
|
}
|
|
3470
3511
|
lastSelectionRef.current = { nodeId: nodeData.id, timestamp: now };
|
|
3471
3512
|
if (nodeData.type === "overview" || nodeData.type === "canvas") {
|
|
3513
|
+
console.log("[CanvasListTreeCore] Emitting onClick for node:", nodeData.id);
|
|
3472
3514
|
const event = lastClickEventRef.current;
|
|
3473
3515
|
lastClickEventRef.current = null;
|
|
3474
3516
|
onClick(nodeData, event ?? undefined);
|
|
3517
|
+
} else {
|
|
3518
|
+
console.log("[CanvasListTreeCore] Not emitting onClick - node type is:", nodeData.type);
|
|
3475
3519
|
}
|
|
3476
3520
|
};
|
|
3477
3521
|
const initialHeight = 600;
|
|
@@ -9,4 +9,16 @@ export declare const RootOnly: Story;
|
|
|
9
9
|
export declare const Empty: Story;
|
|
10
10
|
export declare const TerminalTheme: Story;
|
|
11
11
|
export declare const MatrixTheme: Story;
|
|
12
|
+
/**
|
|
13
|
+
* Demonstrates all architecture groups including:
|
|
14
|
+
* - Resources & Scopes (Layers icon)
|
|
15
|
+
* - Spans (Network icon)
|
|
16
|
+
* - Dashboards (BarChart3 icon)
|
|
17
|
+
* - Misc (Folder icon)
|
|
18
|
+
*/
|
|
19
|
+
export declare const ArchitectureGroups: Story;
|
|
20
|
+
/**
|
|
21
|
+
* Dashboards only - shows just the Dashboards architecture group
|
|
22
|
+
*/
|
|
23
|
+
export declare const DashboardsOnly: Story;
|
|
12
24
|
//# sourceMappingURL=CanvasListTree.stories.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasListTree.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTree.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"CanvasListTree.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTree.stories.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAGvD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAuL1D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,kBAAkB,CAmCzC,CAAC;AAEF,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAyBjD,eAAO,MAAM,YAAY,EAAE,KAU1B,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,QAAQ,EAAE,KAUtB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAUnB,CAAC;AAEF,eAAO,MAAM,aAAa,EAAE,KAU3B,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAUzB,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAWhC,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc,EAAE,KAW5B,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CanvasListTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAEV,mBAAmB,
|
|
1
|
+
{"version":3,"file":"CanvasListTreeCore.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/CanvasListTreeCore.tsx"],"names":[],"mappings":"AACA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAS/C,OAAO,KAAK,EAEV,mBAAmB,EAGpB,MAAM,SAAS,CAAC;AAuUjB,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAoP5D,CAAC"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import type { Theme } from '@principal-ade/industry-theme';
|
|
2
|
-
import type { DiscoveredCanvas } from '@principal-ai/principal-view-core';
|
|
2
|
+
import type { DiscoveredCanvas, DiscoveredDashboard } from '@principal-ai/principal-view-core';
|
|
3
3
|
import type { GitFileStatus, GitStatus } from '../../utils/gitStatus';
|
|
4
4
|
import type { TreeNodeData, DragConfig } from '../TreeNode';
|
|
5
|
-
export type { DiscoveredCanvas };
|
|
5
|
+
export type { DiscoveredCanvas, DiscoveredDashboard };
|
|
6
6
|
export type CanvasListNodeType = 'package' | 'architecture-group' | 'canvas-folder' | 'canvas' | 'overview';
|
|
7
7
|
export interface CanvasListNodeData extends TreeNodeData {
|
|
8
8
|
type: CanvasListNodeType;
|
|
9
9
|
children?: CanvasListNodeData[];
|
|
10
10
|
canvas?: DiscoveredCanvas;
|
|
11
|
+
dashboard?: DiscoveredDashboard;
|
|
11
12
|
packageName?: string;
|
|
12
13
|
scope?: 'package' | 'root';
|
|
13
14
|
markdownPath?: string;
|
|
@@ -17,6 +18,8 @@ export interface CanvasListNodeData extends TreeNodeData {
|
|
|
17
18
|
}
|
|
18
19
|
export interface CanvasListTreeProps {
|
|
19
20
|
canvases: DiscoveredCanvas[];
|
|
21
|
+
/** Dashboard files to display in the Dashboards group */
|
|
22
|
+
dashboards?: DiscoveredDashboard[];
|
|
20
23
|
theme: Theme;
|
|
21
24
|
onClick: (node: CanvasListNodeData, event?: React.MouseEvent) => void;
|
|
22
25
|
/** Context menu handler - called on right-click of a node */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/CanvasListTree/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,KAAK,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,MAAM,mCAAmC,CAAC;AAE/F,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,KAAK,EAAE,YAAY,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAG5D,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,CAAC;AAEtD,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,oBAAoB,GAAG,eAAe,GAAG,QAAQ,GAAG,UAAU,CAAC;AAE5G,MAAM,WAAW,kBAAmB,SAAQ,YAAY;IACtD,IAAI,EAAE,kBAAkB,CAAC;IACzB,QAAQ,CAAC,EAAE,kBAAkB,EAAE,CAAC;IAGhC,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,SAAS,CAAC,EAAE,mBAAmB,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,SAAS,GAAG,MAAM,CAAC;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,gEAAgE;IAChE,qBAAqB,CAAC,EAAE,kBAAkB,GAAG,OAAO,GAAG,YAAY,GAAG,MAAM,CAAC;IAG7E,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,gBAAgB,EAAE,CAAC;IAC7B,yDAAyD;IACzD,UAAU,CAAC,EAAE,mBAAmB,EAAE,CAAC;IACnC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,CAAC,IAAI,EAAE,kBAAkB,EAAE,KAAK,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IACtE,6DAA6D;IAC7D,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5E,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC3C;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACpC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IACrD,qBAAqB,CAAC,EAAE,MAAM,CAAC;IAC/B,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAG5B,aAAa,CAAC,EAAE,aAAa,EAAE,CAAC;IAGhC;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,aAAa,CAAC,EAAE,CAAC,IAAI,EAAE,kBAAkB,KAAK,UAAU,GAAG,SAAS,CAAC;CACtE"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@principal-ade/dynamic-file-tree",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.37",
|
|
4
4
|
"description": "React component for selective directory filtering and file tree visualization",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.mjs",
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
"@principal-ade/industry-theme": "^0.1.8",
|
|
82
82
|
"@principal-ade/panel-framework-core": "^0.5.1",
|
|
83
83
|
"@principal-ai/alexandria-core-library": "^0.3.3",
|
|
84
|
-
"@principal-ai/principal-view-core": "0.26.
|
|
84
|
+
"@principal-ai/principal-view-core": "0.26.14",
|
|
85
85
|
"@principal-ai/repository-abstraction": "^0.5.7",
|
|
86
86
|
"@storybook/addon-docs": "^10.2.14",
|
|
87
87
|
"@storybook/addon-onboarding": "^10.2.14",
|