@milaboratories/graph-maker 1.1.195 → 1.1.196

package/dist/forms/AxesSettingsForm/HeatmapAxesSettingsForm.vue.js

@@ -1,22 +1,22 @@
-import { defineComponent as h, computed as p, createElementBlock as n, openBlock as u, createElementVNode as i, createVNode as s, withCtx as m, createCommentVNode as d, unref as l, createTextVNode as v } from "vue";
-import { PlBtnGroup as r, PlTextField as X, PlCheckbox as V, Slider as U, PlToggleSwitch as E } from "@platforma-sdk/ui-vue";
-import { useStore as D } from "../../store.js";
+import { defineComponent as h, computed as p, createElementBlock as n, openBlock as u, createElementVNode as i, createVNode as s, withCtx as m, createCommentVNode as d, unref as t, createTextVNode as x } from "vue";
+import { PlBtnGroup as r, PlTextField as X, PlCheckbox as v, Slider as U, PlToggleSwitch as E } from "@platforma-sdk/ui-vue";
+import { useStore as z } from "../../store.js";
 import Y from "../../components/CollapsableBlock.vue.js";
 import O from "../../icons/Right.vue.js";
 import N from "../../icons/Down.vue.js";
-import x from "../../components/BtnIconGroup.vue.js";
-import Z from "../../icons/AlignLeft.vue.js";
-import c from "../../icons/AlignCenter.vue.js";
+import V from "../../components/BtnIconGroup.vue.js";
+import D from "../../icons/AlignLeft.vue.js";
+import Z from "../../icons/AlignCenter.vue.js";
 import W from "../../icons/AlignRight.vue.js";
 import $ from "../../icons/FrameFull.vue.js";
 import j from "../../icons/FrameEmpty.vue.js";
 import q from "../../icons/Rotation0.vue.js";
 import J from "../../icons/Rotation45.vue.js";
 import K from "../../icons/Rotation90.vue.js";
-const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-row block" }, le = {
+const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-row block" }, te = {
   key: 0,
   class: "axes-settings-input"
-}, te = { class: "axes-settings-options-row" }, oe = { class: "axes-settings-options-row" }, se = {
+}, le = { class: "axes-settings-options-row" }, oe = { class: "axes-settings-options-row" }, se = {
   key: 0,
   class: "axes-settings-options-row"
 }, ie = {
@@ -40,29 +40,30 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
 }, fe = { class: "axes-settings-options-row block" }, Te = { key: 3 }, Ae = { class: "axes-settings-options-row block" }, Se = { class: "axes-settings-options-row block" }, Le = {
   key: 4,
   class: "axes-settings-options-row"
-}, ye = { class: "axes-settings-options-row table" }, we = { class: "axes-settings-options-row block" }, ke = { class: "other" }, Xe = { class: "axes-settings-options-row" }, Ue = { class: "axes-settings-options-row" }, Ye = { class: "axes-settings-options-row" }, Oe = { class: "axes-settings-options-row block" }, P = 4, _ = 50, G = 20, ce = /* @__PURE__ */ h({
+}, we = { class: "axes-settings-options-row table" }, ye = { class: "axes-settings-options-row block" }, ke = { class: "other" }, Xe = { class: "axes-settings-options-row" }, Ue = { class: "axes-settings-options-row" }, Ye = { class: "axes-settings-options-row" }, Oe = { class: "axes-settings-options-row" }, Ne = { class: "axes-settings-options-row block" }, P = 4, c = 50, G = 20, We = /* @__PURE__ */ h({
   __name: "HeatmapAxesSettingsForm",
-  setup(Ne) {
-    const g = D(), t = g.value.reactive.axesSettings, L = {
+  setup(Ce) {
+    const g = z(), l = g.value.reactive.axesSettings, L = {
       height: 40,
       horizontalPadding: 12,
-      defaultState: "open"
+      defaultState: "open",
+      contentPadding: "0 24px"
     }, M = [
-      { value: "left", icon: Z },
-      { value: "center", icon: c },
+      { value: "left", icon: D },
+      { value: "center", icon: Z },
       { value: "right", icon: W }
     ], b = [
       { value: 0, icon: q },
       { value: 45, icon: J },
       { value: 90, icon: K }
-    ], y = [
+    ], w = [
       { value: "auto", text: "Auto" },
       { value: "custom", text: "Custom" },
       { value: "hidden", text: "Hidden" }
-    ], R = [
+    ], _ = [
       { value: "none", icon: j },
       { value: "full", icon: $ }
-    ], F = [
+    ], R = [
       { text: "X", value: "x" },
       { text: "Y", value: "y" },
       { text: "XY", value: "xy" },
@@ -73,30 +74,30 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
     ], I = [
       { text: "auto", value: "auto" },
       { text: "custom", value: "custom" }
-    ], H = [
+    ], F = [
       { text: "left", value: "left" },
       { text: "right", value: "right" },
       { text: "hidden", value: "hidden" }
-    ], B = [
+    ], H = [
       { text: "top", value: "top" },
       { text: "bottom", value: "bottom" },
       { text: "hidden", value: "hidden" }
-    ], f = p(() => g.value.reactive.layersSettings.heatmapClustered), z = p(() => F.filter((a) => g.value.reactive.template !== "heatmapClustered" ? !0 : f.value.dendrogramX && f.value.dendrogramY ? a.value !== "x" && a.value !== "xy" && a.value !== "y" : f.value.dendrogramX ? a.value !== "x" && a.value !== "xy" : f.value.dendrogramY ? a.value !== "y" && a.value !== "xy" : !0)), T = p(() => g.value.reactive.optionsState.components), w = p(() => t.axisX.cellSize === null ? "auto" : "custom"), A = p({
-      get: () => t.axisX.cellSize,
+    ], f = p(() => g.value.reactive.layersSettings.heatmapClustered), B = p(() => R.filter((a) => g.value.reactive.template !== "heatmapClustered" ? !0 : f.value.dendrogramX && f.value.dendrogramY ? a.value !== "x" && a.value !== "xy" && a.value !== "y" : f.value.dendrogramX ? a.value !== "x" && a.value !== "xy" : f.value.dendrogramY ? a.value !== "y" && a.value !== "xy" : !0)), T = p(() => g.value.reactive.optionsState.components), y = p(() => l.axisX.cellSize === null ? "auto" : "custom"), A = p({
+      get: () => l.axisX.cellSize,
       set: (a) => {
-        t.axisX.cellSize = a;
+        l.axisX.cellSize = a;
       }
-    }), k = p(() => t.axisY.cellSize === null ? "auto" : "custom"), S = p({
-      get: () => t.axisY.cellSize,
+    }), k = p(() => l.axisY.cellSize === null ? "auto" : "custom"), S = p({
+      get: () => l.axisY.cellSize,
       set: (a) => {
-        t.axisY.cellSize = a;
+        l.axisY.cellSize = a;
       }
     });
     return (a, e) => (u(), n("div", {
       class: "axes-form",
-      onClick: e[31] || (e[31] = (o) => o.stopPropagation())
+      onClick: e[32] || (e[32] = (o) => o.stopPropagation())
     }, [
-      e[45] || (e[45] = i("h3", { class: "axes-title" }, " Axes ", -1)),
+      e[47] || (e[47] = i("h3", { class: "axes-title" }, " Axes ", -1)),
       i("div", Q, [
         s(Y, {
           title: "Title",
@@ -106,26 +107,27 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
         }, {
           default: m(() => [
             i("div", ee, [
-              s(l(r), {
-                modelValue: l(t).title.mode,
-                "onUpdate:modelValue": e[0] || (e[0] = (o) => l(t).title.mode = o),
+              s(t(r), {
+                modelValue: t(l).title.mode,
+                "onUpdate:modelValue": e[0] || (e[0] = (o) => t(l).title.mode = o),
                 label: "Title",
-                options: y
+                options: w,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
-            l(t).title.mode === "custom" ? (u(), n("div", le, [
-              s(l(X), {
-                modelValue: l(t).title.value,
-                "onUpdate:modelValue": e[1] || (e[1] = (o) => l(t).title.value = o),
+            t(l).title.mode === "custom" ? (u(), n("div", te, [
+              s(t(X), {
+                modelValue: t(l).title.value,
+                "onUpdate:modelValue": e[1] || (e[1] = (o) => t(l).title.value = o),
                 label: "Chart title",
                 placeholder: "Chart title"
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
-            i("div", te, [
-              e[32] || (e[32] = i("span", null, "Alignment", -1)),
-              s(x, {
-                modelValue: l(t).title.position,
-                "onUpdate:modelValue": e[2] || (e[2] = (o) => l(t).title.position = o),
+            i("div", le, [
+              e[33] || (e[33] = i("span", null, "Alignment", -1)),
+              s(V, {
+                modelValue: t(l).title.position,
+                "onUpdate:modelValue": e[2] || (e[2] = (o) => t(l).title.position = o),
                 options: M
               }, null, 8, ["modelValue"])
             ])
@@ -140,104 +142,108 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
         }, {
           default: m(() => [
             i("div", oe, [
-              s(l(V), {
-                modelValue: l(t).axisX.hideAxisLabels,
-                "onUpdate:modelValue": e[3] || (e[3] = (o) => l(t).axisX.hideAxisLabels = o)
+              s(t(v), {
+                modelValue: t(l).axisX.hideAxisLabels,
+                "onUpdate:modelValue": e[3] || (e[3] = (o) => t(l).axisX.hideAxisLabels = o)
               }, {
-                default: m(() => [...e[33] || (e[33] = [
-                  v("Hide axis labels", -1)
+                default: m(() => [...e[34] || (e[34] = [
+                  x("Hide axis labels", -1)
                 ])]),
                 _: 1
               }, 8, ["modelValue"])
             ]),
             T.value.xGroupBy.selectorStates.length ? (u(), n("div", se, [
-              s(l(V), {
-                modelValue: l(t).axisX.hideAxisGroupLabels,
-                "onUpdate:modelValue": e[4] || (e[4] = (o) => l(t).axisX.hideAxisGroupLabels = o)
+              s(t(v), {
+                modelValue: t(l).axisX.hideAxisGroupLabels,
+                "onUpdate:modelValue": e[4] || (e[4] = (o) => t(l).axisX.hideAxisGroupLabels = o)
               }, {
-                default: m(() => [...e[34] || (e[34] = [
-                  v("Hide group labels", -1)
+                default: m(() => [...e[35] || (e[35] = [
+                  x("Hide group labels", -1)
                 ])]),
                 _: 1
               }, 8, ["modelValue"])
             ])) : d("", !0),
-            l(t).axisX.hideAxisLabels ? d("", !0) : (u(), n("div", ie, [
-              e[35] || (e[35] = i("span", null, "Labels rotation", -1)),
-              s(x, {
-                modelValue: l(t).axisX.axisLabelsAngle,
-                "onUpdate:modelValue": e[5] || (e[5] = (o) => l(t).axisX.axisLabelsAngle = o),
+            t(l).axisX.hideAxisLabels ? d("", !0) : (u(), n("div", ie, [
+              e[36] || (e[36] = i("span", null, "Labels rotation", -1)),
+              s(V, {
+                modelValue: t(l).axisX.axisLabelsAngle,
+                "onUpdate:modelValue": e[5] || (e[5] = (o) => t(l).axisX.axisLabelsAngle = o),
                 options: b
               }, null, 8, ["modelValue"])
             ])),
-            T.value.xGroupBy.selectorStates.length && !l(t).axisX.hideAxisGroupLabels ? (u(), n("div", ae, [
-              e[36] || (e[36] = i("span", null, "Group labels rotation", -1)),
-              s(x, {
-                modelValue: l(t).axisX.groupLabelsAngle,
-                "onUpdate:modelValue": e[6] || (e[6] = (o) => l(t).axisX.groupLabelsAngle = o),
+            T.value.xGroupBy.selectorStates.length && !t(l).axisX.hideAxisGroupLabels ? (u(), n("div", ae, [
+              e[37] || (e[37] = i("span", null, "Group labels rotation", -1)),
+              s(V, {
+                modelValue: t(l).axisX.groupLabelsAngle,
+                "onUpdate:modelValue": e[6] || (e[6] = (o) => t(l).axisX.groupLabelsAngle = o),
                 options: b
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
             i("div", ne, [
-              s(l(r), {
-                modelValue: l(t).axisX.titleMode,
-                "onUpdate:modelValue": e[7] || (e[7] = (o) => l(t).axisX.titleMode = o),
+              s(t(r), {
+                modelValue: t(l).axisX.titleMode,
+                "onUpdate:modelValue": e[7] || (e[7] = (o) => t(l).axisX.titleMode = o),
                 label: "Title",
-                options: y
+                options: w,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
-            l(t).axisX.titleMode === "custom" ? (u(), n("div", ue, [
-              s(l(X), {
-                modelValue: l(t).axisX.customTitle,
-                "onUpdate:modelValue": e[8] || (e[8] = (o) => l(t).axisX.customTitle = o),
+            t(l).axisX.titleMode === "custom" ? (u(), n("div", ue, [
+              s(t(X), {
+                modelValue: t(l).axisX.customTitle,
+                "onUpdate:modelValue": e[8] || (e[8] = (o) => t(l).axisX.customTitle = o),
                 label: "Text",
                 placeholder: "Type"
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
             i("div", de, [
-              s(l(r), {
-                modelValue: l(t).axisX.sorting,
-                "onUpdate:modelValue": e[9] || (e[9] = (o) => l(t).axisX.sorting = o),
+              s(t(r), {
+                modelValue: t(l).axisX.sorting,
+                "onUpdate:modelValue": e[9] || (e[9] = (o) => t(l).axisX.sorting = o),
                 label: "Sorting",
-                options: C
+                options: C,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
             i("div", re, [
-              s(l(r), {
-                modelValue: w.value,
+              s(t(r), {
+                modelValue: y.value,
                 "onUpdate:modelValue": [
-                  e[10] || (e[10] = (o) => w.value = o),
+                  e[10] || (e[10] = (o) => y.value = o),
                   e[11] || (e[11] = (o) => {
                     A.value = o === "auto" ? null : G;
                   })
                 ],
                 label: "Cell width mode",
-                options: I
+                options: I,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
-            w.value === "custom" && A.value !== null ? (u(), n("div", me, [
-              s(l(U), {
+            y.value === "custom" && A.value !== null ? (u(), n("div", me, [
+              s(t(U), {
                 modelValue: A.value,
                 "onUpdate:modelValue": e[12] || (e[12] = (o) => A.value = o),
                 label: "Cell width",
                 min: P,
-                max: _,
+                max: c,
                 measure: "px",
                 style: { width: "100%" }
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
             i("div", pe, [
-              e[37] || (e[37] = i("span", null, "Ticks", -1)),
-              s(l(E), {
-                modelValue: l(t).axisX.ticks,
-                "onUpdate:modelValue": e[13] || (e[13] = (o) => l(t).axisX.ticks = o)
+              e[38] || (e[38] = i("span", null, "Ticks", -1)),
+              s(t(E), {
+                modelValue: t(l).axisX.ticks,
+                "onUpdate:modelValue": e[13] || (e[13] = (o) => t(l).axisX.ticks = o)
               }, null, 8, ["modelValue"])
             ]),
             i("div", xe, [
-              s(l(r), {
-                modelValue: l(t).axisX.annotationTitlePosition,
-                "onUpdate:modelValue": e[14] || (e[14] = (o) => l(t).axisX.annotationTitlePosition = o),
+              s(t(r), {
+                modelValue: t(l).axisX.annotationTitlePosition,
+                "onUpdate:modelValue": e[14] || (e[14] = (o) => t(l).axisX.annotationTitlePosition = o),
                 label: "Annotation title position",
-                options: H
+                options: F,
+                compact: !0
               }, null, 8, ["modelValue"])
             ])
           ]),
@@ -251,69 +257,71 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
         }, {
           default: m(() => [
             i("div", ve, [
-              s(l(V), {
-                modelValue: l(t).axisY.hideAxisLabels,
-                "onUpdate:modelValue": e[15] || (e[15] = (o) => l(t).axisY.hideAxisLabels = o)
+              s(t(v), {
+                modelValue: t(l).axisY.hideAxisLabels,
+                "onUpdate:modelValue": e[15] || (e[15] = (o) => t(l).axisY.hideAxisLabels = o)
               }, {
-                default: m(() => [...e[38] || (e[38] = [
-                  v("Hide axis labels", -1)
+                default: m(() => [...e[39] || (e[39] = [
+                  x("Hide axis labels", -1)
                 ])]),
                 _: 1
               }, 8, ["modelValue"])
             ]),
             T.value.yGroupBy.selectorStates.length ? (u(), n("div", Ve, [
-              s(l(V), {
-                modelValue: l(t).axisY.hideAxisGroupLabels,
-                "onUpdate:modelValue": e[16] || (e[16] = (o) => l(t).axisY.hideAxisGroupLabels = o)
+              s(t(v), {
+                modelValue: t(l).axisY.hideAxisGroupLabels,
+                "onUpdate:modelValue": e[16] || (e[16] = (o) => t(l).axisY.hideAxisGroupLabels = o)
               }, {
-                default: m(() => [...e[39] || (e[39] = [
-                  v("Hide group labels", -1)
+                default: m(() => [...e[40] || (e[40] = [
+                  x("Hide group labels", -1)
                 ])]),
                 _: 1
               }, 8, ["modelValue"])
             ])) : d("", !0),
-            l(t).axisY.hideAxisLabels ? d("", !0) : (u(), n("div", ge, [
-              e[40] || (e[40] = i("span", null, "Labels rotation", -1)),
-              s(x, {
-                modelValue: l(t).axisY.axisLabelsAngle,
-                "onUpdate:modelValue": e[17] || (e[17] = (o) => l(t).axisY.axisLabelsAngle = o),
+            t(l).axisY.hideAxisLabels ? d("", !0) : (u(), n("div", ge, [
+              e[41] || (e[41] = i("span", null, "Labels rotation", -1)),
+              s(V, {
+                modelValue: t(l).axisY.axisLabelsAngle,
+                "onUpdate:modelValue": e[17] || (e[17] = (o) => t(l).axisY.axisLabelsAngle = o),
                 options: b
               }, null, 8, ["modelValue"])
             ])),
-            T.value.yGroupBy.selectorStates.length && !l(t).axisY.hideAxisGroupLabels ? (u(), n("div", be, [
-              e[41] || (e[41] = i("span", null, "Group labels rotation", -1)),
-              s(x, {
-                modelValue: l(t).axisY.groupLabelsAngle,
-                "onUpdate:modelValue": e[18] || (e[18] = (o) => l(t).axisY.groupLabelsAngle = o),
+            T.value.yGroupBy.selectorStates.length && !t(l).axisY.hideAxisGroupLabels ? (u(), n("div", be, [
+              e[42] || (e[42] = i("span", null, "Group labels rotation", -1)),
+              s(V, {
+                modelValue: t(l).axisY.groupLabelsAngle,
+                "onUpdate:modelValue": e[18] || (e[18] = (o) => t(l).axisY.groupLabelsAngle = o),
                 options: b
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
             i("div", fe, [
-              s(l(r), {
-                modelValue: l(t).axisY.titleMode,
-                "onUpdate:modelValue": e[19] || (e[19] = (o) => l(t).axisY.titleMode = o),
+              s(t(r), {
+                modelValue: t(l).axisY.titleMode,
+                "onUpdate:modelValue": e[19] || (e[19] = (o) => t(l).axisY.titleMode = o),
                 label: "Title",
-                options: y
+                options: w,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
-            l(t).axisY.titleMode === "custom" ? (u(), n("div", Te, [
-              s(l(X), {
-                modelValue: l(t).axisY.customTitle,
-                "onUpdate:modelValue": e[20] || (e[20] = (o) => l(t).axisY.customTitle = o),
+            t(l).axisY.titleMode === "custom" ? (u(), n("div", Te, [
+              s(t(X), {
+                modelValue: t(l).axisY.customTitle,
+                "onUpdate:modelValue": e[20] || (e[20] = (o) => t(l).axisY.customTitle = o),
                 label: "Text",
                 placeholder: "Type"
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
             i("div", Ae, [
-              s(l(r), {
-                modelValue: l(t).axisY.sorting,
-                "onUpdate:modelValue": e[21] || (e[21] = (o) => l(t).axisY.sorting = o),
+              s(t(r), {
+                modelValue: t(l).axisY.sorting,
+                "onUpdate:modelValue": e[21] || (e[21] = (o) => t(l).axisY.sorting = o),
                 label: "Sorting",
-                options: C
+                options: C,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
             i("div", Se, [
-              s(l(r), {
+              s(t(r), {
                 modelValue: k.value,
                 "onUpdate:modelValue": [
                   e[22] || (e[22] = (o) => k.value = o),
@@ -322,33 +330,35 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
                   })
                 ],
                 label: "Cell height mode",
-                options: I
+                options: I,
+                compact: !0
               }, null, 8, ["modelValue"])
             ]),
             k.value === "custom" && S.value !== null ? (u(), n("div", Le, [
-              s(l(U), {
+              s(t(U), {
                 modelValue: S.value,
                 "onUpdate:modelValue": e[24] || (e[24] = (o) => S.value = o),
                 label: "Cell height",
                 min: P,
-                max: _,
+                max: c,
                 measure: "px",
                 style: { width: "100%" }
               }, null, 8, ["modelValue"])
             ])) : d("", !0),
-            i("div", ye, [
-              e[42] || (e[42] = i("span", null, "Ticks", -1)),
-              s(l(E), {
-                modelValue: l(t).axisY.ticks,
-                "onUpdate:modelValue": e[25] || (e[25] = (o) => l(t).axisY.ticks = o)
+            i("div", we, [
+              e[43] || (e[43] = i("span", null, "Ticks", -1)),
+              s(t(E), {
+                modelValue: t(l).axisY.ticks,
+                "onUpdate:modelValue": e[25] || (e[25] = (o) => t(l).axisY.ticks = o)
               }, null, 8, ["modelValue"])
             ]),
-            i("div", we, [
-              s(l(r), {
-                modelValue: l(t).axisY.annotationTitlePosition,
-                "onUpdate:modelValue": e[26] || (e[26] = (o) => l(t).axisY.annotationTitlePosition = o),
+            i("div", ye, [
+              s(t(r), {
+                modelValue: t(l).axisY.annotationTitlePosition,
+                "onUpdate:modelValue": e[26] || (e[26] = (o) => t(l).axisY.annotationTitlePosition = o),
                 label: "Annotation title position",
-                options: B
+                options: H,
+                compact: !0
               }, null, 8, ["modelValue"])
             ])
           ]),
@@ -356,28 +366,39 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
         }),
         i("div", ke, [
           i("div", Xe, [
-            s(l(V), {
-              modelValue: l(t).other.canvasRenderMode,
-              "onUpdate:modelValue": e[27] || (e[27] = (o) => l(t).other.canvasRenderMode = o)
+            s(t(v), {
+              modelValue: t(l).other.showLegend,
+              "onUpdate:modelValue": e[27] || (e[27] = (o) => t(l).other.showLegend = o)
             }, {
-              default: m(() => [...e[43] || (e[43] = [
-                v("Render as canvas", -1)
+              default: m(() => [...e[44] || (e[44] = [
+                x("Show legend", -1)
               ])]),
               _: 1
             }, 8, ["modelValue"])
           ]),
           i("div", Ue, [
-            e[44] || (e[44] = i("span", null, "Frame", -1)),
-            s(x, {
-              modelValue: l(t).other.frame,
-              "onUpdate:modelValue": e[28] || (e[28] = (o) => l(t).other.frame = o),
-              options: R
-            }, null, 8, ["modelValue"])
+            s(t(v), {
+              modelValue: t(l).other.canvasRenderMode,
+              "onUpdate:modelValue": e[28] || (e[28] = (o) => t(l).other.canvasRenderMode = o)
+            }, {
+              default: m(() => [...e[45] || (e[45] = [
+                x("Render as canvas", -1)
+              ])]),
+              _: 1
+            }, 8, ["modelValue"])
           ]),
           i("div", Ye, [
-            s(l(U), {
-              modelValue: l(t).other.facetColumns,
-              "onUpdate:modelValue": e[29] || (e[29] = (o) => l(t).other.facetColumns = o),
+            e[46] || (e[46] = i("span", null, "Frame", -1)),
+            s(V, {
+              modelValue: t(l).other.frame,
+              "onUpdate:modelValue": e[29] || (e[29] = (o) => t(l).other.frame = o),
+              options: _
+            }, null, 8, ["modelValue"])
+          ]),
+          i("div", Oe, [
+            s(t(U), {
+              modelValue: t(l).other.facetColumns,
+              "onUpdate:modelValue": e[30] || (e[30] = (o) => t(l).other.facetColumns = o),
               style: { width: "100%" },
               label: "Facet column count",
               min: 1,
@@ -387,12 +408,13 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
               mode: "input"
             }, null, 8, ["modelValue"])
           ]),
-          i("div", Oe, [
-            s(l(r), {
-              modelValue: l(t).other.facetSharedBy,
-              "onUpdate:modelValue": e[30] || (e[30] = (o) => l(t).other.facetSharedBy = o),
+          i("div", Ne, [
+            s(t(r), {
+              modelValue: t(l).other.facetSharedBy,
+              "onUpdate:modelValue": e[31] || (e[31] = (o) => t(l).other.facetSharedBy = o),
               label: "Facet shared by",
-              options: z.value
+              options: B.value,
+              compact: !0
             }, null, 8, ["modelValue", "options"])
           ])
         ])
@@ -401,6 +423,6 @@ const Q = { class: "axes-settings-list" }, ee = { class: "axes-settings-options-
   }
 });
 export {
-  ce as default
+  We as default
 };
 //# sourceMappingURL=HeatmapAxesSettingsForm.vue.js.map