@devtable/dashboard 1.7.0 → 1.10.0

package/dist/dashboard.es.js

@@ -29,13 +29,17 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
 import React from "react";
 import _ from "lodash";
 import { WidthProvider, Responsive } from "react-grid-layout";
-import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Switch, Slider, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
+import { Popover, Tooltip, Group, Text, ActionIcon, TextInput, Box, LoadingOverlay, Table, Select, Button, useMantineTheme, ColorSwatch, JsonInput, Anchor, Slider, ColorInput, Accordion, Switch, Modal, AppShell, Tabs, Menu, Divider, Container, SegmentedControl, Textarea } from "@mantine/core";
 import { useRequest } from "ahooks";
 import axios from "axios";
-import { InfoCircle, DeviceFloppy, Refresh, Trash, Settings, Paint, PlayerPlay, PlaylistAdd, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
+import { InfoCircle, DeviceFloppy, Refresh, Trash, PlaylistAdd, Settings, Resize, Paint, PlayerPlay, ClipboardText, Database, Recycle, Share } from "tabler-icons-react";
 import RichTextEditor, { RichTextEditor as RichTextEditor$1 } from "@mantine/rte";
 import { useInputState, useElementSize, randomId } from "@mantine/hooks";
 import ReactEChartsCore from "echarts-for-react/lib/core";
@@ -50,6 +54,7 @@ import { formList, useForm as useForm$1 } from "@mantine/form";
 import { Prism } from "@mantine/prism";
 var DashboardMode = /* @__PURE__ */ ((DashboardMode2) => {
   DashboardMode2["Use"] = "use";
+  DashboardMode2["Layout"] = "layout";
   DashboardMode2["Edit"] = "edit";
   return DashboardMode2;
 })(DashboardMode || {});
@@ -58,7 +63,9 @@ const initialContext$3 = {
   freezeLayout: () => {
   },
   mode: DashboardMode.Edit,
-  inEditMode: false
+  inEditMode: false,
+  inLayoutMode: false,
+  inUseMode: true
 };
 const LayoutStateContext = React.createContext(initialContext$3);
 const getRequest = (method) => {
@@ -707,7 +714,7 @@ function VizLineBarChart({
         y_axis_data_key,
         y_axis_data_formatter,
         name,
-        label_position = "top"
+        label_position
       } = _b, rest = __objRest(_b, [
         "y_axis_data_key",
         "y_axis_data_formatter",
@@ -717,7 +724,7 @@ function VizLineBarChart({
       const ret = __spreadValues({
         data: data.map((d) => d[y_axis_data_key]),
         label: {
-          show: true,
+          show: !!label_position,
           position: label_position
         },
         name
@@ -920,7 +927,7 @@ function VizTable({
     })]
   }));
 }
-function interpolateString(template, params = {}) {
+function interpolateString$1(template, params = {}) {
   const extendedParams = __spreadProps(__spreadValues({}, params), {
     numbro
   });
@@ -951,7 +958,7 @@ function VizText({
         sx: {
           fontSize: size
         },
-        children: interpolateString(template, data[0])
+        children: interpolateString$1(template, data[0])
       }), `${template}---${index2}`);
     })
   });
@@ -1110,6 +1117,420 @@ function VizPie({
     }
   });
 }
+var invariant = function() {
+};
+const clamp$1 = (min, max, v) => Math.min(Math.max(v, min), max);
+const progress = (from, to, value) => {
+  const toFromDifference = to - from;
+  return toFromDifference === 0 ? 1 : (value - from) / toFromDifference;
+};
+const mix = (from, to, progress2) => -progress2 * from + progress2 * to + from;
+const clamp = (min, max) => (v) => Math.max(Math.min(v, max), min);
+const sanitize = (v) => v % 1 ? Number(v.toFixed(5)) : v;
+const floatRegex = /(-)?([\d]*\.?[\d])+/g;
+const colorRegex = /(#[0-9a-f]{6}|#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))/gi;
+const singleColorRegex = /^(#[0-9a-f]{3}|#(?:[0-9a-f]{2}){2,4}|(rgb|hsl)a?\((-?[\d\.]+%?[,\s]+){2,3}\s*\/*\s*[\d\.]+%?\))$/i;
+function isString(v) {
+  return typeof v === "string";
+}
+const number = {
+  test: (v) => typeof v === "number",
+  parse: parseFloat,
+  transform: (v) => v
+};
+const alpha = Object.assign(Object.assign({}, number), { transform: clamp(0, 1) });
+Object.assign(Object.assign({}, number), { default: 1 });
+const createUnitType = (unit) => ({
+  test: (v) => isString(v) && v.endsWith(unit) && v.split(" ").length === 1,
+  parse: parseFloat,
+  transform: (v) => `${v}${unit}`
+});
+const percent = createUnitType("%");
+Object.assign(Object.assign({}, percent), { parse: (v) => percent.parse(v) / 100, transform: (v) => percent.transform(v * 100) });
+const isColorString = (type, testProp) => (v) => {
+  return Boolean(isString(v) && singleColorRegex.test(v) && v.startsWith(type) || testProp && Object.prototype.hasOwnProperty.call(v, testProp));
+};
+const splitColor = (aName, bName, cName) => (v) => {
+  if (!isString(v))
+    return v;
+  const [a, b, c, alpha2] = v.match(floatRegex);
+  return {
+    [aName]: parseFloat(a),
+    [bName]: parseFloat(b),
+    [cName]: parseFloat(c),
+    alpha: alpha2 !== void 0 ? parseFloat(alpha2) : 1
+  };
+};
+const hsla = {
+  test: isColorString("hsl", "hue"),
+  parse: splitColor("hue", "saturation", "lightness"),
+  transform: ({ hue, saturation, lightness, alpha: alpha$1 = 1 }) => {
+    return "hsla(" + Math.round(hue) + ", " + percent.transform(sanitize(saturation)) + ", " + percent.transform(sanitize(lightness)) + ", " + sanitize(alpha.transform(alpha$1)) + ")";
+  }
+};
+const clampRgbUnit = clamp(0, 255);
+const rgbUnit = Object.assign(Object.assign({}, number), { transform: (v) => Math.round(clampRgbUnit(v)) });
+const rgba = {
+  test: isColorString("rgb", "red"),
+  parse: splitColor("red", "green", "blue"),
+  transform: ({ red, green, blue, alpha: alpha$1 = 1 }) => "rgba(" + rgbUnit.transform(red) + ", " + rgbUnit.transform(green) + ", " + rgbUnit.transform(blue) + ", " + sanitize(alpha.transform(alpha$1)) + ")"
+};
+function parseHex(v) {
+  let r = "";
+  let g = "";
+  let b = "";
+  let a = "";
+  if (v.length > 5) {
+    r = v.substr(1, 2);
+    g = v.substr(3, 2);
+    b = v.substr(5, 2);
+    a = v.substr(7, 2);
+  } else {
+    r = v.substr(1, 1);
+    g = v.substr(2, 1);
+    b = v.substr(3, 1);
+    a = v.substr(4, 1);
+    r += r;
+    g += g;
+    b += b;
+    a += a;
+  }
+  return {
+    red: parseInt(r, 16),
+    green: parseInt(g, 16),
+    blue: parseInt(b, 16),
+    alpha: a ? parseInt(a, 16) / 255 : 1
+  };
+}
+const hex = {
+  test: isColorString("#"),
+  parse: parseHex,
+  transform: rgba.transform
+};
+const color = {
+  test: (v) => rgba.test(v) || hex.test(v) || hsla.test(v),
+  parse: (v) => {
+    if (rgba.test(v)) {
+      return rgba.parse(v);
+    } else if (hsla.test(v)) {
+      return hsla.parse(v);
+    } else {
+      return hex.parse(v);
+    }
+  },
+  transform: (v) => {
+    return isString(v) ? v : v.hasOwnProperty("red") ? rgba.transform(v) : hsla.transform(v);
+  }
+};
+const colorToken = "${c}";
+const numberToken = "${n}";
+function test(v) {
+  var _a, _b, _c, _d;
+  return isNaN(v) && isString(v) && ((_b = (_a = v.match(floatRegex)) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) + ((_d = (_c = v.match(colorRegex)) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) > 0;
+}
+function analyse$1(v) {
+  if (typeof v === "number")
+    v = `${v}`;
+  const values = [];
+  let numColors = 0;
+  const colors = v.match(colorRegex);
+  if (colors) {
+    numColors = colors.length;
+    v = v.replace(colorRegex, colorToken);
+    values.push(...colors.map(color.parse));
+  }
+  const numbers = v.match(floatRegex);
+  if (numbers) {
+    v = v.replace(floatRegex, numberToken);
+    values.push(...numbers.map(number.parse));
+  }
+  return { values, numColors, tokenised: v };
+}
+function parse(v) {
+  return analyse$1(v).values;
+}
+function createTransformer(v) {
+  const { values, numColors, tokenised } = analyse$1(v);
+  const numValues = values.length;
+  return (v2) => {
+    let output = tokenised;
+    for (let i = 0; i < numValues; i++) {
+      output = output.replace(i < numColors ? colorToken : numberToken, i < numColors ? color.transform(v2[i]) : sanitize(v2[i]));
+    }
+    return output;
+  };
+}
+const convertNumbersToZero = (v) => typeof v === "number" ? 0 : v;
+function getAnimatableNone(v) {
+  const parsed = parse(v);
+  const transformer = createTransformer(v);
+  return transformer(parsed.map(convertNumbersToZero));
+}
+const complex = { test, parse, createTransformer, getAnimatableNone };
+function hueToRgb(p2, q2, t) {
+  if (t < 0)
+    t += 1;
+  if (t > 1)
+    t -= 1;
+  if (t < 1 / 6)
+    return p2 + (q2 - p2) * 6 * t;
+  if (t < 1 / 2)
+    return q2;
+  if (t < 2 / 3)
+    return p2 + (q2 - p2) * (2 / 3 - t) * 6;
+  return p2;
+}
+function hslaToRgba({ hue, saturation, lightness, alpha: alpha2 }) {
+  hue /= 360;
+  saturation /= 100;
+  lightness /= 100;
+  let red = 0;
+  let green = 0;
+  let blue = 0;
+  if (!saturation) {
+    red = green = blue = lightness;
+  } else {
+    const q2 = lightness < 0.5 ? lightness * (1 + saturation) : lightness + saturation - lightness * saturation;
+    const p2 = 2 * lightness - q2;
+    red = hueToRgb(p2, q2, hue + 1 / 3);
+    green = hueToRgb(p2, q2, hue);
+    blue = hueToRgb(p2, q2, hue - 1 / 3);
+  }
+  return {
+    red: Math.round(red * 255),
+    green: Math.round(green * 255),
+    blue: Math.round(blue * 255),
+    alpha: alpha2
+  };
+}
+const mixLinearColor = (from, to, v) => {
+  const fromExpo = from * from;
+  const toExpo = to * to;
+  return Math.sqrt(Math.max(0, v * (toExpo - fromExpo) + fromExpo));
+};
+const colorTypes = [hex, rgba, hsla];
+const getColorType = (v) => colorTypes.find((type) => type.test(v));
+const mixColor = (from, to) => {
+  let fromColorType = getColorType(from);
+  let toColorType = getColorType(to);
+  let fromColor = fromColorType.parse(from);
+  let toColor = toColorType.parse(to);
+  if (fromColorType === hsla) {
+    fromColor = hslaToRgba(fromColor);
+    fromColorType = rgba;
+  }
+  if (toColorType === hsla) {
+    toColor = hslaToRgba(toColor);
+    toColorType = rgba;
+  }
+  const blended = Object.assign({}, fromColor);
+  return (v) => {
+    for (const key in blended) {
+      if (key !== "alpha") {
+        blended[key] = mixLinearColor(fromColor[key], toColor[key], v);
+      }
+    }
+    blended.alpha = mix(fromColor.alpha, toColor.alpha, v);
+    return fromColorType.transform(blended);
+  };
+};
+const isNum = (v) => typeof v === "number";
+const combineFunctions = (a, b) => (v) => b(a(v));
+const pipe = (...transformers) => transformers.reduce(combineFunctions);
+function getMixer(origin, target) {
+  if (isNum(origin)) {
+    return (v) => mix(origin, target, v);
+  } else if (color.test(origin)) {
+    return mixColor(origin, target);
+  } else {
+    return mixComplex(origin, target);
+  }
+}
+const mixArray = (from, to) => {
+  const output = [...from];
+  const numValues = output.length;
+  const blendValue = from.map((fromThis, i) => getMixer(fromThis, to[i]));
+  return (v) => {
+    for (let i = 0; i < numValues; i++) {
+      output[i] = blendValue[i](v);
+    }
+    return output;
+  };
+};
+const mixObject = (origin, target) => {
+  const output = Object.assign(Object.assign({}, origin), target);
+  const blendValue = {};
+  for (const key in output) {
+    if (origin[key] !== void 0 && target[key] !== void 0) {
+      blendValue[key] = getMixer(origin[key], target[key]);
+    }
+  }
+  return (v) => {
+    for (const key in blendValue) {
+      output[key] = blendValue[key](v);
+    }
+    return output;
+  };
+};
+function analyse(value) {
+  const parsed = complex.parse(value);
+  const numValues = parsed.length;
+  let numNumbers = 0;
+  let numRGB = 0;
+  let numHSL = 0;
+  for (let i = 0; i < numValues; i++) {
+    if (numNumbers || typeof parsed[i] === "number") {
+      numNumbers++;
+    } else {
+      if (parsed[i].hue !== void 0) {
+        numHSL++;
+      } else {
+        numRGB++;
+      }
+    }
+  }
+  return { parsed, numNumbers, numRGB, numHSL };
+}
+const mixComplex = (origin, target) => {
+  const template = complex.createTransformer(target);
+  const originStats = analyse(origin);
+  const targetStats = analyse(target);
+  const canInterpolate = originStats.numHSL === targetStats.numHSL && originStats.numRGB === targetStats.numRGB && originStats.numNumbers >= targetStats.numNumbers;
+  if (canInterpolate) {
+    return pipe(mixArray(originStats.parsed, targetStats.parsed), template);
+  } else {
+    return (p2) => `${p2 > 0 ? target : origin}`;
+  }
+};
+const mixNumber = (from, to) => (p2) => mix(from, to, p2);
+function detectMixerFactory(v) {
+  if (typeof v === "number") {
+    return mixNumber;
+  } else if (typeof v === "string") {
+    if (color.test(v)) {
+      return mixColor;
+    } else {
+      return mixComplex;
+    }
+  } else if (Array.isArray(v)) {
+    return mixArray;
+  } else if (typeof v === "object") {
+    return mixObject;
+  }
+}
+function createMixers(output, ease, customMixer) {
+  const mixers = [];
+  const mixerFactory = customMixer || detectMixerFactory(output[0]);
+  const numMixers = output.length - 1;
+  for (let i = 0; i < numMixers; i++) {
+    let mixer = mixerFactory(output[i], output[i + 1]);
+    if (ease) {
+      const easingFunction = Array.isArray(ease) ? ease[i] : ease;
+      mixer = pipe(easingFunction, mixer);
+    }
+    mixers.push(mixer);
+  }
+  return mixers;
+}
+function fastInterpolate([from, to], [mixer]) {
+  return (v) => mixer(progress(from, to, v));
+}
+function slowInterpolate(input, mixers) {
+  const inputLength = input.length;
+  const lastInputIndex = inputLength - 1;
+  return (v) => {
+    let mixerIndex = 0;
+    let foundMixerIndex = false;
+    if (v <= input[0]) {
+      foundMixerIndex = true;
+    } else if (v >= input[lastInputIndex]) {
+      mixerIndex = lastInputIndex - 1;
+      foundMixerIndex = true;
+    }
+    if (!foundMixerIndex) {
+      let i = 1;
+      for (; i < inputLength; i++) {
+        if (input[i] > v || i === lastInputIndex) {
+          break;
+        }
+      }
+      mixerIndex = i - 1;
+    }
+    const progressInRange = progress(input[mixerIndex], input[mixerIndex + 1], v);
+    return mixers[mixerIndex](progressInRange);
+  };
+}
+function interpolate(input, output, { clamp: isClamp = true, ease, mixer } = {}) {
+  const inputLength = input.length;
+  invariant(inputLength === output.length);
+  invariant(!ease || !Array.isArray(ease) || ease.length === inputLength - 1);
+  if (input[0] > input[inputLength - 1]) {
+    input = [].concat(input);
+    output = [].concat(output);
+    input.reverse();
+    output.reverse();
+  }
+  const mixers = createMixers(output, ease, mixer);
+  const interpolator = inputLength === 2 ? fastInterpolate(input, mixers) : slowInterpolate(input, mixers);
+  return isClamp ? (v) => interpolator(clamp$1(input[0], input[inputLength - 1], v)) : interpolator;
+}
+class InterpolateColor {
+  constructor({ valueRange, colorRange }) {
+    __publicField(this, "mapper");
+    this.mapper = interpolate(valueRange, colorRange);
+  }
+  getColor(value) {
+    return this.mapper(value);
+  }
+}
+function interpolateString(template, params = {}) {
+  const extendedParams = __spreadProps(__spreadValues({}, 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 getColorByColorConf(conf, dataRow) {
+  if (conf.type === "static") {
+    return conf.staticColor;
+  }
+  if (conf.type === "continuous") {
+    const mapper = new InterpolateColor(conf);
+    const value = dataRow[conf.valueField];
+    return mapper.getColor(value);
+  }
+  return "black";
+}
+function VizStats(_a) {
+  var _b = _a, {
+    conf: _c
+  } = _b, _d = _c, {
+    template,
+    size,
+    color: color2
+  } = _d, rest = __objRest(_d, [
+    "template",
+    "size",
+    "color"
+  ]), {
+    data
+  } = _b;
+  const finalColor = React.useMemo(() => {
+    return getColorByColorConf(color2, data[0]);
+  }, [color2, data]);
+  return /* @__PURE__ */ jsx(Text, __spreadProps(__spreadValues({}, rest), {
+    color: finalColor,
+    sx: {
+      fontSize: size
+    },
+    children: interpolateString(template, data[0])
+  }));
+}
 function renderViz(width, height, data, viz) {
   const props = {
     width,
@@ -1126,6 +1547,8 @@ function renderViz(width, height, data, viz) {
       return /* @__PURE__ */ jsx(VizTable, __spreadValues({}, props));
     case "text":
       return /* @__PURE__ */ jsx(VizText, __spreadValues({}, props));
+    case "stats":
+      return /* @__PURE__ */ jsx(VizStats, __spreadValues({}, props));
     case "bar-3d":
       return /* @__PURE__ */ jsx(VizBar3D, __spreadValues({}, props));
     case "pie":
@@ -1349,8 +1772,8 @@ function MantineColorSelector({
 }) {
   const theme = useMantineTheme();
   const themeColors = React.useMemo(() => {
-    return Object.entries(theme.colors).map(([color, profile]) => ({
-      label: color,
+    return Object.entries(theme.colors).map(([color2, profile]) => ({
+      label: color2,
       value: profile[6]
     }));
   }, [theme]);
@@ -1400,6 +1823,9 @@ const numbroFormatExample = JSON.stringify({
   mantissa: 2
 }, null, 2);
 const labelPositions = [{
+  label: "off",
+  value: ""
+}, {
   label: "top",
   value: "top"
 }, {
@@ -1439,6 +1865,106 @@ const labelPositions = [{
   label: "insideBottomRight",
   value: "insideBottomRight"
 }];
+function SeriesItemField({
+  form,
+  index: index2
+}) {
+  const value = form.values.series[index2];
+  const {
+    type
+  } = value;
+  return /* @__PURE__ */ jsxs(Group, {
+    direction: "column",
+    grow: true,
+    my: 0,
+    p: "md",
+    pr: 40,
+    sx: {
+      border: "1px solid #eee",
+      position: "relative"
+    },
+    children: [/* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      children: [/* @__PURE__ */ jsx(Select, __spreadValues({
+        label: "Type",
+        data: [{
+          label: "Line",
+          value: "line"
+        }, {
+          label: "Bar",
+          value: "bar"
+        }, {
+          label: "Scatter",
+          value: "scatter",
+          disabled: true
+        }]
+      }, form.getListInputProps("series", index2, "type"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Name",
+        required: true,
+        sx: {
+          flex: 1
+        }
+      }, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+        label: "Value key",
+        required: true
+      }, form.getListInputProps("series", index2, "y_axis_data_key")))]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "row",
+      grow: true,
+      noWrap: true,
+      align: "top",
+      children: [type === "bar" && /* @__PURE__ */ jsx(Fragment, {
+        children: /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Stack",
+          placeholder: "Stack bars by this ID"
+        }, form.getListInputProps("series", index2, "stack")))
+      }), /* @__PURE__ */ jsx(Select, __spreadValues({
+        label: "Label Position",
+        data: labelPositions
+      }, form.getListInputProps("series", index2, "label_position"))), /* @__PURE__ */ jsx(JsonInput, __spreadValues({
+        sx: {
+          label: {
+            width: "100%"
+          }
+        },
+        label: /* @__PURE__ */ jsxs(Group, {
+          position: "apart",
+          children: [/* @__PURE__ */ jsx(Text, {
+            children: "Value Formatter"
+          }), /* @__PURE__ */ jsx(Anchor, {
+            href: "https://numbrojs.com/format.html",
+            target: "_blank",
+            children: "Formats"
+          })]
+        }),
+        placeholder: numbroFormatExample,
+        minRows: 4,
+        maxRows: 12,
+        autosize: true
+      }, form.getListInputProps("series", index2, "y_axis_data_formatter")))]
+    }), /* @__PURE__ */ jsxs(Group, {
+      direction: "column",
+      grow: true,
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: "Color"
+      }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("series", index2, "color")))]
+    }), /* @__PURE__ */ jsx(ActionIcon, {
+      color: "red",
+      variant: "hover",
+      onClick: () => form.removeListItem("series", index2),
+      sx: {
+        position: "absolute",
+        top: 15,
+        right: 5
+      },
+      children: /* @__PURE__ */ jsx(Trash, {
+        size: 16
+      })
+    })]
+  }, index2);
+}
 function withDefaults(series) {
   function setDefaults({
     type,
@@ -1448,7 +1974,7 @@ function withDefaults(series) {
     y_axis_data_formatter = "",
     label_position = "top",
     stack = "1",
-    color = "black"
+    color: color2 = "black"
   }) {
     return {
       type,
@@ -1458,7 +1984,7 @@ function withDefaults(series) {
       y_axis_data_formatter,
       label_position,
       stack,
-      color
+      color: color2
     };
   }
   return series.map(setDefaults);
@@ -1548,82 +2074,10 @@ function VizLineBarChartPanel({
           mt: "xl",
           mb: 0,
           children: "Series"
-        }), form.values.series.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__ */ jsxs(Group, {
-            direction: "row",
-            grow: true,
-            noWrap: true,
-            children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Name",
-              required: true,
-              sx: {
-                flex: 1
-              }
-            }, form.getListInputProps("series", index2, "name"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Stack",
-              placeholder: "Stack bars by this ID"
-            }, form.getListInputProps("series", index2, "stack"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-              label: "Value key",
-              required: true
-            }, form.getListInputProps("series", index2, "y_axis_data_key")))]
-          }), /* @__PURE__ */ jsxs(Group, {
-            direction: "row",
-            grow: true,
-            noWrap: true,
-            align: "top",
-            children: [/* @__PURE__ */ jsx(Select, __spreadValues({
-              label: "Label Position",
-              data: labelPositions
-            }, form.getListInputProps("series", index2, "label_position"))), /* @__PURE__ */ jsx(JsonInput, __spreadValues({
-              sx: {
-                label: {
-                  width: "100%"
-                }
-              },
-              label: /* @__PURE__ */ jsxs(Group, {
-                position: "apart",
-                children: [/* @__PURE__ */ jsx(Text, {
-                  children: "Value Formatter"
-                }), /* @__PURE__ */ jsx(Anchor, {
-                  href: "https://numbrojs.com/format.html",
-                  target: "_blank",
-                  children: "Formats"
-                })]
-              }),
-              placeholder: numbroFormatExample,
-              minRows: 4,
-              maxRows: 12,
-              autosize: true
-            }, form.getListInputProps("series", index2, "y_axis_data_formatter")))]
-          }), /* @__PURE__ */ jsxs(Group, {
-            direction: "column",
-            grow: true,
-            children: [/* @__PURE__ */ jsx(Text, {
-              children: "Color"
-            }), /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, form.getListInputProps("series", index2, "color")))]
-          }), /* @__PURE__ */ jsx(ActionIcon, {
-            color: "red",
-            variant: "hover",
-            onClick: () => form.removeListItem("series", index2),
-            sx: {
-              position: "absolute",
-              top: 15,
-              right: 5
-            },
-            children: /* @__PURE__ */ jsx(Trash, {
-              size: 16
-            })
-          })]
-        }, index2)), /* @__PURE__ */ jsx(Group, {
+        }), form.values.series.map((_item, index2) => /* @__PURE__ */ jsx(SeriesItemField, {
+          form,
+          index: index2
+        })), /* @__PURE__ */ jsx(Group, {
           position: "center",
           mt: "xs",
           children: /* @__PURE__ */ jsx(Button, {
@@ -1701,75 +2155,443 @@ function VizPiePanel({
     })
   });
 }
-function SunburstPanel({
-  conf: {
-    label_field,
-    value_field
-  },
-  setConf
+const marks = [{
+  label: "initial",
+  value: 0
+}, {
+  label: "500",
+  value: 25
+}, {
+  label: "700",
+  value: 50
+}, {
+  label: "semibold",
+  value: 75
+}, {
+  label: "bold",
+  value: 100
+}];
+function MantineFontWeightSlider({
+  label,
+  value,
+  onChange
 }) {
-  const form = useForm$1({
-    initialValues: {
-      label_field,
-      value_field
+  var _a, _b;
+  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
+  React.useEffect(() => {
+    const match = marks.find((s) => s.value === mark);
+    if (match) {
+      onChange(match.label);
     }
-  });
-  return /* @__PURE__ */ jsx(Group, {
+  }, [mark]);
+  return /* @__PURE__ */ jsxs(Group, {
     direction: "column",
-    mt: "md",
-    spacing: "xs",
     grow: true,
-    children: /* @__PURE__ */ jsxs("form", {
-      onSubmit: form.onSubmit(setConf),
-      children: [/* @__PURE__ */ jsxs(Group, {
-        position: "apart",
-        mb: "lg",
-        sx: {
-          position: "relative"
-        },
-        children: [/* @__PURE__ */ jsx(Text, {
-          children: "Sunburst Config"
-        }), /* @__PURE__ */ jsx(ActionIcon, {
-          type: "submit",
-          mr: 5,
-          variant: "filled",
-          color: "blue",
-          children: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          })
-        })]
-      }), /* @__PURE__ */ jsxs(Group, {
-        direction: "column",
-        mt: "md",
-        spacing: "xs",
-        grow: true,
-        p: "md",
-        mb: "sm",
-        sx: {
-          border: "1px solid #eee",
-          borderRadius: "5px"
-        },
-        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Label Field",
-          required: true,
-          sx: {
-            flex: 1
-          }
-        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
-          label: "Value Field",
-          placeholder: "get column value by this field",
-          required: true,
-          sx: {
-            flex: 1
-          }
-        }, form.getInputProps("value_field")))]
-      })]
-    })
+    spacing: "xs",
+    mb: "lg",
+    children: [/* @__PURE__ */ jsx(Text, {
+      children: label
+    }), /* @__PURE__ */ jsx(Slider, {
+      label: null,
+      marks,
+      value: mark,
+      onChange: setMark,
+      step: 25,
+      placeholder: "Pick a font size"
+    })]
   });
 }
-const valueTypes = Object.values(ValueType).map((v) => ({
-  label: v,
-  value: v
+function TextArrayInput({
+  label,
+  value,
+  onChange
+}) {
+  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
+  const add = React.useCallback(() => {
+    setValues((s) => [...s, ""]);
+  }, [setValues]);
+  const del = React.useCallback((index2) => {
+    setValues((s) => {
+      s.splice(index2, 1);
+      return [...s];
+    });
+  }, [setValues]);
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, value);
+  }, [values, value]);
+  const submit = () => {
+    onChange(values.map((s) => s.toString()));
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: label
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        mr: 5,
+        variant: "filled",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(TextInput, {
+        value: v,
+        onChange: (event) => {
+          const newValue = event.currentTarget.value;
+          setValues((s) => {
+            s.splice(i, 1, newValue);
+            return [...s];
+          });
+        },
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
+          onClick: () => del(i),
+          color: "red",
+          children: /* @__PURE__ */ jsx(Trash, {
+            size: 14
+          })
+        }),
+        sx: {
+          width: "45%"
+        }
+      })), /* @__PURE__ */ jsx(ActionIcon, {
+        onClick: add,
+        color: "blue",
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        })
+      })]
+    })]
+  });
+}
+function ColorArrayInput({
+  label,
+  value,
+  onChange
+}) {
+  const [values, setValues] = React.useState(Array.isArray(value) ? [...value] : []);
+  const add = React.useCallback(() => {
+    setValues((s) => [...s, ""]);
+  }, [setValues]);
+  const del = React.useCallback((index2) => {
+    setValues((s) => {
+      s.splice(index2, 1);
+      return [...s];
+    });
+  }, [setValues]);
+  const changed = React.useMemo(() => {
+    return !_.isEqual(values, value);
+  }, [values, value]);
+  const submit = () => {
+    onChange(values.map((s) => s.toString()));
+  };
+  const theme = useMantineTheme();
+  const swatches = React.useMemo(() => {
+    return Object.entries(theme.colors).map(([_color, profile]) => profile[6]);
+  }, [theme]);
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsxs(Group, {
+      position: "left",
+      children: [/* @__PURE__ */ jsx(Text, {
+        children: label
+      }), /* @__PURE__ */ jsx(ActionIcon, {
+        mr: 5,
+        variant: "filled",
+        color: "blue",
+        disabled: !changed,
+        onClick: submit,
+        children: /* @__PURE__ */ jsx(DeviceFloppy, {
+          size: 20
+        })
+      })]
+    }), /* @__PURE__ */ jsxs(Group, {
+      children: [values.map((v, i) => /* @__PURE__ */ jsx(ColorInput, {
+        value: v,
+        onChange: (color2) => {
+          setValues((s) => {
+            s.splice(i, 1, color2);
+            return [...s];
+          });
+        },
+        swatches,
+        rightSection: /* @__PURE__ */ jsx(ActionIcon, {
+          onClick: () => del(i),
+          color: "red",
+          children: /* @__PURE__ */ jsx(Trash, {
+            size: 14
+          })
+        }),
+        sx: {
+          width: "45%"
+        }
+      })), /* @__PURE__ */ jsx(ActionIcon, {
+        onClick: add,
+        color: "blue",
+        variant: "outline",
+        children: /* @__PURE__ */ jsx(PlaylistAdd, {
+          size: 20
+        })
+      })]
+    })]
+  });
+}
+function VizStatsPanel({
+  conf,
+  setConf
+}) {
+  const defaultValues = _.merge({}, {
+    align: "center",
+    size: "100px",
+    template: "",
+    weight: "bold",
+    color: {
+      type: "static",
+      staticColor: "red"
+    }
+  }, conf);
+  const {
+    control,
+    handleSubmit,
+    watch,
+    formState: {
+      isDirty
+    }
+  } = useForm({
+    defaultValues
+  });
+  const colorType = watch("color.type");
+  watch("color.valueField");
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    mt: "md",
+    spacing: "xs",
+    grow: true,
+    noWrap: true,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: handleSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        py: "md",
+        pl: "md",
+        sx: {
+          borderBottom: "1px solid #eee",
+          background: "#efefef"
+        },
+        children: [/* @__PURE__ */ jsx(Text, {
+          weight: 500,
+          children: "Stats Configurations"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          disabled: !isDirty,
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */ jsxs(Accordion, {
+        offsetIcon: false,
+        multiple: true,
+        initialState: {
+          0: true,
+          2: true
+        },
+        children: [/* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Content",
+          children: /* @__PURE__ */ jsx(Group, {
+            direction: "column",
+            grow: true,
+            children: /* @__PURE__ */ jsx(Controller, {
+              name: "template",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                placeholder: "Time: ${new Date().toISOString()}",
+                label: "Content Template",
+                required: true,
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            })
+          })
+        }), /* @__PURE__ */ jsxs(Accordion.Item, {
+          label: "Font",
+          children: [/* @__PURE__ */ jsx(Group, {
+            direction: "column",
+            grow: true,
+            children: /* @__PURE__ */ jsx(Controller, {
+              name: "size",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                label: "Font Size",
+                placeholder: "10px, 1em, 1rem, 100%...",
+                sx: {
+                  flex: 1
+                }
+              }, field))
+            })
+          }), /* @__PURE__ */ jsx(Group, {
+            position: "apart",
+            grow: true,
+            sx: {
+              "> *": {
+                flexGrow: 1,
+                maxWidth: "100%"
+              }
+            },
+            children: /* @__PURE__ */ jsx(Controller, {
+              name: "weight",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(MantineFontWeightSlider, __spreadValues({
+                label: "Font Weight"
+              }, field))
+            })
+          })]
+        }), /* @__PURE__ */ jsx(Accordion.Item, {
+          label: "Color",
+          children: /* @__PURE__ */ jsxs(Group, {
+            direction: "column",
+            grow: true,
+            children: [/* @__PURE__ */ jsx(Controller, {
+              name: "color.type",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(Select, __spreadValues({
+                label: "Color Type",
+                data: [{
+                  label: "Static Color",
+                  value: "static"
+                }, {
+                  label: "Continuous Color",
+                  value: "continuous"
+                }]
+              }, field))
+            }), colorType === "static" && /* @__PURE__ */ jsx(Controller, {
+              name: "color.staticColor",
+              control,
+              render: ({
+                field
+              }) => /* @__PURE__ */ jsx(MantineColorSelector, __spreadValues({}, field))
+            }), colorType === "continuous" && /* @__PURE__ */ jsxs(Fragment, {
+              children: [/* @__PURE__ */ jsx(Controller, {
+                name: "color.valueField",
+                control,
+                defaultValue: "",
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(TextInput, __spreadValues({
+                  placeholder: "Calculate color with this field",
+                  label: "Value Field",
+                  required: true,
+                  sx: {
+                    flex: 1
+                  }
+                }, field))
+              }), /* @__PURE__ */ jsx(Controller, {
+                name: "color.valueRange",
+                control,
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(TextArrayInput, __spreadValues({
+                  label: "Value Range"
+                }, field))
+              }), /* @__PURE__ */ jsx(Controller, {
+                name: "color.colorRange",
+                control,
+                render: ({
+                  field
+                }) => /* @__PURE__ */ jsx(ColorArrayInput, __spreadValues({
+                  label: "Color Range"
+                }, field))
+              })]
+            })]
+          })
+        })]
+      })]
+    })
+  });
+}
+function SunburstPanel({
+  conf: {
+    label_field,
+    value_field
+  },
+  setConf
+}) {
+  const form = useForm$1({
+    initialValues: {
+      label_field,
+      value_field
+    }
+  });
+  return /* @__PURE__ */ jsx(Group, {
+    direction: "column",
+    mt: "md",
+    spacing: "xs",
+    grow: true,
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: form.onSubmit(setConf),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "apart",
+        mb: "lg",
+        sx: {
+          position: "relative"
+        },
+        children: [/* @__PURE__ */ jsx(Text, {
+          children: "Sunburst Config"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */ jsxs(Group, {
+        direction: "column",
+        mt: "md",
+        spacing: "xs",
+        grow: true,
+        p: "md",
+        mb: "sm",
+        sx: {
+          border: "1px solid #eee",
+          borderRadius: "5px"
+        },
+        children: [/* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Label Field",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, form.getInputProps("label_field"))), /* @__PURE__ */ jsx(TextInput, __spreadValues({
+          label: "Value Field",
+          placeholder: "get column value by this field",
+          required: true,
+          sx: {
+            flex: 1
+          }
+        }, form.getInputProps("value_field")))]
+      })]
+    })
+  });
+}
+const valueTypes = Object.values(ValueType).map((v) => ({
+  label: v,
+  value: v
 }));
 function ValueTypeSelector({
   label,
@@ -1785,16 +2607,16 @@ function ValueTypeSelector({
     sx
   });
 }
-function VizTablePanel(_a) {
-  var _b = _a, {
-    conf: _c
-  } = _b, _d = _c, {
+function VizTablePanel(_e) {
+  var _f = _e, {
+    conf: _g
+  } = _f, _h = _g, {
     columns
-  } = _d, restConf = __objRest(_d, [
+  } = _h, restConf = __objRest(_h, [
     "columns"
   ]), {
     setConf
-  } = _b;
+  } = _f;
   const form = useForm$1({
     initialValues: __spreadValues({
       id_field: "id",
@@ -2006,52 +2828,6 @@ function VizTablePanel(_a) {
     })
   });
 }
-const marks = [{
-  label: "initial",
-  value: 0
-}, {
-  label: "500",
-  value: 25
-}, {
-  label: "700",
-  value: 50
-}, {
-  label: "semibold",
-  value: 75
-}, {
-  label: "bold",
-  value: 100
-}];
-function MantineFontWeightSlider({
-  label,
-  value,
-  onChange
-}) {
-  var _a, _b;
-  const [mark, setMark] = React.useState((_b = (_a = marks.find((m2) => m2.label === value)) == null ? void 0 : _a.value) != null ? _b : marks[0].value);
-  React.useEffect(() => {
-    const match = marks.find((s) => s.value === mark);
-    if (match) {
-      onChange(match.label);
-    }
-  }, [mark]);
-  return /* @__PURE__ */ jsxs(Group, {
-    direction: "column",
-    grow: true,
-    spacing: "xs",
-    mb: "lg",
-    children: [/* @__PURE__ */ jsx(Text, {
-      children: label
-    }), /* @__PURE__ */ jsx(Slider, {
-      label: null,
-      marks,
-      value: mark,
-      onChange: setMark,
-      step: 25,
-      placeholder: "Pick a font size"
-    })]
-  });
-}
 const sampleParagraphs = [{
   align: "center",
   size: "xl",
@@ -2191,6 +2967,10 @@ const types = [{
   value: "text",
   label: "Text",
   Panel: VizTextPanel
+}, {
+  value: "stats",
+  label: "Stats",
+  Panel: VizStatsPanel
 }, {
   value: "table",
   label: "Table",
@@ -2579,10 +3359,15 @@ function ModeToggler({
         size: 20
       }), "Use"),
       value: DashboardMode.Use
+    }, {
+      label: renderLabel(/* @__PURE__ */ jsx(Resize, {
+        size: 20
+      }), "Layout"),
+      value: DashboardMode.Layout
     }, {
       label: renderLabel(/* @__PURE__ */ jsx(Paint, {
         size: 20
-      }), "Edit"),
+      }), "Content"),
       value: DashboardMode.Edit
     }]
   });
@@ -2791,7 +3576,8 @@ function DataSourceForm({
   });
 }
 function DataSourceEditor({
-  id
+  id,
+  setID
 }) {
   const {
     dataSources,
@@ -2811,7 +3597,8 @@ function DataSourceEditor({
       prevs.splice(index22, 1, value);
       return [...prevs];
     });
-  }, [id, dataSources, setDataSources]);
+    setID(value.id);
+  }, [id, dataSources, setDataSources, setID]);
   if (!id) {
     return null;
   }
@@ -2943,7 +3730,8 @@ function EditDataSourcesModal({
         setID
       }),
       children: [/* @__PURE__ */ jsx(DataSourceEditor, {
-        id
+        id,
+        setID
       }), /* @__PURE__ */ jsx(DataPreview, {
         id
       })]
@@ -3036,46 +3824,48 @@ WHERE \${author_time_condition}`;
   }) => {
     setSQLSnippets(snippets);
   };
-  return /* @__PURE__ */ jsxs(Group, {
+  return /* @__PURE__ */ jsx(Group, {
     direction: "column",
     grow: true,
     sx: {
       border: "1px solid #eee"
     },
-    children: [/* @__PURE__ */ jsxs(Group, {
-      position: "left",
-      pl: "md",
-      py: "md",
-      sx: {
-        borderBottom: "1px solid #eee",
-        background: "#efefef",
-        flexGrow: 0
-      },
-      children: [/* @__PURE__ */ jsx(Text, {
-        weight: 500,
-        children: "SQL Snippets"
-      }), /* @__PURE__ */ jsx(ActionIcon, {
-        type: "submit",
-        mr: 5,
-        variant: "filled",
-        color: "blue",
-        disabled: !changed,
-        children: /* @__PURE__ */ jsx(DeviceFloppy, {
-          size: 20
-        })
-      })]
-    }), /* @__PURE__ */ jsxs(Group, {
-      px: "md",
-      pb: "md",
-      children: [/* @__PURE__ */ jsx(Prism, {
-        language: "sql",
+    children: /* @__PURE__ */ jsxs("form", {
+      onSubmit: form.onSubmit(submit),
+      children: [/* @__PURE__ */ jsxs(Group, {
+        position: "left",
+        pl: "md",
+        py: "md",
         sx: {
-          width: "100%"
+          borderBottom: "1px solid #eee",
+          background: "#efefef",
+          flexGrow: 0
         },
-        noCopy: true,
-        trim: false,
-        colorScheme: "dark",
-        children: `-- You may refer context data *by name*
+        children: [/* @__PURE__ */ jsx(Text, {
+          weight: 500,
+          children: "SQL Snippets"
+        }), /* @__PURE__ */ jsx(ActionIcon, {
+          type: "submit",
+          mr: 5,
+          variant: "filled",
+          color: "blue",
+          disabled: !changed,
+          children: /* @__PURE__ */ jsx(DeviceFloppy, {
+            size: 20
+          })
+        })]
+      }), /* @__PURE__ */ jsxs(Group, {
+        px: "md",
+        pb: "md",
+        children: [/* @__PURE__ */ jsx(Prism, {
+          language: "sql",
+          sx: {
+            width: "100%"
+          },
+          noCopy: true,
+          trim: false,
+          colorScheme: "dark",
+          children: `-- You may refer context data *by name*
 -- in SQL or VizConfig.
 
 ${sampleSQL}
@@ -3083,15 +3873,13 @@ ${sampleSQL}
 -- where author_time_condition is:
 author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].toISOString()}'
  `
-      }), /* @__PURE__ */ jsx(Group, {
-        direction: "column",
-        sx: {
-          width: "100%",
-          position: "relative"
-        },
-        grow: true,
-        children: /* @__PURE__ */ jsxs("form", {
-          onSubmit: form.onSubmit(submit),
+        }), /* @__PURE__ */ jsxs(Group, {
+          direction: "column",
+          sx: {
+            width: "100%",
+            position: "relative"
+          },
+          grow: true,
           children: [form.values.snippets.map((_item, index2) => /* @__PURE__ */ jsxs(Group, {
             direction: "column",
             grow: true,
@@ -3136,9 +3924,9 @@ author_time BETWEEN '\${timeRange?.[0].toISOString()}' AND '\${timeRange?.[1].to
               children: "Add a snippet"
             })
           })]
-        })
+        })]
       })]
-    })]
+    })
   });
 }
 function EditSQLSnippetsModal({
@@ -3194,13 +3982,17 @@ function DashboardActions({
   addPanel,
   saveChanges
 }) {
+  const {
+    inLayoutMode,
+    inEditMode,
+    inUseMode
+  } = React.useContext(LayoutStateContext);
   const [dataSourcesOpened, setDataSourcesOpened] = React.useState(false);
   const openDataSources = () => setDataSourcesOpened(true);
   const closeDataSources = () => setDataSourcesOpened(false);
   const [sqlSnippetsOpened, setSQLSnippetsOpened] = React.useState(false);
   const openSQLSnippets = () => setSQLSnippetsOpened(true);
   const closeSQLSnippets = () => setSQLSnippetsOpened(false);
-  const inEditMode = mode === DashboardMode.Edit;
   return /* @__PURE__ */ jsxs(Group, {
     position: "apart",
     pt: "sm",
@@ -3211,59 +4003,57 @@ function DashboardActions({
         mode,
         setMode
       })
-    }), inEditMode && /* @__PURE__ */ jsxs(Fragment, {
-      children: [/* @__PURE__ */ jsxs(Group, {
-        position: "right",
-        children: [/* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: addPanel,
-          leftIcon: /* @__PURE__ */ jsx(PlaylistAdd, {
-            size: 20
-          }),
-          children: "Add a Panel"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: openSQLSnippets,
-          leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
-            size: 20
-          }),
-          children: "SQL Snippets"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: openDataSources,
-          leftIcon: /* @__PURE__ */ jsx(Database, {
-            size: 20
-          }),
-          children: "Data Sources"
-        }), /* @__PURE__ */ jsx(Button, {
-          variant: "default",
-          size: "sm",
-          onClick: saveChanges,
-          disabled: !hasChanges,
-          leftIcon: /* @__PURE__ */ jsx(DeviceFloppy, {
-            size: 20
-          }),
-          children: "Save Changes"
-        }), /* @__PURE__ */ jsx(Button, {
-          color: "red",
-          size: "sm",
-          disabled: !hasChanges,
-          leftIcon: /* @__PURE__ */ jsx(Recycle, {
-            size: 20
-          }),
-          children: "Revert Changes"
-        })]
-      }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
-        opened: dataSourcesOpened,
-        close: closeDataSources
-      }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
-        opened: sqlSnippetsOpened,
-        close: closeSQLSnippets
+    }), /* @__PURE__ */ jsxs(Group, {
+      position: "right",
+      children: [inLayoutMode && /* @__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: openSQLSnippets,
+        leftIcon: /* @__PURE__ */ jsx(ClipboardText, {
+          size: 20
+        }),
+        children: "SQL Snippets"
+      }), inEditMode && /* @__PURE__ */ jsx(Button, {
+        variant: "default",
+        size: "sm",
+        onClick: openDataSources,
+        leftIcon: /* @__PURE__ */ jsx(Database, {
+          size: 20
+        }),
+        children: "Data Sources"
+      }), !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,
+        leftIcon: /* @__PURE__ */ jsx(Recycle, {
+          size: 20
+        }),
+        children: "Revert Changes"
       })]
-    }), !inEditMode && /* @__PURE__ */ jsx(Button, {
+    }), /* @__PURE__ */ jsx(EditDataSourcesModal, {
+      opened: dataSourcesOpened,
+      close: closeDataSources
+    }), /* @__PURE__ */ jsx(EditSQLSnippetsModal, {
+      opened: sqlSnippetsOpened,
+      close: closeSQLSnippets
+    }), inUseMode && /* @__PURE__ */ jsx(Button, {
       variant: "default",
       size: "sm",
       disabled: true,
@@ -3337,6 +4127,8 @@ function Dashboard({
     });
   };
   const inEditMode = mode === DashboardMode.Edit;
+  const inLayoutMode = mode === DashboardMode.Layout;
+  const inUseMode = mode === DashboardMode.Use;
   const definitions = React.useMemo(() => ({
     sqlSnippets,
     setSQLSnippets,
@@ -3354,7 +4146,9 @@ function Dashboard({
             layoutFrozen,
             freezeLayout,
             mode,
-            inEditMode
+            inEditMode,
+            inLayoutMode,
+            inUseMode
           },
           children: [/* @__PURE__ */ jsx(DashboardActions, {
             mode,
@@ -3365,8 +4159,8 @@ function Dashboard({
           }), /* @__PURE__ */ jsx(DashboardLayout, {
             panels,
             setPanels,
-            isDraggable: inEditMode && !layoutFrozen,
-            isResizable: inEditMode && !layoutFrozen,
+            isDraggable: inLayoutMode,
+            isResizable: inLayoutMode,
             onRemoveItem: removePanelByID,
             setLocalCols,
             setBreakpoint
@@ -3433,7 +4227,9 @@ function ReadOnlyDashboard({
             freezeLayout: () => {
             },
             mode: DashboardMode.Use,
-            inEditMode: false
+            inEditMode: false,
+            inLayoutMode: false,
+            inUseMode: true
           },
           children: /* @__PURE__ */ jsx(ReadOnlyDashboardLayout, {
             panels: dashboard.panels