@milaboratories/graph-maker 1.1.133 → 1.1.134

package/dist/GraphMaker/components/Chart.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../../src/GraphMaker/components/Chart.vue"],"names":[],"mappings":"AA6LA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAY1D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC,CAAC;AA+FF,iBAAS,cAAc;WAmNT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AA6BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../../src/GraphMaker/components/Chart.vue"],"names":[],"mappings":"AA+LA,OAAO,EAAE,cAAc,EAAE,MAAM,0BAA0B,CAAC;AAY1D,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAMxD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,WAAW,CAAC;IACzB,UAAU,EAAE,MAAM,CAAC;IACnB,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,SAAS,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,CAAC;IAC1C,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAA;CAChC,CAAC;AA+FF,iBAAS,cAAc;WAsNT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AA6BD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/GraphMaker/components/Chart.vue.js

@@ -1,17 +1,17 @@
-import { defineComponent as P, ref as v, watch as m, computed as y, createElementBlock as b, openBlock as r, createElementVNode as d, createVNode as U, createCommentVNode as c, createBlock as n, withKeys as E, resolveDynamicComponent as H, renderSlot as I, unref as l, withCtx as O, createTextVNode as q, normalizeClass as w } from "vue";
+import { defineComponent as P, ref as v, watch as m, computed as S, createElementBlock as b, openBlock as r, createElementVNode as c, createVNode as U, createCommentVNode as d, createBlock as n, withKeys as E, resolveDynamicComponent as H, renderSlot as I, unref as l, withCtx as O, createTextVNode as q, normalizeClass as k } from "vue";
 import { PlNotificationAlert as A, PlDropdown as G, PlAutocomplete as W } from "@platforma-sdk/ui-vue";
 import K from "./DendroTable.vue.js";
 import M from "./DendroTooltip.vue.js";
 import z from "./LassoControls/index.vue.js";
 import X from "./Loading.vue.js";
 import j from "./Zoom/index.vue.js";
-import { MAX_SEARCH_OPTIONS_LIST_LENGTH as _ } from "../constantsCommon.js";
+import { MAX_SEARCH_OPTIONS_LIST_LENGTH as w } from "../constantsCommon.js";
 import J from "../icons/EditIcon.vue.js";
 import { useStore as Q } from "../store.js";
 const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["value"], ee = { class: "chart_titleLineSlot" }, te = {
   key: 0,
   class: "chart_tabBy"
-}, pe = /* @__PURE__ */ P({
+}, ae = { class: "chart_controls" }, ve = /* @__PURE__ */ P({
   __name: "Chart",
   props: {
     graphStatus: {},
@@ -22,27 +22,27 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
   },
   emits: ["graph-title-update", "dendro-node-select", "dendro-tooltip-btn-click"],
   setup(D, { emit: R }) {
-    const S = R, a = Q(), g = D, h = v(g.graphTitle);
+    const y = R, a = Q(), g = D, h = v(g.graphTitle);
     m(() => g.graphTitle, (e) => {
       h.value = e;
     });
-    const V = y(() => {
+    const V = S(() => {
       var e;
       return (e = a.value.reactive.optionsState.components.tabBy) == null ? void 0 : e.selectorStates[0];
-    }), i = y(() => {
+    }), i = S(() => {
       var e;
       return (e = V.value) == null ? void 0 : e.selectedSource;
-    }), C = y(() => {
+    }), C = S(() => {
       var e;
       return (e = V.value) == null ? void 0 : e.selectedFilterValue;
-    }), u = v(C.value);
+    }), s = v(C.value);
     m(() => i.value, (e, t) => {
-      e !== t && (u.value = C.value);
+      e !== t && (s.value = C.value);
     }, { immediate: !0 });
     async function $(e) {
       if (!a.value.columnsDataStore)
         return Promise.resolve([]);
-      const t = await a.value.controller.getUniqueSourceValuesWithLabels(a.value.columnsDataStore, a.value.inputGuide.value, e, _);
+      const t = await a.value.controller.getUniqueSourceValuesWithLabels(a.value.columnsDataStore, a.value.inputGuide.value, e, w);
       return t.overflow ? null : t.values;
     }
     const p = v();
@@ -50,13 +50,13 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
       e !== void 0 && (p.value = await $(e));
     }), m(() => p.value, async (e) => {
       if (i.value === void 0 || // no tabBy selected
-      u.value !== void 0 || // tabBy selected and has selected value
+      s.value !== void 0 || // tabBy selected and has selected value
       e === void 0)
         return;
       let t = e;
-      if (e === null && (t = await T(i.value, "")), t != null && t.length) {
-        const s = t[0].value;
-        u.value = s, f(s);
+      if (e === null && (t = await B(i.value, "")), t != null && t.length) {
+        const u = t[0].value;
+        s.value = u, f(u);
       }
     }, { immediate: !0 });
     function f(e) {
@@ -69,33 +69,33 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
     }
     function L(e) {
       const t = e.currentTarget;
-      h.value = t.value, S("graph-title-update", t.value);
+      h.value = t.value, y("graph-title-update", t.value);
     }
     function F(e) {
-      S("dendro-node-select", e);
+      y("dendro-node-select", e);
     }
-    async function T(e, t) {
-      return a.value.columnsDataStore ? (await a.value.controller.getUniqueSourceValuesWithLabels(a.value.columnsDataStore, a.value.inputGuide.value, e, _, t || void 0)).values : Promise.resolve([]);
+    async function B(e, t) {
+      return a.value.columnsDataStore ? (await a.value.controller.getUniqueSourceValuesWithLabels(a.value.columnsDataStore, a.value.inputGuide.value, e, w, t || void 0)).values : Promise.resolve([]);
     }
     async function N(e, t) {
       return a.value.columnsDataStore ? (await a.value.controller.getUniqueSourceValuesWithLabels(a.value.columnsDataStore, a.value.inputGuide.value, e, 1, void 0, t)).values[0] : Promise.resolve({ value: t, label: t });
     }
-    const B = v();
+    const T = v();
     return (e, t) => {
-      var s;
+      var u;
       return r(), b("div", Y, [
-        d("div", Z, [
-          d("input", {
+        c("div", Z, [
+          c("input", {
             class: "chart_title",
             value: h.value,
             onChange: L,
             onKeyup: t[0] || (t[0] = E((o) => {
-              var k;
-              (k = o.target) == null || k.blur();
+              var _;
+              (_ = o.target) == null || _.blur();
             }, ["enter"]))
           }, null, 40, x),
           (r(), n(H(J), { class: "chart_titleEdit" })),
-          d("div", ee, [
+          c("div", ee, [
             I(e.$slots, "default")
           ])
         ]),
@@ -115,66 +115,68 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
           p.value ? (r(), n(l(G), {
             key: 0,
             label: "Show for",
-            modelValue: u.value,
+            modelValue: s.value,
             "onUpdate:modelValue": [
-              t[2] || (t[2] = (o) => u.value = o),
+              t[2] || (t[2] = (o) => s.value = o),
               t[3] || (t[3] = (o) => f(o))
             ],
             options: p.value
           }, null, 8, ["modelValue", "options"])) : (r(), n(l(W), {
             key: 1,
-            modelValue: u.value,
+            modelValue: s.value,
             "onUpdate:modelValue": [
-              t[4] || (t[4] = (o) => u.value = o),
+              t[4] || (t[4] = (o) => s.value = o),
               t[5] || (t[5] = (o) => f(o))
             ],
-            "options-search": (o) => T(i.value, o),
+            "options-search": (o) => B(i.value, o),
             "model-search": (o) => N(i.value, o)
           }, null, 8, ["modelValue", "options-search", "model-search"]))
-        ])) : c("", !0),
-        d("div", {
-          class: w(["chart_main-content", { "chart_main-content__dendro": l(a).reactive.chartType === "dendro" }]),
+        ])) : d("", !0),
+        c("div", {
+          class: k(["chart_main-content", [{ "chart_main-content__dendro": l(a).reactive.chartType === "dendro" }, "pl-scrollable"]]),
           ref_key: "chartContainerRef",
-          ref: B
+          ref: T
         }, [
-          d("div", {
+          c("div", {
             id: "chartSvgContainer",
-            class: w({
+            class: k({
               chart_loading: l(a).loading.initialCharts && e.graphStatus === "ready",
               chart_noDataMapping: e.graphStatus === "notReady",
               chart_emptyData: e.graphStatus === "empty",
               chart_inconsistent: e.graphStatus === "inconsistent",
-              chart_activeLassoSelection: ((s = l(a).reactive.lassoControlsState) == null ? void 0 : s.mode) === "selection"
+              chart_activeLassoSelection: ((u = l(a).reactive.lassoControlsState) == null ? void 0 : u.mode) === "selection"
             })
           }, [
-            l(a).loading.initialCharts && e.graphStatus === "ready" ? (r(), n(X, { key: 0 })) : c("", !0)
+            l(a).loading.initialCharts && e.graphStatus === "ready" ? (r(), n(X, { key: 0 })) : d("", !0)
           ], 2),
           l(a).reactive.chartType === "dendro" && e.chartData && l(a).reactive.layersSettings.dendro.showTable ? (r(), n(K, {
             key: 0,
             chartData: e.chartData,
             onRowSelect: F
-          }, null, 8, ["chartData"])) : c("", !0),
+          }, null, 8, ["chartData"])) : d("", !0),
           l(a).reactive.dendroInfoByClick ? (r(), n(M, {
             key: 1,
             info: l(a).reactive.dendroInfoByClick,
-            containerRef: B.value,
+            containerRef: T.value,
             tooltipBtn: e.dendroTooltipButton,
             onTooltipBtnClick: t[6] || (t[6] = (o) => e.$emit("dendro-tooltip-btn-click", o)),
             onClose: t[7] || (t[7] = (o) => {
               l(a).reactive.dendroInfoByClick = null, e.$emit("dendro-node-select", null);
             })
-          }, null, 8, ["info", "containerRef", "tooltipBtn"])) : c("", !0)
+          }, null, 8, ["info", "containerRef", "tooltipBtn"])) : d("", !0)
         ], 2),
-        e.graphStatus !== "empty" && l(a).reactive.chartType !== "scatterplot-umap" ? (r(), n(j, { key: 1 })) : c("", !0),
-        e.graphStatus !== "empty" && l(a).reactive.chartType === "scatterplot-umap" ? (r(), n(z, {
-          key: 2,
-          "chart-ref": e.chartRef
-        }, null, 8, ["chart-ref"])) : c("", !0)
+        c("div", ae, [
+          e.graphStatus !== "empty" ? (r(), n(j, { key: 0 })) : d("", !0),
+          e.graphStatus !== "empty" && l(a).reactive.chartType === "scatterplot-umap" ? (r(), n(z, {
+            key: 1,
+            "chart-ref": e.chartRef
+          }, null, 8, ["chart-ref"])) : d("", !0)
+        ])
       ]);
     };
   }
 });
 export {
-  pe as default
+  ve as default
 };
 //# sourceMappingURL=Chart.vue.js.map

package/dist/GraphMaker/components/Chart.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.vue.js","sources":["../../../src/GraphMaker/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ChartInterface } from '@milaboratories/miplots4';\nimport { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport { ListOption, PlAutocomplete, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../../GraphMaker/components/DendroTable.vue';\nimport DendroTooltip from '../../GraphMaker/components/DendroTooltip.vue';\nimport LassoControls from '../../GraphMaker/components/LassoControls/index.vue';\nimport Loading from '../../GraphMaker/components/Loading.vue';\nimport Zoom from '../../GraphMaker/components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../../GraphMaker/constantsCommon.ts';\nimport EditIcon from '../../GraphMaker/icons/EditIcon.vue';\nimport { useStore } from '../../GraphMaker/store.ts';\nimport { GraphStatus } from '../../GraphMaker/types.ts';\n\nconst emit = defineEmits(['graph-title-update', 'dendro-node-select', 'dendro-tooltip-btn-click']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  graphStatus: GraphStatus,\n  graphTitle: string,\n  dendroTooltipButton?: string,\n  chartData: Record<string, unknown> | null,\n  chartRef: ChartInterface | null\n}>();\n\nconst title = ref(props.graphTitle);\n// title can be updated from graph-maker settings\nwatch(() => props.graphTitle, (graphTitle) => {\n  title.value = graphTitle;\n});\n\nconst tabByState = computed(() => store.value.reactive.optionsState.components.tabBy?.selectorStates[0] as SelectorStateFilter | undefined);\nconst tabBySource = computed(() => tabByState.value?.selectedSource);\nconst tabByFilterValue = computed(() => tabByState.value?.selectedFilterValue);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch(() => tabBySource.value, (value, prevValue) => { // tabBy column changed, needs to update selected value\n  if (value !== prevValue) {\n    tabByLocalValue.value = tabByFilterValue.value;\n  }\n}, { immediate: true });\n\nasync function loadOptions(sourceId:string) {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve([]);\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH);\n  return response.overflow ? null : response.values;\n}\nconst preloadedOptions = ref<ListOption[]|null|undefined>();\nwatch(() => tabBySource.value, async (v) => {\n  if (v === undefined) {\n    return undefined;\n  }\n  preloadedOptions.value = await loadOptions(v);\n});\n\nwatch(() => preloadedOptions.value, async (opts) => {\n  if (\n    tabBySource.value === undefined || // no tabBy selected\n    tabByLocalValue.value !== undefined || // tabBy selected and has selected value\n    opts === undefined // options not loaded yet\n  ) {\n    return;\n  }\n  let availableOptions = opts;\n  if (opts === null) { // options loaded but too many unique values\n    availableOptions = await searchFilterOptions(tabBySource.value, '');\n  }\n  if (availableOptions?.length) {\n    const nextFilterValue = availableOptions[0].value as string;\n    tabByLocalValue.value = nextFilterValue;\n    onFilterValueUpdate(nextFilterValue);\n  }\n}, { immediate: true });\n\n\nfunction onFilterValueUpdate(value:string) {\n  const prevSelectorStates = store.value.reactive.optionsState.components.tabBy.selectorStates;\n  if (prevSelectorStates.length) {\n    store.value.reactive.optionsState.components.tabBy.selectorStates = [{\n      ...prevSelectorStates[0],\n      type: 'equals',\n      selectedFilterValue: value\n    }];\n  }\n}\n\nfunction onTitleChange(e: Event) {\n  const target = e.currentTarget as HTMLInputElement;\n  title.value = target.value;\n  emit('graph-title-update', target.value);\n}\n\nfunction onTableRowSelect(id: number) {\n  emit('dendro-node-select', id);\n}\n\nasync function searchFilterOptions(sourceId:string, searchStr:string):Promise<ListOption[]> {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchStr || undefined)).values;\n}\n\nasync function searchSelectedFilterValueOptions(sourceId:string, selectedValue:string):Promise<ListOption> {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve({ value: selectedValue, label: selectedValue });\n  }\n  const r = (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, 1, undefined, selectedValue)).values;\n  return r[0];\n}\n\nconst chartContainerRef = ref();\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input class=\"chart_title\" :value=\"title\" @change=\"onTitleChange\"\n             @keyup.enter=\"(e) => {(e.target as HTMLInputElement)?.blur()}\" />\n      <component class=\"chart_titleEdit\" :is=\"EditIcon\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot></slot>\n      </div>\n    </div>\n    <PlNotificationAlert\n      type=\"success\"\n      v-model=\"store.reactive.showTooltipHint\"\n      class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div class=\"chart_tabBy\" v-if=\"tabBySource\">\n      <pl-dropdown\n        v-if=\"preloadedOptions\"\n        label=\"Show for\"\n        v-model=\"tabByLocalValue\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n        :options=\"preloadedOptions\"\n      />\n      <pl-autocomplete\n        v-else\n        v-model=\"tabByLocalValue\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n        :options-search=\"(str) => searchFilterOptions(tabBySource as string, str)\"\n        :model-search=\"(v) => searchSelectedFilterValueOptions(tabBySource as string, v as string)\"\n      />\n    </div>\n    <div class=\"chart_main-content\" ref=\"chartContainerRef\"\n         :class=\"{'chart_main-content__dendro': store.reactive.chartType === 'dendro'}\">\n      <div\n        id=\"chartSvgContainer\"\n        :class=\"{\n          'chart_loading': store.loading.initialCharts && graphStatus === 'ready',\n          'chart_noDataMapping': graphStatus === 'notReady',\n          'chart_emptyData': graphStatus === 'empty',\n          'chart_inconsistent': graphStatus === 'inconsistent',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      >\n        <loading v-if=\"store.loading.initialCharts && graphStatus === 'ready'\" />\n      </div>\n      <dendro-table\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\"\n        @row-select=\"onTableRowSelect\"\n      />\n      <dendro-tooltip\n        v-if=\"store.reactive.dendroInfoByClick\"\n        :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\"\n        :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id:string) => $emit('dendro-tooltip-btn-click', id)\"\n        @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <zoom v-if=\"graphStatus !== 'empty' && store.reactive.chartType !== 'scatterplot-umap'\" />\n    <lasso-controls v-if=\"graphStatus !== 'empty' && store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\"/>\n  </div>\n</template>\n"],"names":["emit","__emit","store","useStore","props","__props","title","ref","watch","graphTitle","tabByState","computed","_a","tabBySource","tabByFilterValue","tabByLocalValue","value","prevValue","loadOptions","sourceId","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","prevSelectorStates","onTitleChange","target","onTableRowSelect","id","searchStr","searchSelectedFilterValueOptions","selectedValue","chartContainerRef"],"mappings":"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"}
+{"version":3,"file":"Chart.vue.js","sources":["../../../src/GraphMaker/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { ChartInterface } from '@milaboratories/miplots4';\nimport { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport { ListOption, PlAutocomplete, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../../GraphMaker/components/DendroTable.vue';\nimport DendroTooltip from '../../GraphMaker/components/DendroTooltip.vue';\nimport LassoControls from '../../GraphMaker/components/LassoControls/index.vue';\nimport Loading from '../../GraphMaker/components/Loading.vue';\nimport Zoom from '../../GraphMaker/components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../../GraphMaker/constantsCommon.ts';\nimport EditIcon from '../../GraphMaker/icons/EditIcon.vue';\nimport { useStore } from '../../GraphMaker/store.ts';\nimport { GraphStatus } from '../../GraphMaker/types.ts';\n\nconst emit = defineEmits(['graph-title-update', 'dendro-node-select', 'dendro-tooltip-btn-click']);\n\nconst store = useStore();\n\nconst props = defineProps<{\n  graphStatus: GraphStatus,\n  graphTitle: string,\n  dendroTooltipButton?: string,\n  chartData: Record<string, unknown> | null,\n  chartRef: ChartInterface | null\n}>();\n\nconst title = ref(props.graphTitle);\n// title can be updated from graph-maker settings\nwatch(() => props.graphTitle, (graphTitle) => {\n  title.value = graphTitle;\n});\n\nconst tabByState = computed(() => store.value.reactive.optionsState.components.tabBy?.selectorStates[0] as SelectorStateFilter | undefined);\nconst tabBySource = computed(() => tabByState.value?.selectedSource);\nconst tabByFilterValue = computed(() => tabByState.value?.selectedFilterValue);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch(() => tabBySource.value, (value, prevValue) => { // tabBy column changed, needs to update selected value\n  if (value !== prevValue) {\n    tabByLocalValue.value = tabByFilterValue.value;\n  }\n}, { immediate: true });\n\nasync function loadOptions(sourceId:string) {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve([]);\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH);\n  return response.overflow ? null : response.values;\n}\nconst preloadedOptions = ref<ListOption[]|null|undefined>();\nwatch(() => tabBySource.value, async (v) => {\n  if (v === undefined) {\n    return undefined;\n  }\n  preloadedOptions.value = await loadOptions(v);\n});\n\nwatch(() => preloadedOptions.value, async (opts) => {\n  if (\n    tabBySource.value === undefined || // no tabBy selected\n    tabByLocalValue.value !== undefined || // tabBy selected and has selected value\n    opts === undefined // options not loaded yet\n  ) {\n    return;\n  }\n  let availableOptions = opts;\n  if (opts === null) { // options loaded but too many unique values\n    availableOptions = await searchFilterOptions(tabBySource.value, '');\n  }\n  if (availableOptions?.length) {\n    const nextFilterValue = availableOptions[0].value as string;\n    tabByLocalValue.value = nextFilterValue;\n    onFilterValueUpdate(nextFilterValue);\n  }\n}, { immediate: true });\n\n\nfunction onFilterValueUpdate(value:string) {\n  const prevSelectorStates = store.value.reactive.optionsState.components.tabBy.selectorStates;\n  if (prevSelectorStates.length) {\n    store.value.reactive.optionsState.components.tabBy.selectorStates = [{\n      ...prevSelectorStates[0],\n      type: 'equals',\n      selectedFilterValue: value\n    }];\n  }\n}\n\nfunction onTitleChange(e: Event) {\n  const target = e.currentTarget as HTMLInputElement;\n  title.value = target.value;\n  emit('graph-title-update', target.value);\n}\n\nfunction onTableRowSelect(id: number) {\n  emit('dendro-node-select', id);\n}\n\nasync function searchFilterOptions(sourceId:string, searchStr:string):Promise<ListOption[]> {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve([]);\n  }\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchStr || undefined)).values;\n}\n\nasync function searchSelectedFilterValueOptions(sourceId:string, selectedValue:string):Promise<ListOption> {\n  if (!store.value.columnsDataStore) {\n    return Promise.resolve({ value: selectedValue, label: selectedValue });\n  }\n  const r = (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore, store.value.inputGuide.value, sourceId, 1, undefined, selectedValue)).values;\n  return r[0];\n}\n\nconst chartContainerRef = ref();\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input class=\"chart_title\" :value=\"title\" @change=\"onTitleChange\"\n             @keyup.enter=\"(e) => {(e.target as HTMLInputElement)?.blur()}\" />\n      <component class=\"chart_titleEdit\" :is=\"EditIcon\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot></slot>\n      </div>\n    </div>\n    <PlNotificationAlert\n      type=\"success\"\n      v-model=\"store.reactive.showTooltipHint\"\n      class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div class=\"chart_tabBy\" v-if=\"tabBySource\">\n      <pl-dropdown\n        v-if=\"preloadedOptions\"\n        label=\"Show for\"\n        v-model=\"tabByLocalValue\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n        :options=\"preloadedOptions\"\n      />\n      <pl-autocomplete\n        v-else\n        v-model=\"tabByLocalValue\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n        :options-search=\"(str) => searchFilterOptions(tabBySource as string, str)\"\n        :model-search=\"(v) => searchSelectedFilterValueOptions(tabBySource as string, v as string)\"\n      />\n    </div>\n    <div class=\"chart_main-content\" ref=\"chartContainerRef\"\n         :class=\"[{'chart_main-content__dendro': store.reactive.chartType === 'dendro'}, 'pl-scrollable']\">\n      <div\n        id=\"chartSvgContainer\"\n        :class=\"{\n          'chart_loading': store.loading.initialCharts && graphStatus === 'ready',\n          'chart_noDataMapping': graphStatus === 'notReady',\n          'chart_emptyData': graphStatus === 'empty',\n          'chart_inconsistent': graphStatus === 'inconsistent',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      >\n        <loading v-if=\"store.loading.initialCharts && graphStatus === 'ready'\" />\n      </div>\n      <dendro-table\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\"\n        @row-select=\"onTableRowSelect\"\n      />\n      <dendro-tooltip\n        v-if=\"store.reactive.dendroInfoByClick\"\n        :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\"\n        :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id:string) => $emit('dendro-tooltip-btn-click', id)\"\n        @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <div class=\"chart_controls\">\n      <zoom v-if=\"graphStatus !== 'empty'\" />\n      <lasso-controls v-if=\"graphStatus !== 'empty' && store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\"/>\n    </div>\n  </div>\n</template>\n"],"names":["emit","__emit","store","useStore","props","__props","title","ref","watch","graphTitle","tabByState","computed","_a","tabBySource","tabByFilterValue","tabByLocalValue","value","prevValue","loadOptions","sourceId","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","prevSelectorStates","onTitleChange","target","onTableRowSelect","id","searchStr","searchSelectedFilterValueOptions","selectedValue","chartContainerRef"],"mappings":"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"}