@devtable/dashboard 1.18.0 → 1.21.0

package/dist/dashboard.es.js

@@ -36,7 +36,7 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, SegmentedControl, NumberInput, Switch, Slider, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
@@ -44,7 +44,7 @@ import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte
 import { useInputState, useElementSize, randomId } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
 import * as echarts from "echarts/core";
-import { SunburstChart, BarChart, LineChart, PieChart } from "echarts/charts";
+import { SunburstChart, BarChart, LineChart, ScatterChart, PieChart } from "echarts/charts";
 import { CanvasRenderer } from "echarts/renderers";
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import numbro from "numbro";
@@ -132,11 +132,11 @@ const APIClient = {
     };
   }
 };
-const queryBySQL = ({ context, definitions, title, dataSource }) => async () => {
-  if (!dataSource || !dataSource.sql) {
+const queryBySQL = ({ context, definitions, title, query }) => async () => {
+  if (!query || !query.sql) {
     return [];
   }
-  const { type, key, sql } = dataSource;
+  const { type, key, sql } = query;
   const needParams = sql.includes("$");
   try {
     const params = getSQLParams(context, definitions);
@@ -174,8 +174,8 @@ const initialContext$1 = {
   description: "",
   setDescription: () => {
   },
-  dataSourceID: "",
-  setDataSourceID: () => {
+  queryID: "",
+  setQueryID: () => {
   },
   viz: {
     type: "",
@@ -191,8 +191,8 @@ const initialContext = {
   sqlSnippets: [],
   setSQLSnippets: () => {
   },
-  dataSources: [],
-  setDataSources: () => {
+  queries: [],
+  setQueries: () => {
   }
 };
 const DefinitionContext = React.createContext(initialContext);
@@ -230,8 +230,8 @@ const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
 function DescriptionPopover({
-  position,
-  trigger = "click"
+  position = "bottom",
+  trigger = "hover"
 }) {
   const {
     freezeLayout
@@ -269,13 +269,14 @@ function DescriptionPopover({
   return /* @__PURE__ */ jsx(Popover, {
     opened,
     onClose: () => setOpened(false),
-    withCloseButton: true,
+    withCloseButton: trigger === "click",
     withArrow: true,
     trapFocus: true,
     closeOnEscape: false,
     placement: "center",
     position,
     target,
+    width: "40vw",
     children: /* @__PURE__ */ jsx(RichTextEditor, {
       readOnly: true,
       value: description,
@@ -380,7 +381,7 @@ function PreviewPanel() {
       mx: "auto",
       mt: "xl",
       p: "5px",
-      spacing: "xs",
+      spacing: 5,
       sx: {
         width: "600px",
         height: "450px",
@@ -392,8 +393,6 @@ function PreviewPanel() {
         position: "apart",
         noWrap: true,
         sx: {
-          borderBottom: "1px solid #eee",
-          paddingBottom: "5px",
           flexGrow: 0,
           flexShrink: 0
         },
@@ -492,9 +491,9 @@ function DataPreview({
 }) {
   const definitions = React.useContext(DefinitionContext);
   const contextInfo = React.useContext(ContextInfoContext);
-  const dataSource = React.useMemo(() => {
-    return definitions.dataSources.find((d) => d.id === id);
-  }, [definitions.dataSources, id]);
+  const query = React.useMemo(() => {
+    return definitions.queries.find((d) => d.id === id);
+  }, [definitions.queries, id]);
   const {
     data = [],
     loading,
@@ -503,9 +502,9 @@ function DataPreview({
     context: contextInfo,
     definitions,
     title: id,
-    dataSource
+    query
   }), {
-    refreshDeps: [contextInfo, definitions, dataSource]
+    refreshDeps: [contextInfo, definitions, query]
   });
   if (loading) {
     return /* @__PURE__ */ jsx(LoadingOverlay, {
@@ -581,22 +580,22 @@ function DataPreview({
     })]
   });
 }
-function PickDataSource({}) {
+function PickQuery({}) {
   const {
-    dataSources
+    queries
   } = React.useContext(DefinitionContext);
   const {
-    dataSourceID,
-    setDataSourceID,
+    queryID,
+    setQueryID,
     data,
     loading
   } = React.useContext(PanelContext);
   const options = React.useMemo(() => {
-    return dataSources.map((d) => ({
+    return queries.map((d) => ({
       value: d.id,
       label: d.id
     }));
-  }, [dataSources]);
+  }, [queries]);
   return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
     grow: true,
@@ -608,11 +607,11 @@ function PickDataSource({}) {
         alignItems: "baseline"
       },
       children: [/* @__PURE__ */ jsx(Text, {
-        children: "Select a Data Source"
+        children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
         data: options,
-        value: dataSourceID,
-        onChange: setDataSourceID,
+        value: queryID,
+        onChange: setQueryID,
         allowDeselect: false,
         clearable: false,
         sx: {
@@ -620,7 +619,7 @@ function PickDataSource({}) {
         }
       })]
     }), /* @__PURE__ */ jsx(DataPreview, {
-      id: dataSourceID
+      id: queryID
     })]
   });
 }
@@ -689,7 +688,7 @@ function Sunbrust({
     }
   });
 }
-echarts.use([BarChart, LineChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
+echarts.use([BarChart, LineChart, ScatterChart, GridComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
 const defaultOption$1 = {
   legend: {
     show: true,
@@ -1914,6 +1913,139 @@ function _MantineColorSelector({
   });
 }
 const MantineColorSelector = React.forwardRef(_MantineColorSelector);
+function BarFields({
+  control,
+  index: index2
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "row",
+    grow: true,
+    align: "top",
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.stack`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Stack",
+        placeholder: "Stack bars by this ID",
+        sx: {
+          flexGrow: 1
+        }
+      }, field))
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.barWidth`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Bar Width",
+        sx: {
+          flexGrow: 1
+        }
+      }, field))
+    })]
+  });
+}
+const stepOptions = [{
+  label: "off",
+  value: "false"
+}, {
+  label: "start",
+  value: "start"
+}, {
+  label: "middle",
+  value: "middle"
+}, {
+  label: "end",
+  value: "end"
+}];
+function LineFields({
+  control,
+  index: index2
+}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "row",
+    grow: true,
+    align: "center",
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.step`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(Select, __spreadProps(__spreadValues({
+        label: "Step",
+        data: stepOptions,
+        sx: {
+          flexGrow: 1,
+          maxWidth: "48%"
+        }
+      }, field), {
+        value: String(field.value),
+        onChange: (v) => {
+          const step = v === "false" ? false : v;
+          field.onChange(step);
+        }
+      }))
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.smooth`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsx(Box, {
+        sx: {
+          flexGrow: 1
+        },
+        children: /* @__PURE__ */ jsx(Switch, {
+          label: "Smooth Line",
+          checked: field.value,
+          onChange: (event) => field.onChange(event.currentTarget.checked)
+        })
+      })
+    })]
+  });
+}
+const symbolSizeOptions = Array.from(new Array(9), (_2, i) => ({
+  label: String(i + 1),
+  value: i + 1
+}));
+function ScatterFields({
+  control,
+  index: index2
+}) {
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "row",
+    grow: true,
+    align: "center",
+    children: /* @__PURE__ */ jsx(Controller, {
+      name: `series.${index2}.symbolSize`,
+      control,
+      render: ({
+        field
+      }) => /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        noWrap: true,
+        sx: {
+          flexGrow: 1
+        },
+        pb: 16,
+        spacing: 4,
+        children: [/* @__PURE__ */ jsx(Text, {
+          size: "sm",
+          children: "Size"
+        }), /* @__PURE__ */ jsx(Slider, __spreadProps(__spreadValues({
+          min: 1,
+          max: 10,
+          marks: symbolSizeOptions
+        }, field), {
+          sx: {
+            width: "100%"
+          }
+        }))]
+      })
+    })
+  });
+}
 const labelPositions = [{
   label: "off",
   value: ""
@@ -1994,8 +2126,7 @@ function SeriesItemField({
             value: "bar"
           }, {
             label: "Scatter",
-            value: "scatter",
-            disabled: true
+            value: "scatter"
           }, {
             label: "Boxplot",
             value: "boxplot",
@@ -2065,34 +2196,15 @@ function SeriesItemField({
           }));
         }
       })]
-    }), type === "bar" && /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
-      grow: true,
-      align: "top",
-      children: [/* @__PURE__ */ jsx(Controller, {
-        name: `series.${index2}.stack`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Stack",
-          placeholder: "Stack bars by this ID",
-          sx: {
-            flexGrow: 1
-          }
-        }, field))
-      }), /* @__PURE__ */ jsx(Controller, {
-        name: `series.${index2}.barWidth`,
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Bar Width",
-          sx: {
-            flexGrow: 1
-          }
-        }, field))
-      })]
+    }), type === "line" && /* @__PURE__ */ jsx(LineFields, {
+      index: index2,
+      control
+    }), type === "bar" && /* @__PURE__ */ jsx(BarFields, {
+      index: index2,
+      control
+    }), type === "scatter" && /* @__PURE__ */ jsx(ScatterFields, {
+      index: index2,
+      control
     }), /* @__PURE__ */ jsx(Controller, {
       name: `series.${index2}.label_position`,
       control,
@@ -2145,7 +2257,7 @@ function SeriesField({
     control,
     name: "series"
   });
-  const watchFieldArray = watch("y_axes");
+  const watchFieldArray = watch("series");
   const controlledFields = fields.map((field, index2) => {
     return __spreadValues(__spreadValues({}, field), watchFieldArray[index2]);
   });
@@ -2153,11 +2265,14 @@ function SeriesField({
     type: "bar",
     name: randomId(),
     showSymbol: false,
+    symbolSize: 5,
     y_axis_data_key: "value",
     yAxisIndex: 0,
     label_position: "top",
     stack: "",
-    color: "#000"
+    color: "#000",
+    step: false,
+    smooth: false
   });
   const yAxisOptions = React.useMemo(() => {
     return getValues().y_axes.map(({
@@ -2358,23 +2473,29 @@ function withDefaults(series) {
     type,
     name,
     showSymbol,
+    symbolSize = 5,
     y_axis_data_key = "value",
     yAxisIndex = 0,
     label_position = "top",
     stack = "1",
     color: color2 = "black",
-    barWidth = "30"
+    barWidth = "30",
+    smooth = false,
+    step = false
   }) {
     return {
       type,
       name,
       showSymbol,
+      symbolSize,
       y_axis_data_key,
       yAxisIndex,
       label_position,
       stack,
       color: color2,
-      barWidth
+      barWidth,
+      smooth,
+      step
     };
   }
   return series.map(setDefaults);
@@ -2416,13 +2537,14 @@ function VizCartesianChartPanel({
     control,
     handleSubmit,
     watch,
-    formState: {
-      isDirty
-    },
     getValues
   } = useForm({
     defaultValues
   });
+  const values = getValues();
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, conf);
+  }, [values, conf]);
   return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     mt: "md",
@@ -2443,7 +2565,7 @@ function VizCartesianChartPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !isDirty,
+          disabled: !changed,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
@@ -3547,11 +3669,11 @@ function PanelSettingsModal({
       children: /* @__PURE__ */ jsxs(Tabs, {
         initialTab: 2,
         children: [/* @__PURE__ */ jsxs(Tabs.Tab, {
-          label: "Data Source",
+          label: "Data",
           children: [/* @__PURE__ */ jsx(LoadingOverlay, {
             visible: loading,
             exitTransitionDuration: 0
-          }), /* @__PURE__ */ jsx(PickDataSource, {})]
+          }), /* @__PURE__ */ jsx(PickQuery, {})]
         }), /* @__PURE__ */ jsx(Tabs.Tab, {
           label: "Panel",
           children: /* @__PURE__ */ jsx(PanelConfig, {})
@@ -3563,6 +3685,7 @@ function PanelSettingsModal({
     })
   });
 }
+var titleBar = "";
 function PanelTitleBar({}) {
   const [opened, setOpened] = React.useState(false);
   const open = () => setOpened(true);
@@ -3574,30 +3697,33 @@ function PanelTitleBar({}) {
   const {
     inEditMode
   } = React.useContext(LayoutStateContext);
-  return /* @__PURE__ */ jsxs(Group, {
-    position: "apart",
-    noWrap: true,
+  return /* @__PURE__ */ jsxs(Box, {
     sx: {
-      borderBottom: "1px solid #eee",
-      paddingBottom: "5px"
+      position: "relative"
     },
-    children: [/* @__PURE__ */ jsx(Group, {
+    children: [/* @__PURE__ */ jsx(Box, {
+      sx: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+        height: 28
+      },
       children: /* @__PURE__ */ jsx(DescriptionPopover, {})
     }), /* @__PURE__ */ jsx(Group, {
       grow: true,
       position: "center",
-      children: /* @__PURE__ */ jsx(Text, {
-        lineClamp: 1,
-        weight: "bold",
-        children: title
-      })
-    }), /* @__PURE__ */ jsx(Group, {
-      position: "right",
-      spacing: 0,
+      px: 20,
+      className: "panel-title-wrapper",
       sx: {
-        height: "28px"
+        flexGrow: 1
       },
       children: /* @__PURE__ */ jsxs(Menu, {
+        control: /* @__PURE__ */ jsx(Text, {
+          lineClamp: 1,
+          weight: "bold",
+          children: title
+        }),
+        placement: "center",
         children: [/* @__PURE__ */ jsx(Menu.Item, {
           onClick: refreshData,
           icon: /* @__PURE__ */ jsx(Refresh, {
@@ -3628,7 +3754,7 @@ function PanelTitleBar({}) {
 var index$1 = "";
 function Panel({
   viz: initialViz,
-  dataSourceID: initialDataSourceID,
+  queryID: initialQueryID,
   title: initialTitle,
   description: initialDesc,
   update,
@@ -3639,24 +3765,24 @@ function Panel({
   const definitions = React.useContext(DefinitionContext);
   const [title, setTitle] = React.useState(initialTitle);
   const [description, setDescription] = React.useState(initialDesc);
-  const [dataSourceID, setDataSourceID] = React.useState(initialDataSourceID);
+  const [queryID, setQueryID] = React.useState(initialQueryID);
   const [viz, setViz] = React.useState(initialViz);
-  const dataSource = React.useMemo(() => {
-    if (!dataSourceID) {
+  const query = React.useMemo(() => {
+    if (!queryID) {
       return void 0;
     }
-    return definitions.dataSources.find((d) => d.id === dataSourceID);
-  }, [dataSourceID, definitions.dataSources]);
+    return definitions.queries.find((d) => d.id === queryID);
+  }, [queryID, definitions.queries]);
   React.useEffect(() => {
     update == null ? void 0 : update({
       id,
       layout,
       title,
       description,
-      dataSourceID,
+      queryID,
       viz
     });
-  }, [title, description, dataSource, viz, id, layout, dataSourceID]);
+  }, [title, description, query, viz, id, layout, queryID]);
   const {
     data = [],
     loading,
@@ -3665,9 +3791,9 @@ function Panel({
     context: contextInfo,
     definitions,
     title,
-    dataSource
+    query
   }), {
-    refreshDeps: [contextInfo, definitions, dataSource]
+    refreshDeps: [contextInfo, definitions, query]
   });
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
@@ -3678,8 +3804,8 @@ function Panel({
       setTitle,
       description,
       setDescription,
-      dataSourceID,
-      setDataSourceID,
+      queryID,
+      setQueryID,
       viz,
       setViz,
       refreshData
@@ -3893,7 +4019,7 @@ function PreviewSQL({
     children: explained
   });
 }
-function DataSourceForm({
+function QueryForm({
   value,
   onChange
 }) {
@@ -3950,7 +4076,7 @@ function DataSourceForm({
         },
         children: [/* @__PURE__ */ jsx(Text, {
           weight: 500,
-          children: "Data Source Configuration"
+          children: "Edit Query"
         }), /* @__PURE__ */ jsx(ActionIcon, {
           type: "submit",
           mr: 5,
@@ -4013,81 +4139,81 @@ function DataSourceForm({
     })
   });
 }
-function DataSourceEditor({
+function QueryEditor({
   id,
   setID
 }) {
   const {
-    dataSources,
-    setDataSources
+    queries,
+    setQueries
   } = React.useContext(DefinitionContext);
-  const dataSource = React.useMemo(() => {
-    return dataSources.find((d) => d.id === id);
-  }, [dataSources, id]);
+  const query = React.useMemo(() => {
+    return queries.find((d) => d.id === id);
+  }, [queries, id]);
   const update = React.useCallback((value) => {
-    const index2 = dataSources.findIndex((d) => d.id === id);
+    const index2 = queries.findIndex((d) => d.id === id);
     if (index2 === -1) {
       console.error(new Error("Invalid data source id when updating by id"));
       return;
     }
-    setDataSources((prevs) => {
+    setQueries((prevs) => {
       const index22 = prevs.findIndex((p2) => p2.id === id);
       prevs.splice(index22, 1, value);
       return [...prevs];
     });
     setID(value.id);
-  }, [id, dataSources, setDataSources, setID]);
+  }, [id, queries, setQueries, setID]);
   if (!id) {
     return null;
   }
-  if (!dataSource) {
+  if (!query) {
     return /* @__PURE__ */ jsx("span", {
       children: "Invalid Data Source ID"
     });
   }
-  return /* @__PURE__ */ jsx(DataSourceForm, {
-    value: dataSource,
+  return /* @__PURE__ */ jsx(QueryForm, {
+    value: query,
     onChange: update
   });
 }
-function SelectOrAddDataSource({
+function SelectOrAddQuery({
   id,
   setID
 }) {
   const {
-    dataSources,
-    setDataSources
+    queries,
+    setQueries
   } = React.useContext(DefinitionContext);
   const chooseDefault = React.useCallback(() => {
     var _a, _b;
-    setID((_b = (_a = dataSources[0]) == null ? void 0 : _a.id) != null ? _b : "");
-  }, [setID, dataSources]);
+    setID((_b = (_a = queries[0]) == null ? void 0 : _a.id) != null ? _b : "");
+  }, [setID, queries]);
   React.useEffect(() => {
     if (!id) {
       chooseDefault();
       return;
     }
-    const index2 = dataSources.findIndex((d) => d.id === id);
+    const index2 = queries.findIndex((d) => d.id === id);
     if (index2 === -1) {
       chooseDefault();
     }
-  }, [id, dataSources, chooseDefault]);
+  }, [id, queries, chooseDefault]);
   const options = React.useMemo(() => {
-    return dataSources.map((d) => ({
+    return queries.map((d) => ({
       value: d.id,
       label: d.id
     }));
-  }, [dataSources]);
+  }, [queries]);
   const add = React.useCallback(() => {
-    const newDataSource = {
+    const newQuery = {
       id: randomId(),
       type: "postgresql",
       key: "",
       sql: ""
     };
-    setDataSources((prevs) => [...prevs, newDataSource]);
-    setID(newDataSource.id);
-  }, [setDataSources, setID]);
+    setQueries((prevs) => [...prevs, newQuery]);
+    setID(newQuery.id);
+  }, [setQueries, setID]);
   return /* @__PURE__ */ jsx(Group, {
     pb: "xl",
     children: /* @__PURE__ */ jsxs(Group, {
@@ -4097,7 +4223,7 @@ function SelectOrAddDataSource({
         alignItems: "baseline"
       },
       children: [/* @__PURE__ */ jsx(Text, {
-        children: "Select a Data Source"
+        children: "Select a Query"
       }), /* @__PURE__ */ jsx(Select, {
         data: options,
         value: id,
@@ -4114,13 +4240,13 @@ function SelectOrAddDataSource({
         mt: "md",
         children: /* @__PURE__ */ jsx(Button, {
           onClick: add,
-          children: "Add a Data Source"
+          children: "Add a Query"
         })
       })]
     })
   });
 }
-function EditDataSources({}) {
+function EditQueries({}) {
   const [id, setID] = React.useState("");
   return /* @__PURE__ */ jsxs(AppShell, {
     sx: {
@@ -4150,10 +4276,10 @@ function EditDataSources({}) {
           flexGrow: 1,
           maxWidth: "calc(60% - 16px)"
         },
-        children: [/* @__PURE__ */ jsx(SelectOrAddDataSource, {
+        children: [/* @__PURE__ */ jsx(SelectOrAddQuery, {
           id,
           setID
-        }), /* @__PURE__ */ jsx(DataSourceEditor, {
+        }), /* @__PURE__ */ jsx(QueryEditor, {
           id,
           setID
         })]
@@ -4471,8 +4597,8 @@ function DataEditorModal({
         label: "SQL Snippet",
         children: /* @__PURE__ */ jsx(EditSQLSnippets, {})
       }), /* @__PURE__ */ jsx(Tabs.Tab, {
-        label: "Data Source",
-        children: /* @__PURE__ */ jsx(EditDataSources, {})
+        label: "Queries",
+        children: /* @__PURE__ */ jsx(EditQueries, {})
       })]
     })
   });
@@ -4490,8 +4616,8 @@ function DashboardActions({
     inUseMode
   } = React.useContext(LayoutStateContext);
   const [dataEditorOpened, setDataEditorOpened] = React.useState(false);
-  const openDataSources = () => setDataEditorOpened(true);
-  const closeDataSources = () => setDataEditorOpened(false);
+  const openQueries = () => setDataEditorOpened(true);
+  const closeQueries = () => setDataEditorOpened(false);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -4515,7 +4641,7 @@ function DashboardActions({
       }), inEditMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
-        onClick: openDataSources,
+        onClick: openQueries,
         leftIcon: /* @__PURE__ */ jsx(Database, {
           size: 20
         }),
@@ -4540,7 +4666,7 @@ function DashboardActions({
       })]
     }), /* @__PURE__ */ jsx(DataEditorModal, {
       opened: dataEditorOpened,
-      close: closeDataSources
+      close: closeQueries
     }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
@@ -4565,7 +4691,7 @@ function Dashboard({
   const [layoutFrozen, freezeLayout] = React.useState(false);
   const [panels, setPanels] = React.useState(dashboard.panels);
   const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
-  const [dataSources, setDataSources] = React.useState(dashboard.definition.dataSources);
+  const [queries, setQueries] = React.useState(dashboard.definition.queries);
   const [mode, setMode] = React.useState(DashboardMode.Edit);
   const hasChanges = React.useMemo(() => {
     const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
@@ -4576,14 +4702,14 @@ function Dashboard({
     if (!_.isEqual(sqlSnippets, dashboard.definition.sqlSnippets)) {
       return true;
     }
-    return !_.isEqual(dataSources, dashboard.definition.dataSources);
-  }, [dashboard, panels, sqlSnippets, dataSources]);
+    return !_.isEqual(queries, dashboard.definition.queries);
+  }, [dashboard, panels, sqlSnippets, queries]);
   const saveDashboardChanges = async () => {
     const d = __spreadProps(__spreadValues({}, dashboard), {
       panels,
       definition: {
         sqlSnippets,
-        dataSources
+        queries
       }
     });
     await update(d);
@@ -4598,9 +4724,9 @@ function Dashboard({
         w: 3,
         h: 15
       },
-      title: `New Panel - ${id}`,
-      description: "",
-      dataSourceID: "",
+      title: `Panel - ${id}`,
+      description: "<p><br></p>",
+      queryID: "",
       viz: {
         type: "text",
         conf: {}
@@ -4621,9 +4747,9 @@ function Dashboard({
   const definitions = React.useMemo(() => ({
     sqlSnippets,
     setSQLSnippets,
-    dataSources,
-    setDataSources
-  }), [sqlSnippets, setSQLSnippets, dataSources, setDataSources]);
+    queries,
+    setQueries
+  }), [sqlSnippets, setSQLSnippets, queries, setQueries]);
   return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
     value: context,
     children: /* @__PURE__ */ jsx("div", {
@@ -4695,7 +4821,7 @@ function ReadOnlyDashboard({
   const definition = React.useMemo(() => __spreadProps(__spreadValues({}, dashboard.definition), {
     setSQLSnippets: () => {
     },
-    setDataSources: () => {
+    setQueries: () => {
     }
   }), [dashboard]);
   return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {