@devtable/dashboard 7.11.1 → 7.13.0

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

@@ -1,9 +1,12 @@
 import { CSSProperties } from 'react';
 import { Node } from 'reactflow';
+import { EViewComponentType } from '~/types';
 export declare type TFlowNode_View = Node & {
     _node_type: 'view-root';
+    _view_type: EViewComponentType;
     _view_level: number;
     _sub_view_ids: string[];
+    _tab_view_ids: string[];
     style: CSSProperties;
 };
 export declare type TFlowNode_Default = Node & {

package/dist/main/switch-views/edit-view-modal/config-fields/config.tabs.d.ts

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

package/dist/model/views/view/index.d.ts

@@ -27,6 +27,28 @@ export declare const ViewModel: import("mobx-state-tree").IModelType<{
                 func_content: string;
             }): void;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
+    }>> | import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+        _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Modal>;
+        tabs: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").ISimpleType<string>;
+            name: import("mobx-state-tree").ISimpleType<string>;
+            view_id: import("mobx-state-tree").ISimpleType<string>;
+            color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        }, {
+            readonly json: {
+                id: string;
+                name: string;
+                view_id: string;
+                color: string;
+            };
+        } & {
+            setName(v: string): void;
+            setViewID(v: string): void;
+            setColor(v: string): void;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>;
+        variant: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsVariant>, [undefined]>;
+        orientation: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsOrientation>, [undefined]>;
+        grow: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     }>>, import("mobx-state-tree").ModelSnapshotType<{
         _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Division>;
     }> | import("mobx-state-tree").ModelSnapshotType<{
@@ -50,6 +72,28 @@ export declare const ViewModel: import("mobx-state-tree").IModelType<{
                 func_content: string;
             }): void;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>, [undefined]>;
+    }> | import("mobx-state-tree").ModelSnapshotType<{
+        _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Modal>;
+        tabs: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").ISimpleType<string>;
+            name: import("mobx-state-tree").ISimpleType<string>;
+            view_id: import("mobx-state-tree").ISimpleType<string>;
+            color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        }, {
+            readonly json: {
+                id: string;
+                name: string;
+                view_id: string;
+                color: string;
+            };
+        } & {
+            setName(v: string): void;
+            setViewID(v: string): void;
+            setColor(v: string): void;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>;
+        variant: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsVariant>, [undefined]>;
+        orientation: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsOrientation>, [undefined]>;
+        grow: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
     }>, import("mobx-state-tree").ModelInstanceType<{
         _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Division>;
     }, {
@@ -90,6 +134,53 @@ export declare const ViewModel: import("mobx-state-tree").IModelType<{
     } & {
         setWidth(v: string): void;
         setHeight(v: string): void;
+    }> | import("mobx-state-tree").ModelInstanceType<{
+        _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Modal>;
+        tabs: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+            id: import("mobx-state-tree").ISimpleType<string>;
+            name: import("mobx-state-tree").ISimpleType<string>;
+            view_id: import("mobx-state-tree").ISimpleType<string>;
+            color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        }, {
+            readonly json: {
+                id: string;
+                name: string;
+                view_id: string;
+                color: string;
+            };
+        } & {
+            setName(v: string): void;
+            setViewID(v: string): void;
+            setColor(v: string): void;
+        }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>;
+        variant: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsVariant>, [undefined]>;
+        orientation: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<import("@mantine/core").TabsOrientation>, [undefined]>;
+        grow: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+    }, {
+        readonly json: {
+            _name: EViewComponentType.Modal;
+            variant: import("@mantine/core").TabsVariant;
+            orientation: import("@mantine/core").TabsOrientation;
+            grow: boolean;
+            tabs: {
+                id: string;
+                name: string;
+                view_id: string;
+                color: string;
+            }[];
+        };
+    } & {
+        setVariant(v: import("@mantine/core").TabsVariant): void;
+        setOrientation(v: import("@mantine/core").TabsOrientation): void;
+        setGrow(v: boolean): void;
+        setTabs(v: import("mobx-state-tree").ModelCreationType<import("mobx-state-tree/dist/internal").ExtractCFromProps<{
+            id: import("mobx-state-tree").ISimpleType<string>;
+            name: import("mobx-state-tree").ISimpleType<string>;
+            view_id: import("mobx-state-tree").ISimpleType<string>;
+            color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+        }>>[]): void;
+        addTab(): void;
+        removeTab(index: number): void;
     }>>;
     panels: import("mobx-state-tree").IModelType<{
         list: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
@@ -8418,6 +8509,17 @@ export declare const ViewModel: import("mobx-state-tree").IModelType<{
                 enabled: boolean;
                 func_content: string;
             };
+        } | {
+            _name: EViewComponentType.Modal;
+            variant: import("@mantine/core").TabsVariant;
+            orientation: import("@mantine/core").TabsOrientation;
+            grow: boolean;
+            tabs: {
+                id: string;
+                name: string;
+                view_id: string;
+                color: string;
+            }[];
         };
         panels: {
             id: string;

package/dist/model/views/view/tabs.d.ts

@@ -0,0 +1,170 @@
+import { TabsOrientation, TabsVariant } from '@mantine/core';
+import { Instance, SnapshotIn } from 'mobx-state-tree';
+import { EViewComponentType } from '~/types';
+declare const TabModel: import("mobx-state-tree").IModelType<{
+    id: import("mobx-state-tree").ISimpleType<string>;
+    name: import("mobx-state-tree").ISimpleType<string>;
+    view_id: import("mobx-state-tree").ISimpleType<string>;
+    color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+}, {
+    readonly json: {
+        id: string;
+        name: string;
+        view_id: string;
+        color: string;
+    };
+} & {
+    setName(v: string): void;
+    setViewID(v: string): void;
+    setColor(v: string): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+declare type TabModelInstance = Instance<typeof TabModel>;
+export declare type ViewConfigModel_Tabs_Tab_Instance = TabModelInstance;
+declare type TabModelSnapshotIn = SnapshotIn<TabModelInstance>;
+export declare const ViewConfigModel_Tabs: import("mobx-state-tree").IModelType<{
+    _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Modal>;
+    tabs: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        name: import("mobx-state-tree").ISimpleType<string>;
+        view_id: import("mobx-state-tree").ISimpleType<string>;
+        color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    }, {
+        readonly json: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        };
+    } & {
+        setName(v: string): void;
+        setViewID(v: string): void;
+        setColor(v: string): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>;
+    variant: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<TabsVariant>, [undefined]>;
+    orientation: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<TabsOrientation>, [undefined]>;
+    grow: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+}, {
+    readonly json: {
+        _name: EViewComponentType.Modal;
+        variant: TabsVariant;
+        orientation: TabsOrientation;
+        grow: boolean;
+        tabs: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        }[];
+    };
+} & {
+    setVariant(v: TabsVariant): void;
+    setOrientation(v: TabsOrientation): void;
+    setGrow(v: boolean): void;
+    setTabs(v: TabModelSnapshotIn[]): void;
+    addTab(): void;
+    removeTab(index: number): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export declare type IViewConfigModel_Tabs = Instance<typeof ViewConfigModel_Tabs>;
+export declare type IViewConfigModel_TabsIn = SnapshotIn<IViewConfigModel_Tabs>;
+export declare const createViewConfig_Tabs: () => {
+    _name: EViewComponentType.Modal;
+    tabs: import("mobx-state-tree").IMSTArray<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        name: import("mobx-state-tree").ISimpleType<string>;
+        view_id: import("mobx-state-tree").ISimpleType<string>;
+        color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    }, {
+        readonly json: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        };
+    } & {
+        setName(v: string): void;
+        setViewID(v: string): void;
+        setColor(v: string): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>> & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        name: import("mobx-state-tree").ISimpleType<string>;
+        view_id: import("mobx-state-tree").ISimpleType<string>;
+        color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    }, {
+        readonly json: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        };
+    } & {
+        setName(v: string): void;
+        setViewID(v: string): void;
+        setColor(v: string): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>>;
+    variant: TabsVariant;
+    orientation: TabsOrientation;
+    grow: boolean;
+} & import("mobx-state-tree/dist/internal").NonEmptyObject & {
+    readonly json: {
+        _name: EViewComponentType.Modal;
+        variant: TabsVariant;
+        orientation: TabsOrientation;
+        grow: boolean;
+        tabs: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        }[];
+    };
+} & {
+    setVariant(v: TabsVariant): void;
+    setOrientation(v: TabsOrientation): void;
+    setGrow(v: boolean): void;
+    setTabs(v: TabModelSnapshotIn[]): void;
+    addTab(): void;
+    removeTab(index: number): void;
+} & import("mobx-state-tree").IStateTreeNode<import("mobx-state-tree").IModelType<{
+    _name: import("mobx-state-tree").ISimpleType<EViewComponentType.Modal>;
+    tabs: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
+        id: import("mobx-state-tree").ISimpleType<string>;
+        name: import("mobx-state-tree").ISimpleType<string>;
+        view_id: import("mobx-state-tree").ISimpleType<string>;
+        color: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<string>, [undefined]>;
+    }, {
+        readonly json: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        };
+    } & {
+        setName(v: string): void;
+        setViewID(v: string): void;
+        setColor(v: string): void;
+    }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>, [undefined]>;
+    variant: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<TabsVariant>, [undefined]>;
+    orientation: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<TabsOrientation>, [undefined]>;
+    grow: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+}, {
+    readonly json: {
+        _name: EViewComponentType.Modal;
+        variant: TabsVariant;
+        orientation: TabsOrientation;
+        grow: boolean;
+        tabs: {
+            id: string;
+            name: string;
+            view_id: string;
+            color: string;
+        }[];
+    };
+} & {
+    setVariant(v: TabsVariant): void;
+    setOrientation(v: TabsOrientation): void;
+    setGrow(v: boolean): void;
+    setTabs(v: TabModelSnapshotIn[]): void;
+    addTab(): void;
+    removeTab(index: number): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>;
+export {};

package/dist/style.css

@@ -1 +1 @@
-.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;height:100%}.dashboard-view{position:relative;height:100%;overflow-y:scroll;overflow-x:hidden;-ms-overflow-style:initial!important}.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(.dashboard-view):not(.mantine-Modal-body):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:auto}.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:auto}.viz-root{width:100%;overflow:auto;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:auto;overflow-x:hidden;padding:0;height:100%}.dashboard-view{position:relative;height:100%;overflow-y:auto;overflow-x:hidden;-ms-overflow-style:initial!important}.dashboard-sticky-area{z-index:100;background:white;margin:0;padding:0 10px}.mantine-RichTextEditor-root{overflow-y:auto!important;-ms-overflow-style:initial!important}.dashboard-root *:not(.mantine-RichTextEditor-root):not(.dashboard-view):not(.mantine-Modal-body):not([data-enable-scrollbar])::-webkit-scrollbar{width:0!important;height:0!important}.dashboard-root *: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/dist/types/dashboard.d.ts

@@ -40,7 +40,8 @@ export interface IDashboardDefinition {
 }
 export declare enum EViewComponentType {
     Division = "div",
-    Modal = "modal"
+    Modal = "modal",
+    Tabs = "tabs"
 }
 export interface IDashboardView {
     id: string;

package/dist/view/main-view.d.ts

@@ -3,8 +3,6 @@ import { ViewModelInstance } from '..';
 interface IMainDashboardView {
     view: ViewModelInstance;
     saveDashboardChanges: () => void;
-    fullScreenPanelID: string;
-    setFullScreenPanelID: (v: string) => void;
 }
 export declare const MainDashboardView: import("react").FunctionComponent<IMainDashboardView>;
 export {};

package/dist/view/read-only-view.d.ts

@@ -2,8 +2,6 @@
 import { ViewModelInstance } from '..';
 interface IReadOnlyDashboardView {
     view: ViewModelInstance;
-    fullScreenPanelID: string;
-    setFullScreenPanelID: (v: string) => void;
 }
 export declare const ReadOnlyDashboardView: import("react").FunctionComponent<IReadOnlyDashboardView>;
 export {};

package/dist/view/view-component/preview/tabs.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ViewModelInstance } from '~/model';
+export declare const PreviewViewTabs: (({ children, view }: {
+    children: ReactNode;
+    view: ViewModelInstance;
+}) => JSX.Element) & {
+    displayName: string;
+};

package/dist/view/view-component/render/tabs.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+import { ViewModelInstance } from '~/model';
+export declare const RenderViewTabs: (({ children, view }: {
+    children: ReactNode;
+    view: ViewModelInstance;
+}) => JSX.Element) & {
+    displayName: string;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devtable/dashboard",
-  "version": "7.11.1",
+  "version": "7.13.0",
   "license": "Apache-2.0",
   "publishConfig": {
     "access": "public",