@devtable/dashboard 7.5.2 → 7.6.0

package/dist/interactions/interactions-viewer/data/edges.d.ts

@@ -0,0 +1,8 @@
+import _ from 'lodash';
+import { Edge } from 'reactflow';
+import { DashboardModelInstance } from '~/model';
+import { TFlowNode } from './types';
+export declare function makeEdges(model: DashboardModelInstance, staticNodeMap: _.Dictionary<TFlowNode>): {
+    edges: Edge<any>[];
+    edgeNodes: never[];
+};

package/dist/interactions/interactions-viewer/data/index.d.ts

@@ -0,0 +1,5 @@
+import { DashboardModelInstance } from '~/model';
+export declare function makeNodesAndEdges(model: DashboardModelInstance): {
+    nodes: import("./types").TFlowNode[];
+    edges: import("reactflow").Edge<any>[];
+};

package/dist/interactions/interactions-viewer/data/metrics.d.ts

@@ -0,0 +1,21 @@
+export declare function calc(index: number, unit: number, gap: number): number;
+export declare function calcTotal(count: number, unit: number, gap: number): number;
+export declare const FilterWidth = 200;
+export declare const FilterHeight = 40;
+export declare const FilterPaddingT = 40;
+export declare const FilterPaddingB = 25;
+export declare const FilterPaddingL = 25;
+export declare const FilterPaddingR = 25;
+export declare const FilterGap = 25;
+export declare const ViewPaddingX = 25;
+export declare const ViewPaddingT = 40;
+export declare const ViewPaddingB = 25;
+export declare const ViewPaddingY: number;
+export declare const ViewWidth = 350;
+export declare const ViewHeight = 150;
+export declare const ViewGapX = 150;
+export declare const ViewGapY = 150;
+export declare const PanelWidth = 300;
+export declare const PanelHeight = 40;
+export declare const PanelGapX = 25;
+export declare const PanelGapY = 25;

package/dist/interactions/interactions-viewer/data/nodes.d.ts

@@ -0,0 +1,3 @@
+import { DashboardModelInstance } from '~/model';
+import { TFlowNode } from './types';
+export declare function makeNodes(model: DashboardModelInstance): TFlowNode[];

package/dist/interactions/interactions-viewer/data/position.d.ts

@@ -0,0 +1,12 @@
+import { Edge } from 'reactflow';
+import { TFlowNode } from './types';
+interface ICommonProps {
+    nodeMap: Record<string, TFlowNode>;
+    nodes: TFlowNode[];
+    edges: Edge[];
+}
+export declare function reposition({ nodeMap, nodes, edges }: ICommonProps): {
+    nodes: TFlowNode[];
+    edges: Edge<any>[];
+};
+export {};

package/dist/interactions/interactions-viewer/data/types.d.ts

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+import { Node } from 'reactflow';
+export declare type TFlowNode_View = Node & {
+    _node_type: 'view-root';
+    _view_level: number;
+    _sub_view_ids: string[];
+    style: CSSProperties;
+};
+export declare type TFlowNode_Default = Node & {
+    _node_type: 'filter-root' | 'filter' | 'open-link-root' | 'panel';
+};
+export declare type TFlowNode = TFlowNode_View | TFlowNode_Default;

package/dist/interactions/interactions-viewer/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+interface IInteractionsViewerModal {
+    opened: boolean;
+    close: () => void;
+}
+export declare const InteractionsViewerModal: (({ opened, close }: IInteractionsViewerModal) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/dist/interactions/interactions-viewer/node-with-interactions/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Position } from 'reactflow';
+export declare const InteractionNode: import("react").MemoExoticComponent<({ data, isConnectable, sourcePosition, targetPosition, ...rest }: {
+    data: any;
+    isConnectable: boolean;
+    sourcePosition?: Position | undefined;
+    targetPosition?: Position | undefined;
+}) => JSX.Element>;

package/dist/interactions/interactions-viewer/node-with-interactions/lines.d.ts

@@ -0,0 +1,4 @@
+import { ReactNode } from 'react';
+import { TInteraction, TInteractionLine } from './types';
+export declare const IconMap: Record<string, ReactNode>;
+export declare function getInteractionLines(interactions: TInteraction[]): TInteractionLine[];

package/dist/interactions/interactions-viewer/node-with-interactions/types.d.ts

@@ -0,0 +1,23 @@
+import { ReactNode } from 'react';
+export declare type TInteraction = {
+    schemaRef: 'builtin:op:open-link';
+    urlTemplate: string;
+    shortURLTemplate: string;
+} | {
+    schemaRef: 'builtin:op:set_filter_values';
+    filters: {
+        key: string;
+        label: string;
+    }[];
+} | {
+    schemaRef: 'builtin:op:clear_filter_values';
+    filters: {
+        key: string;
+        label: string;
+    }[];
+};
+export declare type TInteractionLine = {
+    key: string;
+    icon: ReactNode;
+    text: ReactNode;
+};

package/dist/interactions/interactions-viewer/viewer.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const InteractionsViewer: (() => JSX.Element) & {
+    displayName: string;
+};

package/dist/style.css

@@ -1 +1 @@
-.filter-settings-tabs{width:100%;height:100%}.filter-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.filter-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.filter-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.panel-root{height:100%;width:100%;max-width:100%;background:transparent;border-radius:4px;position:relative}.panel-settings-tabs{width:100%;height:100%}.panel-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.panel-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.panel-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.viz-root{width:100%;overflow:scroll;flex-grow:1;background-color:#fff}.panel-dropdown-target{text-align:center;transition:background-color .3s ease}.panel-dropdown-target:hover{cursor:pointer;background-color:#6464640d}.react-grid-item{padding:0}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.code-textarea textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.dashboard-root{overflow:scroll;overflow-x:hidden;padding:0 0 10px;height:100%}.dashboard-sticky-area{z-index:100;background:white;margin:0;padding:0 10px}.mantine-RichTextEditor-root{overflow-y:scroll!important;-ms-overflow-style:initial!important}*:not(.mantine-RichTextEditor-root):not([data-enable-scrollbar])::-webkit-scrollbar{width:0!important;height:0!important}*:not([data-enable-scrollbar]){overflow:-moz-scrollbars-none;-ms-overflow-style:none}.minimal-monaco-editor{border-radius:4px;overflow:hidden;background-color:#1e1e1e;padding-top:14px}
+.react-flow__container{position:absolute;width:100%;height:100%;top:0;left:0}.react-flow__pane{z-index:1;cursor:-webkit-grab;cursor:grab}.react-flow__pane.selection{cursor:pointer}.react-flow__pane.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__viewport{transform-origin:0 0;z-index:2;pointer-events:none}.react-flow__renderer{z-index:4}.react-flow__selection{z-index:6}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible{outline:none}.react-flow .react-flow__edges{pointer-events:none;overflow:visible}.react-flow__edge-path,.react-flow__connection-path{stroke:#b1b1b7;stroke-width:1;fill:none}.react-flow__edge{pointer-events:visibleStroke;cursor:pointer}.react-flow__edge.animated path{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__edge.animated path.react-flow__edge-interaction{stroke-dasharray:none;-webkit-animation:none;animation:none}.react-flow__edge.inactive{pointer-events:none}.react-flow__edge.selected,.react-flow__edge:focus,.react-flow__edge:focus-visible{outline:none}.react-flow__edge.selected .react-flow__edge-path,.react-flow__edge:focus .react-flow__edge-path,.react-flow__edge:focus-visible .react-flow__edge-path{stroke:#555}.react-flow__edge-textwrapper{pointer-events:all}.react-flow__edge-textbg{fill:#fff}.react-flow__edge .react-flow__edge-text{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none}.react-flow__connection{pointer-events:none}.react-flow__connection .animated{stroke-dasharray:5;-webkit-animation:dashdraw .5s linear infinite;animation:dashdraw .5s linear infinite}.react-flow__connectionline{z-index:1001}.react-flow__nodes{pointer-events:none;transform-origin:0 0}.react-flow__node{position:absolute;-webkit-user-select:none;-moz-user-select:none;user-select:none;pointer-events:all;transform-origin:0 0;box-sizing:border-box;cursor:-webkit-grab;cursor:grab}.react-flow__node.dragging{cursor:-webkit-grabbing;cursor:grabbing}.react-flow__nodesselection{z-index:3;transform-origin:left top;pointer-events:none}.react-flow__nodesselection-rect{position:absolute;pointer-events:all;cursor:-webkit-grab;cursor:grab}.react-flow__handle{position:absolute;pointer-events:none;min-width:5px;min-height:5px;width:6px;height:6px;background:#1a192b;border:1px solid white;border-radius:100%}.react-flow__handle.connectable{pointer-events:all;cursor:crosshair}.react-flow__handle-bottom{top:auto;left:50%;bottom:-4px;transform:translate(-50%)}.react-flow__handle-top{left:50%;top:-4px;transform:translate(-50%)}.react-flow__handle-left{top:50%;left:-4px;transform:translateY(-50%)}.react-flow__handle-right{right:-4px;top:50%;transform:translateY(-50%)}.react-flow__edgeupdater{cursor:move;pointer-events:all}.react-flow__panel{position:absolute;z-index:5;margin:15px}.react-flow__panel.top{top:0}.react-flow__panel.bottom{bottom:0}.react-flow__panel.left{left:0}.react-flow__panel.right{right:0}.react-flow__panel.center{left:50%;transform:translate(-50%)}.react-flow__attribution{font-size:10px;background:rgba(255,255,255,.5);padding:2px 3px;margin:0}.react-flow__attribution a{text-decoration:none;color:#999}@-webkit-keyframes dashdraw{0%{stroke-dashoffset:10}}@keyframes dashdraw{0%{stroke-dashoffset:10}}.react-flow__edgelabel-renderer{position:absolute;width:100%;height:100%;pointer-events:none}.react-flow__edge.updating .react-flow__edge-path{stroke:#777}.react-flow__edge-text{font-size:10px}.react-flow__node.selectable:focus,.react-flow__node.selectable:focus-visible{outline:none}.react-flow__node-default,.react-flow__node-input,.react-flow__node-output,.react-flow__node-group{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.react-flow__node-default.selectable:hover,.react-flow__node-input.selectable:hover,.react-flow__node-output.selectable:hover,.react-flow__node-group.selectable:hover{box-shadow:0 1px 4px 1px #00000014}.react-flow__node-default.selectable.selected,.react-flow__node-default.selectable:focus,.react-flow__node-default.selectable:focus-visible,.react-flow__node-input.selectable.selected,.react-flow__node-input.selectable:focus,.react-flow__node-input.selectable:focus-visible,.react-flow__node-output.selectable.selected,.react-flow__node-output.selectable:focus,.react-flow__node-output.selectable:focus-visible,.react-flow__node-group.selectable.selected,.react-flow__node-group.selectable:focus,.react-flow__node-group.selectable:focus-visible{box-shadow:0 0 0 .5px #1a192b}.react-flow__node-group{background-color:#f0f0f040}.react-flow__nodesselection-rect,.react-flow__selection{background:rgba(0,89,220,.08);border:1px dotted rgba(0,89,220,.8)}.react-flow__nodesselection-rect:focus,.react-flow__nodesselection-rect:focus-visible,.react-flow__selection:focus,.react-flow__selection:focus-visible{outline:none}.react-flow__controls{box-shadow:0 0 2px 1px #00000014}.react-flow__controls-button{border:none;background:#fefefe;border-bottom:1px solid #eee;box-sizing:content-box;display:flex;justify-content:center;align-items:center;width:16px;height:16px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;padding:5px}.react-flow__controls-button:hover{background:#f4f4f4}.react-flow__controls-button svg{width:100%;max-width:12px;max-height:12px}.react-flow__minimap{background-color:#fff}.react-flow__node-interaction{padding:10px;border-radius:3px;width:150px;font-size:12px;color:#222;text-align:center;border-width:1px;border-style:solid;border-color:#1a192b;background-color:#fff}.filter-settings-tabs{width:100%;height:100%}.filter-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.filter-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.filter-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.panel-root{height:100%;width:100%;max-width:100%;background:transparent;border-radius:4px;position:relative}.panel-settings-tabs{width:100%;height:100%}.panel-settings-tabs .mantine-Tabs-panel{height:calc(100% - 25px)}.panel-settings-tabs .mantine-Tabs-tabsListWrapper{flex:0}.panel-settings-tabs .mantine-Tabs-body{flex:1;overflow:scroll}.viz-root{width:100%;overflow:scroll;flex-grow:1;background-color:#fff}.panel-dropdown-target{text-align:center;transition:background-color .3s ease}.panel-dropdown-target:hover{cursor:pointer;background-color:#6464640d}.react-grid-item{padding:0}.remove-panel{position:absolute;right:2px;top:0;cursor:pointer}.code-textarea textarea{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}.dashboard-root{overflow:scroll;overflow-x:hidden;padding:0 0 10px;height:100%}.dashboard-sticky-area{z-index:100;background:white;margin:0;padding:0 10px}.mantine-RichTextEditor-root{overflow-y:scroll!important;-ms-overflow-style:initial!important}*:not(.mantine-RichTextEditor-root):not([data-enable-scrollbar])::-webkit-scrollbar{width:0!important;height:0!important}*:not([data-enable-scrollbar]){overflow:-moz-scrollbars-none;-ms-overflow-style:none}.minimal-monaco-editor{border-radius:4px;overflow:hidden;background-color:#1e1e1e;padding-top:14px}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "7.5.2",
+  "version": "7.6.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",
@@ -36,7 +36,8 @@
     "file-saver": "2.0.5",
     "performant-array-to-tree": "1.11.0",
     "popmotion": "^11.0.3",
-    "rc-tree-select": "5.5.5"
+    "rc-tree-select": "5.5.5",
+    "reactflow": "^11.5.3"
   },
   "devDependencies": {
     "@mantine/core": "5.9.5",