@devtable/dashboard 1.16.0 → 1.19.0

package/dist/dashboard.es.js

@@ -39,7 +39,7 @@ 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 { useRequest } from "ahooks";
 import axios from "axios";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, Database, Recycle, Share } from "tabler-icons-react";
 import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
 import { useInputState, useElementSize, randomId } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
@@ -68,6 +68,44 @@ const initialContext$3 = {
   inUseMode: true
 };
 const LayoutStateContext = React.createContext(initialContext$3);
+function explainSQLSnippet(snippet, context) {
+  const names = Object.keys(context);
+  const vals = Object.values(context);
+  try {
+    return new Function(...names, `return \`${snippet}\`;`)(...vals);
+  } catch (error) {
+    console.error(error);
+    return error.message;
+  }
+}
+function formatSQL(sql, params) {
+  const names = Object.keys(params);
+  const vals = Object.values(params);
+  try {
+    return new Function(...names, `return \`${sql}\`;`)(...vals);
+  } catch (error) {
+    if (names.length === 0 && sql.includes("$")) {
+      throw new Error("[formatSQL] insufficient params");
+    }
+    throw error;
+  }
+}
+function getSQLParams(context, definitions) {
+  const sqlSnippetRecord = definitions.sqlSnippets.reduce((ret, curr) => {
+    ret[curr.key] = formatSQL(curr.value, context);
+    return ret;
+  }, {});
+  return _.merge({}, sqlSnippetRecord, context);
+}
+function explainSQL(sql, context, definitions) {
+  try {
+    const params = getSQLParams(context, definitions);
+    return formatSQL(sql, params);
+  } catch (error) {
+    console.error(error);
+    return error.message;
+  }
+}
 const APIClient = {
   baseURL: "http://localhost:31200",
   getRequest(method) {
@@ -94,30 +132,11 @@ const APIClient = {
     };
   }
 };
-function formatSQL(sql, params) {
-  const names = Object.keys(params);
-  const vals = Object.values(params);
-  try {
-    return new Function(...names, `return \`${sql}\`;`)(...vals);
-  } catch (error) {
-    if (names.length === 0 && sql.includes("$")) {
-      throw new Error("[formatSQL] insufficient params");
-    }
-    throw error;
-  }
-}
-function getSQLParams(context, definitions) {
-  const sqlSnippetRecord = definitions.sqlSnippets.reduce((ret, curr) => {
-    ret[curr.key] = formatSQL(curr.value, context);
-    return ret;
-  }, {});
-  return _.merge({}, sqlSnippetRecord, context);
-}
-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);
@@ -155,8 +174,8 @@ const initialContext$1 = {
   description: "",
   setDescription: () => {
   },
-  dataSourceID: "",
-  setDataSourceID: () => {
+  queryID: "",
+  setQueryID: () => {
   },
   viz: {
     type: "",
@@ -172,8 +191,8 @@ const initialContext = {
   sqlSnippets: [],
   setSQLSnippets: () => {
   },
-  dataSources: [],
-  setDataSources: () => {
+  queries: [],
+  setQueries: () => {
   }
 };
 const DefinitionContext = React.createContext(initialContext);
@@ -211,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
@@ -250,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,
@@ -361,7 +381,7 @@ function PreviewPanel() {
       mx: "auto",
       mt: "xl",
       p: "5px",
-      spacing: "xs",
+      spacing: 5,
       sx: {
         width: "600px",
         height: "450px",
@@ -373,8 +393,6 @@ function PreviewPanel() {
         position: "apart",
         noWrap: true,
         sx: {
-          borderBottom: "1px solid #eee",
-          paddingBottom: "5px",
           flexGrow: 0,
           flexShrink: 0
         },
@@ -473,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,
@@ -484,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, {
@@ -562,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,
@@ -589,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: {
@@ -601,7 +619,7 @@ function PickDataSource({}) {
         }
       })]
     }), /* @__PURE__ */ jsx(DataPreview, {
-      id: dataSourceID
+      id: queryID
     })]
   });
 }
@@ -1530,6 +1548,18 @@ function getColorByColorConf(conf, dataRow) {
   }
   return "black";
 }
+function getNonStatsDataText(data) {
+  if (data === null) {
+    return "null";
+  }
+  if (data === void 0) {
+    return "undefined";
+  }
+  if (Array.isArray(data)) {
+    return `Array(${data.length})`;
+  }
+  return data.toString();
+}
 function VizStats(_a) {
   var _b = _a, {
     conf: _c
@@ -1556,6 +1586,9 @@ function VizStats(_a) {
       formatter
     } = content;
     const contentData = (_a2 = data == null ? void 0 : data[0]) == null ? void 0 : _a2[data_field];
+    if (!["string", "number"].includes(typeof contentData)) {
+      return getNonStatsDataText(contentData);
+    }
     const contents = [prefix, numbro(contentData).format(formatter), postfix];
     return contents.join(" ");
   }, [content, data]);
@@ -1639,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",
@@ -1689,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",
@@ -1725,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",
@@ -1761,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",
@@ -1904,7 +1961,8 @@ function SeriesItemField({
   index: index2,
   remove,
   seriesItem,
-  yAxisOptions
+  yAxisOptions,
+  data
 }) {
   const type = seriesItem.type;
   return /* @__PURE__ */ jsxs(Group, {
@@ -1965,9 +2023,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
           }
@@ -2074,7 +2133,8 @@ function SeriesItemField({
 function SeriesField({
   control,
   watch,
-  getValues
+  getValues,
+  data
 }) {
   const {
     fields,
@@ -2118,7 +2178,8 @@ function SeriesField({
       index: index2,
       remove,
       seriesItem,
-      yAxisOptions
+      yAxisOptions,
+      data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
@@ -2319,7 +2380,8 @@ function withDefaults(series) {
 }
 function VizCartesianChartPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const _a = conf, {
     series,
@@ -2385,38 +2447,41 @@ function VizCartesianChartPanel({
             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
       })]
     })
   });
@@ -2426,7 +2491,8 @@ function VizPiePanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2469,19 +2535,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")))]
       })]
     })
@@ -2679,7 +2740,8 @@ function _ColorArrayInput({
 const ColorArrayInput = React.forwardRef(_ColorArrayInput);
 function VizStatsPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const defaultValues = _.merge({}, {
     align: "center",
@@ -2755,6 +2817,7 @@ function VizStatsPanel({
             children: [/* @__PURE__ */ jsxs(Group, {
               direction: "row",
               grow: true,
+              noWrap: true,
               children: [/* @__PURE__ */ jsx(Controller, {
                 name: "content.prefix",
                 control,
@@ -2771,12 +2834,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",
@@ -2905,7 +2966,8 @@ function SunburstPanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2948,19 +3010,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")))]
       })]
     })
@@ -2992,7 +3049,8 @@ function VizTablePanel(_e) {
   } = _h, restConf = __objRest(_h, [
     "columns"
   ]), {
-    setConf
+    setConf,
+    data
   } = _f;
   const form = useForm$1({
     initialValues: __spreadValues({
@@ -3046,10 +3104,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",
@@ -3145,25 +3203,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: {
@@ -3371,6 +3420,7 @@ const types = [{
 }];
 function EditVizConf() {
   const {
+    data,
     viz,
     setViz
   } = React.useContext(PanelContext);
@@ -3415,7 +3465,8 @@ function EditVizConf() {
       })
     }), Panel2 && /* @__PURE__ */ jsx(Panel2, {
       conf: viz.conf,
-      setConf: setVizConf
+      setConf: setVizConf,
+      data
     }), !Panel2 && /* @__PURE__ */ jsx(JsonInput, {
       minRows: 20,
       label: "Config",
@@ -3495,11 +3546,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, {})
@@ -3511,6 +3562,7 @@ function PanelSettingsModal({
     })
   });
 }
+var titleBar = "";
 function PanelTitleBar({}) {
   const [opened, setOpened] = React.useState(false);
   const open = () => setOpened(true);
@@ -3522,30 +3574,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, {
@@ -3576,7 +3631,7 @@ function PanelTitleBar({}) {
 var index$1 = "";
 function Panel({
   viz: initialViz,
-  dataSourceID: initialDataSourceID,
+  queryID: initialQueryID,
   title: initialTitle,
   description: initialDesc,
   update,
@@ -3587,24 +3642,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,
@@ -3613,9 +3668,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, {
@@ -3626,8 +3681,8 @@ function Panel({
       setTitle,
       description,
       setDescription,
-      dataSourceID,
-      setDataSourceID,
+      queryID,
+      setQueryID,
       viz,
       setViz,
       refreshData
@@ -3764,7 +3819,7 @@ function ContextAndSnippets({}) {
     grow: true,
     sx: {
       border: "1px solid #eee",
-      maxWidth: "48%",
+      maxWidth: "40%",
       overflow: "hidden"
     },
     children: [/* @__PURE__ */ jsx(Group, {
@@ -3827,7 +3882,21 @@ function ContextAndSnippets({}) {
     })]
   });
 }
-function DataSourceForm({
+function PreviewSQL({
+  value
+}) {
+  const context = React.useContext(ContextInfoContext);
+  const definition = React.useContext(DefinitionContext);
+  const explained = React.useMemo(() => {
+    return explainSQL(value, context, definition);
+  }, [value, context, definition]);
+  return /* @__PURE__ */ jsx(Prism, {
+    language: "sql",
+    colorScheme: "light",
+    children: explained
+  });
+}
+function QueryForm({
   value,
   onChange
 }) {
@@ -3884,7 +3953,7 @@ function DataSourceForm({
         },
         children: [/* @__PURE__ */ jsx(Text, {
           weight: 500,
-          children: "Data Source Configuration"
+          children: "Edit Query"
         }), /* @__PURE__ */ jsx(ActionIcon, {
           type: "submit",
           mr: 5,
@@ -3926,97 +3995,102 @@ function DataSourceForm({
             },
             disabled: loading
           }, form.getInputProps("key")))]
-        }), /* @__PURE__ */ jsx(Textarea, __spreadValues({
-          autosize: true,
-          minRows: 12,
-          maxRows: 24
-        }, form.getInputProps("sql")))]
+        }), /* @__PURE__ */ jsxs(Tabs, {
+          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "SQL",
+            children: /* @__PURE__ */ jsx(Textarea, __spreadProps(__spreadValues({
+              autosize: true,
+              minRows: 12,
+              maxRows: 24
+            }, form.getInputProps("sql")), {
+              className: "code-textarea"
+            }))
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            label: "Preview",
+            children: /* @__PURE__ */ jsx(PreviewSQL, {
+              value: form.values.sql
+            })
+          })]
+        })]
       })]
     })
   });
 }
-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__ */ jsxs(Group, {
-    direction: "row",
-    position: "apart",
-    grow: true,
-    align: "stretch",
-    noWrap: true,
-    children: [/* @__PURE__ */ jsx(DataSourceForm, {
-      value: dataSource,
-      onChange: update
-    }), /* @__PURE__ */ jsx(ContextAndSnippets, {})]
+  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, {
@@ -4026,7 +4100,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,
@@ -4043,64 +4117,58 @@ function SelectOrAddDataSource({
         mt: "md",
         children: /* @__PURE__ */ jsx(Button, {
           onClick: add,
-          children: "Add a Data Source"
+          children: "Add a Query"
         })
       })]
     })
   });
 }
-function EditDataSourcesModal({
-  opened,
-  close
-}) {
+function EditQueries({}) {
   const [id, setID] = React.useState("");
-  const {
-    freezeLayout
-  } = React.useContext(LayoutStateContext);
-  React.useEffect(() => {
-    freezeLayout(opened);
-  }, [opened]);
-  return /* @__PURE__ */ jsx(Modal, {
-    size: "96vw",
-    overflow: "inside",
-    opened,
-    onClose: close,
-    title: "Data Sources",
-    trapFocus: true,
-    onDragStart: (e) => {
-      e.stopPropagation();
+  return /* @__PURE__ */ jsxs(AppShell, {
+    sx: {
+      height: "90vh",
+      maxHeight: "calc(100vh - 225px)",
+      ".mantine-AppShell-body": {
+        height: "100%"
+      },
+      main: {
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        margin: 0
+      }
     },
-    children: /* @__PURE__ */ jsxs(AppShell, {
-      sx: {
-        height: "90vh",
-        maxHeight: "calc(100vh - 185px)",
-        ".mantine-AppShell-body": {
-          height: "100%"
+    padding: "md",
+    children: [/* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      position: "apart",
+      grow: true,
+      align: "stretch",
+      noWrap: true,
+      children: [/* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        grow: true,
+        sx: {
+          flexGrow: 1,
+          maxWidth: "calc(60% - 16px)"
         },
-        main: {
-          height: "100%",
-          width: "100%",
-          padding: 0,
-          margin: 0
-        }
-      },
-      padding: "md",
-      header: /* @__PURE__ */ jsx(SelectOrAddDataSource, {
-        id,
-        setID
-      }),
-      children: [/* @__PURE__ */ jsx(DataSourceEditor, {
-        id,
-        setID
-      }), /* @__PURE__ */ jsx(DataPreview, {
-        id
-      })]
-    })
+        children: [/* @__PURE__ */ jsx(SelectOrAddQuery, {
+          id,
+          setID
+        }), /* @__PURE__ */ jsx(QueryEditor, {
+          id,
+          setID
+        })]
+      }), /* @__PURE__ */ jsx(ContextAndSnippets, {})]
+    }), /* @__PURE__ */ jsx(DataPreview, {
+      id
+    })]
   });
 }
 function ContextInfo({}) {
   const contextInfo = React.useContext(ContextInfoContext);
-  const sampleSQL = `SELECT *
+  const sampleSQL2 = `SELECT *
 FROM commit
 WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'`;
   return /* @__PURE__ */ jsxs(Group, {
@@ -4108,7 +4176,6 @@ WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.
     grow: true,
     sx: {
       border: "1px solid #eee",
-      maxWidth: "48%",
       overflow: "hidden"
     },
     children: [/* @__PURE__ */ jsx(Group, {
@@ -4141,7 +4208,7 @@ WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.
         children: `-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
-${sampleSQL}`
+${sampleSQL2}`
       }), /* @__PURE__ */ jsx(Text, {
         weight: 500,
         sx: {
@@ -4160,14 +4227,32 @@ ${sampleSQL}`
     })]
   });
 }
+function PreviewSnippet({
+  value
+}) {
+  const context = React.useContext(ContextInfoContext);
+  const explained = React.useMemo(() => {
+    return explainSQLSnippet(value, context);
+  }, [value, context]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    noWrap: true,
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Text, {
+      children: "Preview"
+    }), /* @__PURE__ */ jsx(Prism, {
+      language: "sql",
+      noCopy: true,
+      colorScheme: "dark",
+      children: explained
+    })]
+  });
+}
 function SQLSnippetsEditor({}) {
   const {
     sqlSnippets,
     setSQLSnippets
   } = React.useContext(DefinitionContext);
-  const sampleSQL = `SELECT *
-FROM commit
-WHERE \${author_time_condition}`;
   const initialValues = React.useMemo(() => ({
     snippets: formList(sqlSnippets != null ? sqlSnippets : [])
   }), [sqlSnippets]);
@@ -4188,7 +4273,8 @@ WHERE \${author_time_condition}`;
     direction: "column",
     grow: true,
     sx: {
-      border: "1px solid #eee"
+      border: "1px solid #eee",
+      flexGrow: 1
     },
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(submit),
@@ -4214,26 +4300,11 @@ WHERE \${author_time_condition}`;
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
+      }), /* @__PURE__ */ jsx(Group, {
         px: "md",
         pb: "md",
-        children: [/* @__PURE__ */ jsx(Prism, {
-          language: "sql",
-          sx: {
-            width: "100%"
-          },
-          noCopy: true,
-          trim: false,
-          colorScheme: "dark",
-          children: `-- You may refer context data *by name*
--- in SQL or VizConfig.
-
-${sampleSQL}
-
--- where author_time_condition is:
-author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
- `
-        }), /* @__PURE__ */ jsxs(Group, {
+        pt: "md",
+        children: /* @__PURE__ */ jsxs(Group, {
           direction: "column",
           sx: {
             width: "100%",
@@ -4253,11 +4324,15 @@ author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].to
             children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
               label: "Key",
               required: true
-            }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadValues({
+            }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadProps(__spreadValues({
               minRows: 3,
               label: "Value",
               required: true
-            }, form.getListInputProps("snippets", index2, "value"))), /* @__PURE__ */ jsx(ActionIcon, {
+            }, form.getListInputProps("snippets", index2, "value")), {
+              className: "code-textarea"
+            })), /* @__PURE__ */ jsx(PreviewSnippet, {
+              value: form.values.snippets[index2].value
+            }), /* @__PURE__ */ jsx(ActionIcon, {
               color: "red",
               variant: "hover",
               onClick: () => form.removeListItem("snippets", index2),
@@ -4284,12 +4359,97 @@ author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].to
               children: "Add a snippet"
             })
           })]
-        })]
+        })
       })]
     })
   });
 }
-function EditSQLSnippetsModal({
+const sampleSQL = `SELECT *
+FROM commit
+WHERE \${author_time_condition}`;
+function SQLSnippetGuide() {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee",
+      overflow: "hidden"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      position: "left",
+      pl: "md",
+      py: "md",
+      sx: {
+        borderBottom: "1px solid #eee",
+        background: "#efefef",
+        flexGrow: 0
+      },
+      children: /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        children: "Guide"
+      })
+    }), /* @__PURE__ */ jsx(Group, {
+      direction: "column",
+      px: "md",
+      pb: "md",
+      sx: {
+        width: "100%"
+      },
+      children: /* @__PURE__ */ jsx(Prism, {
+        language: "sql",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        trim: false,
+        colorScheme: "dark",
+        children: `-- You may refer context data *by name*
+-- in SQL or VizConfig.
+
+${sampleSQL}
+
+-- where author_time_condition is:
+author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
+ `
+      })
+    })]
+  });
+}
+function EditSQLSnippets({}) {
+  return /* @__PURE__ */ jsx(AppShell, {
+    sx: {
+      height: "90vh",
+      maxHeight: "calc(100vh - 225px)",
+      ".mantine-AppShell-body": {
+        height: "100%"
+      },
+      main: {
+        height: "100%",
+        width: "100%",
+        padding: 0,
+        margin: 0
+      }
+    },
+    padding: "md",
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      position: "apart",
+      grow: true,
+      align: "stretch",
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(SQLSnippetsEditor, {}), /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        grow: true,
+        noWrap: true,
+        sx: {
+          maxWidth: "40%"
+        },
+        children: [/* @__PURE__ */ jsx(SQLSnippetGuide, {}), /* @__PURE__ */ jsx(ContextInfo, {})]
+      })]
+    })
+  });
+}
+function DataEditorModal({
   opened,
   close
 }) {
@@ -4304,34 +4464,19 @@ function EditSQLSnippetsModal({
     overflow: "inside",
     opened,
     onClose: close,
-    title: "SQL Snippets",
+    title: "Data Settings",
     trapFocus: true,
     onDragStart: (e) => {
       e.stopPropagation();
     },
-    children: /* @__PURE__ */ jsx(AppShell, {
-      sx: {
-        height: "90vh",
-        maxHeight: "calc(100vh - 185px)",
-        ".mantine-AppShell-body": {
-          height: "100%"
-        },
-        main: {
-          height: "100%",
-          width: "100%",
-          padding: 0,
-          margin: 0
-        }
-      },
-      padding: "md",
-      children: /* @__PURE__ */ jsxs(Group, {
-        direction: "row",
-        position: "apart",
-        grow: true,
-        align: "stretch",
-        noWrap: true,
-        children: [/* @__PURE__ */ jsx(SQLSnippetsEditor, {}), /* @__PURE__ */ jsx(ContextInfo, {})]
-      })
+    children: /* @__PURE__ */ jsxs(Tabs, {
+      children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+        label: "SQL Snippet",
+        children: /* @__PURE__ */ jsx(EditSQLSnippets, {})
+      }), /* @__PURE__ */ jsx(Tabs.Tab, {
+        label: "Queries",
+        children: /* @__PURE__ */ jsx(EditQueries, {})
+      })]
     })
   });
 }
@@ -4347,12 +4492,9 @@ function DashboardActions({
     inEditMode,
     inUseMode
   } = React.useContext(LayoutStateContext);
-  const [dataSourcesOpened, setDataSourcesOpened] = React.useState(false);
-  const openDataSources = () => setDataSourcesOpened(true);
-  const closeDataSources = () => setDataSourcesOpened(false);
-  const [sqlSnippetsOpened, setSQLSnippetsOpened] = React.useState(false);
-  const openSQLSnippets = () => setSQLSnippetsOpened(true);
-  const closeSQLSnippets = () => setSQLSnippetsOpened(false);
+  const [dataEditorOpened, setDataEditorOpened] = React.useState(false);
+  const openQueries = () => setDataEditorOpened(true);
+  const closeQueries = () => setDataEditorOpened(false);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -4376,19 +4518,11 @@ function DashboardActions({
       }), inEditMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
-        onClick: openSQLSnippets,
-        leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
-          size: 20
-        }),
-        children: "SQL Snippets"
-      }), inEditMode && /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: openDataSources,
+        onClick: openQueries,
         leftIcon: /* @__PURE__ */ jsx(Database, {
           size: 20
         }),
-        children: "Data Sources"
+        children: "Data Settings"
       }), !inUseMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
@@ -4407,12 +4541,9 @@ function DashboardActions({
         }),
         children: "Revert Changes"
       })]
-    }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
-      opened: dataSourcesOpened,
-      close: closeDataSources
-    }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
-      opened: sqlSnippetsOpened,
-      close: closeSQLSnippets
+    }), /* @__PURE__ */ jsx(DataEditorModal, {
+      opened: dataEditorOpened,
+      close: closeQueries
     }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
@@ -4437,7 +4568,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));
@@ -4448,14 +4579,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);
@@ -4470,9 +4601,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: {}
@@ -4493,9 +4624,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", {
@@ -4567,7 +4698,7 @@ function ReadOnlyDashboard({
   const definition = React.useMemo(() => __spreadProps(__spreadValues({}, dashboard.definition), {
     setSQLSnippets: () => {
     },
-    setDataSources: () => {
+    setQueries: () => {
     }
   }), [dashboard]);
   return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {