@devtable/dashboard 1.17.0 → 1.20.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, SegmentedControl, NumberInput, Slider, 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";
@@ -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
     })]
   });
 }
@@ -1673,9 +1672,39 @@ function PreviewViz({}) {
     loading
   });
 }
+function _DataFieldSelector({
+  label,
+  required,
+  value,
+  onChange,
+  data,
+  sx
+}, ref) {
+  const options = React.useMemo(() => {
+    if (!Array.isArray(data) || data.length === 0) {
+      return [];
+    }
+    const keys = Object.keys(data[0]);
+    return keys.map((k2) => ({
+      label: k2,
+      value: k2
+    }));
+  }, [data]);
+  return /* @__PURE__ */ jsx(Select, {
+    ref,
+    label,
+    data: options,
+    value,
+    onChange,
+    required,
+    sx
+  });
+}
+const DataFieldSelector = React.forwardRef(_DataFieldSelector);
 function VizBar3DPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const defaultValues = _.assign({}, {
     "x_axis_data_key": "x",
@@ -1723,12 +1752,10 @@ function VizBar3DPanel({
           control,
           render: ({
             field
-          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-            sx: {
-              flexGrow: 1
-            },
-            size: "md",
-            label: "Data Key"
+          }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+            label: "Data Field",
+            required: true,
+            data
           }, field))
         }), /* @__PURE__ */ jsx(Controller, {
           name: "xAxis3D.name",
@@ -1759,12 +1786,10 @@ function VizBar3DPanel({
           control,
           render: ({
             field
-          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-            sx: {
-              flexGrow: 1
-            },
-            size: "md",
-            label: "Data Key"
+          }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+            label: "Data Field",
+            required: true,
+            data
           }, field))
         }), /* @__PURE__ */ jsx(Controller, {
           name: "yAxis3D.name",
@@ -1795,12 +1820,10 @@ function VizBar3DPanel({
           control,
           render: ({
             field
-          }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-            sx: {
-              flexGrow: 1
-            },
-            size: "md",
-            label: "Data Key"
+          }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+            label: "Data Field",
+            required: true,
+            data
           }, field))
         }), /* @__PURE__ */ jsx(Controller, {
           name: "zAxis3D.name",
@@ -1890,6 +1913,98 @@ 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 labelPositions = [{
   label: "off",
   value: ""
@@ -1938,7 +2053,8 @@ function SeriesItemField({
   index: index2,
   remove,
   seriesItem,
-  yAxisOptions
+  yAxisOptions,
+  data
 }) {
   const type = seriesItem.type;
   return /* @__PURE__ */ jsxs(Group, {
@@ -1999,9 +2115,10 @@ function SeriesItemField({
         control,
         render: ({
           field
-        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Value key",
+        }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "Value Field",
           required: true,
+          data,
           sx: {
             flex: 1
           }
@@ -2039,34 +2156,12 @@ 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
     }), /* @__PURE__ */ jsx(Controller, {
       name: `series.${index2}.label_position`,
       control,
@@ -2108,7 +2203,8 @@ function SeriesItemField({
 function SeriesField({
   control,
   watch,
-  getValues
+  getValues,
+  data
 }) {
   const {
     fields,
@@ -2118,7 +2214,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]);
   });
@@ -2130,7 +2226,9 @@ function SeriesField({
     yAxisIndex: 0,
     label_position: "top",
     stack: "",
-    color: "#000"
+    color: "#000",
+    step: false,
+    smooth: false
   });
   const yAxisOptions = React.useMemo(() => {
     return getValues().y_axes.map(({
@@ -2152,7 +2250,8 @@ function SeriesField({
       index: index2,
       remove,
       seriesItem,
-      yAxisOptions
+      yAxisOptions,
+      data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
@@ -2335,7 +2434,9 @@ function withDefaults(series) {
     label_position = "top",
     stack = "1",
     color: color2 = "black",
-    barWidth = "30"
+    barWidth = "30",
+    smooth = false,
+    step = false
   }) {
     return {
       type,
@@ -2346,14 +2447,17 @@ function withDefaults(series) {
       label_position,
       stack,
       color: color2,
-      barWidth
+      barWidth,
+      smooth,
+      step
     };
   }
   return series.map(setDefaults);
 }
 function VizCartesianChartPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const _a = conf, {
     series,
@@ -2387,13 +2491,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",
@@ -2414,43 +2519,46 @@ function VizCartesianChartPanel({
           mr: 5,
           variant: "filled",
           color: "blue",
-          disabled: !isDirty,
+          disabled: !changed,
           children: /* @__PURE__ */ jsx(DeviceFloppy, {
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsx(Controller, {
-        name: "x_axis_data_key",
-        control,
-        render: ({
-          field
-        }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          mb: "lg",
-          label: "X Axis Data Key"
-        }, field))
-      }), /* @__PURE__ */ jsx(Group, {
+      }), /* @__PURE__ */ jsxs(Group, {
         direction: "column",
         grow: true,
         noWrap: true,
         mb: "lg",
-        children: /* @__PURE__ */ jsx(Controller, {
+        children: [/* @__PURE__ */ jsx(Controller, {
+          name: "x_axis_data_key",
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+            label: "X Axis Data Field",
+            required: true,
+            data,
+            sx: {
+              flex: 1
+            }
+          }, field))
+        }), /* @__PURE__ */ jsx(Controller, {
           name: "x_axis_name",
           control,
           render: ({
             field
           }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
-            size: "md",
             label: "X Axis Name"
           }, field))
-        })
+        })]
       }), /* @__PURE__ */ jsx(YAxesField, {
         control,
         watch
       }), /* @__PURE__ */ jsx(SeriesField, {
         control,
         watch,
-        getValues
+        getValues,
+        data
       })]
     })
   });
@@ -2460,7 +2568,8 @@ function VizPiePanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2503,19 +2612,14 @@ function VizPiePanel({
           border: "1px solid #eee",
           borderRadius: "5px"
         },
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+        children: [/* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
           label: "Label Field",
           required: true,
-          sx: {
-            flex: 1
-          }
-        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          data
+        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
           label: "Value Field",
-          placeholder: "get column value by this field",
           required: true,
-          sx: {
-            flex: 1
-          }
+          data
         }, form.getInputProps("value_field")))]
       })]
     })
@@ -2713,7 +2817,8 @@ function _ColorArrayInput({
 const ColorArrayInput = React.forwardRef(_ColorArrayInput);
 function VizStatsPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const defaultValues = _.merge({}, {
     align: "center",
@@ -2789,6 +2894,7 @@ function VizStatsPanel({
             children: [/* @__PURE__ */ jsxs(Group, {
               direction: "row",
               grow: true,
+              noWrap: true,
               children: [/* @__PURE__ */ jsx(Controller, {
                 name: "content.prefix",
                 control,
@@ -2805,12 +2911,10 @@ function VizStatsPanel({
                 control,
                 render: ({
                   field
-                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                }) => /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
                   label: "Data Field",
                   required: true,
-                  sx: {
-                    flexGrow: 1
-                  }
+                  data
                 }, field))
               }), /* @__PURE__ */ jsx(Controller, {
                 name: "content.postfix",
@@ -2939,7 +3043,8 @@ function SunburstPanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2982,19 +3087,14 @@ function SunburstPanel({
           border: "1px solid #eee",
           borderRadius: "5px"
         },
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+        children: [/* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
           label: "Label Field",
           required: true,
-          sx: {
-            flex: 1
-          }
-        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          data
+        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
           label: "Value Field",
-          placeholder: "get column value by this field",
           required: true,
-          sx: {
-            flex: 1
-          }
+          data
         }, form.getInputProps("value_field")))]
       })]
     })
@@ -3026,7 +3126,8 @@ function VizTablePanel(_e) {
   } = _h, restConf = __objRest(_h, [
     "columns"
   ]), {
-    setConf
+    setConf,
+    data
   } = _f;
   const form = useForm$1({
     initialValues: __spreadValues({
@@ -3080,10 +3181,10 @@ function VizTablePanel(_e) {
           border: "1px solid #eee",
           borderRadius: "5px"
         },
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-          size: "md",
-          mb: "lg",
-          label: "ID Field"
+        children: [/* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
+          label: "ID Field",
+          required: true,
+          data
         }, form.getInputProps("id_field"))), /* @__PURE__ */ jsxs(Group, {
           position: "apart",
           mb: "lg",
@@ -3179,25 +3280,16 @@ function VizTablePanel(_e) {
             children: [/* @__PURE__ */ jsxs(Group, {
               position: "apart",
               grow: true,
-              sx: {
-                "> *": {
-                  flexGrow: 1,
-                  maxWidth: "100%"
-                }
-              },
               children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
                 label: "Label",
                 required: true,
                 sx: {
                   flex: 1
                 }
-              }, form.getListInputProps("columns", index2, "label"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+              }, form.getListInputProps("columns", index2, "label"))), /* @__PURE__ */ jsx(DataFieldSelector, __spreadValues({
                 label: "Value Field",
-                placeholder: "get column value by this field",
                 required: true,
-                sx: {
-                  flex: 1
-                }
+                data
               }, form.getListInputProps("columns", index2, "value_field"))), /* @__PURE__ */ jsx(ValueTypeSelector, __spreadValues({
                 label: "Value Type",
                 sx: {
@@ -3405,6 +3497,7 @@ const types = [{
 }];
 function EditVizConf() {
   const {
+    data,
     viz,
     setViz
   } = React.useContext(PanelContext);
@@ -3449,7 +3542,8 @@ function EditVizConf() {
       })
     }), Panel2 && /* @__PURE__ */ jsx(Panel2, {
       conf: viz.conf,
-      setConf: setVizConf
+      setConf: setVizConf,
+      data
     }), !Panel2 && /* @__PURE__ */ jsx(JsonInput, {
       minRows: 20,
       label: "Config",
@@ -3529,11 +3623,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, {})
@@ -3545,6 +3639,7 @@ function PanelSettingsModal({
     })
   });
 }
+var titleBar = "";
 function PanelTitleBar({}) {
   const [opened, setOpened] = React.useState(false);
   const open = () => setOpened(true);
@@ -3556,30 +3651,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, {
@@ -3610,7 +3708,7 @@ function PanelTitleBar({}) {
 var index$1 = "";
 function Panel({
   viz: initialViz,
-  dataSourceID: initialDataSourceID,
+  queryID: initialQueryID,
   title: initialTitle,
   description: initialDesc,
   update,
@@ -3621,24 +3719,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,
@@ -3647,9 +3745,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, {
@@ -3660,8 +3758,8 @@ function Panel({
       setTitle,
       description,
       setDescription,
-      dataSourceID,
-      setDataSourceID,
+      queryID,
+      setQueryID,
       viz,
       setViz,
       refreshData
@@ -3875,7 +3973,7 @@ function PreviewSQL({
     children: explained
   });
 }
-function DataSourceForm({
+function QueryForm({
   value,
   onChange
 }) {
@@ -3932,7 +4030,7 @@ function DataSourceForm({
         },
         children: [/* @__PURE__ */ jsx(Text, {
           weight: 500,
-          children: "Data Source Configuration"
+          children: "Edit Query"
         }), /* @__PURE__ */ jsx(ActionIcon, {
           type: "submit",
           mr: 5,
@@ -3995,81 +4093,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, {
@@ -4079,7 +4177,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,
@@ -4096,13 +4194,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: {
@@ -4132,10 +4230,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
         })]
@@ -4453,8 +4551,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, {})
       })]
     })
   });
@@ -4472,8 +4570,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",
@@ -4497,7 +4595,7 @@ function DashboardActions({
       }), inEditMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
-        onClick: openDataSources,
+        onClick: openQueries,
         leftIcon: /* @__PURE__ */ jsx(Database, {
           size: 20
         }),
@@ -4522,7 +4620,7 @@ function DashboardActions({
       })]
     }), /* @__PURE__ */ jsx(DataEditorModal, {
       opened: dataEditorOpened,
-      close: closeDataSources
+      close: closeQueries
     }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
@@ -4547,7 +4645,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));
@@ -4558,14 +4656,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);
@@ -4580,9 +4678,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: {}
@@ -4603,9 +4701,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", {
@@ -4677,7 +4775,7 @@ function ReadOnlyDashboard({
   const definition = React.useMemo(() => __spreadProps(__spreadValues({}, dashboard.definition), {
     setSQLSnippets: () => {
     },
-    setDataSources: () => {
+    setQueries: () => {
     }
   }), [dashboard]);
   return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {