@principal-ade/dynamic-file-tree 0.2.35 → 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 +39 -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")) {
|
|
@@ -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,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.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.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",
|