@devtable/dashboard 0.4.0 → 1.2.0

package/dist/dashboard.es.js

@@ -32,11 +32,12 @@ var __objRest = (source, exclude) => {
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Text, Table, Group, LoadingOverlay, Box, Textarea, Button, TextInput, ActionIcon, useMantineTheme, ColorSwatch, Select, Switch, Slider, JsonInput, Divider, Modal, AppShell, Navbar, Tabs, Tooltip, Menu, Container, SegmentedControl } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, Switch, Slider, JsonInput, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { Trash, DeviceFloppy, InfoCircle, Refresh, Settings, Paint, PlayerPlay, PlaylistAdd, Recycle, Share } from "tabler-icons-react";
-import { useElementSize, randomId, useInputState, useListState } from "@mantine/hooks";
+import { InfoCircle, DeviceFloppy, Trash, Refresh, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, 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";
 import * as echarts from "echarts/core";
 import { SunburstChart, BarChart, LineChart } from "echarts/charts";
@@ -44,9 +45,9 @@ import { CanvasRenderer } from "echarts/renderers";
 import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent } from "echarts/components";
 import numbro from "numbro";
 import "echarts-gl";
+import { useForm, Controller } from "react-hook-form";
+import { formList, useForm as useForm$1 } from "@mantine/form";
 import { Prism } from "@mantine/prism";
-import { formList, useForm } from "@mantine/form";
-import { useForm as useForm$1, Controller } from "react-hook-form";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
   DashboardMode2["Edit"] = "edit";
@@ -87,7 +88,14 @@ const post = getRequest("POST");
 function formatSQL(sql, params) {
   const names = Object.keys(params);
   const vals = Object.values(params);
-  return new Function(...names, `return \`${sql}\`;`)(...vals);
+  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) => {
@@ -96,24 +104,26 @@ function getSQLParams(context, definitions) {
   }, {});
   return _.merge({}, sqlSnippetRecord, context);
 }
-const queryBySQL = (sql, context, definitions, title) => async () => {
-  if (!sql) {
+const queryBySQL = ({ context, definitions, title, dataSource }) => async () => {
+  if (!dataSource || !dataSource.sql) {
     return [];
   }
+  const { type, key, sql } = dataSource;
   const needParams = sql.includes("$");
-  const params = getSQLParams(context, definitions);
-  if (needParams && Object.keys(params).length === 0) {
-    console.error(`[queryBySQL] insufficient params for {${title}}'s SQL`);
+  try {
+    const params = getSQLParams(context, definitions);
+    const formattedSQL = formatSQL(sql, params);
+    if (needParams) {
+      console.groupCollapsed(`Final SQL for: ${title}`);
+      console.log(formattedSQL);
+      console.groupEnd();
+    }
+    const res = await post("/query", { type, key, sql: formattedSQL });
+    return res;
+  } catch (error) {
+    console.error(error);
     return [];
   }
-  const formattedSQL = formatSQL(sql, params);
-  if (needParams) {
-    console.groupCollapsed(`Final SQL for: ${title}`);
-    console.log(formattedSQL);
-    console.groupEnd();
-  }
-  const res = await post("/query", { sql: formattedSQL });
-  return res;
 };
 const initialContext$2 = {};
 const initialContextInfoContext = initialContext$2;
@@ -127,8 +137,8 @@ const initialContext$1 = {
   description: "",
   setDescription: () => {
   },
-  sql: "",
-  setSQL: () => {
+  dataSourceID: "",
+  setDataSourceID: () => {
   },
   viz: {
     type: "",
@@ -140,6 +150,15 @@ const initialContext$1 = {
   }
 };
 const PanelContext = React.createContext(initialContext$1);
+const initialContext = {
+  sqlSnippets: [],
+  setSQLSnippets: () => {
+  },
+  dataSources: [],
+  setDataSources: () => {
+  }
+};
+const DefinitionContext = React.createContext(initialContext);
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -173,6 +192,105 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
+function DescriptionPopover({
+  position,
+  trigger = "click"
+}) {
+  const {
+    freezeLayout
+  } = React.useContext(LayoutStateContext);
+  const [opened, setOpened] = React.useState(false);
+  const {
+    description
+  } = React.useContext(PanelContext);
+  React.useEffect(() => {
+    freezeLayout(opened);
+  }, [opened]);
+  if (!description) {
+    return null;
+  }
+  const target = trigger === "click" ? /* @__PURE__ */ jsx(Tooltip, {
+    label: "Click to see description",
+    openDelay: 500,
+    children: /* @__PURE__ */ jsx(InfoCircle, {
+      size: 20,
+      onClick: () => setOpened((v) => !v),
+      style: {
+        verticalAlign: "baseline",
+        cursor: "pointer"
+      }
+    })
+  }) : /* @__PURE__ */ jsx(InfoCircle, {
+    size: 20,
+    onMouseEnter: () => setOpened(true),
+    onMouseLeave: () => setOpened(false),
+    style: {
+      verticalAlign: "baseline",
+      cursor: "pointer"
+    }
+  });
+  return /* @__PURE__ */ jsx(Popover, {
+    opened,
+    onClose: () => setOpened(false),
+    withCloseButton: true,
+    withArrow: true,
+    trapFocus: true,
+    closeOnEscape: false,
+    placement: "center",
+    position,
+    target,
+    children: /* @__PURE__ */ jsx(RichTextEditor, {
+      readOnly: true,
+      value: description,
+      onChange: _.noop,
+      sx: {
+        border: "none"
+      }
+    })
+  });
+}
+function EditDescription() {
+  const {
+    description,
+    setDescription
+  } = React.useContext(PanelContext);
+  const [value, onChange] = React.useState(description);
+  const changed = description !== value;
+  const submit = React.useCallback(() => {
+    if (!changed) {
+      return;
+    }
+    setDescription(value);
+  }, [changed, value]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    sx: {
+      flexGrow: 1
+    },
+    children: [/* @__PURE__ */ jsxs(Group, {
+      align: "end",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Description"
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        variant: "hover",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsx(RichTextEditor$1, {
+      value,
+      onChange,
+      sx: {
+        flexGrow: 1
+      },
+      sticky: true,
+      p: "0"
+    })]
+  });
+}
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
@@ -194,6 +312,240 @@ class ErrorBoundary extends React.Component {
     return this.props.children;
   }
 }
+function PreviewPanel() {
+  const {
+    title
+  } = React.useContext(PanelContext);
+  return /* @__PURE__ */ jsx(ErrorBoundary, {
+    children: /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      noWrap: true,
+      mx: "auto",
+      mt: "xl",
+      p: "5px",
+      spacing: "xs",
+      sx: {
+        width: "600px",
+        height: "450px",
+        background: "transparent",
+        borderRadius: "5px",
+        boxShadow: "0px 0px 10px 0px rgba(0,0,0,.2)"
+      },
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "apart",
+        noWrap: true,
+        sx: {
+          borderBottom: "1px solid #eee",
+          paddingBottom: "5px",
+          flexGrow: 0,
+          flexShrink: 0
+        },
+        children: [/* @__PURE__ */ jsx(Group, {
+          children: /* @__PURE__ */ jsx(DescriptionPopover, {
+            position: "bottom",
+            trigger: "hover"
+          })
+        }), /* @__PURE__ */ jsx(Group, {
+          grow: true,
+          position: "center",
+          children: /* @__PURE__ */ jsx(Text, {
+            lineClamp: 1,
+            weight: "bold",
+            children: title
+          })
+        }), /* @__PURE__ */ jsx(Group, {
+          position: "right",
+          spacing: 0,
+          sx: {
+            height: "28px"
+          }
+        })]
+      }), /* @__PURE__ */ jsx(Group, {
+        sx: {
+          background: "#eee",
+          flexGrow: 1
+        }
+      })]
+    })
+  });
+}
+function EditTitle() {
+  const {
+    title,
+    setTitle
+  } = React.useContext(PanelContext);
+  const [localTitle, setLocalTitle] = useInputState(title);
+  const changed = title !== localTitle;
+  const submit = React.useCallback(() => {
+    if (!changed) {
+      return;
+    }
+    setTitle(localTitle);
+  }, [changed, localTitle]);
+  return /* @__PURE__ */ jsx(TextInput, {
+    value: localTitle,
+    onChange: setLocalTitle,
+    label: /* @__PURE__ */ jsxs(Group, {
+      align: "end",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Panel Title"
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        variant: "hover",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    })
+  });
+}
+function PanelConfig({}) {
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "row",
+    grow: true,
+    noWrap: true,
+    align: "stretch",
+    sx: {
+      height: "100%"
+    },
+    children: [/* @__PURE__ */ jsxs(Group, {
+      grow: true,
+      direction: "column",
+      sx: {
+        width: "40%",
+        flexShrink: 0,
+        flexGrow: 0,
+        height: "100%"
+      },
+      children: [/* @__PURE__ */ jsx(EditTitle, {}), /* @__PURE__ */ jsx(EditDescription, {})]
+    }), /* @__PURE__ */ jsx(Box, {
+      sx: {
+        height: "100%",
+        flexGrow: 1,
+        maxWidth: "60%"
+      },
+      children: /* @__PURE__ */ jsx(PreviewPanel, {})
+    })]
+  });
+}
+function DataPreview({
+  id
+}) {
+  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 {
+    data = [],
+    loading
+  } = useRequest(queryBySQL({
+    context: contextInfo,
+    definitions,
+    title: id,
+    dataSource
+  }), {
+    refreshDeps: [contextInfo, definitions, dataSource]
+  });
+  if (loading) {
+    return /* @__PURE__ */ jsx(LoadingOverlay, {
+      visible: loading
+    });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsx(Table, {});
+  }
+  return /* @__PURE__ */ jsxs(Group, {
+    my: "xl",
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      position: "left",
+      py: "md",
+      pl: "md",
+      sx: {
+        borderBottom: "1px solid #eee",
+        background: "#efefef"
+      },
+      children: /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        children: "Preview Data"
+      })
+    }), /* @__PURE__ */ jsxs(Table, {
+      children: [/* @__PURE__ */ jsx("thead", {
+        children: /* @__PURE__ */ jsx("tr", {
+          children: Object.keys(data == null ? void 0 : data[0]).map((label) => /* @__PURE__ */ jsx("th", {
+            children: label
+          }, label))
+        })
+      }), /* @__PURE__ */ jsx("tbody", {
+        children: data.map((row, index2) => /* @__PURE__ */ jsx("tr", {
+          children: Object.values(row).map((v, i) => /* @__PURE__ */ jsx("td", {
+            children: /* @__PURE__ */ jsx(Group, {
+              sx: {
+                "&, .mantine-Text-root": {
+                  fontFamily: "monospace"
+                }
+              },
+              children: /* @__PURE__ */ jsx(Text, {
+                children: v
+              })
+            })
+          }, `${v}--${i}`))
+        }, `row-${index2}`))
+      })]
+    })]
+  });
+}
+function PickDataSource({}) {
+  const {
+    dataSources
+  } = React.useContext(DefinitionContext);
+  const {
+    dataSourceID,
+    setDataSourceID,
+    data,
+    loading
+  } = React.useContext(PanelContext);
+  const options = React.useMemo(() => {
+    return dataSources.map((d) => ({
+      value: d.id,
+      label: d.id
+    }));
+  }, [dataSources]);
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    noWrap: true,
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      sx: {
+        maxWidth: "600px",
+        alignItems: "baseline"
+      },
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Select a Data Source"
+      }), /* @__PURE__ */ jsx(Select, {
+        data: options,
+        value: dataSourceID,
+        onChange: setDataSourceID,
+        allowDeselect: false,
+        clearable: false,
+        sx: {
+          flexGrow: 1
+        }
+      })]
+    }), /* @__PURE__ */ jsx(DataPreview, {
+      id: dataSourceID
+    })]
+  });
+}
 echarts.use([SunburstChart, CanvasRenderer]);
 const defaultOption$1 = {
   tooltip: {
@@ -244,8 +596,8 @@ function Sunbrust({
         }
       }
     }
-  }), []);
-  const option = _.merge(defaultOption$1, labelOption, restConf, {
+  }), [max]);
+  const option = _.merge({}, defaultOption$1, labelOption, restConf, {
     series: {
       data: chartData
     }
@@ -560,7 +912,7 @@ function VizBar3D({
     }
   });
 }
-var index$3 = "";
+var index$2 = "";
 function renderViz(width, height, data, viz) {
   const props = {
     width,
@@ -613,287 +965,23 @@ function Viz({
     }), !empty && renderViz(width, height, data, viz)]
   });
 }
-function ContextInfo({}) {
-  const contextInfo = React.useContext(ContextInfoContext);
-  const sampleSQL = `SELECT *
-FROM commit
-WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'`;
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    children: [/* @__PURE__ */ jsx(Prism, {
-      language: "sql",
-      sx: {
-        width: "100%"
-      },
-      noCopy: true,
-      colorScheme: "dark",
-      children: `-- You may refer context data *by name*
--- in SQL or VizConfig.
-
-${sampleSQL}`
-    }), /* @__PURE__ */ jsx(Text, {
-      weight: 700,
-      children: "Avaiable context entries"
-    }), /* @__PURE__ */ jsx(Prism, {
-      language: "json",
-      sx: {
-        width: "100%"
-      },
-      noCopy: true,
-      colorScheme: "dark",
-      children: JSON.stringify(contextInfo, null, 2)
-    })]
-  });
-}
-var index$2 = "";
-function SQLQueryEditor({}) {
-  const {
-    sql,
-    setSQL
-  } = React.useContext(PanelContext);
-  const [showPreview, setShowPreview] = React.useState(true);
-  const handleChange = (e) => {
-    setSQL(e.target.value);
-  };
-  const togglePreview = React.useCallback(() => {
-    setShowPreview((v) => !v);
-  }, []);
-  const format = React.useCallback(() => {
-    setSQL((sql2) => sql2.trim());
-  }, [setSQL]);
-  return /* @__PURE__ */ jsxs(Box, {
-    className: "sql-query-editor-root",
-    sx: {
-      height: "100%"
-    },
-    children: [/* @__PURE__ */ jsx(Textarea, {
-      value: sql,
-      onChange: handleChange,
-      minRows: 20,
-      maxRows: 20
-    }), /* @__PURE__ */ jsxs(Group, {
-      m: "md",
-      position: "right",
-      children: [/* @__PURE__ */ jsx(Button, {
-        color: "blue",
-        onClick: format,
-        children: "Format"
-      }), /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        onClick: togglePreview,
-        children: "Toggle Preview"
-      })]
-    }), showPreview && /* @__PURE__ */ jsx(Prism, {
-      language: "sql",
-      withLineNumbers: true,
-      noCopy: true,
-      colorScheme: "dark",
-      children: sql
-    })]
-  });
-}
-const QueryEditor = SQLQueryEditor;
-function QueryResult({}) {
+function PreviewViz({}) {
   const {
-    data
+    data,
+    loading,
+    viz
   } = React.useContext(PanelContext);
-  return /* @__PURE__ */ jsxs("div", {
-    className: "query-result-root",
-    children: [/* @__PURE__ */ jsxs(Group, {
-      mb: "xs",
-      children: [/* @__PURE__ */ jsx(Text, {
-        weight: "bold",
-        children: "Data Length: "
-      }), data.length]
-    }), /* @__PURE__ */ jsx(Prism, {
-      language: "json",
-      colorScheme: "dark",
-      children: JSON.stringify(data, null, 2)
-    })]
+  return /* @__PURE__ */ jsx(ErrorBoundary, {
+    children: /* @__PURE__ */ jsx(Viz, {
+      viz,
+      data,
+      loading
+    })
   });
 }
-const initialContext = {
-  sqlSnippets: [],
-  setSQLSnippets: () => {
-  }
-};
-const DefinitionContext = React.createContext(initialContext);
-function SQLSnippetsForm({
-  sqlSnippets,
-  setSQLSnippets
-}) {
-  const initialValues = React.useMemo(() => ({
-    snippets: formList(sqlSnippets != null ? sqlSnippets : [])
-  }), [sqlSnippets]);
-  const form = useForm({
-    initialValues
-  });
-  const addSnippet = () => form.addListItem("snippets", {
-    key: randomId(),
-    value: ""
-  });
-  const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
-  const submit = ({
-    snippets
-  }) => {
-    setSQLSnippets(snippets);
-  };
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
-    sx: {
-      width: "100%",
-      position: "relative"
-    },
-    grow: true,
-    children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(submit),
-      children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
-        my: 0,
-        p: "md",
-        pr: 40,
-        sx: {
-          border: "1px solid #eee",
-          position: "relative"
-        },
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Key",
-          required: true
-        }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadValues({
-          minRows: 3,
-          label: "Value",
-          required: true
-        }, form.getListInputProps("snippets", index2, "value"))), /* @__PURE__ */ jsx(ActionIcon, {
-          color: "red",
-          variant: "hover",
-          onClick: () => form.removeListItem("snippets", index2),
-          sx: {
-            position: "absolute",
-            top: 15,
-            right: 5
-          },
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 16
-          })
-        })]
-      }, index2)), /* @__PURE__ */ jsxs(Group, {
-        position: "center",
-        mt: "xl",
-        grow: true,
-        sx: {
-          width: "80%"
-        },
-        mx: "auto",
-        children: [/* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          onClick: addSnippet,
-          children: "Add a snippet"
-        }), /* @__PURE__ */ jsx(Button, {
-          color: "blue",
-          type: "submit",
-          disabled: !changed,
-          children: "Submit"
-        })]
-      })]
-    })
-  });
-}
-function SQLSnippetsTab({}) {
-  const {
-    sqlSnippets,
-    setSQLSnippets
-  } = React.useContext(DefinitionContext);
-  const sampleSQL = `SELECT *
-FROM commit
-WHERE \${author_time_condition}`;
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    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__ */ jsx(Text, {
-      weight: 700,
-      children: "SQL Snippets"
-    }), /* @__PURE__ */ jsx(SQLSnippetsForm, {
-      sqlSnippets,
-      setSQLSnippets
-    })]
-  });
-}
-function EditDescription() {
-  const {
-    description,
-    setDescription
-  } = React.useContext(PanelContext);
-  const [localDesc, setLocalDesc] = useInputState(description);
-  const changed = description !== localDesc;
-  const submit = React.useCallback(() => {
-    if (!changed) {
-      return;
-    }
-    setDescription(localDesc);
-  }, [changed, localDesc]);
-  return /* @__PURE__ */ jsx(Textarea, {
-    label: "Panel Description",
-    value: localDesc,
-    onChange: setLocalDesc,
-    minRows: 2,
-    rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-      disabled: !changed,
-      onClick: submit,
-      sx: {
-        alignSelf: "flex-start",
-        marginTop: "4px"
-      },
-      children: /* @__PURE__ */ jsx(DeviceFloppy, {
-        size: 20
-      })
-    })
-  });
-}
-function EditTitle() {
-  const {
-    title,
-    setTitle
-  } = React.useContext(PanelContext);
-  const [localTitle, setLocalTitle] = useInputState(title);
-  const changed = title !== localTitle;
-  const submit = React.useCallback(() => {
-    if (!changed) {
-      return;
-    }
-    setTitle(localTitle);
-  }, [changed, localTitle]);
-  return /* @__PURE__ */ jsx(TextInput, {
-    label: "Panel Title",
-    value: localTitle,
-    onChange: setLocalTitle,
-    rightSection: /* @__PURE__ */ jsx(ActionIcon, {
-      disabled: !changed,
-      onClick: submit,
-      children: /* @__PURE__ */ jsx(DeviceFloppy, {
-        size: 20
-      })
-    })
-  });
-}
-function VizBar3DPanel({
-  conf,
-  setConf
+function VizBar3DPanel({
+  conf,
+  setConf
 }) {
   const defaultValues = _.assign({}, {
     "x_axis_data_key": "x",
@@ -916,7 +1004,7 @@ function VizBar3DPanel({
     control,
     handleSubmit,
     formState
-  } = useForm$1({
+  } = useForm({
     defaultValues
   });
   return /* @__PURE__ */ jsx(Group, {
@@ -1119,7 +1207,7 @@ function VizLineBarChartPanel({
   const initialValues = React.useMemo(() => __spreadValues({
     series: formList(series != null ? series : [])
   }, restConf), [series, restConf]);
-  const form = useForm({
+  const form = useForm$1({
     initialValues
   });
   const addSeries = () => form.addListItem("series", {
@@ -1231,7 +1319,7 @@ function SunburstPanel({
   },
   setConf
 }) {
-  const form = useForm({
+  const form = useForm$1({
     initialValues: {
       label_field,
       value_field
@@ -1318,7 +1406,7 @@ function VizTablePanel(_a) {
   ]), {
     setConf
   } = _b;
-  const form = useForm({
+  const form = useForm$1({
     initialValues: __spreadValues({
       id_field: "id",
       use_raw_columns: true,
@@ -1593,7 +1681,7 @@ function VizTextPanel({
   setConf
 }) {
   var _a;
-  const form = useForm({
+  const form = useForm$1({
     initialValues: {
       paragraphs: formList((_a = conf.paragraphs) != null ? _a : sampleParagraphs)
     }
@@ -1788,9 +1876,31 @@ function EditVizConf() {
 }
 function VizConfig({}) {
   return /* @__PURE__ */ jsxs(Group, {
+    direction: "row",
     grow: true,
-    direction: "column",
-    children: [/* @__PURE__ */ jsx(EditTitle, {}), /* @__PURE__ */ jsx(EditDescription, {}), /* @__PURE__ */ jsx(Divider, {}), /* @__PURE__ */ jsx(EditVizConf, {})]
+    noWrap: true,
+    align: "stretch",
+    sx: {
+      height: "100%"
+    },
+    children: [/* @__PURE__ */ jsx(Group, {
+      grow: true,
+      direction: "column",
+      noWrap: true,
+      sx: {
+        width: "40%",
+        flexShrink: 0,
+        flexGrow: 0
+      },
+      children: /* @__PURE__ */ jsx(EditVizConf, {})
+    }), /* @__PURE__ */ jsx(Box, {
+      sx: {
+        height: "100%",
+        flexGrow: 1,
+        maxWidth: "60%"
+      },
+      children: /* @__PURE__ */ jsx(PreviewViz, {})
+    })]
   });
 }
 function PanelSettingsModal({
@@ -1832,40 +1942,20 @@ function PanelSettingsModal({
         }
       },
       padding: "md",
-      navbar: /* @__PURE__ */ jsx(Navbar, {
-        width: {
-          base: "40%"
-        },
-        height: "100%",
-        p: "xs",
-        children: /* @__PURE__ */ jsxs(Tabs, {
-          initialTab: 1,
-          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "Context",
-            children: /* @__PURE__ */ jsx(ContextInfo, {})
-          }), /* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "SQL Snippets",
-            children: /* @__PURE__ */ jsx(SQLSnippetsTab, {})
-          }), /* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "SQL",
-            children: /* @__PURE__ */ jsx(QueryEditor, {})
-          }), /* @__PURE__ */ jsxs(Tabs.Tab, {
-            label: "Data",
-            children: [/* @__PURE__ */ jsx(LoadingOverlay, {
-              visible: loading
-            }), /* @__PURE__ */ jsx(QueryResult, {})]
-          }), /* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "Viz Config",
-            children: /* @__PURE__ */ jsx(VizConfig, {})
-          })]
-        })
-      }),
-      children: /* @__PURE__ */ jsx(ErrorBoundary, {
-        children: /* @__PURE__ */ jsx(Viz, {
-          viz,
-          data,
-          loading
-        })
+      children: /* @__PURE__ */ jsxs(Tabs, {
+        initialTab: 2,
+        children: [/* @__PURE__ */ jsxs(Tabs.Tab, {
+          label: "Data Source",
+          children: [/* @__PURE__ */ jsx(LoadingOverlay, {
+            visible: loading
+          }), /* @__PURE__ */ jsx(PickDataSource, {})]
+        }), /* @__PURE__ */ jsx(Tabs.Tab, {
+          label: "Panel",
+          children: /* @__PURE__ */ jsx(PanelConfig, {})
+        }), /* @__PURE__ */ jsx(Tabs.Tab, {
+          label: "Visualization",
+          children: /* @__PURE__ */ jsx(VizConfig, {})
+        })]
       })
     })
   });
@@ -1876,8 +1966,6 @@ function PanelTitleBar({}) {
   const close = () => setOpened(false);
   const {
     title,
-    description,
-    loading,
     refreshData
   } = React.useContext(PanelContext);
   const {
@@ -1891,17 +1979,7 @@ function PanelTitleBar({}) {
       paddingBottom: "5px"
     },
     children: [/* @__PURE__ */ jsx(Group, {
-      children: description && /* @__PURE__ */ jsx(Tooltip, {
-        label: description,
-        withArrow: true,
-        children: /* @__PURE__ */ jsx(InfoCircle, {
-          size: 12,
-          style: {
-            verticalAlign: "baseline",
-            cursor: "pointer"
-          }
-        })
-      })
+      children: /* @__PURE__ */ jsx(DescriptionPopover, {})
     }), /* @__PURE__ */ jsx(Group, {
       grow: true,
       position: "center",
@@ -1947,7 +2025,7 @@ function PanelTitleBar({}) {
 var index$1 = "";
 function Panel({
   viz: initialViz,
-  sql: initialSQL,
+  dataSourceID: initialDataSourceID,
   title: initialTitle,
   description: initialDesc,
   update,
@@ -1958,24 +2036,35 @@ function Panel({
   const definitions = React.useContext(DefinitionContext);
   const [title, setTitle] = React.useState(initialTitle);
   const [description, setDescription] = React.useState(initialDesc);
-  const [sql, setSQL] = React.useState(initialSQL);
+  const [dataSourceID, setDataSourceID] = React.useState(initialDataSourceID);
   const [viz, setViz] = React.useState(initialViz);
+  const dataSource = React.useMemo(() => {
+    if (!dataSourceID) {
+      return void 0;
+    }
+    return definitions.dataSources.find((d) => d.id === dataSourceID);
+  }, [dataSourceID, definitions.dataSources]);
   React.useEffect(() => {
     update == null ? void 0 : update({
       id,
       layout,
       title,
       description,
-      sql,
+      dataSourceID,
       viz
     });
-  }, [title, description, sql, viz, id, layout]);
+  }, [title, description, dataSource, viz, id, layout, dataSourceID]);
   const {
     data = [],
     loading,
     refresh
-  } = useRequest(queryBySQL(sql, contextInfo, definitions, title), {
-    refreshDeps: [contextInfo, definitions]
+  } = useRequest(queryBySQL({
+    context: contextInfo,
+    definitions,
+    title,
+    dataSource
+  }), {
+    refreshDeps: [contextInfo, definitions, dataSource]
   });
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
@@ -1986,8 +2075,8 @@ function Panel({
       setTitle,
       description,
       setDescription,
-      sql,
-      setSQL,
+      dataSourceID,
+      setDataSourceID,
       viz,
       setViz,
       refreshData
@@ -2041,7 +2130,7 @@ function DashboardLayout({
     const newPanels = panels.map((p2) => __spreadProps(__spreadValues({}, p2), {
       layout: m2.get(p2.id)
     }));
-    setPanels.setState(newPanels);
+    setPanels(newPanels);
   }, [panels, setPanels]);
   return /* @__PURE__ */ jsx(ResponsiveReactGridLayout$1, {
     onBreakpointChange,
@@ -2064,7 +2153,10 @@ function DashboardLayout({
         }, rest), {
           destroy: () => onRemoveItem(id),
           update: (panel) => {
-            setPanels.setItem(index2, panel);
+            setPanels((prevs) => {
+              prevs.splice(index2, 1, panel);
+              return [...prevs];
+            });
           }
         }))
       }, id);
@@ -2101,147 +2193,763 @@ function ModeToggler({
     }]
   });
 }
-function DashboardActions({
-  mode,
-  setMode,
-  hasChanges,
-  addPanel,
-  saveChanges
-}) {
-  const inEditMode = mode === DashboardMode.Edit;
+const example = `
+-- You may reference context data or SQL snippets *by name*
+-- in SQL or VizConfig.
+SELECT *
+FROM commit
+WHERE
+  -- context data
+  author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
+  -- SQL snippets
+  AND \${author_email_condition}
+  \${order_by_clause}
+`;
+function ContextAndSnippets({}) {
+  const contextInfo = React.useContext(ContextInfoContext);
+  const {
+    sqlSnippets
+  } = React.useContext(DefinitionContext);
+  const snippets = React.useMemo(() => {
+    const snippets2 = sqlSnippets.reduce((prev, curr) => {
+      prev[curr.key] = curr.value;
+      return prev;
+    }, {});
+    return JSON.stringify(snippets2, null, 2);
+  }, [sqlSnippets]);
+  const context = React.useMemo(() => {
+    return JSON.stringify(contextInfo, null, 2);
+  }, [contextInfo]);
   return /* @__PURE__ */ jsxs(Group, {
-    position: "apart",
-    pt: "sm",
-    pb: "xs",
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee",
+      maxWidth: "48%",
+      overflow: "hidden"
+    },
     children: [/* @__PURE__ */ jsx(Group, {
       position: "left",
-      children: /* @__PURE__ */ jsx(ModeToggler, {
-        mode,
-        setMode
+      pl: "md",
+      py: "md",
+      sx: {
+        borderBottom: "1px solid #eee",
+        background: "#efefef",
+        flexGrow: 0
+      },
+      children: /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        children: "Context"
       })
-    }), inEditMode && /* @__PURE__ */ jsxs(Group, {
-      position: "right",
-      children: [/* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: addPanel,
-        leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
-          size: 20
-        }),
-        children: "Add a Panel"
-      }), /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: saveChanges,
-        disabled: !hasChanges,
-        leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        }),
-        children: "Save Changes"
-      }), /* @__PURE__ */ jsx(Button, {
-        color: "red",
-        size: "sm",
-        disabled: !hasChanges,
-        leftIcon: /* @__PURE__ */ jsx(Recycle, {
-          size: 20
-        }),
-        children: "Revert Changes"
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      px: "md",
+      pb: "md",
+      sx: {
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ jsx(Prism, {
+        language: "sql",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        colorScheme: "dark",
+        children: example
+      }), /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        sx: {
+          flexGrow: 0
+        },
+        children: "Avaiable context"
+      }), /* @__PURE__ */ jsx(Prism, {
+        language: "json",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        colorScheme: "dark",
+        children: context
+      }), /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        sx: {
+          flexGrow: 0
+        },
+        children: "Avaiable SQL Snippets"
+      }), /* @__PURE__ */ jsx(Prism, {
+        language: "json",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        colorScheme: "dark",
+        children: snippets
       })]
-    }), !inEditMode && /* @__PURE__ */ jsx(Button, {
-      variant: "default",
-      size: "sm",
-      disabled: true,
-      leftIcon: /* @__PURE__ */ jsx(Share, {
-        size: 20
-      }),
-      children: "Share"
     })]
   });
 }
-function Dashboard({
-  dashboard,
-  update,
-  className = "dashboard"
+function DataSourceForm({
+  value,
+  onChange
 }) {
-  const [layoutFrozen, freezeLayout] = React.useState(false);
-  const [breakpoint, setBreakpoint] = React.useState();
-  const [localCols, setLocalCols] = React.useState();
-  const [panels, setPanels] = useListState(dashboard.panels);
-  const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
-  const [mode, setMode] = React.useState(DashboardMode.Edit);
-  const hasChanges = React.useMemo(() => {
-    const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
-    const panelsEqual = _.isEqual(cleanJSON(panels), cleanJSON(dashboard.panels));
-    if (!panelsEqual) {
-      return true;
-    }
-    return !_.isEqual(sqlSnippets, dashboard.definition.sqlSnippets);
-  }, [dashboard, panels, sqlSnippets]);
-  const saveDashboardChanges = async () => {
-    const d = _.merge({}, dashboard, {
-      panels
-    }, {
-      definition: {
-        sqlSnippets
-      }
-    });
-    await update(d);
-  };
-  const addPanel = () => {
-    const id = randomId();
-    const newItem = {
-      id,
-      layout: {
-        x: 0,
-        y: Infinity,
-        w: 3,
+  const form = useForm$1({
+    initialValues: value
+  });
+  const submit = React.useCallback((values) => {
+    onChange(values);
+  }, [onChange]);
+  const changed = React.useMemo(() => {
+    return !_.isEqual(value, form.values);
+  }, [value, form.values]);
+  React.useEffect(() => {
+    form.reset();
+  }, [value]);
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee",
+      flexGrow: 1
+    },
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: form.onSubmit(submit),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        py: "md",
+        pl: "md",
+        sx: {
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
+        },
+        children: [/* @__PURE__ */ jsx(Text, {
+          weight: 500,
+          children: "Data Source Configuration"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          disabled: !changed,
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        grow: true,
+        my: 0,
+        p: "md",
+        pr: 40,
+        children: [/* @__PURE__ */ jsxs(Group, {
+          grow: true,
+          children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+            placeholder: "An ID unique in this dashboard",
+            label: "ID",
+            required: true,
+            sx: {
+              flex: 1
+            }
+          }, form.getInputProps("id"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            placeholder: "TODO: use a dedicated UI component for this",
+            label: "Data Source Key",
+            required: true,
+            sx: {
+              flex: 1
+            }
+          }, form.getInputProps("key"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+            placeholder: "Type of the data source",
+            label: "Type",
+            disabled: true,
+            sx: {
+              flex: 1
+            }
+          }, form.getInputProps("type")))]
+        }), /* @__PURE__ */ jsx(Textarea, __spreadValues({
+          autosize: true,
+          minRows: 12,
+          maxRows: 24
+        }, form.getInputProps("sql")))]
+      })]
+    })
+  });
+}
+function DataSourceEditor({
+  id
+}) {
+  const {
+    dataSources,
+    setDataSources
+  } = React.useContext(DefinitionContext);
+  const dataSource = React.useMemo(() => {
+    return dataSources.find((d) => d.id === id);
+  }, [dataSources, id]);
+  const update = React.useCallback((value) => {
+    const index2 = dataSources.findIndex((d) => d.id === value.id);
+    if (!index2) {
+      console.error(new Error("Invalid data source id when updating by id"));
+      return;
+    }
+    setDataSources((prevs) => {
+      const index22 = prevs.findIndex((p2) => p2.id === id);
+      prevs.splice(index22, 1, value);
+      return [...prevs];
+    });
+  }, [setDataSources]);
+  if (!dataSource) {
+    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, {})]
+  });
+}
+function SelectOrAddDataSource({
+  id,
+  setID
+}) {
+  const {
+    dataSources,
+    setDataSources
+  } = React.useContext(DefinitionContext);
+  const chooseDefault = React.useCallback(() => {
+    var _a, _b;
+    setID((_b = (_a = dataSources[0]) == null ? void 0 : _a.id) != null ? _b : "");
+  }, [setID, dataSources]);
+  React.useEffect(() => {
+    if (!id) {
+      chooseDefault();
+      return;
+    }
+    const index2 = dataSources.findIndex((d) => d.id === id);
+    if (index2 === -1) {
+      chooseDefault();
+    }
+  }, [id, dataSources, chooseDefault]);
+  const options = React.useMemo(() => {
+    return dataSources.map((d) => ({
+      value: d.id,
+      label: d.id
+    }));
+  }, [dataSources]);
+  const add = React.useCallback(() => {
+    const newDataSource = {
+      id: randomId(),
+      type: "postgresql",
+      key: "",
+      sql: ""
+    };
+    setDataSources((prevs) => [...prevs, newDataSource]);
+  }, [setDataSources]);
+  return /* @__PURE__ */ jsx(Group, {
+    pb: "xl",
+    children: /* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      sx: {
+        maxWidth: "600px",
+        alignItems: "baseline"
+      },
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Select a Data Source"
+      }), /* @__PURE__ */ jsx(Select, {
+        data: options,
+        value: id,
+        onChange: setID,
+        allowDeselect: false,
+        clearable: false,
+        sx: {
+          flexGrow: 1
+        }
+      }), /* @__PURE__ */ jsx(Text, {
+        children: "or"
+      }), /* @__PURE__ */ jsx(Group, {
+        position: "center",
+        mt: "md",
+        children: /* @__PURE__ */ jsx(Button, {
+          onClick: add,
+          children: "Add a Data Source"
+        })
+      })]
+    })
+  });
+}
+function EditDataSourcesModal({
+  opened,
+  close
+}) {
+  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();
+    },
+    children: /* @__PURE__ */ jsxs(AppShell, {
+      sx: {
+        height: "90vh",
+        maxHeight: "calc(100vh - 185px)",
+        ".mantine-AppShell-body": {
+          height: "100%"
+        },
+        main: {
+          height: "100%",
+          width: "100%",
+          padding: 0,
+          margin: 0
+        }
+      },
+      padding: "md",
+      header: /* @__PURE__ */ jsx(SelectOrAddDataSource, {
+        id,
+        setID
+      }),
+      children: [/* @__PURE__ */ jsx(DataSourceEditor, {
+        id
+      }), /* @__PURE__ */ jsx(DataPreview, {
+        id
+      })]
+    })
+  });
+}
+function ContextInfo({}) {
+  const contextInfo = React.useContext(ContextInfoContext);
+  const sampleSQL = `SELECT *
+FROM commit
+WHERE author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'`;
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee",
+      maxWidth: "48%",
+      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: "Context"
+      })
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      px: "md",
+      pb: "md",
+      sx: {
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ jsx(Prism, {
+        language: "sql",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        colorScheme: "dark",
+        children: `-- You may refer context data *by name*
+-- in SQL or VizConfig.
+
+${sampleSQL}`
+      }), /* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        sx: {
+          flexGrow: 0
+        },
+        children: "Avaiable context entries"
+      }), /* @__PURE__ */ jsx(Prism, {
+        language: "json",
+        sx: {
+          width: "100%"
+        },
+        noCopy: true,
+        colorScheme: "dark",
+        children: JSON.stringify(contextInfo, null, 2)
+      })]
+    })]
+  });
+}
+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]);
+  const form = useForm$1({
+    initialValues
+  });
+  const addSnippet = () => form.addListItem("snippets", {
+    key: randomId(),
+    value: ""
+  });
+  const changed = React.useMemo(() => !_.isEqual(form.values, initialValues), [form.values, initialValues]);
+  const submit = ({
+    snippets
+  }) => {
+    setSQLSnippets(snippets);
+  };
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    sx: {
+      border: "1px solid #eee"
+    },
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      pl: "md",
+      py: "md",
+      sx: {
+        borderBottom: "1px solid #eee",
+        background: "#efefef",
+        flexGrow: 0
+      },
+      children: [/* @__PURE__ */ jsx(Text, {
+        weight: 500,
+        children: "SQL Snippets"
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        type: "submit",
+        mr: 5,
+        variant: "filled",
+        color: "blue",
+        disabled: !changed,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsxs(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__ */ jsx(Group, {
+        direction: "column",
+        sx: {
+          width: "100%",
+          position: "relative"
+        },
+        grow: true,
+        children: /* @__PURE__ */ jsxs("form", {
+          onSubmit: form.onSubmit(submit),
+          children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
+            direction: "column",
+            grow: true,
+            my: 0,
+            p: "md",
+            pr: 40,
+            sx: {
+              border: "1px solid #eee",
+              position: "relative"
+            },
+            children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+              label: "Key",
+              required: true
+            }, form.getListInputProps("snippets", index2, "key"))), /* @__PURE__ */ jsx(Textarea, __spreadValues({
+              minRows: 3,
+              label: "Value",
+              required: true
+            }, form.getListInputProps("snippets", index2, "value"))), /* @__PURE__ */ jsx(ActionIcon, {
+              color: "red",
+              variant: "hover",
+              onClick: () => form.removeListItem("snippets", index2),
+              sx: {
+                position: "absolute",
+                top: 15,
+                right: 5
+              },
+              children: /* @__PURE__ */ jsx(Trash, {
+                size: 16
+              })
+            })]
+          }, index2)), /* @__PURE__ */ jsx(Group, {
+            position: "center",
+            mt: "xl",
+            grow: true,
+            sx: {
+              width: "40%"
+            },
+            mx: "auto",
+            children: /* @__PURE__ */ jsx(Button, {
+              variant: "default",
+              onClick: addSnippet,
+              children: "Add a snippet"
+            })
+          })]
+        })
+      })]
+    })]
+  });
+}
+function EditSQLSnippetsModal({
+  opened,
+  close
+}) {
+  const {
+    freezeLayout
+  } = React.useContext(LayoutStateContext);
+  React.useEffect(() => {
+    freezeLayout(opened);
+  }, [opened]);
+  return /* @__PURE__ */ jsx(Modal, {
+    size: "96vw",
+    overflow: "inside",
+    opened,
+    onClose: close,
+    title: "SQL Snippets",
+    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, {})]
+      })
+    })
+  });
+}
+function DashboardActions({
+  mode,
+  setMode,
+  hasChanges,
+  addPanel,
+  saveChanges
+}) {
+  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 inEditMode = mode === DashboardMode.Edit;
+  return /* @__PURE__ */ jsxs(Group, {
+    position: "apart",
+    pt: "sm",
+    pb: "xs",
+    children: [/* @__PURE__ */ jsx(Group, {
+      position: "left",
+      children: /* @__PURE__ */ jsx(ModeToggler, {
+        mode,
+        setMode
+      })
+    }), inEditMode && /* @__PURE__ */ jsxs(Fragment, {
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "right",
+        children: [/* @__PURE__ */ jsx(Button, {
+          variant: "default",
+          size: "sm",
+          onClick: addPanel,
+          leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+            size: 20
+          }),
+          children: "Add a Panel"
+        }), /* @__PURE__ */ jsx(Button, {
+          variant: "default",
+          size: "sm",
+          onClick: openSQLSnippets,
+          leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
+            size: 20
+          }),
+          children: "SQL Snippets"
+        }), /* @__PURE__ */ jsx(Button, {
+          variant: "default",
+          size: "sm",
+          onClick: openDataSources,
+          leftIcon: /* @__PURE__ */ jsx(Database, {
+            size: 20
+          }),
+          children: "Data Sources"
+        }), /* @__PURE__ */ jsx(Button, {
+          variant: "default",
+          size: "sm",
+          onClick: saveChanges,
+          disabled: !hasChanges,
+          leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          }),
+          children: "Save Changes"
+        }), /* @__PURE__ */ jsx(Button, {
+          color: "red",
+          size: "sm",
+          disabled: !hasChanges,
+          leftIcon: /* @__PURE__ */ jsx(Recycle, {
+            size: 20
+          }),
+          children: "Revert Changes"
+        })]
+      }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
+        opened: dataSourcesOpened,
+        close: closeDataSources
+      }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
+        opened: sqlSnippetsOpened,
+        close: closeSQLSnippets
+      })]
+    }), !inEditMode && /* @__PURE__ */ jsx(Button, {
+      variant: "default",
+      size: "sm",
+      disabled: true,
+      leftIcon: /* @__PURE__ */ jsx(Share, {
+        size: 20
+      }),
+      children: "Share"
+    })]
+  });
+}
+function Dashboard({
+  context,
+  dashboard,
+  update,
+  className = "dashboard"
+}) {
+  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);
+  const [mode, setMode] = React.useState(DashboardMode.Edit);
+  const hasChanges = React.useMemo(() => {
+    const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
+    const panelsEqual = _.isEqual(cleanJSON(panels), cleanJSON(dashboard.panels));
+    if (!panelsEqual) {
+      return true;
+    }
+    if (!_.isEqual(sqlSnippets, dashboard.definition.sqlSnippets)) {
+      return true;
+    }
+    return !_.isEqual(dataSources, dashboard.definition.dataSources);
+  }, [dashboard, panels, sqlSnippets, dataSources]);
+  const saveDashboardChanges = async () => {
+    const d = _.merge({}, dashboard, {
+      panels
+    }, {
+      definition: {
+        sqlSnippets
+      }
+    });
+    await update(d);
+  };
+  const addPanel = () => {
+    const id = randomId();
+    const newItem = {
+      id,
+      layout: {
+        x: 0,
+        y: Infinity,
+        w: 3,
         h: 4
       },
       title: `New Panel - ${id}`,
       description: "description goes here",
-      sql: "",
+      dataSourceID: "",
       viz: {
         type: "table",
         conf: {}
       }
     };
-    setPanels.append(newItem);
+    setPanels((prevs) => [...prevs, newItem]);
   };
   const removePanelByID = (id) => {
     const index2 = panels.findIndex((p2) => p2.id === id);
-    setPanels.remove(index2);
+    setPanels((prevs) => {
+      prevs.splice(index2, 1);
+      return [...prevs];
+    });
   };
   const inEditMode = mode === DashboardMode.Edit;
   const definitions = React.useMemo(() => ({
     sqlSnippets,
-    setSQLSnippets
-  }), [sqlSnippets, setSQLSnippets]);
-  return /* @__PURE__ */ jsx("div", {
-    className,
-    children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-      value: definitions,
-      children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
-        value: {
-          layoutFrozen,
-          freezeLayout,
-          mode,
-          inEditMode
-        },
-        children: [/* @__PURE__ */ jsx(DashboardActions, {
-          mode,
-          setMode,
-          hasChanges,
-          addPanel,
-          saveChanges: saveDashboardChanges
-        }), /* @__PURE__ */ jsx(DashboardLayout, {
-          panels,
-          setPanels,
-          isDraggable: inEditMode && !layoutFrozen,
-          isResizable: inEditMode && !layoutFrozen,
-          onRemoveItem: removePanelByID,
-          setLocalCols,
-          setBreakpoint
-        })]
+    setSQLSnippets,
+    dataSources,
+    setDataSources
+  }), [sqlSnippets, setSQLSnippets, dataSources, setDataSources]);
+  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+    value: context,
+    children: /* @__PURE__ */ jsx("div", {
+      className,
+      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+        value: definitions,
+        children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
+          value: {
+            layoutFrozen,
+            freezeLayout,
+            mode,
+            inEditMode
+          },
+          children: [/* @__PURE__ */ jsx(DashboardActions, {
+            mode,
+            setMode,
+            hasChanges,
+            addPanel,
+            saveChanges: saveDashboardChanges
+          }), /* @__PURE__ */ jsx(DashboardLayout, {
+            panels,
+            setPanels,
+            isDraggable: inEditMode && !layoutFrozen,
+            isResizable: inEditMode && !layoutFrozen,
+            onRemoveItem: removePanelByID,
+            setLocalCols,
+            setBreakpoint
+          })]
+        })
       })
     })
   });
@@ -2281,29 +2989,33 @@ function ReadOnlyDashboardLayout({
   });
 }
 function ReadOnlyDashboard({
+  context,
   dashboard,
   className = "dashboard"
 }) {
-  const [panels, setPanels] = useListState(dashboard.panels);
-  const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
-  const definitions = React.useMemo(() => ({
-    sqlSnippets,
-    setSQLSnippets
-  }), [sqlSnippets, setSQLSnippets]);
-  return /* @__PURE__ */ jsx("div", {
-    className,
-    children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-      value: definitions,
-      children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
-        value: {
-          layoutFrozen: true,
-          freezeLayout: () => {
+  const definition = React.useMemo(() => __spreadProps(__spreadValues({}, dashboard.definition), {
+    setSQLSnippets: () => {
+    },
+    setDataSources: () => {
+    }
+  }), [dashboard]);
+  return /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
+    value: context,
+    children: /* @__PURE__ */ jsx("div", {
+      className,
+      children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+        value: definition,
+        children: /* @__PURE__ */ jsx(LayoutStateContext.Provider, {
+          value: {
+            layoutFrozen: true,
+            freezeLayout: () => {
+            },
+            mode: DashboardMode.Use,
+            inEditMode: false
           },
-          mode: DashboardMode.Use,
-          inEditMode: false
-        },
-        children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
-          panels
+          children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+            panels: dashboard.panels
+          })
         })
       })
     })