@devtable/dashboard 1.15.1 → 1.18.0

package/dist/dashboard.es.js

@@ -35,11 +35,11 @@ var __publicField = (obj, key, value) => {
 };
 import React from "react";
 import _ from "lodash";
-import { WidthProvider, Responsive } from "react-grid-layout";
+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,25 +132,6 @@ 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) {
     return [];
@@ -1530,6 +1549,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 +1587,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 +1673,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 +1753,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 +1787,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 +1821,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 +1962,8 @@ function SeriesItemField({
   index: index2,
   remove,
   seriesItem,
-  yAxisOptions
+  yAxisOptions,
+  data
 }) {
   const type = seriesItem.type;
   return /* @__PURE__ */ jsxs(Group, {
@@ -1965,9 +2024,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 +2134,8 @@ function SeriesItemField({
 function SeriesField({
   control,
   watch,
-  getValues
+  getValues,
+  data
 }) {
   const {
     fields,
@@ -2118,7 +2179,8 @@ function SeriesField({
       index: index2,
       remove,
       seriesItem,
-      yAxisOptions
+      yAxisOptions,
+      data
     })), /* @__PURE__ */ jsx(Group, {
       position: "center",
       mt: "xs",
@@ -2319,7 +2381,8 @@ function withDefaults(series) {
 }
 function VizCartesianChartPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const _a = conf, {
     series,
@@ -2385,38 +2448,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 +2492,8 @@ function VizPiePanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2469,19 +2536,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 +2741,8 @@ function _ColorArrayInput({
 const ColorArrayInput = React.forwardRef(_ColorArrayInput);
 function VizStatsPanel({
   conf,
-  setConf
+  setConf,
+  data
 }) {
   const defaultValues = _.merge({}, {
     align: "center",
@@ -2755,6 +2818,7 @@ function VizStatsPanel({
             children: [/* @__PURE__ */ jsxs(Group, {
               direction: "row",
               grow: true,
+              noWrap: true,
               children: [/* @__PURE__ */ jsx(Controller, {
                 name: "content.prefix",
                 control,
@@ -2771,12 +2835,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 +2967,8 @@ function SunburstPanel({
     label_field,
     value_field
   },
-  setConf
+  setConf,
+  data
 }) {
   const form = useForm$1({
     initialValues: {
@@ -2948,19 +3011,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 +3050,8 @@ function VizTablePanel(_e) {
   } = _h, restConf = __objRest(_h, [
     "columns"
   ]), {
-    setConf
+    setConf,
+    data
   } = _f;
   const form = useForm$1({
     initialValues: __spreadValues({
@@ -3046,10 +3105,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 +3204,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 +3421,7 @@ const types = [{
 }];
 function EditVizConf() {
   const {
+    data,
     viz,
     setViz
   } = React.useContext(PanelContext);
@@ -3415,7 +3466,8 @@ function EditVizConf() {
       })
     }), Panel2 && /* @__PURE__ */ jsx(Panel2, {
       conf: viz.conf,
-      setConf: setVizConf
+      setConf: setVizConf,
+      data
     }), !Panel2 && /* @__PURE__ */ jsx(JsonInput, {
       minRows: 20,
       label: "Config",
@@ -3643,29 +3695,16 @@ function Panel({
   });
 }
 var index = "";
-const ResponsiveReactGridLayout$1 = WidthProvider(Responsive);
+const ReactGridLayout$1 = WidthProvider(RGL);
 function DashboardLayout({
   panels,
   setPanels,
   className = "layout",
-  cols = {
-    lg: 12,
-    md: 10,
-    sm: 8,
-    xs: 6,
-    xxs: 4
-  },
   rowHeight = 10,
   onRemoveItem,
   isDraggable,
-  isResizable,
-  setLocalCols,
-  setBreakpoint
+  isResizable
 }) {
-  const onBreakpointChange = (breakpoint, localCols) => {
-    setBreakpoint(breakpoint);
-    setLocalCols(localCols);
-  };
   const onLayoutChange = React.useCallback((currentLayout) => {
     const m2 = /* @__PURE__ */ new Map();
     currentLayout.forEach((_a) => {
@@ -3681,11 +3720,9 @@ function DashboardLayout({
     }));
     setPanels(newPanels);
   }, [panels, setPanels]);
-  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout$1, {
-    onBreakpointChange,
+  return /* @__PURE__ */ jsx(ReactGridLayout$1, {
     onLayoutChange,
     className,
-    cols,
     rowHeight,
     isDraggable,
     isResizable,
@@ -3779,7 +3816,7 @@ function ContextAndSnippets({}) {
     grow: true,
     sx: {
       border: "1px solid #eee",
-      maxWidth: "48%",
+      maxWidth: "40%",
       overflow: "hidden"
     },
     children: [/* @__PURE__ */ jsx(Group, {
@@ -3842,6 +3879,20 @@ function ContextAndSnippets({}) {
     })]
   });
 }
+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 DataSourceForm({
   value,
   onChange
@@ -3941,11 +3992,23 @@ 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
+            })
+          })]
+        })]
       })]
     })
   });
@@ -3982,16 +4045,9 @@ function DataSourceEditor({
       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(DataSourceForm, {
+    value: dataSource,
+    onChange: update
   });
 }
 function SelectOrAddDataSource({
@@ -4064,58 +4120,52 @@ function SelectOrAddDataSource({
     })
   });
 }
-function EditDataSourcesModal({
-  opened,
-  close
-}) {
+function EditDataSources({}) {
   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(SelectOrAddDataSource, {
+          id,
+          setID
+        }), /* @__PURE__ */ jsx(DataSourceEditor, {
+          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, {
@@ -4123,7 +4173,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, {
@@ -4156,7 +4205,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: {
@@ -4175,14 +4224,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]);
@@ -4203,7 +4270,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),
@@ -4229,26 +4297,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%",
@@ -4268,11 +4321,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),
@@ -4299,12 +4356,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
 }) {
@@ -4319,34 +4461,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: "Data Source",
+        children: /* @__PURE__ */ jsx(EditDataSources, {})
+      })]
     })
   });
 }
@@ -4362,12 +4489,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 openDataSources = () => setDataEditorOpened(true);
+  const closeDataSources = () => setDataEditorOpened(false);
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -4388,14 +4512,6 @@ function DashboardActions({
           size: 20
         }),
         children: "Add a Panel"
-      }), 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",
@@ -4403,7 +4519,7 @@ function DashboardActions({
         leftIcon: /* @__PURE__ */ jsx(Database, {
           size: 20
         }),
-        children: "Data Sources"
+        children: "Data Settings"
       }), !inUseMode && /* @__PURE__ */ jsx(Button, {
         variant: "default",
         size: "sm",
@@ -4422,12 +4538,9 @@ function DashboardActions({
         }),
         children: "Revert Changes"
       })]
-    }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
-      opened: dataSourcesOpened,
+    }), /* @__PURE__ */ jsx(DataEditorModal, {
+      opened: dataEditorOpened,
       close: closeDataSources
-    }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
-      opened: sqlSnippetsOpened,
-      close: closeSQLSnippets
     }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
@@ -4450,8 +4563,6 @@ function Dashboard({
     APIClient.baseURL = config.apiBaseURL;
   }
   const [layoutFrozen, freezeLayout] = React.useState(false);
-  const [breakpoint, setBreakpoint] = React.useState();
-  const [localCols, setLocalCols] = React.useState();
   const [panels, setPanels] = React.useState(dashboard.panels);
   const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
   const [dataSources, setDataSources] = React.useState(dashboard.definition.dataSources);
@@ -4539,31 +4650,21 @@ function Dashboard({
             setPanels,
             isDraggable: inLayoutMode,
             isResizable: inLayoutMode,
-            onRemoveItem: removePanelByID,
-            setLocalCols,
-            setBreakpoint
+            onRemoveItem: removePanelByID
           })]
         })
       })
     })
   });
 }
-const ResponsiveReactGridLayout = WidthProvider(Responsive);
+const ReactGridLayout = WidthProvider(RGL);
 function ReadOnlyDashboardLayout({
   panels,
   className = "layout",
-  cols = {
-    lg: 12,
-    md: 10,
-    sm: 8,
-    xs: 6,
-    xxs: 4
-  },
   rowHeight = 10
 }) {
-  return /* @__PURE__ */ jsx(ResponsiveReactGridLayout, {
+  return /* @__PURE__ */ jsx(ReactGridLayout, {
     className,
-    cols,
     rowHeight,
     isDraggable: false,
     isResizable: false,