@devtable/dashboard 2.0.0 → 2.3.0

package/dist/dashboard.es.js

@@ -7,11 +7,11 @@ var __publicField = (obj, key, value) => {
 import React from "react";
 import _ from "lodash";
 import RGL, { WidthProvider } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, Modal, AppShell, Tabs, Menu, Container, Textarea } from "@mantine/core";
+import { Modal, Tooltip, ActionIcon, Stack, Group, Text, Box, Button, TextInput, LoadingOverlay, Table, Select, useMantineTheme, ColorSwatch, Switch, Slider, SegmentedControl, NumberInput, ColorInput, Divider, Accordion, JsonInput, AppShell, Tabs, Menu, Container, Textarea, Checkbox, MultiSelect, SimpleGrid } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
 import { useModals, ModalsProvider } from "@mantine/modals";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, ArrowsMaximize, Settings, Copy, PlayerPlay, Resize, Paint, Database, Recycle, Share, ArrowLeft } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, ArrowsMaximize, Settings, Copy, PlayerPlay, Resize, Paint, Calendar, Recycle, Filter as Filter$1, Database, Share, ArrowLeft } 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";
@@ -23,15 +23,16 @@ import { GridComponent, LegendComponent, TooltipComponent, VisualMapComponent }
 import numbro from "numbro";
 import "echarts-gl";
 import { useForm, Controller, useFieldArray } from "react-hook-form";
-import { useForm as useForm$1, formList } from "@mantine/form";
+import { useForm as useForm$1 } from "@mantine/form";
 import { Prism } from "@mantine/prism";
+import { DateRangePicker } from "@mantine/dates";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
   DashboardMode2["Layout"] = "layout";
   DashboardMode2["Edit"] = "edit";
   return DashboardMode2;
 })(DashboardMode || {});
-const initialContext$4 = {
+const initialContext$5 = {
   layoutFrozen: false,
   freezeLayout: () => {
   },
@@ -40,7 +41,7 @@ const initialContext$4 = {
   inLayoutMode: false,
   inUseMode: true
 };
-const LayoutStateContext = React.createContext(initialContext$4);
+const LayoutStateContext = React.createContext(initialContext$5);
 function explainSQLSnippet(snippet, context) {
   const names = Object.keys(context);
   const vals = Object.values(context);
@@ -63,16 +64,16 @@ function formatSQL(sql, params) {
     throw error;
   }
 }
-function getSQLParams(context, definitions) {
+function getSQLParams(context, definitions, filterValues) {
   const sqlSnippetRecord = definitions.sqlSnippets.reduce((ret, curr) => {
     ret[curr.key] = formatSQL(curr.value, context);
     return ret;
   }, {});
-  return _.merge({}, sqlSnippetRecord, context);
+  return _.merge({}, sqlSnippetRecord, context, { filters: filterValues });
 }
-function explainSQL(sql, context, definitions) {
+function explainSQL(sql, context, definitions, filterValues) {
   try {
-    const params = getSQLParams(context, definitions);
+    const params = getSQLParams(context, definitions, filterValues);
     return formatSQL(sql, params);
   } catch (error) {
     console.error(error);
@@ -106,14 +107,26 @@ const APIClient = {
     };
   }
 };
-const queryBySQL = ({ context, definitions, title, query }) => async () => {
+const queryByStaticSQL = ({ type, key, sql }) => async () => {
+  if (!type || !key || !sql) {
+    return [];
+  }
+  try {
+    const res = await APIClient.getRequest("POST")("/query", { type, key, query: sql });
+    return res;
+  } catch (error) {
+    console.error(error);
+    return [];
+  }
+};
+const queryBySQL = ({ context, definitions, title, query, filterValues }) => async () => {
   if (!query || !query.sql) {
     return [];
   }
   const { type, key, sql } = query;
   const needParams = sql.includes("$");
   try {
-    const params = getSQLParams(context, definitions);
+    const params = getSQLParams(context, definitions, filterValues);
     const formattedSQL = formatSQL(sql, params);
     if (needParams) {
       console.groupCollapsed(`Final SQL for: ${title}`);
@@ -129,17 +142,27 @@ const queryBySQL = ({ context, definitions, title, query }) => async () => {
 };
 async function listDataSources() {
   try {
-    const res = await APIClient.getRequest("POST")("/datasource/list", {});
-    return res;
+    const res = await APIClient.getRequest("POST")("/datasource/list", {
+      filter: {},
+      sort: {
+        field: "create_time",
+        order: "ASC"
+      },
+      pagination: {
+        page: 1,
+        pagesize: 100
+      }
+    });
+    return res.data;
   } catch (error) {
     console.error(error);
-    return {};
+    return [];
   }
 }
-const initialContext$3 = {};
-const initialContextInfoContext = initialContext$3;
-const ContextInfoContext = React.createContext(initialContext$3);
-const initialContext$2 = {
+const initialContext$4 = {};
+const initialContextInfoContext = initialContext$4;
+const ContextInfoContext = React.createContext(initialContext$4);
+const initialContext$3 = {
   id: "",
   data: [],
   loading: false,
@@ -161,16 +184,16 @@ const initialContext$2 = {
   refreshData: () => {
   }
 };
-const PanelContext = React.createContext(initialContext$2);
-const initialContext$1 = {
+const PanelContext = React.createContext(initialContext$3);
+const initialContext$2 = {
   addPanel: _.noop,
   duplidatePanel: _.noop,
   removePanelByID: _.noop,
   viewPanelInFullScreen: _.noop,
   inFullScreen: false
 };
-const DashboardActionContext = React.createContext(initialContext$1);
-const initialContext = {
+const DashboardActionContext = React.createContext(initialContext$2);
+const initialContext$1 = {
   sqlSnippets: [],
   setSQLSnippets: () => {
   },
@@ -178,7 +201,10 @@ const initialContext = {
   setQueries: () => {
   }
 };
-const DefinitionContext = React.createContext(initialContext);
+const DefinitionContext = React.createContext(initialContext$1);
+const initialContext = {};
+const initialFilterValuesContext = initialContext;
+const FilterValuesContext = React.createContext(initialContext);
 var jsxRuntime = { exports: {} };
 var reactJsxRuntime_production_min = {};
 /**
@@ -212,15 +238,13 @@ reactJsxRuntime_production_min.jsxs = q;
 const jsx = jsxRuntime.exports.jsx;
 const jsxs = jsxRuntime.exports.jsxs;
 const Fragment = jsxRuntime.exports.Fragment;
-function DescriptionPopover({
-  position = "bottom",
-  trigger = "hover"
-}) {
+function DescriptionPopover({}) {
   const {
     freezeLayout
   } = React.useContext(LayoutStateContext);
   const [opened, setOpened] = React.useState(false);
   const {
+    title,
     description
   } = React.useContext(PanelContext);
   React.useEffect(() => {
@@ -229,45 +253,36 @@ function DescriptionPopover({
   if (!description || description === "<p><br></p>") {
     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: trigger === "click",
-    withArrow: true,
-    trapFocus: true,
-    closeOnEscape: false,
-    placement: "center",
-    position,
-    target,
-    width: "40vw",
-    children: /* @__PURE__ */ jsx(RichTextEditor, {
-      readOnly: true,
-      value: description,
-      onChange: _.noop,
-      sx: {
-        border: "none"
-      }
-    })
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Modal, {
+      opened,
+      onClose: () => setOpened(false),
+      title,
+      withCloseButton: false,
+      children: /* @__PURE__ */ jsx(RichTextEditor, {
+        readOnly: true,
+        value: description,
+        onChange: _.noop,
+        sx: {
+          border: "none"
+        }
+      })
+    }), /* @__PURE__ */ jsx(Tooltip, {
+      label: "Click to see description",
+      position: "top-start",
+      children: /* @__PURE__ */ jsx(ActionIcon, {
+        variant: "subtle",
+        color: "blue",
+        onClick: () => setOpened((v) => !v),
+        sx: {
+          verticalAlign: "baseline",
+          cursor: "pointer"
+        },
+        children: /* @__PURE__ */ jsx(InfoCircle, {
+          size: 20
+        })
+      })
+    })]
   });
 }
 function EditDescription() {
@@ -283,8 +298,7 @@ function EditDescription() {
     }
     setDescription(value);
   }, [changed, value]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsxs(Stack, {
     sx: {
       flexGrow: 1
     },
@@ -293,7 +307,7 @@ function EditDescription() {
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Description"
       }), /* @__PURE__ */ jsx(ActionIcon, {
-        variant: "hover",
+        variant: "subtle",
         color: "blue",
         disabled: !changed,
         onClick: submit,
@@ -357,10 +371,7 @@ function PreviewPanel() {
     title
   } = React.useContext(PanelContext);
   return /* @__PURE__ */ jsx(ErrorBoundary, {
-    children: /* @__PURE__ */ jsxs(Group, {
-      direction: "column",
-      grow: true,
-      noWrap: true,
+    children: /* @__PURE__ */ jsxs(Stack, {
       mx: "auto",
       mt: "xl",
       p: "5px",
@@ -380,10 +391,7 @@ function PreviewPanel() {
           flexShrink: 0
         },
         children: [/* @__PURE__ */ jsx(Group, {
-          children: /* @__PURE__ */ jsx(DescriptionPopover, {
-            position: "bottom",
-            trigger: "hover"
-          })
+          children: /* @__PURE__ */ jsx(DescriptionPopover, {})
         }), /* @__PURE__ */ jsx(Group, {
           grow: true,
           position: "center",
@@ -429,7 +437,7 @@ function EditTitle() {
       children: [/* @__PURE__ */ jsx(Text, {
         children: "Panel Title"
       }), /* @__PURE__ */ jsx(ActionIcon, {
-        variant: "hover",
+        variant: "subtle",
         color: "blue",
         disabled: !changed,
         onClick: submit,
@@ -442,16 +450,13 @@ function EditTitle() {
 }
 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",
+    children: [/* @__PURE__ */ jsxs(Stack, {
       sx: {
         width: "40%",
         flexShrink: 0,
@@ -473,6 +478,7 @@ function DataPreview({
   id
 }) {
   const definitions = React.useContext(DefinitionContext);
+  const filterValues = React.useContext(FilterValuesContext);
   const contextInfo = React.useContext(ContextInfoContext);
   const query = React.useMemo(() => {
     return definitions.queries.find((d) => d.id === id);
@@ -484,10 +490,11 @@ function DataPreview({
   } = useRequest(queryBySQL({
     context: contextInfo,
     definitions,
+    filterValues,
     title: id,
     query
   }), {
-    refreshDeps: [contextInfo, definitions, query]
+    refreshDeps: [contextInfo, definitions, query, filterValues]
   });
   if (loading) {
     return /* @__PURE__ */ jsx(LoadingOverlay, {
@@ -498,10 +505,8 @@ function DataPreview({
   if (data.length === 0) {
     return /* @__PURE__ */ jsx(Table, {});
   }
-  return /* @__PURE__ */ jsxs(Group, {
+  return /* @__PURE__ */ jsxs(Stack, {
     my: "xl",
-    direction: "column",
-    grow: true,
     sx: {
       border: "1px solid #eee"
     },
@@ -525,7 +530,7 @@ function DataPreview({
         })]
       }), /* @__PURE__ */ jsx(ActionIcon, {
         mr: 15,
-        variant: "hover",
+        variant: "subtle",
         color: "blue",
         disabled: loading,
         onClick: refresh,
@@ -579,10 +584,7 @@ function PickQuery({}) {
       label: d.id
     }));
   }, [queries]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    noWrap: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [/* @__PURE__ */ jsxs(Group, {
       position: "left",
       sx: {
@@ -1518,39 +1520,6 @@ function VizTable({
     })]
   });
 }
-function interpolateString(template, params = {}) {
-  const extendedParams = {
-    ...params,
-    numbro
-  };
-  const names = Object.keys(extendedParams);
-  const vals = Object.values(extendedParams);
-  try {
-    return new Function(...names, `return \`${template}\`;`)(...vals);
-  } catch (error) {
-    return error.message;
-  }
-}
-function VizText({
-  conf: {
-    paragraphs
-  },
-  data
-}) {
-  return /* @__PURE__ */ jsx(Fragment, {
-    children: paragraphs.map(({
-      template,
-      size,
-      ...rest
-    }, index2) => /* @__PURE__ */ jsx(Text, {
-      ...rest,
-      sx: {
-        fontSize: size
-      },
-      children: interpolateString(template, data[0])
-    }, `${template}---${index2}`))
-  });
-}
 echarts.use([GridComponent, VisualMapComponent, LegendComponent, TooltipComponent, CanvasRenderer]);
 function VizBar3D({
   conf,
@@ -1753,10 +1722,6 @@ function renderViz(width, height, data, viz) {
       return /* @__PURE__ */ jsx(VizTable, {
         ...props
       });
-    case "text":
-      return /* @__PURE__ */ jsx(VizText, {
-        ...props
-      });
     case "stats":
       return /* @__PURE__ */ jsx(VizStats, {
         ...props
@@ -1788,6 +1753,7 @@ function Viz({
     width,
     height
   } = useElementSize();
+  const empty = React.useMemo(() => !Array.isArray(data) || data.length === 0, [data]);
   const needData = !typesDontNeedData.includes(viz.type);
   if (!needData) {
     return /* @__PURE__ */ jsx("div", {
@@ -1798,7 +1764,6 @@ function Viz({
       })
     });
   }
-  const empty = React.useMemo(() => !Array.isArray(data) || data.length === 0, [data]);
   if (loading) {
     return /* @__PURE__ */ jsx("div", {
       className: "viz-root",
@@ -1891,11 +1856,9 @@ function VizBar3DPanel({
   } = useForm({
     defaultValues
   });
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsx(Text, {
@@ -2085,7 +2048,6 @@ function BarFields({
   index: index2
 }) {
   return /* @__PURE__ */ jsxs(Group, {
-    direction: "row",
     grow: true,
     align: "top",
     children: [/* @__PURE__ */ jsx(Controller, {
@@ -2134,7 +2096,6 @@ function LineFields({
   index: index2
 }) {
   return /* @__PURE__ */ jsxs(Group, {
-    direction: "row",
     grow: true,
     align: "center",
     children: [/* @__PURE__ */ jsx(Controller, {
@@ -2183,7 +2144,6 @@ function ScatterFields({
   index: index2
 }) {
   return /* @__PURE__ */ jsx(Group, {
-    direction: "row",
     grow: true,
     align: "center",
     children: /* @__PURE__ */ jsx(Controller, {
@@ -2191,9 +2151,7 @@ function ScatterFields({
       control,
       render: ({
         field
-      }) => /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        noWrap: true,
+      }) => /* @__PURE__ */ jsxs(Stack, {
         sx: {
           flexGrow: 1
         },
@@ -2267,9 +2225,7 @@ function SeriesItemField({
   data
 }) {
   const type = seriesItem.type;
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     my: 0,
     p: "md",
     pr: 40,
@@ -2277,10 +2233,7 @@ function SeriesItemField({
       border: "1px solid #eee",
       position: "relative"
     },
-    children: [/* @__PURE__ */ jsx(Group, {
-      direction: "column",
-      grow: true,
-      noWrap: true,
+    children: [/* @__PURE__ */ jsx(Stack, {
       children: /* @__PURE__ */ jsx(Controller, {
         name: `series.${index2}.type`,
         control,
@@ -2318,7 +2271,6 @@ function SeriesItemField({
         ...field
       })
     }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       grow: true,
       noWrap: true,
       children: [/* @__PURE__ */ jsx(Controller, {
@@ -2384,9 +2336,7 @@ function SeriesItemField({
         data: labelPositions,
         ...field
       })
-    }), /* @__PURE__ */ jsxs(Group, {
-      direction: "column",
-      grow: true,
+    }), /* @__PURE__ */ jsxs(Stack, {
       spacing: 4,
       children: [/* @__PURE__ */ jsx(Text, {
         size: "sm",
@@ -2402,7 +2352,7 @@ function SeriesItemField({
       })]
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
-      variant: "hover",
+      variant: "subtle",
       onClick: () => remove(index2),
       sx: {
         position: "absolute",
@@ -2457,9 +2407,7 @@ function SeriesField({
       value: index2.toString()
     }));
   }, [getValues]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [controlledFields.map((seriesItem, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
       control,
       index: index2,
@@ -2505,13 +2453,9 @@ function _NumbroFormatSelector({
       trimMantissa: event.currentTarget.checked
     });
   };
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
-    grow: true,
-    noWrap: true,
+  return /* @__PURE__ */ jsx(Stack, {
     ref,
     children: /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       grow: true,
       children: [/* @__PURE__ */ jsx(Select, {
         label: "Format",
@@ -2547,9 +2491,7 @@ function YAxisField({
   index: index2,
   remove
 }) {
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     my: 0,
     p: "md",
     pr: 40,
@@ -2558,7 +2500,6 @@ function YAxisField({
       position: "relative"
     },
     children: [/* @__PURE__ */ jsx(Group, {
-      direction: "row",
       grow: true,
       noWrap: true,
       children: /* @__PURE__ */ jsx(Controller, {
@@ -2575,10 +2516,7 @@ function YAxisField({
           ...field
         })
       })
-    }), /* @__PURE__ */ jsx(Group, {
-      direction: "column",
-      grow: true,
-      noWrap: true,
+    }), /* @__PURE__ */ jsx(Stack, {
       children: /* @__PURE__ */ jsx(Controller, {
         name: `y_axes.${index2}.label_formatter`,
         control,
@@ -2590,7 +2528,7 @@ function YAxisField({
       })
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
-      variant: "hover",
+      variant: "subtle",
       onClick: () => remove(index2),
       sx: {
         position: "absolute",
@@ -2627,9 +2565,7 @@ function YAxesField({
     name: "",
     label_formatter: defaultNumbroFormat
   });
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [controlledFields.map((field, index2) => /* @__PURE__ */ jsx(YAxisField, {
       control,
       index: index2,
@@ -2666,9 +2602,7 @@ function RegressionField({
   data
 }) {
   const method = regressionItem.transform.config.method;
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     my: 0,
     p: "md",
     pr: 40,
@@ -2690,7 +2624,6 @@ function RegressionField({
         ...field
       })
     }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       grow: true,
       noWrap: true,
       children: [/* @__PURE__ */ jsx(Controller, {
@@ -2738,7 +2671,6 @@ function RegressionField({
         }
       })]
     }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       grow: true,
       noWrap: true,
       children: [/* @__PURE__ */ jsx(Controller, {
@@ -2767,9 +2699,7 @@ function RegressionField({
           ...field
         })
       })]
-    }), /* @__PURE__ */ jsxs(Group, {
-      direction: "column",
-      grow: true,
+    }), /* @__PURE__ */ jsxs(Stack, {
       spacing: 4,
       children: [/* @__PURE__ */ jsx(Text, {
         size: "sm",
@@ -2785,7 +2715,7 @@ function RegressionField({
       })]
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
-      variant: "hover",
+      variant: "subtle",
       onClick: () => remove(index2),
       sx: {
         position: "absolute",
@@ -2844,9 +2774,7 @@ function RegressionsField({
       color: "#666666"
     }
   });
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [controlledFields.map((regressionItem, index2) => /* @__PURE__ */ jsx(RegressionField, {
       regressionItem,
       control,
@@ -2999,9 +2927,7 @@ function _MantineFontWeightSlider({
       onChange(match.label);
     }
   }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     spacing: 0,
     mt: "sm",
     mb: "lg",
@@ -3118,11 +3044,11 @@ const TemplateInput = React.forwardRef(function TemplateInput2({
     ...rest
   });
 });
-function TemplateVariableField({
+const TemplateVariableField = React.forwardRef(function _TemplateVariableField({
   value,
   onChange,
   data
-}) {
+}, _ref) {
   const colorType = value.color.type;
   const handleChange = (path, newValue) => {
     const v = _.cloneDeep(value);
@@ -3141,7 +3067,6 @@ function TemplateVariableField({
       label: "Data",
       labelPosition: "center"
     }), /* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       grow: true,
       noWrap: true,
       children: [/* @__PURE__ */ jsx(TextInput, {
@@ -3167,9 +3092,7 @@ function TemplateVariableField({
       my: "xs",
       label: "Typography",
       labelPosition: "center"
-    }), /* @__PURE__ */ jsx(Group, {
-      direction: "column",
-      grow: true,
+    }), /* @__PURE__ */ jsx(Stack, {
       children: /* @__PURE__ */ jsx(TextInput, {
         label: "Font Size",
         placeholder: "10px, 1em, 1rem, 100%...",
@@ -3197,9 +3120,7 @@ function TemplateVariableField({
       my: "xs",
       label: "Style",
       labelPosition: "center"
-    }), /* @__PURE__ */ jsxs(Group, {
-      direction: "column",
-      grow: true,
+    }), /* @__PURE__ */ jsxs(Stack, {
       children: [/* @__PURE__ */ jsx(Select, {
         label: "Color Type",
         data: [{
@@ -3227,16 +3148,14 @@ function TemplateVariableField({
       })]
     })]
   });
-}
+});
 function VariableField$1({
   control,
   index: index2,
   remove,
   data
 }) {
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     my: "sm",
     p: 0,
     sx: {
@@ -3256,7 +3175,7 @@ function VariableField$1({
       })
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
-      variant: "hover",
+      variant: "subtle",
       onClick: () => remove(index2),
       sx: {
         position: "absolute",
@@ -3291,13 +3210,8 @@ function StatsField({
     };
   });
   const add = () => append(getANewVariable());
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    children: [/* @__PURE__ */ jsxs(Group, {
-      direction: "column",
-      grow: true,
-      noWrap: true,
+  return /* @__PURE__ */ jsxs(Stack, {
+    children: [/* @__PURE__ */ jsxs(Stack, {
       spacing: 0,
       children: [/* @__PURE__ */ jsx(Controller, {
         name: "stats.templates.top",
@@ -3431,11 +3345,9 @@ function VizCartesianChartPanel({
   const changed = React.useMemo(() => {
     return !_.isEqual(values, conf);
   }, [values, conf]);
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -3459,16 +3371,11 @@ function VizCartesianChartPanel({
           })
         })]
       }), /* @__PURE__ */ jsxs(Accordion, {
-        offsetIcon: false,
         multiple: true,
-        initialState: {
-          0: true,
-          1: true
-        },
+        value: ["X Axis", "Y Axes"],
         children: [/* @__PURE__ */ jsx(Accordion.Item, {
-          label: "X Axis",
+          value: "X Axis",
           children: /* @__PURE__ */ jsxs(Group, {
-            direction: "row",
             grow: true,
             noWrap: true,
             children: [/* @__PURE__ */ jsx(Controller, {
@@ -3500,13 +3407,13 @@ function VizCartesianChartPanel({
             })]
           })
         }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Y Axes",
+          value: "Y Axes",
           children: /* @__PURE__ */ jsx(YAxesField, {
             control,
             watch
           })
         }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Series",
+          value: "Series",
           children: /* @__PURE__ */ jsx(SeriesField, {
             control,
             watch,
@@ -3514,7 +3421,7 @@ function VizCartesianChartPanel({
             data
           })
         }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Regression Lines",
+          value: "Regression Lines",
           children: /* @__PURE__ */ jsx(RegressionsField, {
             control,
             watch,
@@ -3522,7 +3429,7 @@ function VizCartesianChartPanel({
             data
           })
         }), /* @__PURE__ */ jsx(Accordion.Item, {
-          label: "Stats",
+          value: "Stats",
           children: /* @__PURE__ */ jsx(StatsField, {
             control,
             watch,
@@ -3547,11 +3454,9 @@ function VizPiePanel({
       value_field
     }
   });
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -3571,11 +3476,9 @@ function VizPiePanel({
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
+      }), /* @__PURE__ */ jsxs(Stack, {
         mt: "md",
         spacing: "xs",
-        grow: true,
         p: "md",
         mb: "sm",
         sx: {
@@ -3628,11 +3531,9 @@ function VizRichTextPanel({
   const changed = React.useMemo(() => {
     return !_.isEqual(values, conf);
   }, [values, conf]);
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -3711,9 +3612,7 @@ function VariableField({
   remove,
   data
 }) {
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     my: "sm",
     p: 0,
     sx: {
@@ -3733,7 +3632,7 @@ function VariableField({
       })
     }), /* @__PURE__ */ jsx(ActionIcon, {
       color: "red",
-      variant: "hover",
+      variant: "subtle",
       onClick: () => remove(index2),
       sx: {
         position: "absolute",
@@ -3767,9 +3666,7 @@ function VariablesField({
     };
   });
   const add = () => append(getANewVariable());
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [controlledFields.map((_variableItem, index2) => /* @__PURE__ */ jsx(VariableField, {
       control,
       index: index2,
@@ -3845,12 +3742,9 @@ function VizStatsPanel({
   const changed = React.useMemo(() => {
     return !_.isEqual(values, conf);
   }, [values, conf]);
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
-    noWrap: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: handleSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -3914,11 +3808,9 @@ function SunburstPanel({
       value_field
     }
   });
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -3938,11 +3830,9 @@ function SunburstPanel({
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
+      }), /* @__PURE__ */ jsxs(Stack, {
         mt: "md",
         spacing: "xs",
-        grow: true,
         p: "md",
         mb: "sm",
         sx: {
@@ -3994,7 +3884,7 @@ function VizTablePanel({
     initialValues: {
       id_field: "id",
       use_raw_columns: true,
-      columns: formList(columns != null ? columns : []),
+      columns: columns != null ? columns : [],
       fontSize: "sm",
       horizontalSpacing: "sm",
       verticalSpacing: "sm",
@@ -4003,16 +3893,14 @@ function VizTablePanel({
       ...restConf
     }
   });
-  const addColumn = () => form.addListItem("columns", {
+  const addColumn = () => form.insertListItem("columns", {
     label: randomId(),
     value_field: "value",
     value_type: ValueType.string
   });
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
+  return /* @__PURE__ */ jsx(Stack, {
     mt: "md",
     spacing: "xs",
-    grow: true,
     children: /* @__PURE__ */ jsxs("form", {
       onSubmit: form.onSubmit(setConf),
       children: [/* @__PURE__ */ jsxs(Group, {
@@ -4032,11 +3920,9 @@ function VizTablePanel({
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
+      }), /* @__PURE__ */ jsxs(Stack, {
         mt: "md",
         spacing: "xs",
-        grow: true,
         p: "md",
         mb: "sm",
         sx: {
@@ -4092,9 +3978,7 @@ function VizTablePanel({
             },
             ...form.getInputProps("fontSize")
           })
-        }), /* @__PURE__ */ jsxs(Group, {
-          direction: "column",
-          grow: true,
+        }), /* @__PURE__ */ jsxs(Stack, {
           children: [/* @__PURE__ */ jsx(Text, {
             children: "Other"
           }), /* @__PURE__ */ jsxs(Group, {
@@ -4113,11 +3997,9 @@ function VizTablePanel({
             })]
           })]
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
+      }), /* @__PURE__ */ jsxs(Stack, {
         mt: "xs",
         spacing: "xs",
-        grow: true,
         p: "md",
         mb: "xl",
         sx: {
@@ -4129,16 +4011,12 @@ function VizTablePanel({
           ...form.getInputProps("use_raw_columns", {
             type: "checkbox"
           })
-        }), !form.values.use_raw_columns && /* @__PURE__ */ jsxs(Group, {
-          direction: "column",
-          grow: true,
+        }), !form.values.use_raw_columns && /* @__PURE__ */ jsxs(Stack, {
           children: [/* @__PURE__ */ jsx(Text, {
             mt: "xl",
             mb: 0,
             children: "Custom Columns"
-          }), form.values.columns.map((item, index2) => /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
+          }), form.values.columns.map((_item, index2) => /* @__PURE__ */ jsxs(Stack, {
             my: 0,
             p: "md",
             pr: 40,
@@ -4155,22 +4033,22 @@ function VizTablePanel({
                 sx: {
                   flex: 1
                 },
-                ...form.getListInputProps("columns", index2, "label")
+                ...form.getInputProps(`columns.${index2}.label`)
               }), /* @__PURE__ */ jsx(DataFieldSelector, {
                 label: "Value Field",
                 required: true,
                 data,
-                ...form.getListInputProps("columns", index2, "value_field")
+                ...form.getInputProps(`columns.${index2}.value_field`)
               }), /* @__PURE__ */ jsx(ValueTypeSelector, {
                 label: "Value Type",
                 sx: {
                   flex: 1
                 },
-                ...form.getListInputProps("columns", index2, "value_type")
+                ...form.getInputProps(`columns.${index2}.value_type`)
               })]
             }), /* @__PURE__ */ jsx(ActionIcon, {
               color: "red",
-              variant: "hover",
+              variant: "subtle",
               onClick: () => form.removeListItem("columns", index2),
               sx: {
                 position: "absolute",
@@ -4203,152 +4081,7 @@ function VizTablePanel({
     })
   });
 }
-const sampleParagraphs = [{
-  align: "center",
-  size: "xl",
-  weight: "bold",
-  color: "black",
-  template: "Time: ${new Date().toISOString()}"
-}, {
-  align: "center",
-  size: "md",
-  weight: "bold",
-  color: "red",
-  template: "Platform: ${navigator.userAgentData.platform}."
-}];
-function VizTextPanel({
-  conf,
-  setConf
-}) {
-  var _a;
-  const form = useForm$1({
-    initialValues: {
-      paragraphs: formList((_a = conf.paragraphs) != null ? _a : sampleParagraphs)
-    }
-  });
-  const addParagraph = () => form.addListItem("paragraphs", {
-    ...sampleParagraphs[0],
-    template: randomId()
-  });
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
-    mt: "md",
-    spacing: "xs",
-    grow: true,
-    children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(setConf),
-      children: [form.values.paragraphs.length === 0 && /* @__PURE__ */ jsx(Text, {
-        color: "dimmed",
-        align: "center",
-        children: "Empty"
-      }), /* @__PURE__ */ jsxs(Group, {
-        position: "apart",
-        mb: "xs",
-        sx: {
-          " + .mantine-Group-root": {
-            marginTop: 0
-          }
-        },
-        children: [/* @__PURE__ */ jsx(Text, {
-          children: "Paragraphs"
-        }), /* @__PURE__ */ jsx(ActionIcon, {
-          type: "submit",
-          mr: 5,
-          variant: "filled",
-          color: "blue",
-          children: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          })
-        })]
-      }), form.values.paragraphs.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, {
-          placeholder: "Time: ${new Date().toISOString()}",
-          label: "Content Template",
-          required: true,
-          sx: {
-            flex: 1
-          },
-          ...form.getListInputProps("paragraphs", index2, "template")
-        }), /* @__PURE__ */ jsxs(Group, {
-          direction: "column",
-          grow: true,
-          children: [/* @__PURE__ */ jsx(Text, {
-            children: "Color"
-          }), /* @__PURE__ */ jsx(MantineColorSelector, {
-            ...form.getListInputProps("paragraphs", index2, "color")
-          })]
-        }), /* @__PURE__ */ jsx(Group, {
-          direction: "column",
-          grow: true,
-          children: /* @__PURE__ */ jsx(TextInput, {
-            label: "Font Size",
-            placeholder: "10px, 1em, 1rem, 100%...",
-            sx: {
-              flex: 1
-            },
-            ...form.getListInputProps("paragraphs", index2, "size")
-          })
-        }), /* @__PURE__ */ jsx(Group, {
-          position: "apart",
-          grow: true,
-          sx: {
-            "> *": {
-              flexGrow: 1,
-              maxWidth: "100%"
-            }
-          },
-          children: /* @__PURE__ */ jsx(MantineFontWeightSlider, {
-            label: "Font Weight",
-            ...form.getListInputProps("paragraphs", index2, "weight")
-          })
-        }), /* @__PURE__ */ jsx(ActionIcon, {
-          color: "red",
-          variant: "hover",
-          onClick: () => form.removeListItem("paragraphs", index2),
-          sx: {
-            position: "absolute",
-            top: 15,
-            right: 5
-          },
-          children: /* @__PURE__ */ jsx(Trash, {
-            size: 16
-          })
-        })]
-      }, index2)), /* @__PURE__ */ jsx(Group, {
-        position: "center",
-        mt: "md",
-        children: /* @__PURE__ */ jsx(Button, {
-          onClick: addParagraph,
-          children: "Add a Paragraph"
-        })
-      }), /* @__PURE__ */ jsx(Text, {
-        size: "sm",
-        weight: 500,
-        mt: "md",
-        children: "Current Configuration:"
-      }), /* @__PURE__ */ jsx(Prism, {
-        language: "json",
-        colorScheme: "dark",
-        noCopy: true,
-        children: JSON.stringify(form.values, null, 2)
-      })]
-    })
-  });
-}
 const types = [{
-  value: "text",
-  label: "Text",
-  Panel: VizTextPanel
-}, {
   value: "stats",
   label: "Stats",
   Panel: VizStatsPanel
@@ -4438,17 +4171,13 @@ function EditVizConf() {
 }
 function VizConfig({}) {
   return /* @__PURE__ */ jsxs(Group, {
-    direction: "row",
     grow: true,
     noWrap: true,
     align: "stretch",
     sx: {
       height: "100%"
     },
-    children: [/* @__PURE__ */ jsx(Group, {
-      grow: true,
-      direction: "column",
-      noWrap: true,
+    children: [/* @__PURE__ */ jsx(Stack, {
       sx: {
         width: "40%",
         flexShrink: 0,
@@ -4500,23 +4229,38 @@ function PanelSettingsModal({
         },
         main: {
           height: "100%",
-          width: "100%"
+          width: "100%",
+          padding: "16px"
         }
       },
       padding: "md",
       children: /* @__PURE__ */ jsxs(Tabs, {
-        initialTab: 2,
-        children: [/* @__PURE__ */ jsxs(Tabs.Tab, {
-          label: "Data",
+        defaultValue: "Visualization",
+        children: [/* @__PURE__ */ jsxs(Tabs.List, {
+          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+            value: "Data",
+            children: "Data"
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            value: "Panel",
+            children: "Panel"
+          }), /* @__PURE__ */ jsx(Tabs.Tab, {
+            value: "Visualization",
+            children: "Visualization"
+          })]
+        }), /* @__PURE__ */ jsxs(Tabs.Panel, {
+          value: "Data",
+          pt: "sm",
           children: [/* @__PURE__ */ jsx(LoadingOverlay, {
             visible: loading,
             exitTransitionDuration: 0
           }), /* @__PURE__ */ jsx(PickQuery, {})]
-        }), /* @__PURE__ */ jsx(Tabs.Tab, {
-          label: "Panel",
+        }), /* @__PURE__ */ jsx(Tabs.Panel, {
+          value: "Panel",
+          pt: "sm",
           children: /* @__PURE__ */ jsx(PanelConfig, {})
-        }), /* @__PURE__ */ jsx(Tabs.Tab, {
-          label: "Visualization",
+        }), /* @__PURE__ */ jsx(Tabs.Panel, {
+          value: "Visualization",
+          pt: "sm",
           children: /* @__PURE__ */ jsx(VizConfig, {})
         })]
       })
@@ -4579,47 +4323,49 @@ function PanelTitleBar({}) {
         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, {
-            size: 14
-          }),
-          children: "Refresh"
-        }), !inFullScreen && /* @__PURE__ */ jsx(Menu.Item, {
-          onClick: enterFullScreen,
-          icon: /* @__PURE__ */ jsx(ArrowsMaximize, {
-            size: 14
-          }),
-          children: "Full Screen"
-        }), inEditMode && /* @__PURE__ */ jsxs(Fragment, {
-          children: [/* @__PURE__ */ jsx(Divider, {
-            label: "Edit",
-            labelPosition: "center"
-          }), /* @__PURE__ */ jsx(Menu.Item, {
-            onClick: open,
-            icon: /* @__PURE__ */ jsx(Settings, {
-              size: 14
-            }),
-            children: "Settings"
-          }), /* @__PURE__ */ jsx(Menu.Item, {
-            onClick: duplicate,
-            icon: /* @__PURE__ */ jsx(Copy, {
+        children: [/* @__PURE__ */ jsx(Menu.Target, {
+          children: /* @__PURE__ */ jsx(Text, {
+            lineClamp: 1,
+            weight: "bold",
+            children: title
+          })
+        }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
+          children: [/* @__PURE__ */ jsx(Menu.Item, {
+            onClick: refreshData,
+            icon: /* @__PURE__ */ jsx(Refresh, {
               size: 14
             }),
-            children: "Duplicate"
-          }), /* @__PURE__ */ jsx(Menu.Item, {
-            color: "red",
-            onClick: remove,
-            icon: /* @__PURE__ */ jsx(Trash, {
+            children: "Refresh"
+          }), !inFullScreen && /* @__PURE__ */ jsx(Menu.Item, {
+            onClick: enterFullScreen,
+            icon: /* @__PURE__ */ jsx(ArrowsMaximize, {
               size: 14
             }),
-            children: "Delete"
+            children: "Full Screen"
+          }), inEditMode && /* @__PURE__ */ jsxs(Fragment, {
+            children: [/* @__PURE__ */ jsx(Divider, {
+              label: "Edit",
+              labelPosition: "center"
+            }), /* @__PURE__ */ jsx(Menu.Item, {
+              onClick: open,
+              icon: /* @__PURE__ */ jsx(Settings, {
+                size: 14
+              }),
+              children: "Settings"
+            }), /* @__PURE__ */ jsx(Menu.Item, {
+              onClick: duplicate,
+              icon: /* @__PURE__ */ jsx(Copy, {
+                size: 14
+              }),
+              children: "Duplicate"
+            }), /* @__PURE__ */ jsx(Menu.Item, {
+              color: "red",
+              onClick: remove,
+              icon: /* @__PURE__ */ jsx(Trash, {
+                size: 14
+              }),
+              children: "Delete"
+            })]
           })]
         })]
       })
@@ -4640,6 +4386,7 @@ function Panel({
   id
 }) {
   const contextInfo = React.useContext(ContextInfoContext);
+  const filterValues = React.useContext(FilterValuesContext);
   const definitions = React.useContext(DefinitionContext);
   const [title, setTitle] = React.useState(initialTitle);
   const [description, setDescription] = React.useState(initialDesc);
@@ -4668,10 +4415,11 @@ function Panel({
   } = useRequest(queryBySQL({
     context: contextInfo,
     definitions,
+    filterValues,
     title,
     query
   }), {
-    refreshDeps: [contextInfo, definitions, query]
+    refreshDeps: [contextInfo, definitions, query, filterValues]
   });
   const refreshData = refresh;
   return /* @__PURE__ */ jsx(PanelContext.Provider, {
@@ -4725,7 +4473,7 @@ function DashboardLayout({
   }, [panels, setPanels]);
   return /* @__PURE__ */ jsx(ReactGridLayout$1, {
     onLayoutChange,
-    className,
+    className: `dashboard-layout ${className}`,
     rowHeight,
     isDraggable,
     isResizable,
@@ -4751,9 +4499,10 @@ function DashboardLayout({
 }
 function renderLabel(icon, postfix) {
   return /* @__PURE__ */ jsxs(Text, {
+    size: "xs",
     sx: {
       svg: {
-        verticalAlign: "text-bottom"
+        verticalAlign: "bottom"
       }
     },
     children: [icon, " ", postfix]
@@ -4764,6 +4513,7 @@ function ModeToggler({
   setMode
 }) {
   return /* @__PURE__ */ jsx(SegmentedControl, {
+    size: "xs",
     value: mode,
     onChange: setMode,
     data: [{
@@ -4774,50 +4524,58 @@ function ModeToggler({
     }, {
       label: renderLabel(/* @__PURE__ */ jsx(Resize, {
         size: 20
-      }), "Layout"),
+      }), "Edit Layout"),
       value: DashboardMode.Layout
     }, {
       label: renderLabel(/* @__PURE__ */ jsx(Paint, {
         size: 20
-      }), "Content"),
+      }), "Edit Content"),
       value: DashboardMode.Edit
     }]
   });
 }
 const example = `
--- You may reference context data or SQL snippets *by name*
--- in SQL or VizConfig.
+-- You may reference global variables in SQL or VizConfig.
 SELECT *
 FROM commit
 WHERE
-  -- context data
-  author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
+  -- context
+  user_id IS '\${context.currentUserID}'
+  -- filters
+  author_time BETWEEN '\${filters.timeRange?.[0].toISOString()}' AND '\${filters.timeRange?.[1].toISOString()}'
   -- SQL snippets
-  AND \${author_email_condition}
-  \${order_by_clause}
+  AND \${sql_snippets.author_email_condition}
+  \${sql_snippets.order_by_clause}
 `;
-function ContextAndSnippets({}) {
+function GlobalVariablesGuide({
+  showSQLSnippets = true,
+  sx = {}
+}) {
   const contextInfo = React.useContext(ContextInfoContext);
+  const filterValues = React.useContext(FilterValuesContext);
   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, {
-    direction: "column",
-    grow: true,
+  const variablesString = React.useMemo(() => {
+    const ret = {
+      context: contextInfo,
+      filters: filterValues
+    };
+    if (showSQLSnippets) {
+      const sql_snippets = sqlSnippets.reduce((prev, curr) => {
+        prev[curr.key] = curr.value;
+        return prev;
+      }, {});
+      ret.sql_snippets = sql_snippets;
+    }
+    return JSON.stringify(ret, null, 2);
+  }, [contextInfo, sqlSnippets, filterValues, showSQLSnippets]);
+  return /* @__PURE__ */ jsxs(Stack, {
     sx: {
       border: "1px solid #eee",
       maxWidth: "40%",
-      overflow: "hidden"
+      overflow: "hidden",
+      ...sx
     },
     children: [/* @__PURE__ */ jsx(Group, {
       position: "left",
@@ -4830,10 +4588,9 @@ function ContextAndSnippets({}) {
       },
       children: /* @__PURE__ */ jsx(Text, {
         weight: 500,
-        children: "Context"
+        children: "Global Variables"
       })
-    }), /* @__PURE__ */ jsxs(Group, {
-      direction: "column",
+    }), /* @__PURE__ */ jsxs(Stack, {
       px: "md",
       pb: "md",
       sx: {
@@ -4852,21 +4609,7 @@ function ContextAndSnippets({}) {
         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"
+        children: "Current Values"
       }), /* @__PURE__ */ jsx(Prism, {
         language: "json",
         sx: {
@@ -4874,7 +4617,7 @@ function ContextAndSnippets({}) {
         },
         noCopy: true,
         colorScheme: "dark",
-        children: snippets
+        children: variablesString
       })]
     })]
   });
@@ -4883,10 +4626,11 @@ function PreviewSQL({
   value
 }) {
   const context = React.useContext(ContextInfoContext);
+  const filterValues = React.useContext(FilterValuesContext);
   const definition = React.useContext(DefinitionContext);
   const explained = React.useMemo(() => {
-    return explainSQL(value, context, definition);
-  }, [value, context, definition]);
+    return explainSQL(value, context, definition, filterValues);
+  }, [value, context, definition, filterValues]);
   return /* @__PURE__ */ jsx(Prism, {
     language: "sql",
     colorScheme: "light",
@@ -4910,30 +4654,35 @@ function QueryForm({
     form.reset();
   }, [value]);
   const {
-    data: querySources = {},
+    data: querySources = [],
     loading
   } = useRequest(listDataSources, {
     refreshDeps: []
   }, []);
   const querySourceTypeOptions = React.useMemo(() => {
-    return Object.keys(querySources).map((k2) => ({
-      label: k2,
-      value: k2
+    const types2 = Array.from(new Set(querySources.map(({
+      type
+    }) => type)));
+    return types2.map((type) => ({
+      label: type,
+      value: type
     }));
   }, [querySources]);
   const querySourceKeyOptions = React.useMemo(() => {
-    const sources = querySources[form.values.type];
+    const sources = querySources.filter(({
+      type
+    }) => type === form.values.type);
     if (!sources) {
       return [];
     }
-    return sources.map((k2) => ({
-      label: k2,
-      value: k2
+    return sources.map(({
+      key
+    }) => ({
+      label: key,
+      value: key
     }));
   }, [querySources, form.values.type]);
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsx(Stack, {
     sx: {
       border: "1px solid #eee",
       flexGrow: 1
@@ -4961,9 +4710,7 @@ function QueryForm({
             size: 20
           })
         })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
+      }), /* @__PURE__ */ jsxs(Stack, {
         my: 0,
         p: "md",
         pr: 40,
@@ -4996,8 +4743,18 @@ function QueryForm({
             ...form.getInputProps("key")
           })]
         }), /* @__PURE__ */ jsxs(Tabs, {
-          children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "SQL",
+          defaultValue: "SQL",
+          children: [/* @__PURE__ */ jsxs(Tabs.List, {
+            children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+              value: "SQL",
+              children: "SQL"
+            }), /* @__PURE__ */ jsx(Tabs.Tab, {
+              value: "Preview",
+              children: "Preview"
+            })]
+          }), /* @__PURE__ */ jsx(Tabs.Panel, {
+            value: "SQL",
+            pt: "sm",
             children: /* @__PURE__ */ jsx(Textarea, {
               autosize: true,
               minRows: 12,
@@ -5005,8 +4762,9 @@ function QueryForm({
               ...form.getInputProps("sql"),
               className: "code-textarea"
             })
-          }), /* @__PURE__ */ jsx(Tabs.Tab, {
-            label: "Preview",
+          }), /* @__PURE__ */ jsx(Tabs.Panel, {
+            value: "Preview",
+            pt: "sm",
             children: /* @__PURE__ */ jsx(PreviewSQL, {
               value: form.values.sql
             })
@@ -5141,14 +4899,11 @@ function EditQueries({}) {
     },
     padding: "md",
     children: [/* @__PURE__ */ jsxs(Group, {
-      direction: "row",
       position: "apart",
       grow: true,
       align: "stretch",
       noWrap: true,
-      children: [/* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        grow: true,
+      children: [/* @__PURE__ */ jsxs(Stack, {
         sx: {
           flexGrow: 1,
           maxWidth: "calc(60% - 16px)"
@@ -5160,73 +4915,12 @@ function EditQueries({}) {
           id,
           setID
         })]
-      }), /* @__PURE__ */ jsx(ContextAndSnippets, {})]
+      }), /* @__PURE__ */ jsx(GlobalVariablesGuide, {})]
     }), /* @__PURE__ */ jsx(DataPreview, {
       id
     })]
   });
 }
-function ContextInfo({}) {
-  const contextInfo = React.useContext(ContextInfoContext);
-  const sampleSQL2 = `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",
-      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.
-
-${sampleSQL2}`
-      }), /* @__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 PreviewSnippet({
   value
 }) {
@@ -5234,10 +4928,7 @@ function PreviewSnippet({
   const explained = React.useMemo(() => {
     return explainSQLSnippet(value, context);
   }, [value, context]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    noWrap: true,
-    grow: true,
+  return /* @__PURE__ */ jsxs(Stack, {
     children: [/* @__PURE__ */ jsx(Text, {
       children: "Preview"
     }), /* @__PURE__ */ jsx(Prism, {
@@ -5254,12 +4945,12 @@ function SQLSnippetsEditor({}) {
     setSQLSnippets
   } = React.useContext(DefinitionContext);
   const initialValues = React.useMemo(() => ({
-    snippets: formList(sqlSnippets != null ? sqlSnippets : [])
+    snippets: sqlSnippets != null ? sqlSnippets : []
   }), [sqlSnippets]);
   const form = useForm$1({
     initialValues
   });
-  const addSnippet = () => form.addListItem("snippets", {
+  const addSnippet = () => form.insertListItem("snippets", {
     key: randomId(),
     value: ""
   });
@@ -5269,9 +4960,7 @@ function SQLSnippetsEditor({}) {
   }) => {
     setSQLSnippets(snippets);
   };
-  return /* @__PURE__ */ jsx(Group, {
-    direction: "column",
-    grow: true,
+  return /* @__PURE__ */ jsx(Stack, {
     sx: {
       border: "1px solid #eee",
       flexGrow: 1
@@ -5304,16 +4993,12 @@ function SQLSnippetsEditor({}) {
         px: "md",
         pb: "md",
         pt: "md",
-        children: /* @__PURE__ */ jsxs(Group, {
-          direction: "column",
+        children: /* @__PURE__ */ jsxs(Stack, {
           sx: {
             width: "100%",
             position: "relative"
           },
-          grow: true,
-          children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
+          children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Stack, {
             my: 0,
             p: "md",
             pr: 40,
@@ -5324,18 +5009,18 @@ function SQLSnippetsEditor({}) {
             children: [/* @__PURE__ */ jsx(TextInput, {
               label: "Key",
               required: true,
-              ...form.getListInputProps("snippets", index2, "key")
+              ...form.getInputProps(`snippets.${index2}.key`)
             }), /* @__PURE__ */ jsx(Textarea, {
               minRows: 3,
               label: "Value",
               required: true,
-              ...form.getListInputProps("snippets", index2, "value"),
+              ...form.getInputProps(`snippets.${index2}.value`),
               className: "code-textarea"
             }), /* @__PURE__ */ jsx(PreviewSnippet, {
               value: form.values.snippets[index2].value
             }), /* @__PURE__ */ jsx(ActionIcon, {
               color: "red",
-              variant: "hover",
+              variant: "subtle",
               onClick: () => form.removeListItem("snippets", index2),
               sx: {
                 position: "absolute",
@@ -5365,57 +5050,6 @@ function SQLSnippetsEditor({}) {
     })
   });
 }
-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: {
@@ -5433,19 +5067,12 @@ function EditSQLSnippets({}) {
     },
     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, {})]
+      children: [/* @__PURE__ */ jsx(SQLSnippetsEditor, {}), /* @__PURE__ */ jsx(GlobalVariablesGuide, {
+        showSQLSnippets: false
       })]
     })
   });
@@ -5471,11 +5098,22 @@ function DataEditorModal({
       e.stopPropagation();
     },
     children: /* @__PURE__ */ jsxs(Tabs, {
-      children: [/* @__PURE__ */ jsx(Tabs.Tab, {
-        label: "SQL Snippet",
+      defaultValue: "Queries",
+      children: [/* @__PURE__ */ jsxs(Tabs.List, {
+        children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+          value: "SQL Snippet",
+          children: "SQL Snippet"
+        }), /* @__PURE__ */ jsx(Tabs.Tab, {
+          value: "Queries",
+          children: "Queries"
+        })]
+      }), /* @__PURE__ */ jsx(Tabs.Panel, {
+        value: "SQL Snippet",
+        pt: "sm",
         children: /* @__PURE__ */ jsx(EditSQLSnippets, {})
-      }), /* @__PURE__ */ jsx(Tabs.Tab, {
-        label: "Queries",
+      }), /* @__PURE__ */ jsx(Tabs.Panel, {
+        value: "Queries",
+        pt: "sm",
         children: /* @__PURE__ */ jsx(EditQueries, {})
       })]
     })
@@ -5515,114 +5153,1044 @@ function ViewSchemaModal({
     })
   });
 }
-function DashboardActions({
-  mode,
-  setMode,
-  hasChanges,
-  saveChanges,
-  revertChanges,
-  getCurrentSchema
+function FilterEditorCheckbox({
+  field,
+  index: index2,
+  control
 }) {
-  const {
-    addPanel
-  } = React.useContext(DashboardActionContext);
-  const {
-    inLayoutMode,
-    inEditMode,
-    inUseMode
-  } = React.useContext(LayoutStateContext);
-  const [dataEditorOpened, setDataEditorOpened] = React.useState(false);
-  const openQueries = () => setDataEditorOpened(true);
-  const closeQueries = () => setDataEditorOpened(false);
-  const [schemaOpened, setSchemaOpened] = React.useState(false);
-  const openSchema = () => setSchemaOpened(true);
-  const closeSchema = () => setSchemaOpened(false);
-  return /* @__PURE__ */ jsxs(Group, {
-    position: "apart",
-    pt: "sm",
-    pb: "xs",
-    children: [/* @__PURE__ */ jsx(Group, {
-      position: "left",
-      children: /* @__PURE__ */ jsx(ModeToggler, {
-        mode,
-        setMode
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.default_value`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(Checkbox, {
+        checked: field2.value,
+        onChange: (e) => field2.onChange(e.currentTarget.checked),
+        label: "Default Checked"
       })
-    }), /* @__PURE__ */ jsxs(Group, {
-      position: "right",
-      children: [!inUseMode && /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: addPanel,
-        leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
-          size: 20
-        }),
-        children: "Add a Panel"
-      }), inEditMode && /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: openQueries,
-        leftIcon: /* @__PURE__ */ jsx(Database, {
-          size: 20
-        }),
-        children: "Data Settings"
-      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
-        variant: "default",
-        size: "sm",
-        onClick: saveChanges,
-        disabled: !hasChanges,
-        leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        }),
-        children: "Save Changes"
-      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
-        color: "red",
-        size: "sm",
-        disabled: !hasChanges,
-        onClick: revertChanges,
-        leftIcon: /* @__PURE__ */ jsx(Recycle, {
-          size: 20
-        }),
-        children: "Revert Changes"
-      }), /* @__PURE__ */ jsxs(Menu, {
-        control: /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          leftIcon: /* @__PURE__ */ jsx(Share, {
-            size: 20
-          }),
-          children: "Export"
-        }),
-        children: [/* @__PURE__ */ jsx(Menu.Item, {
-          disabled: true,
-          children: "Download Data"
-        }), /* @__PURE__ */ jsx(Menu.Item, {
-          onClick: openSchema,
-          children: "View Schema"
-        })]
+    })
+  });
+}
+const inputFormatOptions = [{
+  label: "2022",
+  value: "YYYY"
+}, {
+  label: "2022-01",
+  value: "YYYY-MM"
+}, {
+  label: "2022-01-01",
+  value: "YYYY-MM-DD"
+}];
+function FilterEditorDateRange({
+  field,
+  index: index2,
+  control
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Group, {
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.required`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(Checkbox, {
+          checked: field2.value,
+          onChange: (e) => field2.onChange(e.currentTarget.checked),
+          label: "Required"
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.clearable`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(Checkbox, {
+          checked: field2.value,
+          onChange: (e) => field2.onChange(e.currentTarget.checked),
+          label: "Clearable"
+        })
       })]
-    }), /* @__PURE__ */ jsx(DataEditorModal, {
-      opened: dataEditorOpened,
-      close: closeQueries
-    }), /* @__PURE__ */ jsx(ViewSchemaModal, {
-      opened: schemaOpened,
-      close: closeSchema,
-      getCurrentSchema
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.inputFormat`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(Select, {
+        data: inputFormatOptions,
+        label: "Display Format",
+        ...field2
+      })
     })]
   });
 }
-function FullScreenPanel({
-  panel,
-  exitFullScreen
-}) {
+function SelectDataSource({
+  value,
+  onChange
+}) {
+  const {
+    data: querySources = [],
+    loading
+  } = useRequest(listDataSources, {
+    refreshDeps: []
+  }, []);
+  const querySourceTypeOptions = React.useMemo(() => {
+    const types2 = Array.from(new Set(querySources.map(({
+      type
+    }) => type)));
+    return types2.map((type) => ({
+      label: type,
+      value: type
+    }));
+  }, [querySources]);
+  const querySourceKeyOptions = React.useMemo(() => {
+    const sources = querySources.filter(({
+      type
+    }) => type === value.type);
+    if (!sources) {
+      return [];
+    }
+    return sources.map(({
+      key
+    }) => ({
+      label: key,
+      value: key
+    }));
+  }, [querySources, value.type]);
+  return /* @__PURE__ */ jsxs(Group, {
+    grow: true,
+    children: [/* @__PURE__ */ jsx(Select, {
+      label: "Data Source Type",
+      data: querySourceTypeOptions,
+      sx: {
+        flex: 1
+      },
+      disabled: loading,
+      value: value.type,
+      onChange: (type) => {
+        onChange({
+          ...value,
+          type
+        });
+      }
+    }), /* @__PURE__ */ jsx(Select, {
+      label: "Data Source Key",
+      data: querySourceKeyOptions,
+      sx: {
+        flex: 1
+      },
+      disabled: loading,
+      value: value.key,
+      onChange: (key) => {
+        onChange({
+          ...value,
+          key
+        });
+      }
+    })]
+  });
+}
+const FilterQueryField = React.forwardRef(function _FilterQueryField({
+  value,
+  onChange
+}, _ref) {
+  return /* @__PURE__ */ jsxs(Stack, {
+    my: 0,
+    children: [/* @__PURE__ */ jsx(SelectDataSource, {
+      value,
+      onChange
+    }), /* @__PURE__ */ jsxs(Tabs, {
+      defaultValue: "SQL",
+      children: [/* @__PURE__ */ jsxs(Tabs.List, {
+        children: [/* @__PURE__ */ jsx(Tabs.Tab, {
+          value: "SQL",
+          children: "SQL"
+        }), /* @__PURE__ */ jsx(Tabs.Tab, {
+          value: "Preview",
+          children: "Preview"
+        })]
+      }), /* @__PURE__ */ jsx(Tabs.Panel, {
+        value: "SQL",
+        pt: "sm",
+        children: /* @__PURE__ */ jsx(Textarea, {
+          autosize: true,
+          minRows: 12,
+          maxRows: 24,
+          className: "code-textarea",
+          value: value.sql,
+          onChange: (e) => {
+            onChange({
+              ...value,
+              sql: e.currentTarget.value
+            });
+          },
+          placeholder: "SELECT name AS label, id AS value"
+        })
+      }), /* @__PURE__ */ jsx(Tabs.Panel, {
+        value: "Preview",
+        pt: "sm",
+        children: /* @__PURE__ */ jsx(PreviewSQL, {
+          value: value.sql
+        })
+      })]
+    })]
+  });
+});
+function FilterEditorMultiSelect({
+  field,
+  index: index2,
+  control,
+  watch
+}) {
+  const {
+    fields: staticOptionFields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: `filters.${index2}.config.static_options`
+  });
+  const watchedStaticOptions = watch(`filters.${index2}.config.static_options`);
+  const addStaticOption = () => {
+    append({
+      label: "",
+      value: ""
+    });
+  };
+  const optionsForDefaultValue = [{
+    label: "No default selection",
+    value: ""
+  }, ...watchedStaticOptions];
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Divider, {
+      label: "Configure options",
+      labelPosition: "center"
+    }), staticOptionFields.length > 0 && /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.default_value`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(MultiSelect, {
+        label: "Default Selection",
+        data: optionsForDefaultValue,
+        ...field2
+      })
+    }), staticOptionFields.map((_optionField, optionIndex) => /* @__PURE__ */ jsxs(Group, {
+      sx: {
+        position: "relative"
+      },
+      pr: "40px",
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.static_options.${optionIndex}.label`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          label: "Label",
+          required: true,
+          ...field2,
+          sx: {
+            flexGrow: 1
+          }
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.static_options.${optionIndex}.value`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          label: "Value",
+          required: true,
+          ...field2,
+          sx: {
+            flexGrow: 1
+          }
+        })
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        color: "red",
+        variant: "subtle",
+        onClick: () => remove(optionIndex),
+        sx: {
+          position: "absolute",
+          top: 28,
+          right: 5
+        },
+        children: /* @__PURE__ */ jsx(Trash, {
+          size: 16
+        })
+      })]
+    })), /* @__PURE__ */ jsx(Button, {
+      size: "xs",
+      color: "blue",
+      leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+        size: 20
+      }),
+      onClick: addStaticOption,
+      sx: {
+        width: "50%"
+      },
+      mx: "auto",
+      children: "Add an Option"
+    }), /* @__PURE__ */ jsx(Divider, {
+      label: "Or fetch options from database",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.options_query`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(FilterQueryField, {
+        ...field2
+      })
+    })]
+  });
+}
+function FilterEditorSelect({
+  field,
+  index: index2,
+  control,
+  watch
+}) {
+  const {
+    fields: staticOptionFields,
+    append,
+    remove
+  } = useFieldArray({
+    control,
+    name: `filters.${index2}.config.static_options`
+  });
+  const watchedStaticOptions = watch(`filters.${index2}.config.static_options`);
+  const addStaticOption = () => {
+    append({
+      label: "",
+      value: ""
+    });
+  };
+  const optionsForDefaultValue = [{
+    label: "No default selection",
+    value: ""
+  }, ...watchedStaticOptions];
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.required`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(Checkbox, {
+        checked: field2.value,
+        onChange: (e) => field2.onChange(e.currentTarget.checked),
+        label: "Required"
+      })
+    }), /* @__PURE__ */ jsx(Divider, {
+      label: "Configure options",
+      labelPosition: "center"
+    }), staticOptionFields.length > 0 && /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.default_value`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(Select, {
+        label: "Default Selection",
+        data: optionsForDefaultValue,
+        ...field2
+      })
+    }), staticOptionFields.map((_optionField, optionIndex) => /* @__PURE__ */ jsxs(Group, {
+      sx: {
+        position: "relative"
+      },
+      pr: "40px",
+      children: [/* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.static_options.${optionIndex}.label`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          label: "Label",
+          required: true,
+          ...field2,
+          sx: {
+            flexGrow: 1
+          }
+        })
+      }), /* @__PURE__ */ jsx(Controller, {
+        name: `filters.${index2}.config.static_options.${optionIndex}.value`,
+        control,
+        render: ({
+          field: field2
+        }) => /* @__PURE__ */ jsx(TextInput, {
+          label: "Value",
+          required: true,
+          ...field2,
+          sx: {
+            flexGrow: 1
+          }
+        })
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        color: "red",
+        variant: "subtle",
+        onClick: () => remove(optionIndex),
+        sx: {
+          position: "absolute",
+          top: 28,
+          right: 5
+        },
+        children: /* @__PURE__ */ jsx(Trash, {
+          size: 16
+        })
+      })]
+    })), /* @__PURE__ */ jsx(Button, {
+      size: "xs",
+      color: "blue",
+      leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+        size: 20
+      }),
+      onClick: addStaticOption,
+      sx: {
+        width: "50%"
+      },
+      mx: "auto",
+      children: "Add an Option"
+    }), /* @__PURE__ */ jsx(Divider, {
+      label: "Or fetch options from database",
+      labelPosition: "center"
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.options_query`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(FilterQueryField, {
+        ...field2
+      })
+    })]
+  });
+}
+function FilterEditorTextInput({
+  field,
+  index: index2,
+  control
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.default_value`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(TextInput, {
+        label: "Default Value",
+        ...field2
+      })
+    }), /* @__PURE__ */ jsx(Controller, {
+      name: `filters.${index2}.config.required`,
+      control,
+      render: ({
+        field: field2
+      }) => /* @__PURE__ */ jsx(Checkbox, {
+        checked: field2.value,
+        onChange: (e) => field2.onChange(e.currentTarget.checked),
+        label: "Required"
+      })
+    })]
+  });
+}
+function FilterCheckbox({
+  label,
+  config: {
+    default_value,
+    ...rest
+  },
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(Box, {
+    children: [/* @__PURE__ */ jsx(Text, {
+      children: "\xA0"
+    }), /* @__PURE__ */ jsx(Checkbox, {
+      label,
+      checked: value,
+      onChange: (event) => onChange(event.currentTarget.checked),
+      ...rest
+    })]
+  });
+}
+function FilterDateRange({
+  label,
+  config,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(DateRangePicker, {
+    label,
+    value,
+    onChange,
+    icon: /* @__PURE__ */ jsx(Calendar, {
+      size: 16
+    }),
+    sx: {
+      minWidth: "14em"
+    },
+    ...config
+  });
+}
+function FilterMultiSelect({
+  label,
+  config,
+  value,
+  onChange
+}) {
+  const usingRemoteOptions = !!config.options_query.sql;
+  const {
+    data: remoteOptions = [],
+    loading
+  } = useRequest(queryByStaticSQL(config.options_query), {
+    refreshDeps: [config.options_query, usingRemoteOptions]
+  });
+  return /* @__PURE__ */ jsx(MultiSelect, {
+    label,
+    data: usingRemoteOptions ? remoteOptions : config.static_options,
+    disabled: usingRemoteOptions ? loading : false,
+    value,
+    onChange
+  });
+}
+function FilterSelect({
+  label,
+  config,
+  value,
+  onChange
+}) {
+  const usingRemoteOptions = !!config.options_query.sql;
+  const {
+    data: remoteOptions = [],
+    loading
+  } = useRequest(queryByStaticSQL(config.options_query), {
+    refreshDeps: [config.options_query, usingRemoteOptions]
+  });
+  return /* @__PURE__ */ jsx(Select, {
+    label,
+    data: usingRemoteOptions ? remoteOptions : config.static_options,
+    disabled: usingRemoteOptions ? loading : false,
+    value,
+    onChange
+  });
+}
+function FilterTextInput({
+  label,
+  config,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsx(TextInput, {
+    label,
+    value,
+    onChange,
+    ...config
+  });
+}
+function renderFilter({
+  type,
+  config,
+  ...rest
+}, formFieldProps) {
+  switch (type) {
+    case "select":
+      return /* @__PURE__ */ jsx(FilterSelect, {
+        ...rest,
+        ...formFieldProps,
+        config
+      });
+    case "multi-select":
+      return /* @__PURE__ */ jsx(FilterMultiSelect, {
+        ...rest,
+        ...formFieldProps,
+        config
+      });
+    case "text-input":
+      return /* @__PURE__ */ jsx(FilterTextInput, {
+        ...rest,
+        ...formFieldProps,
+        config
+      });
+    case "date-range":
+      return /* @__PURE__ */ jsx(FilterDateRange, {
+        ...rest,
+        ...formFieldProps,
+        config
+      });
+    case "checkbox":
+      return /* @__PURE__ */ jsx(FilterCheckbox, {
+        ...rest,
+        ...formFieldProps,
+        config
+      });
+    default:
+      return null;
+  }
+}
+const Filter = React.forwardRef(function _Filter({
+  filter,
+  ...formFieldProps
+}, ref) {
+  return /* @__PURE__ */ jsx("div", {
+    className: "filter-root",
+    ref,
+    children: /* @__PURE__ */ jsx(ErrorBoundary, {
+      children: renderFilter(filter, formFieldProps)
+    })
+  });
+});
+function PreviewFilter({
+  filter,
+  index: index2,
+  watch
+}) {
+  const defaultValue = filter.config.default_value;
+  const [value, setValue] = React.useState(defaultValue);
+  React.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+  return /* @__PURE__ */ jsxs(Box, {
+    sx: {
+      maxWidth: "30em"
+    },
+    children: [/* @__PURE__ */ jsx(Text, {
+      pb: "md",
+      color: "gray",
+      children: "Preview"
+    }), /* @__PURE__ */ jsx(Filter, {
+      filter,
+      value,
+      onChange: setValue
+    }), /* @__PURE__ */ jsx("pre", {
+      children: JSON.stringify(filter, null, 4)
+    })]
+  });
+}
+const editors = {
+  "select": FilterEditorSelect,
+  "multi-select": FilterEditorMultiSelect,
+  "text-input": FilterEditorTextInput,
+  "checkbox": FilterEditorCheckbox,
+  "date-range": FilterEditorDateRange
+};
+const filterTypeOptions = [{
+  label: "Select",
+  value: "select"
+}, {
+  label: "Multi Select",
+  value: "multi-select"
+}, {
+  label: "Text Input",
+  value: "text-input"
+}, {
+  label: "Checkbox",
+  value: "checkbox"
+}, {
+  label: "Date Range",
+  value: "date-range"
+}];
+function FilterSetting({
+  field,
+  index: index2,
+  control,
+  watch
+}) {
+  const FilterEditor = React.useMemo(() => {
+    return editors[field.type];
+  }, [field.type]);
+  return /* @__PURE__ */ jsxs(SimpleGrid, {
+    cols: 2,
+    children: [/* @__PURE__ */ jsxs(Box, {
+      pl: "md",
+      children: [/* @__PURE__ */ jsx(Text, {
+        pb: "md",
+        color: "gray",
+        children: "Edit"
+      }), /* @__PURE__ */ jsxs(Stack, {
+        sx: {
+          maxWidth: "30em"
+        },
+        children: [/* @__PURE__ */ jsx(Controller, {
+          name: `filters.${index2}.order`,
+          control,
+          render: ({
+            field: field2
+          }) => /* @__PURE__ */ jsx(TextInput, {
+            label: "Placement Order",
+            required: true,
+            ...field2
+          })
+        }), /* @__PURE__ */ jsx(Controller, {
+          name: `filters.${index2}.key`,
+          control,
+          render: ({
+            field: field2
+          }) => /* @__PURE__ */ jsx(TextInput, {
+            label: "Key",
+            placeholder: "A unique key to refer",
+            required: true,
+            ...field2
+          })
+        }), /* @__PURE__ */ jsx(Controller, {
+          name: `filters.${index2}.label`,
+          control,
+          render: ({
+            field: field2
+          }) => /* @__PURE__ */ jsx(TextInput, {
+            label: "Label",
+            placeholder: "Label for this field",
+            required: true,
+            ...field2
+          })
+        }), /* @__PURE__ */ jsx(Controller, {
+          name: `filters.${index2}.type`,
+          control,
+          render: ({
+            field: field2
+          }) => /* @__PURE__ */ jsx(Select, {
+            label: "Widget",
+            data: filterTypeOptions,
+            required: true,
+            ...field2
+          })
+        }), /* @__PURE__ */ jsx(FilterEditor, {
+          field,
+          index: index2,
+          control,
+          watch
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(PreviewFilter, {
+      filter: field,
+      index: index2,
+      watch
+    })]
+  });
+}
+function FilterSettings({
+  filters,
+  setFilters
+}) {
+  var _a;
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue
+  } = useForm({
+    defaultValues: {
+      filters: filters != null ? filters : []
+    }
+  });
+  const {
+    fields,
+    append,
+    remove,
+    replace
+  } = useFieldArray({
+    control,
+    name: "filters"
+  });
+  const watchFieldArray = watch("filters");
+  const controlledFields = fields.map((field, index2) => {
+    return {
+      ...field,
+      ...watchFieldArray[index2]
+    };
+  });
+  const addFilter = () => {
+    const key = randomId();
+    const filter = {
+      key,
+      label: key,
+      order: filters.length + 1,
+      type: "text-input",
+      config: {
+        required: false,
+        default_value: ""
+      }
+    };
+    append(filter);
+  };
+  const removeFilter = (index2) => {
+    remove(index2);
+  };
+  const revert = React.useCallback(() => {
+    replace(filters);
+  }, [filters]);
+  const notChanged = _.isEqual(filters, watchFieldArray);
+  const submit = React.useCallback(({
+    filters: filters2
+  }) => {
+    setFilters(filters2);
+  }, [setFilters]);
+  return /* @__PURE__ */ jsx(Group, {
+    sx: {
+      height: "90vh",
+      maxHeight: "calc(100vh - 185px)"
+    },
+    p: 0,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(submit),
+      style: {
+        height: "100%",
+        width: "100%"
+      },
+      children: [/* @__PURE__ */ jsxs(Group, {
+        sx: {
+          position: "absolute",
+          top: "16px",
+          right: "16px"
+        },
+        children: [/* @__PURE__ */ jsx(Button, {
+          size: "xs",
+          color: "green",
+          leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          }),
+          type: "submit",
+          disabled: notChanged,
+          children: "Save Changes"
+        }), /* @__PURE__ */ jsx(Button, {
+          size: "xs",
+          color: "red",
+          leftIcon: /* @__PURE__ */ jsx(Recycle, {
+            size: 20
+          }),
+          disabled: notChanged,
+          onClick: revert,
+          children: "Revert Changes"
+        })]
+      }), /* @__PURE__ */ jsx(Tabs, {
+        orientation: "vertical",
+        defaultValue: (_a = controlledFields[0]) == null ? void 0 : _a.id,
+        children: /* @__PURE__ */ jsxs(Group, {
+          sx: {
+            height: "100%"
+          },
+          children: [/* @__PURE__ */ jsxs(Stack, {
+            sx: {
+              height: "100%"
+            },
+            children: [/* @__PURE__ */ jsx(Tabs.List, {
+              position: "left",
+              sx: {
+                flexGrow: 1
+              },
+              children: controlledFields.map((field, index2) => /* @__PURE__ */ jsx(Tabs.Tab, {
+                value: field.id,
+                children: field.label
+              }, field.id))
+            }), /* @__PURE__ */ jsx(Button, {
+              size: "xs",
+              color: "blue",
+              leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+                size: 20
+              }),
+              onClick: addFilter,
+              children: "Add a Filter"
+            })]
+          }), /* @__PURE__ */ jsx(Box, {
+            sx: {
+              flexGrow: 1,
+              height: "100%"
+            },
+            children: controlledFields.map((field, index2) => /* @__PURE__ */ jsx(Tabs.Panel, {
+              value: field.id,
+              sx: {
+                height: "100%"
+              },
+              children: /* @__PURE__ */ jsxs(Stack, {
+                sx: {
+                  height: "100%"
+                },
+                spacing: "sm",
+                children: [/* @__PURE__ */ jsx(Box, {
+                  sx: {
+                    flexGrow: 1,
+                    maxHeight: "calc(100% - 52px)",
+                    overflow: "scroll"
+                  },
+                  children: /* @__PURE__ */ jsx(FilterSetting, {
+                    field,
+                    index: index2,
+                    control,
+                    watch
+                  })
+                }), /* @__PURE__ */ jsx(Group, {
+                  position: "right",
+                  pt: 10,
+                  children: /* @__PURE__ */ jsx(Button, {
+                    size: "xs",
+                    color: "red",
+                    leftIcon: /* @__PURE__ */ jsx(Trash, {
+                      size: 20
+                    }),
+                    onClick: () => removeFilter(index2),
+                    children: "Delete this filter"
+                  })
+                })]
+              })
+            }, field.id))
+          })]
+        })
+      })]
+    })
+  });
+}
+function FilterSettingsModal({
+  opened,
+  close,
+  filters,
+  setFilters
+}) {
+  const {
+    freezeLayout
+  } = React.useContext(LayoutStateContext);
+  React.useEffect(() => {
+    freezeLayout(opened);
+  }, [opened]);
+  return /* @__PURE__ */ jsx(Modal, {
+    size: "96vw",
+    overflow: "inside",
+    opened,
+    onClose: close,
+    title: "Filters",
+    trapFocus: true,
+    onDragStart: (e) => {
+      e.stopPropagation();
+    },
+    withCloseButton: false,
+    children: /* @__PURE__ */ jsx(FilterSettings, {
+      filters,
+      setFilters
+    })
+  });
+}
+function DashboardActions({
+  mode,
+  setMode,
+  hasChanges,
+  saveChanges,
+  revertChanges,
+  getCurrentSchema,
+  filters,
+  setFilters
+}) {
+  const {
+    addPanel
+  } = React.useContext(DashboardActionContext);
+  const {
+    inLayoutMode,
+    inEditMode,
+    inUseMode
+  } = React.useContext(LayoutStateContext);
+  const [dataEditorOpened, setDataEditorOpened] = React.useState(false);
+  const openQueries = () => setDataEditorOpened(true);
+  const closeQueries = () => setDataEditorOpened(false);
+  const [filtersOpened, setFiltersOpened] = React.useState(false);
+  const openFilters = () => setFiltersOpened(true);
+  const closeFilters = () => setFiltersOpened(false);
+  const [schemaOpened, setSchemaOpened] = React.useState(false);
+  const openSchema = () => setSchemaOpened(true);
+  const closeSchema = () => setSchemaOpened(false);
   return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
+    position: "apart",
+    pt: 0,
+    pb: "xs",
+    children: [/* @__PURE__ */ jsx(Group, {
+      position: "left",
+      children: /* @__PURE__ */ jsx(ModeToggler, {
+        mode,
+        setMode
+      })
+    }), /* @__PURE__ */ jsxs(Group, {
+      position: "right",
+      children: [!inUseMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "xs",
+        onClick: addPanel,
+        leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        }),
+        children: "Add a Panel"
+      }), inEditMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "xs",
+        onClick: openFilters,
+        leftIcon: /* @__PURE__ */ jsx(Filter$1, {
+          size: 20
+        }),
+        children: "Filters"
+      }), inEditMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "xs",
+        onClick: openQueries,
+        leftIcon: /* @__PURE__ */ jsx(Database, {
+          size: 20
+        }),
+        children: "Data Settings"
+      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "xs",
+        onClick: saveChanges,
+        disabled: !hasChanges,
+        leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        }),
+        children: "Save Changes"
+      }), !inUseMode && /* @__PURE__ */ jsx(Button, {
+        color: "red",
+        size: "xs",
+        disabled: !hasChanges,
+        onClick: revertChanges,
+        leftIcon: /* @__PURE__ */ jsx(Recycle, {
+          size: 20
+        }),
+        children: "Revert Changes"
+      }), /* @__PURE__ */ jsxs(Menu, {
+        children: [/* @__PURE__ */ jsx(Menu.Target, {
+          children: /* @__PURE__ */ jsx(Button, {
+            variant: "default",
+            size: "xs",
+            leftIcon: /* @__PURE__ */ jsx(Share, {
+              size: 20
+            }),
+            children: "Export"
+          })
+        }), /* @__PURE__ */ jsxs(Menu.Dropdown, {
+          children: [/* @__PURE__ */ jsx(Menu.Item, {
+            disabled: true,
+            children: "Download Data"
+          }), /* @__PURE__ */ jsx(Menu.Item, {
+            onClick: openSchema,
+            children: "View Schema"
+          })]
+        })]
+      })]
+    }), /* @__PURE__ */ jsx(FilterSettingsModal, {
+      opened: filtersOpened,
+      close: closeFilters,
+      filters,
+      setFilters
+    }), /* @__PURE__ */ jsx(DataEditorModal, {
+      opened: dataEditorOpened,
+      close: closeQueries
+    }), /* @__PURE__ */ jsx(ViewSchemaModal, {
+      opened: schemaOpened,
+      close: closeSchema,
+      getCurrentSchema
+    })]
+  });
+}
+function FullScreenPanel({
+  panel,
+  exitFullScreen
+}) {
+  return /* @__PURE__ */ jsxs(Stack, {
     sx: {
       flexGrow: 1,
       justifyContent: "flex-start"
     },
     children: [/* @__PURE__ */ jsx(Group, {
-      direction: "row",
       sx: {
         flexGrow: 0
       },
@@ -5666,6 +6234,77 @@ function usePanelFullScreen(panels) {
     fullScreenPanel
   };
 }
+function Filters({
+  filters,
+  filterValues,
+  setFilterValues
+}) {
+  const {
+    control,
+    handleSubmit
+  } = useForm({
+    defaultValues: filterValues
+  });
+  const filtersInOrder = React.useMemo(() => {
+    return _.sortBy(filters, "order");
+  }, [filters]);
+  if (filters.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("form", {
+    onSubmit: handleSubmit(setFilterValues),
+    children: /* @__PURE__ */ jsxs(Group, {
+      className: "dashboard-filters",
+      position: "apart",
+      p: "md",
+      mb: "md",
+      noWrap: true,
+      sx: {
+        boxShadow: "0px 0px 10px 0px rgba(0,0,0,.2)"
+      },
+      children: [/* @__PURE__ */ jsx(Group, {
+        align: "flex-start",
+        children: filtersInOrder.map((filter) => /* @__PURE__ */ jsx(Controller, {
+          name: filter.key,
+          control,
+          render: ({
+            field
+          }) => /* @__PURE__ */ jsx(Filter, {
+            filter,
+            ...field
+          })
+        }, filter.key))
+      }), /* @__PURE__ */ jsx(Group, {
+        sx: {
+          alignSelf: "flex-end"
+        },
+        children: /* @__PURE__ */ jsx(Button, {
+          color: "blue",
+          size: "sm",
+          type: "submit",
+          children: "Submit"
+        })
+      })]
+    })
+  });
+}
+function useFilters(dashboard) {
+  const [filters, setFilters] = React.useState(dashboard.filters);
+  const [filterValues, setFilterValues] = React.useState(() => {
+    const filters2 = dashboard.filters;
+    return filters2.reduce((ret, filter) => {
+      var _a;
+      ret[filter.key] = (_a = filter.config.default_value) != null ? _a : "";
+      return ret;
+    }, {});
+  });
+  return {
+    filters,
+    setFilters,
+    filterValues,
+    setFilterValues
+  };
+}
 function Dashboard({
   context,
   dashboard,
@@ -5677,11 +6316,20 @@ function Dashboard({
     APIClient.baseURL = config.apiBaseURL;
   }
   const [layoutFrozen, freezeLayout] = React.useState(false);
+  const [mode, setMode] = React.useState(DashboardMode.Edit);
   const [panels, setPanels] = React.useState(dashboard.panels);
   const [sqlSnippets, setSQLSnippets] = React.useState(dashboard.definition.sqlSnippets);
   const [queries, setQueries] = React.useState(dashboard.definition.queries);
-  const [mode, setMode] = React.useState(DashboardMode.Use);
+  const {
+    filters,
+    setFilters,
+    filterValues,
+    setFilterValues
+  } = useFilters(dashboard);
   const hasChanges = React.useMemo(() => {
+    if (!_.isEqual(filters, dashboard.filters)) {
+      return true;
+    }
     const cleanJSON = (v) => JSON.parse(JSON.stringify(v));
     const panelsEqual = _.isEqual(cleanJSON(panels), cleanJSON(dashboard.panels));
     if (!panelsEqual) {
@@ -5691,10 +6339,11 @@ function Dashboard({
       return true;
     }
     return !_.isEqual(queries, dashboard.definition.queries);
-  }, [dashboard, panels, sqlSnippets, queries]);
+  }, [dashboard, filters, panels, sqlSnippets, queries]);
   const saveDashboardChanges = async () => {
     const d = {
       ...dashboard,
+      filters,
       panels,
       definition: {
         sqlSnippets,
@@ -5704,6 +6353,7 @@ function Dashboard({
     await update(d);
   };
   const revertDashboardChanges = () => {
+    setFilters(dashboard.filters);
     setPanels(dashboard.panels);
     setSQLSnippets(dashboard.definition.sqlSnippets);
     setQueries(dashboard.definition.queries);
@@ -5722,7 +6372,7 @@ function Dashboard({
       description: "<p><br></p>",
       queryID: "",
       viz: {
-        type: "text",
+        type: "table",
         conf: {}
       }
     };
@@ -5782,48 +6432,57 @@ function Dashboard({
   return /* @__PURE__ */ jsx(ModalsProvider, {
     children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
       value: context,
-      children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
-        value: {
-          addPanel,
-          duplidatePanel,
-          removePanelByID,
-          viewPanelInFullScreen,
-          inFullScreen
-        },
-        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-          value: definitions,
-          children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
-            value: {
-              layoutFrozen,
-              freezeLayout,
-              mode,
-              inEditMode,
-              inLayoutMode,
-              inUseMode
-            },
-            children: [inFullScreen && /* @__PURE__ */ jsx(FullScreenPanel, {
-              panel: fullScreenPanel,
-              exitFullScreen
-            }), /* @__PURE__ */ jsxs(Box, {
-              className,
-              sx: {
-                position: "relative",
-                display: inFullScreen ? "none" : "block"
-              },
-              children: [/* @__PURE__ */ jsx(DashboardActions, {
+      children: /* @__PURE__ */ jsx(FilterValuesContext.Provider, {
+        value: filterValues,
+        children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
+          value: {
+            addPanel,
+            duplidatePanel,
+            removePanelByID,
+            viewPanelInFullScreen,
+            inFullScreen
+          },
+          children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+            value: definitions,
+            children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
+              value: {
+                layoutFrozen,
+                freezeLayout,
                 mode,
-                setMode,
-                hasChanges,
-                saveChanges: saveDashboardChanges,
-                revertChanges: revertDashboardChanges,
-                getCurrentSchema
-              }), /* @__PURE__ */ jsx(DashboardLayout, {
-                panels,
-                setPanels,
-                isDraggable: inLayoutMode,
-                isResizable: inLayoutMode
+                inEditMode,
+                inLayoutMode,
+                inUseMode
+              },
+              children: [inFullScreen && /* @__PURE__ */ jsx(FullScreenPanel, {
+                panel: fullScreenPanel,
+                exitFullScreen
+              }), /* @__PURE__ */ jsxs(Box, {
+                className,
+                sx: {
+                  position: "relative",
+                  display: inFullScreen ? "none" : "block"
+                },
+                children: [/* @__PURE__ */ jsx(DashboardActions, {
+                  mode,
+                  setMode,
+                  hasChanges,
+                  saveChanges: saveDashboardChanges,
+                  revertChanges: revertDashboardChanges,
+                  getCurrentSchema,
+                  filters,
+                  setFilters
+                }), /* @__PURE__ */ jsx(Filters, {
+                  filters,
+                  filterValues,
+                  setFilterValues
+                }), /* @__PURE__ */ jsx(DashboardLayout, {
+                  panels,
+                  setPanels,
+                  isDraggable: inLayoutMode,
+                  isResizable: inLayoutMode
+                })]
               })]
-            })]
+            })
           })
         })
       })
@@ -5837,7 +6496,7 @@ function ReadOnlyDashboardLayout({
   rowHeight = 10
 }) {
   return /* @__PURE__ */ jsx(ReactGridLayout, {
-    className,
+    className: `dashboard-layout ${className}`,
     rowHeight,
     isDraggable: false,
     isResizable: false,
@@ -5864,6 +6523,11 @@ function ReadOnlyDashboard({
   if (APIClient.baseURL !== config.apiBaseURL) {
     APIClient.baseURL = config.apiBaseURL;
   }
+  const {
+    filters,
+    filterValues,
+    setFilterValues
+  } = useFilters(dashboard);
   const definition = React.useMemo(() => ({
     ...dashboard.definition,
     setSQLSnippets: () => {
@@ -5880,42 +6544,49 @@ function ReadOnlyDashboard({
   return /* @__PURE__ */ jsx(ModalsProvider, {
     children: /* @__PURE__ */ jsx(ContextInfoContext.Provider, {
       value: context,
-      children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
-        value: {
-          addPanel: _.noop,
-          duplidatePanel: _.noop,
-          removePanelByID: _.noop,
-          viewPanelInFullScreen,
-          inFullScreen
-        },
-        children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
-          value: definition,
-          children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
-            value: {
-              layoutFrozen: true,
-              freezeLayout: () => {
-              },
-              mode: DashboardMode.Use,
-              inEditMode: false,
-              inLayoutMode: false,
-              inUseMode: true
-            },
-            children: [inFullScreen && /* @__PURE__ */ jsx(FullScreenPanel, {
-              panel: fullScreenPanel,
-              exitFullScreen
-            }), /* @__PURE__ */ jsx(Box, {
-              className,
-              sx: {
-                display: inFullScreen ? "none" : "block"
+      children: /* @__PURE__ */ jsx(FilterValuesContext.Provider, {
+        value: filterValues,
+        children: /* @__PURE__ */ jsx(DashboardActionContext.Provider, {
+          value: {
+            addPanel: _.noop,
+            duplidatePanel: _.noop,
+            removePanelByID: _.noop,
+            viewPanelInFullScreen,
+            inFullScreen
+          },
+          children: /* @__PURE__ */ jsx(DefinitionContext.Provider, {
+            value: definition,
+            children: /* @__PURE__ */ jsxs(LayoutStateContext.Provider, {
+              value: {
+                layoutFrozen: true,
+                freezeLayout: () => {
+                },
+                mode: DashboardMode.Use,
+                inEditMode: false,
+                inLayoutMode: false,
+                inUseMode: true
               },
-              children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
-                panels: dashboard.panels
-              })
-            })]
+              children: [inFullScreen && /* @__PURE__ */ jsx(FullScreenPanel, {
+                panel: fullScreenPanel,
+                exitFullScreen
+              }), /* @__PURE__ */ jsxs(Box, {
+                className,
+                sx: {
+                  display: inFullScreen ? "none" : "block"
+                },
+                children: [/* @__PURE__ */ jsx(Filters, {
+                  filters,
+                  filterValues,
+                  setFilterValues
+                }), /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
+                  panels: dashboard.panels
+                })]
+              })]
+            })
           })
         })
       })
     })
   });
 }
-export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, LayoutStateContext, Panel, PanelContext, ReadOnlyDashboard, initialContextInfoContext };
+export { ContextInfoContext, Dashboard, DashboardLayout, DashboardMode, DefinitionContext, FilterValuesContext, LayoutStateContext, Panel, PanelContext, ReadOnlyDashboard, initialContextInfoContext, initialFilterValuesContext };