@principal-ade/dynamic-file-tree 0.2.34 → 0.2.36
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 +49 -4
- 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 +6 -3
- package/dist/src/components/CanvasListTree/types.d.ts.map +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -3141,10 +3141,10 @@ 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 } 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
3150
|
const regularCanvases = [];
|
|
@@ -3261,6 +3261,25 @@ var buildTreeData = (canvases, gitStatusMap) => {
|
|
|
3261
3261
|
children: spansNodes
|
|
3262
3262
|
});
|
|
3263
3263
|
}
|
|
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));
|
|
3275
|
+
result.push({
|
|
3276
|
+
id: "architecture-group:dashboards",
|
|
3277
|
+
name: "Dashboards",
|
|
3278
|
+
type: "architecture-group",
|
|
3279
|
+
architectureGroupType: "dashboards",
|
|
3280
|
+
children: dashboardNodes
|
|
3281
|
+
});
|
|
3282
|
+
}
|
|
3264
3283
|
if (regularCanvases.length > 0) {
|
|
3265
3284
|
const regularNodes = buildPackageGroupedCanvases(regularCanvases);
|
|
3266
3285
|
result.push({
|
|
@@ -3284,6 +3303,26 @@ var getDefaultCanvasDragConfig = (node) => {
|
|
|
3284
3303
|
const CLI = "npx @principal-ai/principal-view-cli@latest";
|
|
3285
3304
|
switch (node.type) {
|
|
3286
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
|
+
}
|
|
3287
3326
|
if (node.canvas) {
|
|
3288
3327
|
const canvasType = node.canvas.type === "otel" ? "OTEL Canvas" : "Canvas";
|
|
3289
3328
|
const content = [
|
|
@@ -3361,6 +3400,7 @@ var getDefaultCanvasDragConfig = (node) => {
|
|
|
3361
3400
|
};
|
|
3362
3401
|
var CanvasListTreeCore = ({
|
|
3363
3402
|
canvases,
|
|
3403
|
+
dashboards = [],
|
|
3364
3404
|
theme,
|
|
3365
3405
|
onClick,
|
|
3366
3406
|
onContextMenu,
|
|
@@ -3388,14 +3428,17 @@ var CanvasListTreeCore = ({
|
|
|
3388
3428
|
const borderHeight = 2;
|
|
3389
3429
|
return contentLineHeight + paddingValue * 2 + borderHeight;
|
|
3390
3430
|
}, [verticalNodePadding]);
|
|
3391
|
-
const treeData = useMemo11(() => buildTreeData(canvases, gitStatusMap), [canvases, gitStatusMap]);
|
|
3431
|
+
const treeData = useMemo11(() => buildTreeData(canvases, dashboards, gitStatusMap), [canvases, dashboards, gitStatusMap]);
|
|
3392
3432
|
const NodeRenderer = (props) => {
|
|
3393
3433
|
const { node } = props;
|
|
3394
3434
|
const data = node.data;
|
|
3435
|
+
const isDashboard = !!data.dashboard;
|
|
3395
3436
|
const icon = data.type === "architecture-group" ? data.architectureGroupType === "resources-scopes" ? /* @__PURE__ */ React15.createElement(Layers, {
|
|
3396
3437
|
size: 16
|
|
3397
3438
|
}) : data.architectureGroupType === "spans" ? /* @__PURE__ */ React15.createElement(Network, {
|
|
3398
3439
|
size: 16
|
|
3440
|
+
}) : data.architectureGroupType === "dashboards" ? /* @__PURE__ */ React15.createElement(BarChart3, {
|
|
3441
|
+
size: 16
|
|
3399
3442
|
}) : /* @__PURE__ */ React15.createElement(Folder, {
|
|
3400
3443
|
size: 16
|
|
3401
3444
|
}) : data.type === "package" ? /* @__PURE__ */ React15.createElement(Package3, {
|
|
@@ -3404,10 +3447,12 @@ var CanvasListTreeCore = ({
|
|
|
3404
3447
|
size: 16
|
|
3405
3448
|
}) : data.type === "overview" ? /* @__PURE__ */ React15.createElement(FileText, {
|
|
3406
3449
|
size: 16
|
|
3450
|
+
}) : isDashboard ? /* @__PURE__ */ React15.createElement(Gauge, {
|
|
3451
|
+
size: 16
|
|
3407
3452
|
}) : /* @__PURE__ */ React15.createElement(LayoutDashboard2, {
|
|
3408
3453
|
size: 16
|
|
3409
3454
|
});
|
|
3410
|
-
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";
|
|
3411
3456
|
const nodeHorizontalPadding = data.type === "overview" || data.type === "canvas" ? `calc(${horizontalNodePadding} + 12px)` : horizontalNodePadding;
|
|
3412
3457
|
const rightContent = (() => {
|
|
3413
3458
|
if (data.gitStatus && (data.type === "canvas" || data.type === "overview")) {
|
|
@@ -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,CAoO5D,CAAC"}
|
|
@@ -1,22 +1,25 @@
|
|
|
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;
|
|
14
15
|
/** Architecture group type for grouping special canvas types */
|
|
15
|
-
architectureGroupType?: 'resources-scopes' | 'spans' | 'misc';
|
|
16
|
+
architectureGroupType?: 'resources-scopes' | 'spans' | 'dashboards' | 'misc';
|
|
16
17
|
gitStatus?: GitStatus;
|
|
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.36",
|
|
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.
|
|
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",
|