@devtable/dashboard 7.21.0 → 8.0.0

package/dist/filter/filter-settings/filter-setting.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { FilterModelInstance } from '../../model';
 interface IFilterSetting {
     filter: FilterModelInstance;
-    index: number;
 }
 export declare const FilterSetting: React.FunctionComponent<IFilterSetting>;
 export {};

package/dist/main/dashboard-editor/header/index.d.ts

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

package/dist/main/{main.d.ts → dashboard-editor/index.d.ts}

@@ -1,14 +1,12 @@
 import React from 'react';
-import { ContextInfoType } from '../model/context';
-import { IDashboard } from '../types/dashboard';
+import { ContextInfoType } from '~/model';
+import { IDashboard } from '../../types/dashboard';
 interface IDashboardProps {
     context: ContextInfoType;
     dashboard: IDashboard;
     className?: string;
     update: (dashboard: IDashboard) => Promise<void>;
     config: IDashboardConfig;
-    fullScreenPanelID: string;
-    setFullScreenPanelID: (v: string) => void;
 }
 export declare const Dashboard: React.FunctionComponent<IDashboardProps>;
 export {};

package/dist/main/dashboard-editor/navbar/index.d.ts

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

package/dist/{panel/settings/viz-config/preview-viz.d.ts → main/dashboard-editor/navbar/view-links.d.ts}

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

package/dist/main/dashboard-editor/settings/content/edit-filter/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/edit-mock-context/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/edit-panel/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/edit-panel/panel-editor.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { PanelModelInstance } from '~/model/views/view/panels';
+export declare const PanelEditor: (({ panel }: {
+    panel: PanelModelInstance;
+}) => JSX.Element) & {
+    displayName: string;
+};

package/dist/main/dashboard-editor/settings/content/edit-panel/preview-viz.d.ts

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

package/dist/{panel/settings → main/dashboard-editor/settings/content/edit-panel}/variable-config/variable-config-panel.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { VariableConfigUIModel } from '~/panel/settings/variable-config/model';
+import { VariableConfigUIModel } from '~/main/dashboard-editor/settings/content/edit-panel/variable-config/model';
 export interface IVariableListProps {
     uiModel: VariableConfigUIModel;
 }

package/dist/main/dashboard-editor/settings/content/edit-query/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/edit-sql-snippet/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/edit-view/edit-view-form/config-fields/config.division.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '~/model';
+export declare const ViewDivisionConfigFields: (({ view }: {
+    view: ViewModelInstance;
+}) => JSX.Element | null) & {
+    displayName: string;
+};

package/dist/main/dashboard-editor/settings/content/edit-view/edit-view-form/config-fields/config.tabs.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '~/model';
+export declare const ViewTabsConfigFields: (({ view }: {
+    view: ViewModelInstance;
+}) => JSX.Element | null) & {
+    displayName: string;
+};

package/dist/main/dashboard-editor/settings/content/edit-view/edit-view-form/config-fields/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '~/model';
+export declare const ConfigFields: (({ view }: {
+    view: ViewModelInstance;
+}) => JSX.Element) & {
+    displayName: string;
+};

package/dist/main/dashboard-editor/settings/content/edit-view/edit-view-form/config-fields/modal/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '~/model';
+export declare const ViewModalConfigFields: (({ view }: {
+    view: ViewModelInstance;
+}) => JSX.Element | null) & {
+    displayName: string;
+};

package/dist/main/dashboard-editor/settings/content/edit-view/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/index.d.ts

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

package/dist/main/dashboard-editor/settings/content/utils.d.ts

@@ -0,0 +1,8 @@
+import { ValidEditorPathType } from '~/model/editor';
+export declare function isGlobalVars(path: ValidEditorPathType): boolean;
+export declare function isMockContext(path: ValidEditorPathType): boolean;
+export declare function isFilter(path: ValidEditorPathType): boolean;
+export declare function isSQLSnippet(path: ValidEditorPathType): boolean;
+export declare function isQuery(path: ValidEditorPathType): boolean;
+export declare function isView(path: ValidEditorPathType): boolean;
+export declare function isPanel(path: ValidEditorPathType): boolean;

package/dist/main/dashboard-editor/settings/content/view-global-vars/global-variables-modal.d.ts

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

package/dist/main/dashboard-editor/settings/content/view-global-vars/index.d.ts

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

package/dist/main/{switch-views → dashboard-editor/settings}/index.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/add-item-button/add-a-filter.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/add-item-button/add-a-query.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/add-item-button/add-a-sql-snippet.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/add-item-button/add-a-view.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/add-item-button/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { NavActionType } from '~/model/editor';
+interface IAddItemButton {
+    action_type: NavActionType['_action_type'];
+}
+export declare const AddItemButton: (({ action_type }: IAddItemButton) => JSX.Element | null) & {
+    displayName: string;
+};
+export {};

package/dist/main/dashboard-editor/settings/navbar/index.d.ts

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

package/dist/main/dashboard-editor/settings/navbar/nav-links.d.ts

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

package/dist/main/{read-only.d.ts → dashboard-render/index.d.ts}

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ContextInfoType } from '../model/context';
-import { IDashboard } from '../types/dashboard';
+import { ContextInfoType } from '../../model/context';
+import { IDashboard } from '../../types/dashboard';
 interface IReadOnlyDashboard {
     context: ContextInfoType;
     dashboard: IDashboard;

package/dist/main/index.d.ts

@@ -1,3 +1,3 @@
-export * from './main';
-export * from './read-only';
+export * from './dashboard-editor';
+export * from './dashboard-render';
 export { useTopLevelServices } from '~/main/use-top-level-services';

package/dist/model/editor/index.d.ts

@@ -0,0 +1,36 @@
+import { TablerIcon } from '@tabler/icons';
+import { Instance } from 'mobx-state-tree';
+export declare type NavActionType = {
+    label: string;
+    value: string;
+    _type: 'ACTION';
+    _action_type: '_Add_A_Filter_' | '_Add_A_SQL_SNIPPET_' | '_Add_A_QUERY_' | '_Add_A_VIEW_';
+    Icon: null;
+    children: null;
+};
+export declare type NavLinkType = {
+    label: string;
+    value: string;
+    _type: 'GROUP' | 'global_variables' | 'mock_context' | 'filter' | 'sql_snippet' | 'query' | 'view' | 'panel';
+    Icon?: TablerIcon;
+    parentID?: string;
+    children?: NavOptionType[];
+};
+export declare type NavOptionType = NavLinkType | NavActionType;
+export declare type ValidEditorPathType = ['_GLOBAL_VARS_'] | ['_MOCK_CONTEXT_'] | ['_FILTERS_', string] | ['_SQL_SNIPPETS_', string] | ['_QUERIES_', string] | ['_VIEWS_', string] | ['_VIEWS_', string, '_PANELS_', string] | [];
+export declare const EditorModel: import("mobx-state-tree").IModelType<{
+    path: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IType<ValidEditorPathType, ValidEditorPathType, ValidEditorPathType>, [undefined]>;
+    settings_open: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").ISimpleType<boolean>, [undefined]>;
+}, {
+    readonly navOptions: NavOptionType[];
+    isOptionActive(path: ValidEditorPathType, option: NavOptionType): boolean;
+    isOptionOpened(option: NavOptionType): boolean;
+} & {
+    setPath(v: ValidEditorPathType): void;
+    setSettingsOpen(v: boolean): void;
+} & {
+    open(path: ValidEditorPathType): void;
+    close(): void;
+    navigate(o: NavOptionType): void;
+}, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export declare type EditorModelInstance = Instance<typeof EditorModel>;

package/dist/model/queries/index.d.ts

@@ -1,3 +1,4 @@
+import { Instance } from 'mobx-state-tree';
 import { QueryModelInstance } from './query';
 export declare const QueriesModel: import("mobx-state-tree").IModelType<{
     current: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
@@ -190,8 +191,9 @@ export declare const QueriesModel: import("mobx-state-tree").IModelType<{
         afterCreate(): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
     readonly options: {
-        value: string;
-        label: string;
+        readonly value: string;
+        readonly label: string;
+        readonly _type: "query";
     }[];
 } & {
     readonly json: {
@@ -214,4 +216,5 @@ export declare const QueriesModel: import("mobx-state-tree").IModelType<{
     refetchDataByQueryID(queryID: string): Promise<void> | undefined;
     removeQuery(queryID: string): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export declare type QueriesModelInstance = Instance<typeof QueriesModel>;
 export * from './query';

package/dist/model/sql-snippets/index.d.ts

@@ -1,3 +1,4 @@
+import { Instance } from 'mobx-state-tree';
 import { SQLSnippetModelInstance } from './sql-snippet';
 export declare const SQLSnippetsModel: import("mobx-state-tree").IModelType<{
     current: import("mobx-state-tree").IOptionalIType<import("mobx-state-tree").IArrayType<import("mobx-state-tree").IModelType<{
@@ -18,6 +19,11 @@ export declare const SQLSnippetsModel: import("mobx-state-tree").IModelType<{
         key: string;
         value: string;
     }[];
+    readonly options: {
+        readonly label: string;
+        readonly value: string;
+        readonly _type: "sql_snippet";
+    }[];
     readonly record: Record<string, string>;
     readonly firstKey: string | undefined;
     findByKey(key: string): ({
@@ -49,6 +55,8 @@ export declare const SQLSnippetsModel: import("mobx-state-tree").IModelType<{
     replace(current: Array<SQLSnippetModelInstance>): void;
     append(item: SQLSnippetModelInstance): void;
     remove(index: number): void;
+    removeByKey(key: string): void;
     replaceByIndex(index: number, replacement: SQLSnippetModelInstance): void;
 }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>;
+export declare type SQLSnippetsModelInstance = Instance<typeof SQLSnippetsModel>;
 export * from './sql-snippet';

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

@@ -2956,6 +2956,12 @@ export declare const ViewModel: import("mobx-state-tree").IModelType<{
                 }>;
             }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>): void;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
+        readonly editorOptions: {
+            readonly label: string;
+            readonly value: string;
+            readonly _type: "panel";
+            readonly parentID: any;
+        }[];
     } & {
         replace(current: ({
             id: string;

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

@@ -2773,6 +2773,12 @@ export declare const PanelsModel: import("mobx-state-tree").IModelType<{
             }>;
         }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>): void;
     }, import("mobx-state-tree")._NotCustomized, import("mobx-state-tree")._NotCustomized>>) | undefined;
+    readonly editorOptions: {
+        readonly label: string;
+        readonly value: string;
+        readonly _type: "panel";
+        readonly parentID: any;
+    }[];
 } & {
     replace(current: Array<PanelModelInstance>): void;
     addANewPanel(): void;

package/dist/plugins/viz-components/cartesian/option/y-axis.d.ts

@@ -2,7 +2,7 @@ import { ICartesianChartConf } from '../type';
 export declare function getYAxes(conf: ICartesianChartConf, labelFormatters: Record<string, (p: $TSFixMe) => string>): {
     min: string | undefined;
     max: string | undefined;
-    position: "left" | "right";
+    position: "right" | "left";
     axisLabel: {
         show: boolean;
         formatter: (p: $TSFixMe) => string;
@@ -12,7 +12,7 @@ export declare function getYAxes(conf: ICartesianChartConf, labelFormatters: Rec
     };
     nameTextStyle: {
         fontWeight: string;
-        align: "left" | "right" | "center";
+        align: "right" | "center" | "left";
     };
     nameLocation: string;
     nameGap: number;

package/dist/plugins/viz-components/pareto-chart/option/index.d.ts

@@ -68,7 +68,7 @@ export declare function getOption(conf: IParetoChartConf, data: $TSFixMe[], _var
         nameGap: number;
         nameTextStyle: {
             fontWeight: string;
-            align: "left" | "right" | "center";
+            align: "right" | "center" | "left";
         };
         position: string;
         axisLine: {
@@ -86,7 +86,7 @@ export declare function getOption(conf: IParetoChartConf, data: $TSFixMe[], _var
         nameGap: number;
         nameTextStyle: {
             fontWeight: string;
-            align: "left" | "right" | "center";
+            align: "right" | "center" | "left";
         };
         position: string;
         axisLine: {

package/dist/plugins/viz-components/pareto-chart/option/y-axes.d.ts

@@ -5,7 +5,7 @@ export declare function getYAxes(conf: IParetoChartConf, formatters: TParetoForm
     nameGap: number;
     nameTextStyle: {
         fontWeight: string;
-        align: "left" | "right" | "center";
+        align: "right" | "center" | "left";
     };
     position: string;
     axisLine: {
@@ -23,7 +23,7 @@ export declare function getYAxes(conf: IParetoChartConf, formatters: TParetoForm
     nameGap: number;
     nameTextStyle: {
         fontWeight: string;
-        align: "left" | "right" | "center";
+        align: "right" | "center" | "left";
     };
     position: string;
     axisLine: {

package/dist/plugins/viz-components/pie-chart/viz-pie-chart.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { VizViewProps } from '~/types/plugin';
-export declare function VizPieChart({ context }: VizViewProps): JSX.Element;
+export declare function VizPieChart({ context }: VizViewProps): JSX.Element | null;

package/dist/plugins/viz-components/scatter-chart/option/y-axis.d.ts

@@ -2,7 +2,7 @@ import { IScatterChartConf } from '../type';
 export declare function getYAxes(conf: IScatterChartConf, labelFormatters: Record<string, (p: $TSFixMe) => string>): {
     min: string | undefined;
     max: string | undefined;
-    position: "left" | "right";
+    position: "right" | "left";
     axisLabel: {
         show: boolean;
         formatter: (p: $TSFixMe) => string;
@@ -12,7 +12,7 @@ export declare function getYAxes(conf: IScatterChartConf, labelFormatters: Recor
     };
     nameTextStyle: {
         fontWeight: string;
-        align: "left" | "right" | "center";
+        align: "right" | "center" | "left";
     };
     nameLocation: string;
     nameGap: number;

package/dist/plugins/viz-components/sunburst/option/levels.d.ts

@@ -4,7 +4,7 @@ export declare function getLevels(conf: ISunburstConf): {
     label: {
         formatter: ({ treePathInfo, name, value }: IEchartsSunburstLabelFormatter) => string | undefined;
         rotate: "0" | "radial" | "tangential";
-        align: "left" | "right" | "center";
+        align: "right" | "center" | "left";
         position: import("../type").TEchartsLabelPosition;
         padding: number;
     };

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: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}
+.panel-root{height:100%;width:100%;max-width:100%;background:transparent;border-radius:4px;position:relative}.panel-dropdown-target{text-align:center;transition:background-color .3s ease}.panel-dropdown-target:hover{cursor:pointer;background-color:#6464640d}.viz-root{width:100%;overflow:auto;flex-grow:1;background-color:#fff}.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}.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}.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/styles/action-icon-group-style.d.ts

@@ -0,0 +1,22 @@
+export declare const ActionIconGroupStyle: {
+    '> button': {
+        '&:first-of-type': {
+            borderTopRightRadius: number;
+            borderBottomRightRadius: number;
+            borderRightWidth: number;
+        };
+        ':not(:first-of-type):not(:last-of-type)': {
+            borderTopRightRadius: number;
+            borderBottomRightRadius: number;
+            borderTopLeftRadius: number;
+            borderBottomLeftRadius: number;
+            borderLeftWidth: number;
+            borderRightWidth: number;
+        };
+        '&:last-of-type': {
+            borderTopLeftRadius: number;
+            borderBottomLeftRadius: number;
+            borderLeftWidth: number;
+        };
+    };
+};

package/dist/types/dashboard.d.ts

@@ -43,6 +43,21 @@ export declare enum EViewComponentType {
     Modal = "modal",
     Tabs = "tabs"
 }
+export declare const ViewComponentTypeName: {
+    div: string;
+    tabs: string;
+    modal: string;
+};
+export declare const ViewComponentTypeBackground: {
+    div: string;
+    modal: string;
+    tabs: string;
+};
+export declare const ViewComponentTypeColor: {
+    div: string;
+    modal: string;
+    tabs: string;
+};
 export interface IDashboardView {
     id: string;
     name: string;

package/dist/view/index.d.ts

@@ -1,2 +1,2 @@
-export * from './main-view';
-export * from './read-only-view';
+export * from './view-editor';
+export * from './view-render';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '..';
+interface IDashboardViewEditor {
+    view: ViewModelInstance;
+}
+export declare const DashboardViewEditor: import("react").FunctionComponent<IDashboardViewEditor>;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ViewModelInstance } from '..';
+interface IDashboardViewRender {
+    view: ViewModelInstance;
+}
+export declare const DashboardViewRender: import("react").FunctionComponent<IDashboardViewRender>;
+export {};

package/package.json

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