@milaboratories/graph-maker 1.1.156 → 1.1.157
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/GraphMaker/components/Chart.vue.d.ts.map +1 -1
- package/dist/GraphMaker/components/Chart.vue.js +20 -16
- package/dist/GraphMaker/components/Chart.vue.js.map +1 -1
- package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.d.ts.map +1 -1
- package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.js +24 -23
- package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.js.map +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../../src/GraphMaker/components/Chart.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../../src/GraphMaker/components/Chart.vue"],"names":[],"mappings":"AA+OA,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,CAAC;CACjC,CAAC;AAuIF,iBAAS,cAAc;WAiQT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAkCD,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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent as W, ref as h, watch as S, computed as p, createElementBlock as b, openBlock as n, createElementVNode as m, createVNode as P, createCommentVNode as s, createBlock as i, withKeys as j, resolveDynamicComponent as K, renderSlot as z, unref as r, withCtx as T, createTextVNode as k, normalizeClass as
|
|
2
|
-
import { PlNotificationAlert as X, PlDropdown as J, PlAutocomplete as Q, PlBtnGhost as
|
|
1
|
+
import { defineComponent as W, ref as h, watch as S, computed as p, createElementBlock as b, openBlock as n, createElementVNode as m, createVNode as P, createCommentVNode as s, createBlock as i, withKeys as j, resolveDynamicComponent as K, renderSlot as z, unref as r, withCtx as T, createTextVNode as k, normalizeClass as G, withModifiers as H } from "vue";
|
|
2
|
+
import { PlNotificationAlert as X, PlDropdown as J, PlAutocomplete as Q, PlBtnGhost as R } from "@platforma-sdk/ui-vue";
|
|
3
3
|
import Y from "./DendroTable.vue.js";
|
|
4
4
|
import Z from "./DendroTooltip.vue.js";
|
|
5
5
|
import x from "./LassoControls/index.vue.js";
|
|
@@ -25,19 +25,19 @@ const re = { class: "chart_container" }, ne = { class: "chart_header" }, le = ["
|
|
|
25
25
|
},
|
|
26
26
|
emits: ["graph-title-update", "dendro-node-select", "dendro-tooltip-btn-click"],
|
|
27
27
|
setup(O, { emit: $ }) {
|
|
28
|
-
const C = $, a = oe(),
|
|
29
|
-
S(() =>
|
|
28
|
+
const C = $, a = oe(), w = O, y = h(w.graphTitle);
|
|
29
|
+
S(() => w.graphTitle, (t) => {
|
|
30
30
|
y.value = t;
|
|
31
31
|
});
|
|
32
|
-
const
|
|
32
|
+
const V = p(() => {
|
|
33
33
|
var t;
|
|
34
34
|
return (t = a.value.reactive.optionsState.components.tabBy) == null ? void 0 : t.selectorStates[0];
|
|
35
35
|
}), u = p(() => {
|
|
36
36
|
var t;
|
|
37
|
-
return (t =
|
|
37
|
+
return (t = V.value) == null ? void 0 : t.selectedSource;
|
|
38
38
|
}), B = p(() => {
|
|
39
39
|
var t, e;
|
|
40
|
-
return (e = (t =
|
|
40
|
+
return (e = (t = V.value) == null ? void 0 : t.selectedFilterValues) == null ? void 0 : e[0];
|
|
41
41
|
}), c = h(B.value);
|
|
42
42
|
S(() => u.value, (t, e) => {
|
|
43
43
|
t !== e && (c.value = B.value);
|
|
@@ -49,9 +49,12 @@ const re = { class: "chart_container" }, ne = { class: "chart_header" }, le = ["
|
|
|
49
49
|
return e.overflow ? null : e.values;
|
|
50
50
|
}
|
|
51
51
|
const f = h();
|
|
52
|
-
S(
|
|
53
|
-
|
|
54
|
-
|
|
52
|
+
S([
|
|
53
|
+
() => u.value,
|
|
54
|
+
() => a.value.loading.inputGuide
|
|
55
|
+
], async ([t, e]) => {
|
|
56
|
+
t === void 0 || e || (f.value = await L(t));
|
|
57
|
+
}, { immediate: !0 }), S(() => f.value, async (t) => {
|
|
55
58
|
if (u.value === void 0 || // no tabBy selected
|
|
56
59
|
c.value !== void 0 || // tabBy selected and has selected value
|
|
57
60
|
t === void 0)
|
|
@@ -160,6 +163,7 @@ const re = { class: "chart_container" }, ne = { class: "chart_header" }, le = ["
|
|
|
160
163
|
options: f.value
|
|
161
164
|
}, null, 8, ["modelValue", "options"])) : (n(), i(r(Q), {
|
|
162
165
|
key: 1,
|
|
166
|
+
label: "Show for",
|
|
163
167
|
modelValue: c.value,
|
|
164
168
|
"onUpdate:modelValue": [
|
|
165
169
|
e[4] || (e[4] = (o) => c.value = o),
|
|
@@ -170,13 +174,13 @@ const re = { class: "chart_container" }, ne = { class: "chart_header" }, le = ["
|
|
|
170
174
|
}, null, 8, ["modelValue", "options-search", "model-search"]))
|
|
171
175
|
])) : s("", !0),
|
|
172
176
|
m("div", {
|
|
173
|
-
class:
|
|
177
|
+
class: G(["chart_main-content", [{ "chart_main-content__dendro": r(a).reactive.chartType === "dendro" }, "pl-scrollable"]]),
|
|
174
178
|
ref_key: "chartContainerRef",
|
|
175
179
|
ref: _
|
|
176
180
|
}, [
|
|
177
181
|
m("div", {
|
|
178
182
|
id: "chartSvgContainer",
|
|
179
|
-
class:
|
|
183
|
+
class: G({
|
|
180
184
|
chart_loading: r(a).loading.initialCharts && t.graphStatus === "ready",
|
|
181
185
|
chart_noDataMapping: t.graphStatus === "notReady",
|
|
182
186
|
chart_emptyData: t.graphStatus === "empty",
|
|
@@ -209,20 +213,20 @@ const re = { class: "chart_container" }, ne = { class: "chart_header" }, le = ["
|
|
|
209
213
|
key: 0,
|
|
210
214
|
"chart-ref": t.chartRef
|
|
211
215
|
}, null, 8, ["chart-ref"])) : s("", !0),
|
|
212
|
-
E.value ? (n(), i(r(
|
|
216
|
+
E.value ? (n(), i(r(R), {
|
|
213
217
|
key: 1,
|
|
214
218
|
icon: "view-hide",
|
|
215
|
-
onClick: e[8] || (e[8] =
|
|
219
|
+
onClick: e[8] || (e[8] = H(() => q(), ["stop"]))
|
|
216
220
|
}, {
|
|
217
221
|
default: T(() => e[11] || (e[11] = [
|
|
218
222
|
k(" Hidden (primary) ")
|
|
219
223
|
])),
|
|
220
224
|
_: 1
|
|
221
225
|
})) : s("", !0),
|
|
222
|
-
I.value ? (n(), i(r(
|
|
226
|
+
I.value ? (n(), i(r(R), {
|
|
223
227
|
key: 2,
|
|
224
228
|
icon: "view-hide",
|
|
225
|
-
onClick: e[9] || (e[9] =
|
|
229
|
+
onClick: e[9] || (e[9] = H(() => M(), ["stop"]))
|
|
226
230
|
}, {
|
|
227
231
|
default: T(() => e[12] || (e[12] = [
|
|
228
232
|
k(" Hidden (secondary) ")
|
|
@@ -1 +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, PlBtnGhost, 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?.selectedFilterValues?.[0]);\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 selectedFilterValues: [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\nconst hasPrimaryHidden = computed(() => {\n if (store.value.reactive.chartType !== 'discrete') {\n return false;\n }\n const optionsState = store.value.reactive.optionsState.components;\n if (optionsState.primaryGrouping?.selectorStates.length) {\n const columnName = optionsState.primaryGrouping.selectorStates[0].selectedSource;\n const dataBindAes = store.value.reactive.dataBindAes[columnName];\n if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some(v => dataBindAes.hidden?.[v]);\n }\n }\n return false;\n});\nconst hasSecondaryHidden = computed(() => {\n if (store.value.reactive.chartType !== 'discrete') {\n return false;\n }\n const optionsState = store.value.reactive.optionsState.components;\n if (optionsState.secondaryGrouping?.selectorStates.length) {\n const columnName = optionsState.secondaryGrouping.selectorStates[0].selectedSource;\n const dataBindAes = store.value.reactive.dataBindAes[columnName];\n if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some(v => dataBindAes.hidden?.[v]);\n }\n }\n return false;\n});\nfunction openAxesSettingsPrimary() {\n store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen = true;\n store.value.reactive.currentTab = 'axes';\n}\nfunction openAxesSettingsSecondary() {\n store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen = true;\n store.value.reactive.currentTab = 'axes';\n}\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_error': graphStatus === 'error',\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\" v-if=\"graphStatus !== 'empty'\">\n <zoom />\n <lasso-controls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\"/>\n <PlBtnGhost v-if=\"hasPrimaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsPrimary()\">\n Hidden (primary)\n </PlBtnGhost>\n <PlBtnGhost v-if=\"hasSecondaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsSecondary()\">\n Hidden (secondary)\n </PlBtnGhost>\n </div>\n </div>\n</template>\n"],"names":["emit","__emit","store","useStore","props","__props","title","ref","watch","graphTitle","tabByState","computed","_a","tabBySource","tabByFilterValue","_b","tabByLocalValue","value","prevValue","loadOptions","sourceId","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","prevSelectorStates","onTitleChange","e","target","onTableRowSelect","id","searchStr","searchSelectedFilterValueOptions","selectedValue","chartContainerRef","hasPrimaryHidden","optionsState","columnName","dataBindAes","hasSecondaryHidden","openAxesSettingsPrimary","openAxesSettingsSecondary"],"mappings":"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"}
|
|
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, PlBtnGhost, 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?.selectedFilterValues?.[0]);\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([\n () => tabBySource.value,\n () => store.value.loading.inputGuide\n], async ([v, loading]) => {\n if (v === undefined || loading) {\n return undefined;\n }\n preloadedOptions.value = await loadOptions(v);\n}, {immediate: true});\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 selectedFilterValues: [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\nconst hasPrimaryHidden = computed(() => {\n if (store.value.reactive.chartType !== 'discrete') {\n return false;\n }\n const optionsState = store.value.reactive.optionsState.components;\n if (optionsState.primaryGrouping?.selectorStates.length) {\n const columnName = optionsState.primaryGrouping.selectorStates[0].selectedSource;\n const dataBindAes = store.value.reactive.dataBindAes[columnName];\n if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some(v => dataBindAes.hidden?.[v]);\n }\n }\n return false;\n});\nconst hasSecondaryHidden = computed(() => {\n if (store.value.reactive.chartType !== 'discrete') {\n return false;\n }\n const optionsState = store.value.reactive.optionsState.components;\n if (optionsState.secondaryGrouping?.selectorStates.length) {\n const columnName = optionsState.secondaryGrouping.selectorStates[0].selectedSource;\n const dataBindAes = store.value.reactive.dataBindAes[columnName];\n if (dataBindAes?.type === 'categorical' && dataBindAes.hidden) {\n return Object.values(dataBindAes.hidden).length > 0 && dataBindAes.order.some(v => dataBindAes.hidden?.[v]);\n }\n }\n return false;\n});\nfunction openAxesSettingsPrimary() {\n store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen = true;\n store.value.reactive.currentTab = 'axes';\n}\nfunction openAxesSettingsSecondary() {\n store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen = true;\n store.value.reactive.currentTab = 'axes';\n}\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 label=\"Show for\"\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_error': graphStatus === 'error',\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\" v-if=\"graphStatus !== 'empty'\">\n <zoom />\n <lasso-controls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\"/>\n <PlBtnGhost v-if=\"hasPrimaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsPrimary()\">\n Hidden (primary)\n </PlBtnGhost>\n <PlBtnGhost v-if=\"hasSecondaryHidden\" icon=\"view-hide\" @click.stop=\"() => openAxesSettingsSecondary()\">\n Hidden (secondary)\n </PlBtnGhost>\n </div>\n </div>\n</template>\n"],"names":["emit","__emit","store","useStore","props","__props","title","ref","watch","graphTitle","tabByState","computed","_a","tabBySource","tabByFilterValue","_b","tabByLocalValue","value","prevValue","loadOptions","sourceId","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","loading","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","prevSelectorStates","onTitleChange","e","target","onTableRowSelect","id","searchStr","searchSelectedFilterValueOptions","selectedValue","chartContainerRef","hasPrimaryHidden","optionsState","columnName","dataBindAes","hasSecondaryHidden","openAxesSettingsPrimary","openAxesSettingsSecondary"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndDoubleChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DndDoubleChip.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"DndDoubleChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DndDoubleChip.vue"],"names":[],"mappings":"AAuFA,OAAO,KAAK,EAAc,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAInC,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,cAAc,EAAC,MAAM,EAAE,KAAK,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC7F,aAAa,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACxF,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,KAAK,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;IAC3E,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AAuCF,KAAK,iBAAiB,GAAG;IACzB,QAAQ,EAAE,MAAM,EAAE,CAAC;CAClB,GAAG,WAAW,CAAC;;;;;;;;;;;;AAgJhB,wBASG"}
|
|
@@ -1,13 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as _, mergeModels as c, useModel as y, ref as b, watch as m, createElementBlock as f, openBlock as r, createElementVNode as i, normalizeClass as h, createCommentVNode as k, createVNode as M, createBlock as a, unref as d, toDisplayString as V } from "vue";
|
|
2
2
|
import { PlIcon16 as u, PlDropdownMulti as g, PlAutocompleteMulti as w } from "@platforma-sdk/ui-vue";
|
|
3
3
|
import C from "../../assets/drag-and-drop/img/chip-close.svg.js";
|
|
4
|
-
|
|
4
|
+
import { useStore as B } from "../../store.js";
|
|
5
|
+
const O = {
|
|
5
6
|
ref: "chipRoot",
|
|
6
7
|
class: "dnd-double-chip__group"
|
|
7
|
-
},
|
|
8
|
+
}, D = { class: "dnd-double-chip__top" }, F = {
|
|
8
9
|
key: 0,
|
|
9
10
|
class: "dnd-basket-chip__handler"
|
|
10
|
-
},
|
|
11
|
+
}, S = ["title"], N = { class: "dnd-double-chip__title" }, P = ["innerHTML"], E = { class: "dnd-double-chip__bottom" }, $ = /* @__PURE__ */ _({
|
|
11
12
|
__name: "DndDoubleChip",
|
|
12
13
|
props: /* @__PURE__ */ c({
|
|
13
14
|
info: {},
|
|
@@ -21,52 +22,52 @@ const B = {
|
|
|
21
22
|
filterModifiers: {}
|
|
22
23
|
}),
|
|
23
24
|
emits: /* @__PURE__ */ c(["close-chip", "update:filter"], ["update:filter"]),
|
|
24
|
-
setup(p, { emit:
|
|
25
|
-
const t = p, n =
|
|
26
|
-
return
|
|
27
|
-
s.value = await t.loadOptions(t.info.id);
|
|
28
|
-
}),
|
|
25
|
+
setup(p, { emit: H }) {
|
|
26
|
+
const t = p, v = B(), n = y(p, "filter"), s = b();
|
|
27
|
+
return m(() => v.value.loading.inputGuide, async (e) => {
|
|
28
|
+
e || (s.value = await t.loadOptions(t.info.id));
|
|
29
|
+
}, { immediate: !0 }), m(() => s.value, async (e) => {
|
|
29
30
|
if (n.value !== void 0 || e === void 0)
|
|
30
31
|
return;
|
|
31
32
|
let o = e;
|
|
32
33
|
e === null && (o = await t.searchOptions(t.info.id, "")), o != null && o.length && (n.value = [o[0].value]);
|
|
33
|
-
}, { immediate: !0 }), (e, o) => (
|
|
34
|
+
}, { immediate: !0 }), (e, o) => (r(), f("div", O, [
|
|
34
35
|
i("div", {
|
|
35
|
-
class:
|
|
36
|
+
class: h([{ error: e.error, sortable: e.sortable }, "dnd-double-chip"])
|
|
36
37
|
}, [
|
|
37
|
-
i("div",
|
|
38
|
+
i("div", D, [
|
|
38
39
|
i("div", {
|
|
39
|
-
class:
|
|
40
|
+
class: h(["dnd-double-chip__icon", { error: e.error }])
|
|
40
41
|
}, [
|
|
41
|
-
e.error ? (
|
|
42
|
+
e.error ? (r(), a(d(u), {
|
|
42
43
|
key: 0,
|
|
43
44
|
name: "warning"
|
|
44
|
-
})) : (
|
|
45
|
+
})) : (r(), a(d(u), {
|
|
45
46
|
key: 1,
|
|
46
47
|
name: e.info.isSubsetFilter ? "cell-type-subset" : e.info.type === "String" ? "cell-type-txt" : "cell-type-num"
|
|
47
48
|
}, null, 8, ["name"]))
|
|
48
49
|
], 2),
|
|
49
|
-
e.sortable ? (
|
|
50
|
-
|
|
50
|
+
e.sortable ? (r(), f("div", F)) : k("", !0),
|
|
51
|
+
M(d(u), { name: "drag-dots" }),
|
|
51
52
|
i("div", {
|
|
52
53
|
class: "dnd-double-chip__title-wrapper",
|
|
53
54
|
title: e.info.title
|
|
54
55
|
}, [
|
|
55
56
|
i("div", N, V(e.info.title), 1)
|
|
56
|
-
], 8,
|
|
57
|
+
], 8, S),
|
|
57
58
|
i("div", {
|
|
58
|
-
innerHTML:
|
|
59
|
+
innerHTML: d(C),
|
|
59
60
|
class: "dnd-double-chip__icon-close",
|
|
60
61
|
onClick: o[0] || (o[0] = (l) => e.$emit("close-chip", t.info.id))
|
|
61
62
|
}, null, 8, P)
|
|
62
63
|
]),
|
|
63
|
-
i("div",
|
|
64
|
-
s.value !== null ? (
|
|
64
|
+
i("div", E, [
|
|
65
|
+
s.value !== null ? (r(), a(d(g), {
|
|
65
66
|
key: 0,
|
|
66
67
|
modelValue: n.value,
|
|
67
68
|
"onUpdate:modelValue": o[1] || (o[1] = (l) => n.value = l),
|
|
68
69
|
options: s.value
|
|
69
|
-
}, null, 8, ["modelValue", "options"])) : (
|
|
70
|
+
}, null, 8, ["modelValue", "options"])) : (r(), a(d(w), {
|
|
70
71
|
key: 1,
|
|
71
72
|
modelValue: n.value,
|
|
72
73
|
"onUpdate:modelValue": o[2] || (o[2] = (l) => n.value = l),
|
|
@@ -79,6 +80,6 @@ const B = {
|
|
|
79
80
|
}
|
|
80
81
|
});
|
|
81
82
|
export {
|
|
82
|
-
|
|
83
|
+
$ as default
|
|
83
84
|
};
|
|
84
85
|
//# sourceMappingURL=DndDoubleChip.vue.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DndDoubleChip.vue.js","sources":["../../../../src/GraphMaker/components/DragAndDrop/DndDoubleChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {
|
|
1
|
+
{"version":3,"file":"DndDoubleChip.vue.js","sources":["../../../../src/GraphMaker/components/DragAndDrop/DndDoubleChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ref, watch } from 'vue';\nimport type { ListOption, ListOptionBase } from '@platforma-sdk/ui-vue';\nimport { PlAutocompleteMulti, PlDropdownMulti, PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { ChipInfo } from './types';\nimport CloseIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\nimport { useStore } from '../../../GraphMaker/store.ts';\n\nconst props = defineProps<{\n info: ChipInfo;\n error: boolean;\n searchModel: (sourceId:string, selectedValues:string[]) => Promise<ListOptionBase<string>[]>;\n searchOptions: (sourceId:string, searchStr:string) => Promise<ListOptionBase<string>[]>;\n loadOptions: (sourceId:string) => Promise<ListOptionBase<string>[] | null>;\n sortable?: boolean;\n}>();\n\nconst emit = defineEmits<{\n (e: 'close-chip', id: ChipInfo['id']): void;\n (e: 'update:filter', id: unknown): void;\n}>();\n\nconst store = useStore();\n\nconst filterModel = defineModel<string[]>('filter', {required: true});\n\nconst preloadedOptions = ref<ListOption[]|null|undefined>();\n\nwatch(() => store.value.loading.inputGuide, async (loading) => {\n if (loading) {\n return;\n }\n preloadedOptions.value = await props.loadOptions(props.info.id);\n}, {immediate: true})\n\nwatch(() => preloadedOptions.value, async (opts) => {\n if (filterModel.value !== undefined || opts === undefined) { // some filter value already selected or options isn't loaded yet\n return;\n }\n let availableOptions = opts;\n if (opts === null) { // options loaded but too many unique values\n availableOptions = await props.searchOptions(props.info.id, '');\n }\n if (availableOptions?.length) {\n filterModel.value = [availableOptions[0].value as string];\n }\n}, {immediate: true});\n\n</script>\n\n<template>\n <div ref=\"chipRoot\" class=\"dnd-double-chip__group\">\n <div :class=\"{ error, sortable }\" class=\"dnd-double-chip\">\n <div class=\"dnd-double-chip__top\">\n <div class=\"dnd-double-chip__icon\" :class=\"{error}\">\n <PlIcon16 v-if=\"error\" name=\"warning\"/>\n <PlIcon16 v-else :name=\"info.isSubsetFilter ? 'cell-type-subset' : info.type === 'String' ? 'cell-type-txt' : 'cell-type-num'\"/>\n </div>\n <div v-if=\"sortable\" class=\"dnd-basket-chip__handler\"></div>\n <PlIcon16 name=\"drag-dots\" />\n <div class=\"dnd-double-chip__title-wrapper\" :title=\"info.title\">\n <div class=\"dnd-double-chip__title\">\n {{ info.title }}\n </div>\n </div>\n\n <div\n v-html=\"CloseIcon\"\n class=\"dnd-double-chip__icon-close\"\n @click=\"$emit('close-chip', props.info.id)\"\n />\n </div>\n <div class=\"dnd-double-chip__bottom\">\n <PlDropdownMulti v-if=\"preloadedOptions !== null\" v-model=\"filterModel\" :options=\"preloadedOptions\" />\n <PlAutocompleteMulti\n v-else\n v-model=\"filterModel\"\n :options-search=\"(str) => searchOptions(props.info.id, str)\"\n :model-search=\"(v) => searchModel(props.info.id, v as string[])\"\n />\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","store","useStore","filterModel","_useModel","preloadedOptions","ref","watch","loading","opts","availableOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAQA,UAAMA,IAAQC,GAcRC,IAAQC,EAAA,GAERC,IAAcC,EAAqBJ,GAAC,QAA0B,GAE9DK,IAAmBC,EAAA;AAEzB,WAAAC,EAAM,MAAMN,EAAM,MAAM,QAAQ,YAAY,OAAOO,MAAY;AAC7D,MAAIA,MAGJH,EAAiB,QAAQ,MAAMN,EAAM,YAAYA,EAAM,KAAK,EAAE;AAAA,IAChE,GAAG,EAAC,WAAW,IAAK,GAEpBQ,EAAM,MAAMF,EAAiB,OAAO,OAAOI,MAAS;AAClD,UAAIN,EAAY,UAAU,UAAaM,MAAS;AAC9C;AAEF,UAAIC,IAAmBD;AACvB,MAAIA,MAAS,SACXC,IAAmB,MAAMX,EAAM,cAAcA,EAAM,KAAK,IAAI,EAAE,IAE5DW,KAAA,QAAAA,EAAkB,WACpBP,EAAY,QAAQ,CAACO,EAAiB,CAAC,EAAE,KAAe;AAAA,IAE5D,GAAG,EAAC,WAAW,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|