@milaboratories/graph-maker 1.1.150 → 1.1.152

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.
Files changed (98) hide show
  1. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.d.ts.map +1 -1
  2. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js +2 -1
  3. package/dist/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue.js.map +1 -1
  4. package/dist/GraphMaker/components/Chart.vue.js +3 -3
  5. package/dist/GraphMaker/components/Chart.vue.js.map +1 -1
  6. package/dist/GraphMaker/components/DragAndDrop/DnDBasketChip.vue.d.ts +3 -12
  7. package/dist/GraphMaker/components/DragAndDrop/DnDBasketChip.vue.d.ts.map +1 -1
  8. package/dist/GraphMaker/components/DragAndDrop/DnDBasketChip.vue.js +42 -85
  9. package/dist/GraphMaker/components/DragAndDrop/DnDBasketChip.vue.js.map +1 -1
  10. package/dist/GraphMaker/components/DragAndDrop/DnDRangeChip.vue.d.ts +1 -9
  11. package/dist/GraphMaker/components/DragAndDrop/DnDRangeChip.vue.d.ts.map +1 -1
  12. package/dist/GraphMaker/components/DragAndDrop/DnDRangeChip.vue.js +44 -89
  13. package/dist/GraphMaker/components/DragAndDrop/DnDRangeChip.vue.js.map +1 -1
  14. package/dist/GraphMaker/components/DragAndDrop/DndBasket.vue.d.ts +1 -3
  15. package/dist/GraphMaker/components/DragAndDrop/DndBasket.vue.d.ts.map +1 -1
  16. package/dist/GraphMaker/components/DragAndDrop/DndBasket.vue.js +68 -86
  17. package/dist/GraphMaker/components/DragAndDrop/DndBasket.vue.js.map +1 -1
  18. package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.d.ts +7 -11
  19. package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.d.ts.map +1 -1
  20. package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.js +48 -91
  21. package/dist/GraphMaker/components/DragAndDrop/DndDoubleChip.vue.js.map +1 -1
  22. package/dist/GraphMaker/components/DragAndDrop/types.d.ts +1 -21
  23. package/dist/GraphMaker/components/DragAndDrop/types.d.ts.map +1 -1
  24. package/dist/GraphMaker/components/PlColorSliderThumb.vue.js +18 -18
  25. package/dist/GraphMaker/components/PlColorSliderThumb.vue.js.map +1 -1
  26. package/dist/GraphMaker/constantsCommon.d.ts +0 -1
  27. package/dist/GraphMaker/constantsCommon.d.ts.map +1 -1
  28. package/dist/GraphMaker/constantsCommon.js +95 -95
  29. package/dist/GraphMaker/constantsCommon.js.map +1 -1
  30. package/dist/GraphMaker/forms/DataMappingForm/DendroForm.vue.d.ts.map +1 -1
  31. package/dist/GraphMaker/forms/DataMappingForm/DendroForm.vue.js +128 -166
  32. package/dist/GraphMaker/forms/DataMappingForm/DendroForm.vue.js.map +1 -1
  33. package/dist/GraphMaker/forms/DataMappingForm/useBaskets.d.ts.map +1 -1
  34. package/dist/GraphMaker/forms/DataMappingForm/useBaskets.js +93 -131
  35. package/dist/GraphMaker/forms/DataMappingForm/useBaskets.js.map +1 -1
  36. package/dist/GraphMaker/forms/DataMappingForm/utils.d.ts +1 -1
  37. package/dist/GraphMaker/forms/DataMappingForm/utils.d.ts.map +1 -1
  38. package/dist/GraphMaker/forms/DataMappingForm/utils.js +79 -155
  39. package/dist/GraphMaker/forms/DataMappingForm/utils.js.map +1 -1
  40. package/dist/GraphMaker/forms/index.js +2 -2
  41. package/dist/GraphMaker/forms/index.js.map +1 -1
  42. package/dist/GraphMaker/icons/StackedAreaIcon.vue.d.ts +3 -0
  43. package/dist/GraphMaker/icons/StackedAreaIcon.vue.d.ts.map +1 -0
  44. package/dist/GraphMaker/icons/StackedAreaIcon.vue.js +19 -0
  45. package/dist/GraphMaker/icons/StackedAreaIcon.vue.js.map +1 -0
  46. package/dist/GraphMaker/index.vue.js +1 -1
  47. package/dist/GraphMaker/store.d.ts.map +1 -1
  48. package/dist/GraphMaker/store.js +43 -45
  49. package/dist/GraphMaker/store.js.map +1 -1
  50. package/dist/GraphMaker/types.d.ts +1 -1
  51. package/dist/GraphMaker/types.d.ts.map +1 -1
  52. package/dist/GraphMaker/utils/addFixedOptionsToState.js +2 -2
  53. package/dist/GraphMaker/utils/addFixedOptionsToState.js.map +1 -1
  54. package/dist/GraphMaker/utils/createChartSettingsForRender/composeChartSettings.js +25 -25
  55. package/dist/GraphMaker/utils/createChartSettingsForRender/composeChartSettings.js.map +1 -1
  56. package/dist/GraphMaker/utils/loadDefaultSources.d.ts +2 -3
  57. package/dist/GraphMaker/utils/loadDefaultSources.d.ts.map +1 -1
  58. package/dist/GraphMaker/utils/loadDefaultSources.js +47 -51
  59. package/dist/GraphMaker/utils/loadDefaultSources.js.map +1 -1
  60. package/dist/GraphMaker/utils/loadUniqueValuesToSave.d.ts.map +1 -1
  61. package/dist/GraphMaker/utils/loadUniqueValuesToSave.js +39 -41
  62. package/dist/GraphMaker/utils/loadUniqueValuesToSave.js.map +1 -1
  63. package/dist/lib.js +1 -1
  64. package/dist/node_modules/@milaboratories/helpers/dist/objects.js +33 -0
  65. package/dist/node_modules/@milaboratories/helpers/dist/objects.js.map +1 -0
  66. package/dist/node_modules/@milaboratories/helpers/dist/utils.js +12 -0
  67. package/dist/node_modules/@milaboratories/helpers/dist/utils.js.map +1 -0
  68. package/dist/node_modules/@milaboratories/pf-plots/dist/constants.js +6 -5
  69. package/dist/node_modules/@milaboratories/pf-plots/dist/constants.js.map +1 -1
  70. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/ComponentController.js +146 -149
  71. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/ComponentController.js.map +1 -1
  72. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/ControllerBase.js +168 -221
  73. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/ControllerBase.js.map +1 -1
  74. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/bubble.js +95 -102
  75. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/bubble.js.map +1 -1
  76. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/dendro.js +145 -156
  77. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/dendro.js.map +1 -1
  78. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/discrete.js +68 -75
  79. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/discrete.js.map +1 -1
  80. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/heatmap.js +154 -159
  81. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/heatmap.js.map +1 -1
  82. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/histogram.js +48 -55
  83. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/histogram.js.map +1 -1
  84. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/scatterplot-umap.js +114 -122
  85. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/scatterplot-umap.js.map +1 -1
  86. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/scatterplot.js +111 -119
  87. package/dist/node_modules/@milaboratories/pf-plots/dist/controllers/controllersByChartType/scatterplot.js.map +1 -1
  88. package/dist/node_modules/@milaboratories/pf-plots/dist/index.js +4 -4
  89. package/dist/node_modules/@milaboratories/pf-plots/dist/pframe/ColumnsProvider.js +70 -69
  90. package/dist/node_modules/@milaboratories/pf-plots/dist/pframe/ColumnsProvider.js.map +1 -1
  91. package/dist/node_modules/@milaboratories/pf-plots/dist/spec.js +2 -2
  92. package/dist/node_modules/@milaboratories/pf-plots/dist/spec.js.map +1 -1
  93. package/dist/node_modules/@milaboratories/pf-plots/dist/utils.js +184 -183
  94. package/dist/node_modules/@milaboratories/pf-plots/dist/utils.js.map +1 -1
  95. package/dist/node_modules/@vueuse/shared/index.js.map +1 -1
  96. package/package.json +4 -4
  97. package/dist/node_modules/@milaboratories/helpers/dist/index.js +0 -372
  98. package/dist/node_modules/@milaboratories/helpers/dist/index.js.map +0 -1
@@ -1 +1 @@
1
- {"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AA2YA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,2BAA2B,EAE5B,MAAM,mBAAmB,CAAC;AAY3B,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,2BAA2B,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;;;;;;;;AA4lBF,wBASG"}
1
+ {"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AA0YA,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAChD,OAAO,EACL,2BAA2B,EAE5B,MAAM,mBAAmB,CAAC;AAY3B,KAAK,WAAW,GAAG;IACjB,eAAe,EAAE,MAAM,CAAC;IACxB,iBAAiB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC1C,gBAAgB,EAAE,MAAM,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAC3C,UAAU,EAAE,2BAA2B,CAAC;IACxC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,CAAC;;;;;;;;AA4lBF,wBASG"}
@@ -223,7 +223,8 @@ const Ce = { class: "aes-mapping-block" }, ke = { style: { margin: "0 24px" } },
223
223
  return [
224
224
  r("div", {
225
225
  onClick: w((_) => z(e), ["stop"]),
226
- style: { cursor: "pointer" }
226
+ style: { cursor: "pointer" },
227
+ class: "column-value__aes"
227
228
  }, [
228
229
  C(k(ne), {
229
230
  name: (o = l.modelValue.hidden) != null && o[e.value] ? "view-hide" : "view-show"
@@ -1 +1 @@
1
- {"version":3,"file":"AesDataMappingDiscrete.vue.js","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon24, PlTooltip, useSortable } from '@platforma-sdk/ui-vue';\nimport { scaleLinear } from 'd3-scale';\nimport { ComponentPublicInstance, computed, reactive, ref, watch } from 'vue';\nimport {\n DotShape,\n LineType,\n Palette\n} from './types';\nimport {\n FIXED_LINE_TYPES,\n FIXES_DOT_SHAPES,\n isCategorical,\n PALETTE_MAP, UNKNOWN_COLOR\n} from '../../constantsAesthetic';\nimport { AesType } from '../../constantsCommon';\nimport {\n AestheticMappingCategorical,\n createCategoricalMappingFromPalette\n} from '../../dataBindAes';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport FixedColorsList from './FixedColorsList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport Popup from '../Popup.vue';\nimport Reorder from '../../icons/Reorder.vue';\n\nconst props = defineProps<{\n dataColumnLabel: string;\n columnValueLabels: Record<string, string>;\n usedAesInMapping: Record<AesType, boolean>;\n modelValue: AestheticMappingCategorical;\n allowReordering?: boolean;\n allowHiding?: boolean;\n allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n if (activeValue.value === null) {\n return null;\n }\n return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nconst optionsList = computed(() => {\n const options = props.modelValue.order.map((value: string) => {\n const aes = props.modelValue.mapping[value]?.aes;\n return {\n text: props.columnValueLabels[value],\n value,\n dotShape: aes?.dotShape,\n color: aes?.color,\n lineType: aes?.lineShape\n };\n });\n\n return props.allowNullOption ? options : options.filter(op => op.value !== 'null')\n});\n\nfunction onPaletteSelect(value: Palette) {\n palette.value = value;\n palettesOpen.value = false;\n emit(\n 'update:modelValue',\n createCategoricalMappingFromPalette(value, props.modelValue.order)\n );\n}\n\nfunction onAesValueUpdate(\n value: string | number,\n aesField: string,\n aesValue: string | DotShape | LineType\n) {\n emit('update:modelValue', {\n ...props.modelValue,\n mapping: {\n ...props.modelValue.mapping,\n [value]: {\n ...props.modelValue.mapping[value],\n aes: {\n ...props.modelValue.mapping[value].aes,\n [aesField]: aesValue\n }\n }\n }\n });\n}\n\nconst itemRefs = reactive<\n Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n color: {},\n dotShape: {},\n lineType: {}\n});\n\nfunction setRef(\n type: EditableAesType,\n item: (typeof optionsList.value)[0],\n el: ComponentPublicInstance | null | Element\n) {\n if (el) {\n itemRefs[type][item.value] = el;\n }\n}\n\nfunction toggleForm(\n item: (typeof optionsList.value)[0],\n valueType: EditableAesType\n) {\n const isThisFormOpen =\n activeValue.value === item.value && activeAesType.value === valueType;\n activeValue.value = isThisFormOpen ? null : item.value;\n activeAesType.value = isThisFormOpen ? null : valueType;\n}\n\nfunction closeForm() {\n activeValue.value = null;\n activeAesType.value = null;\n}\n\nconst selectedColorsList = computed(() =>\n PALETTE_MAP[palette.value].colors.map((color) => ({ color, name: color }))\n);\n\nconst popupHeight = computed(() => {\n if (!activeAesType.value) {\n return 0;\n }\n return getPopupHeightForFixedAesList(\n activeAesType.value === 'lineType' ? FIXED_LINE_TYPES.length : activeAesType.value === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n activeAesType.value\n );\n});\n\nconst optionsListRef = ref();\n\nif (props.allowReordering) {\n useSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', {\n ...props.modelValue,\n order: indices.map((idx) => props.modelValue.order[idx])\n });\n }\n });\n}\n\nfunction switchVisibility (option: {value: string}) {\n emit('update:modelValue', {\n ...props.modelValue,\n hidden: {\n ...props.modelValue.hidden,\n [option.value]: props.modelValue.hidden?.[option.value] ? false : true\n }\n });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n const colorStep = 1 / (colors.length - 1);\n const scale = scaleLinear<string, string>()\n .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n .range(colors);\n return (v: number) => {\n if (v > to || v < from) {\n return unknownColor;\n }\n return scale(v);\n };\n}\n\nconst continuousColorScale = computed(() =>\n getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR)\n);\n\nconst colorForPercent = computed(() =>\n getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100)\n);\nconst continuousMappingItems = ref(\n props.modelValue.order.map(\n (item) => props.modelValue.mapping[item].colorIdx * 100\n )\n);\nwatch(\n () => props.modelValue,\n (v) => {\n continuousMappingItems.value = v.order.map(\n (item) => v.mapping[item].colorIdx * 100\n );\n }\n);\n\nfunction updateContinuousColors(v: number[]) {\n v.forEach((value, idx) => {\n const item = props.modelValue.order[idx];\n const newColorIdx = value / 100;\n if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n emit('update:modelValue', {\n ...props.modelValue,\n mapping: {\n ...props.modelValue.mapping,\n [item]: {\n colorIdx: newColorIdx,\n aes: {\n ...props.modelValue.mapping[item].aes,\n color: continuousColorScale.value(newColorIdx)\n }\n }\n }\n });\n }\n });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number, status: boolean }) {\n activeAesType.value = 'color';\n activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n</script>\n\n<template>\n <div class=\"aes-mapping-block\">\n <div style=\"margin: 0 24px\">\n <div class=\"section-title\">\n <span>{{ dataColumnLabel }}</span>\n </div>\n <div style=\"margin: 24px 0\">\n <multiselect-button\n label=\"Color Palette \"\n icon=\"chevron-right\"\n :title=\"PALETTE_MAP[palette].title\"\n :palette=\"palette\"\n @button-click=\"\n palettesOpen = true;\n closeForm();\n \"\n />\n </div>\n <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n <pl-color-slider\n v-model=\"continuousMappingItems\"\n :colors=\"PALETTE_MAP[palette].colors\"\n :get-color-for-percent=\"colorForPercent\"\n :active=\"activeValueIndex\"\n @active=\"setActiveElementFromColorSlider\"\n @update:model-value=\"updateContinuousColors\"\n />\n </div>\n <form-wrapper\n v-if=\"palettesOpen\"\n title=\"Color Palette\"\n back-title=\"Color mapping\"\n @form:close=\"palettesOpen = false\"\n >\n <palettes-form :selected=\"palette\" @select=\"onPaletteSelect\" />\n </form-wrapper>\n </div>\n <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n Drag the rows to reorder\n </div>\n <div class=\"column-values-list\" ref=\"optionsListRef\">\n <div\n v-for=\"item of optionsList\"\n class=\"column-value\"\n :class=\"{ 'column-value__with-reorder': allowReordering }\"\n >\n <div v-if=\"allowReordering\" class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n <div class=\"column-value__aes-group\">\n <PlTooltip :open-delay=\"100\" :close-delay=\"100\" v-if=\"allowHiding\">\n <div @click.stop=\"switchVisibility(item)\" :style=\"{cursor: 'pointer'}\">\n <PlIcon24 :name=\"modelValue.hidden?.[item.value] ? 'view-hide' : 'view-show'\"/>\n </div>\n <template #tooltip>\n <span> Show / hide </span>\n </template>\n </PlTooltip>\n <div\n v-if=\"usedAesInMapping.lineType\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected:\n activeValue === item.value &&\n activeAesType === 'lineType'\n }\"\n :ref=\"(v) => setRef('lineType', item, v)\"\n @click.stop=\"toggleForm(item, 'lineType')\"\n >\n <div\n class=\"icon__line line\"\n :class=\"{ [`line__${item.lineType}`]: true }\"\n />\n </div>\n <div\n v-if=\"usedAesInMapping.dotShape\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'dotShape'\n }\"\n :ref=\"(v) => setRef('dotShape', item, v)\"\n @click.stop=\"toggleForm(item, 'dotShape')\"\n >\n <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n </div>\n <div\n v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'color'\n }\"\n :ref=\"(v) => setRef('color', item, v)\"\n @click.stop=\"toggleForm(item, 'color')\"\n >\n <div\n class=\"column-value__color\"\n :style=\"{ background: item.color }\"\n />\n </div>\n <popup\n v-if=\"\n (activeAesType !== 'color' || categorical) &&\n activeAesType !== null &&\n activeValue === item.value\n \"\n :key=\"`${activeAesType}_${activeValue}`\"\n :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n @popup:close=\"closeForm\"\n :height=\"popupHeight\"\n >\n <div\n class=\"fixed-aes-list\"\n :class=\"{ 'fixed-aes-list__rows': false }\"\n >\n <fixed-line-type-list\n v-if=\"activeAesType === 'lineType'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'lineShape', v)\n \"\n v-model=\"item.lineType as LineType\"\n />\n <fixed-dot-shape-list\n v-if=\"activeAesType === 'dotShape'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'dotShape', v)\n \"\n v-model=\"item.dotShape as DotShape\"\n />\n <fixed-colors-list\n v-if=\"activeAesType === 'color'\"\n :colors-list=\"selectedColorsList\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'color', v)\n \"\n v-model=\"item.color as string\"\n />\n </div>\n </popup>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","optionsList","options","value","aes","_a","op","onPaletteSelect","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","itemRefs","reactive","setRef","type","item","el","toggleForm","valueType","isThisFormOpen","closeForm","selectedColorsList","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","optionsListRef","useSortable","indices","idx","switchVisibility","option","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","v","continuousColorScale","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","e"],"mappings":"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"}
1
+ {"version":3,"file":"AesDataMappingDiscrete.vue.js","sources":["../../../../src/GraphMaker/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlIcon24, PlTooltip, useSortable } from '@platforma-sdk/ui-vue';\nimport { scaleLinear } from 'd3-scale';\nimport { ComponentPublicInstance, computed, reactive, ref, watch } from 'vue';\nimport {\n DotShape,\n LineType,\n Palette\n} from './types';\nimport {\n FIXED_LINE_TYPES,\n FIXES_DOT_SHAPES,\n isCategorical,\n PALETTE_MAP, UNKNOWN_COLOR\n} from '../../constantsAesthetic';\nimport { AesType } from '../../constantsCommon';\nimport {\n AestheticMappingCategorical,\n createCategoricalMappingFromPalette\n} from '../../dataBindAes';\nimport { getPopupHeightForFixedAesList } from '../../utils/getPopupHeightForFixedAesList';\nimport FixedColorsList from './FixedColorsList.vue';\nimport FixedDotShapeList from './FixedDotShapeList.vue';\nimport FixedLineTypeList from './FixedLineTypeList.vue';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport Popup from '../Popup.vue';\nimport Reorder from '../../icons/Reorder.vue';\n\nconst props = defineProps<{\n dataColumnLabel: string;\n columnValueLabels: Record<string, string>;\n usedAesInMapping: Record<AesType, boolean>;\n modelValue: AestheticMappingCategorical;\n allowReordering?: boolean;\n allowHiding?: boolean;\n allowNullOption?: boolean;\n}>();\n\nconst emit = defineEmits(['update:modelValue']);\n\nconst palettesOpen = ref(false);\nconst palette = ref<Palette>(props.modelValue.palette);\nconst categorical = computed(() => isCategorical(palette.value));\n\ntype EditableAesType = 'color' | 'dotShape' | 'lineType';\n\nconst activeValue = ref<string | null>(null);\nconst activeValueIndex = computed(() => {\n if (activeValue.value === null) {\n return null;\n }\n return props.modelValue.order.indexOf(activeValue.value);\n});\nconst activeAesType = ref<EditableAesType | null>(null);\n\nconst optionsList = computed(() => {\n const options = props.modelValue.order.map((value: string) => {\n const aes = props.modelValue.mapping[value]?.aes;\n return {\n text: props.columnValueLabels[value],\n value,\n dotShape: aes?.dotShape,\n color: aes?.color,\n lineType: aes?.lineShape\n };\n });\n\n return props.allowNullOption ? options : options.filter(op => op.value !== 'null')\n});\n\nfunction onPaletteSelect(value: Palette) {\n palette.value = value;\n palettesOpen.value = false;\n emit(\n 'update:modelValue',\n createCategoricalMappingFromPalette(value, props.modelValue.order)\n );\n}\n\nfunction onAesValueUpdate(\n value: string | number,\n aesField: string,\n aesValue: string | DotShape | LineType\n) {\n emit('update:modelValue', {\n ...props.modelValue,\n mapping: {\n ...props.modelValue.mapping,\n [value]: {\n ...props.modelValue.mapping[value],\n aes: {\n ...props.modelValue.mapping[value].aes,\n [aesField]: aesValue\n }\n }\n }\n });\n}\n\nconst itemRefs = reactive<\n Record<EditableAesType, Record<string, ComponentPublicInstance | Element>>\n>({\n color: {},\n dotShape: {},\n lineType: {}\n});\n\nfunction setRef(\n type: EditableAesType,\n item: (typeof optionsList.value)[0],\n el: ComponentPublicInstance | null | Element\n) {\n if (el) {\n itemRefs[type][item.value] = el;\n }\n}\n\nfunction toggleForm(\n item: (typeof optionsList.value)[0],\n valueType: EditableAesType\n) {\n const isThisFormOpen =\n activeValue.value === item.value && activeAesType.value === valueType;\n activeValue.value = isThisFormOpen ? null : item.value;\n activeAesType.value = isThisFormOpen ? null : valueType;\n}\n\nfunction closeForm() {\n activeValue.value = null;\n activeAesType.value = null;\n}\n\nconst selectedColorsList = computed(() =>\n PALETTE_MAP[palette.value].colors.map((color) => ({ color, name: color }))\n);\n\nconst popupHeight = computed(() => {\n if (!activeAesType.value) {\n return 0;\n }\n return getPopupHeightForFixedAesList(\n activeAesType.value === 'lineType' ? FIXED_LINE_TYPES.length : activeAesType.value === 'dotShape' ? FIXES_DOT_SHAPES.length : selectedColorsList.value.length,\n activeAesType.value\n );\n});\n\nconst optionsListRef = ref();\n\nif (props.allowReordering) {\n useSortable(optionsListRef, {\n handle: '.column-value__reorder-icon',\n onChange(indices) {\n emit('update:modelValue', {\n ...props.modelValue,\n order: indices.map((idx) => props.modelValue.order[idx])\n });\n }\n });\n}\n\nfunction switchVisibility (option: {value: string}) {\n emit('update:modelValue', {\n ...props.modelValue,\n hidden: {\n ...props.modelValue.hidden,\n [option.value]: props.modelValue.hidden?.[option.value] ? false : true\n }\n });\n}\n\nfunction getColorScale(colors: string[], unknownColor: string, from = 0, to = 1) {\n const colorStep = 1 / (colors.length - 1);\n const scale = scaleLinear<string, string>()\n .domain(colors.map((_c, idx) => from + idx * colorStep * (to - from)))\n .range(colors);\n return (v: number) => {\n if (v > to || v < from) {\n return unknownColor;\n }\n return scale(v);\n };\n}\n\nconst continuousColorScale = computed(() =>\n getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR)\n);\n\nconst colorForPercent = computed(() =>\n getColorScale(PALETTE_MAP[palette.value].colors, UNKNOWN_COLOR, 0, 100)\n);\nconst continuousMappingItems = ref(\n props.modelValue.order.map(\n (item) => props.modelValue.mapping[item].colorIdx * 100\n )\n);\nwatch(\n () => props.modelValue,\n (v) => {\n continuousMappingItems.value = v.order.map(\n (item) => v.mapping[item].colorIdx * 100\n );\n }\n);\nfunction updateContinuousColors(v: number[]) {\n v.forEach((value, idx) => {\n const item = props.modelValue.order[idx];\n const newColorIdx = value / 100;\n if (props.modelValue.mapping[item].colorIdx !== newColorIdx) {\n emit('update:modelValue', {\n ...props.modelValue,\n mapping: {\n ...props.modelValue.mapping,\n [item]: {\n colorIdx: newColorIdx,\n aes: {\n ...props.modelValue.mapping[item].aes,\n color: continuousColorScale.value(newColorIdx)\n }\n }\n }\n });\n }\n });\n}\n\nfunction setActiveElementFromColorSlider(e: { index: number, status: boolean }) {\n activeAesType.value = 'color';\n activeValue.value = e.status ? props.modelValue.order[e.index] : null;\n}\n</script>\n\n<template>\n <div class=\"aes-mapping-block\">\n <div style=\"margin: 0 24px\">\n <div class=\"section-title\">\n <span>{{ dataColumnLabel }}</span>\n </div>\n <div style=\"margin: 24px 0\">\n <multiselect-button\n label=\"Color Palette \"\n icon=\"chevron-right\"\n :title=\"PALETTE_MAP[palette].title\"\n :palette=\"palette\"\n @button-click=\"\n palettesOpen = true;\n closeForm();\n \"\n />\n </div>\n <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n <pl-color-slider\n v-model=\"continuousMappingItems\"\n :colors=\"PALETTE_MAP[palette].colors\"\n :get-color-for-percent=\"colorForPercent\"\n :active=\"activeValueIndex\"\n @active=\"setActiveElementFromColorSlider\"\n @update:model-value=\"updateContinuousColors\"\n />\n </div>\n <form-wrapper\n v-if=\"palettesOpen\"\n title=\"Color Palette\"\n back-title=\"Color mapping\"\n @form:close=\"palettesOpen = false\"\n >\n <palettes-form :selected=\"palette\" @select=\"onPaletteSelect\" />\n </form-wrapper>\n </div>\n <div v-if=\"allowReordering\" class=\"aes-settings-hint\">\n Drag the rows to reorder\n </div>\n <div class=\"column-values-list\" ref=\"optionsListRef\">\n <div\n v-for=\"item of optionsList\"\n class=\"column-value\"\n :class=\"{ 'column-value__with-reorder': allowReordering }\"\n >\n <div v-if=\"allowReordering\" class=\"column-value__reorder-icon\">\n <component :is=\"Reorder\" />\n </div>\n <div class=\"column-value__title\">{{ item.text }}</div>\n <div class=\"column-value__aes-group\">\n <PlTooltip :open-delay=\"100\" :close-delay=\"100\" v-if=\"allowHiding\">\n <div @click.stop=\"switchVisibility(item)\" :style=\"{cursor: 'pointer'}\" class=\"column-value__aes\">\n <PlIcon24 :name=\"modelValue.hidden?.[item.value] ? 'view-hide' : 'view-show'\"/>\n </div>\n <template #tooltip>\n <span> Show / hide </span>\n </template>\n </PlTooltip>\n <div\n v-if=\"usedAesInMapping.lineType\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected:\n activeValue === item.value &&\n activeAesType === 'lineType'\n }\"\n :ref=\"(v) => setRef('lineType', item, v)\"\n @click.stop=\"toggleForm(item, 'lineType')\"\n >\n <div\n class=\"icon__line line\"\n :class=\"{ [`line__${item.lineType}`]: true }\"\n />\n </div>\n <div\n v-if=\"usedAesInMapping.dotShape\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'dotShape'\n }\"\n :ref=\"(v) => setRef('dotShape', item, v)\"\n @click.stop=\"toggleForm(item, 'dotShape')\"\n >\n <div class=\"dot\" :class=\"{ [`dot__${item.dotShape}`]: true }\" />\n </div>\n <div\n v-if=\"usedAesInMapping.fill || usedAesInMapping.stroke\"\n class=\"column-value__aes\"\n :class=\"{\n aes__selected: activeValue === item.value && activeAesType === 'color'\n }\"\n :ref=\"(v) => setRef('color', item, v)\"\n @click.stop=\"toggleForm(item, 'color')\"\n >\n <div\n class=\"column-value__color\"\n :style=\"{ background: item.color }\"\n />\n </div>\n <popup\n v-if=\"\n (activeAesType !== 'color' || categorical) &&\n activeAesType !== null &&\n activeValue === item.value\n \"\n :key=\"`${activeAesType}_${activeValue}`\"\n :targetRef=\"itemRefs[activeAesType][activeValue] as HTMLElement\"\n @popup:close=\"closeForm\"\n :height=\"popupHeight\"\n >\n <div\n class=\"fixed-aes-list\"\n :class=\"{ 'fixed-aes-list__rows': false }\"\n >\n <fixed-line-type-list\n v-if=\"activeAesType === 'lineType'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'lineShape', v)\n \"\n v-model=\"item.lineType as LineType\"\n />\n <fixed-dot-shape-list\n v-if=\"activeAesType === 'dotShape'\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'dotShape', v)\n \"\n v-model=\"item.dotShape as DotShape\"\n />\n <fixed-colors-list\n v-if=\"activeAesType === 'color'\"\n :colors-list=\"selectedColorsList\"\n @update:modelValue=\"\n (v) => onAesValueUpdate(item.value, 'color', v)\n \"\n v-model=\"item.color as string\"\n />\n </div>\n </popup>\n </div>\n </div>\n </div>\n </div>\n</template>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","optionsList","options","value","aes","_a","op","onPaletteSelect","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","itemRefs","reactive","setRef","type","item","el","toggleForm","valueType","isThisFormOpen","closeForm","selectedColorsList","PALETTE_MAP","color","popupHeight","getPopupHeightForFixedAesList","FIXED_LINE_TYPES","FIXES_DOT_SHAPES","optionsListRef","useSortable","indices","idx","switchVisibility","option","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","v","continuousColorScale","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","e"],"mappings":"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"}
@@ -33,8 +33,8 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
33
33
  var e;
34
34
  return (e = V.value) == null ? void 0 : e.selectedSource;
35
35
  }), C = S(() => {
36
- var e;
37
- return (e = V.value) == null ? void 0 : e.selectedFilterValue;
36
+ var e, t;
37
+ return (t = (e = V.value) == null ? void 0 : e.selectedFilterValues) == null ? void 0 : t[0];
38
38
  }), s = v(C.value);
39
39
  m(() => i.value, (e, t) => {
40
40
  e !== t && (s.value = C.value);
@@ -64,7 +64,7 @@ const Y = { class: "chart_container" }, Z = { class: "chart_header" }, x = ["val
64
64
  t.length && (a.value.reactive.optionsState.components.tabBy.selectorStates = [{
65
65
  ...t[0],
66
66
  type: "equals",
67
- selectedFilterValue: e
67
+ selectedFilterValues: [e]
68
68
  }]);
69
69
  }
70
70
  function L(e) {
@@ -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, 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_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\">\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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"}
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?.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</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\">\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","_b","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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"}
@@ -1,23 +1,14 @@
1
1
  import { ListOption } from '@platforma-sdk/ui-vue';
2
- import { ChipInfo, FixedAxisData } from './types.ts';
2
+ import { ChipInfo } from './types.ts';
3
3
  type __VLS_Props = {
4
4
  error: boolean;
5
5
  info: ChipInfo;
6
6
  sortable?: boolean;
7
- searchModel: (sourceId: string, selectedValue: string) => Promise<ListOption<string>>;
8
- searchOptions: (sourceId: string, searchStr: string) => Promise<ListOption<string>[]>;
9
7
  loadOptions: (sourceId: string) => Promise<ListOption<string>[] | null>;
10
8
  };
11
- type __VLS_PublicProps = {
12
- modelValue?: Record<string, FixedAxisData>;
13
- } & __VLS_Props;
14
- declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
15
- "update:modelValue": (value: Record<string, FixedAxisData>) => any;
16
- } & {
17
- "update:modelValue": (item: Record<string, FixedAxisData>) => any;
9
+ declare const _default: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
18
10
  "close-chip": (item: string) => any;
19
- }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
20
- "onUpdate:modelValue"?: ((value: Record<string, FixedAxisData>) => any) | undefined;
11
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
21
12
  "onClose-chip"?: ((item: string) => any) | undefined;
22
13
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
23
14
  chipRoot: HTMLDivElement;
@@ -1 +1 @@
1
- {"version":3,"file":"DnDBasketChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDBasketChip.vue"],"names":[],"mappings":"AA4HA,OAAO,EAAE,UAAU,EAAwC,MAAM,uBAAuB,CAAC;AAEzF,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAIrD,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,aAAa,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACpF,aAAa,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACpF,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;CACxE,CAAC;AAkEF,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CAC1C,GAAG,WAAW,CAAC;;;;;;;;;;;;AAyLhB,wBASG"}
1
+ {"version":3,"file":"DnDBasketChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDBasketChip.vue"],"names":[],"mappings":"AAoEA,OAAO,EAAE,UAAU,EAAY,MAAM,uBAAuB,CAAC;AAE7D,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAItC,KAAK,WAAW,GAAG;IACjB,KAAK,EAAE,OAAO,CAAC;IACf,IAAI,EAAE,QAAQ,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;CACxE,CAAC;;;;;;;;AA4IF,wBASG"}
@@ -1,117 +1,74 @@
1
- import { defineComponent as w, mergeModels as y, useModel as C, ref as m, computed as I, onMounted as S, watch as b, createElementBlock as s, openBlock as i, createElementVNode as u, createCommentVNode as p, normalizeClass as f, createVNode as D, createBlock as c, unref as d, toDisplayString as x, Fragment as B, renderList as P } from "vue";
2
- import { PlIcon16 as v, PlDropdown as U, PlAutocomplete as $ } from "@platforma-sdk/ui-vue";
3
- import { useStore as A } from "../../store.js";
4
- import H from "../../assets/drag-and-drop/img/chip-close.svg.js";
5
- const L = {
1
+ import { defineComponent as y, ref as c, computed as v, onMounted as C, createElementBlock as s, openBlock as o, createElementVNode as t, normalizeClass as r, createCommentVNode as d, createVNode as g, createBlock as p, unref as i, toDisplayString as m } from "vue";
2
+ import { PlIcon16 as l } from "@platforma-sdk/ui-vue";
3
+ import { useStore as B } from "../../store.js";
4
+ import S from "../../assets/drag-and-drop/img/chip-close.svg.js";
5
+ const V = {
6
6
  key: 0,
7
7
  class: "dnd-basket-chip__handler"
8
- }, N = { class: "dnd-basket-chip__title-wrapper" }, j = ["title"], E = ["title"], R = ["innerHTML"], q = {
9
- key: 0,
10
- class: "dnd-basket-chip__fixed-axes-block"
11
- }, Q = /* @__PURE__ */ w({
8
+ }, w = { class: "dnd-basket-chip__title-wrapper" }, D = ["title"], H = ["title"], M = ["innerHTML"], I = /* @__PURE__ */ y({
12
9
  __name: "DnDBasketChip",
13
- props: /* @__PURE__ */ y({
10
+ props: {
14
11
  error: { type: Boolean },
15
12
  info: {},
16
13
  sortable: { type: Boolean },
17
- searchModel: { type: Function },
18
- searchOptions: { type: Function },
19
14
  loadOptions: { type: Function }
20
- }, {
21
- modelValue: { default: {} },
22
- modelModifiers: {}
23
- }),
24
- emits: /* @__PURE__ */ y(["close-chip", "update:modelValue"], ["update:modelValue"]),
25
- setup(h, { emit: F }) {
26
- const t = h, T = A(), n = C(h, "modelValue"), V = F, g = m(), k = I(
27
- () => t.info.uniqueValues.join("/")
15
+ },
16
+ emits: ["close-chip"],
17
+ setup(u, { emit: f }) {
18
+ const n = u;
19
+ B();
20
+ const h = f, _ = c(), a = v(
21
+ () => n.info.uniqueValues.join("/")
28
22
  );
29
- function _() {
30
- V("close-chip", t.info.id);
23
+ function k() {
24
+ h("close-chip", n.info.id);
31
25
  }
32
- const M = m(), r = m(t.info.axesToBeFixed.reduce((e, a) => (e[a] = void 0, e), {}));
33
- return S(async () => {
34
- M.value = await t.loadOptions(t.info.id);
35
- }), b(() => T.value.inputGuide.value, async (e) => {
36
- if (!Object.values(r.value).every((a) => a !== void 0) && t.info.axesToBeFixed.every((a) => e.axesToBeFixedSet.has(a))) {
37
- const a = await Promise.all(t.info.axesToBeFixed.map((o) => t.loadOptions(o)));
38
- r.value = t.info.axesToBeFixed.reduce((o, l, O) => (o[l] = a[O], o), {});
39
- }
40
- }, { immediate: !0 }), b(() => r.value, async (e) => {
41
- for (let a = 0; a < t.info.axesToBeFixed.length; a++) {
42
- const o = t.info.axesToBeFixed[a];
43
- if (n.value[o].axisValue !== void 0 || e[o] === void 0)
44
- continue;
45
- let l = e[o];
46
- e[o] === null && (l = await t.searchOptions(o, "")), l != null && l.length && (n.value[o].axisValue = l[0].value), V("update:modelValue", n.value);
47
- }
48
- }, { immediate: !0 }), (e, a) => (i(), s("div", {
26
+ const b = c();
27
+ return C(async () => {
28
+ b.value = await n.loadOptions(n.info.id);
29
+ }), (e, N) => (o(), s("div", {
49
30
  ref_key: "chipRoot",
50
- ref: g,
31
+ ref: _,
51
32
  class: "dnd-basket-chip__group"
52
33
  }, [
53
- u("div", {
54
- class: f([{ error: e.error, sortable: e.sortable }, "dnd-basket-chip"])
34
+ t("div", {
35
+ class: r([{ error: e.error, sortable: e.sortable }, "dnd-basket-chip"])
55
36
  }, [
56
- u("div", {
57
- class: f(["dnd-basket-chip__icon", { error: e.error }])
37
+ t("div", {
38
+ class: r(["dnd-basket-chip__icon", { error: e.error }])
58
39
  }, [
59
- e.error ? (i(), c(d(v), {
40
+ e.error ? (o(), p(i(l), {
60
41
  key: 0,
61
42
  name: "warning",
62
- class: f({ error: e.error })
63
- }, null, 8, ["class"])) : (i(), c(d(v), {
43
+ class: r({ error: e.error })
44
+ }, null, 8, ["class"])) : (o(), p(i(l), {
64
45
  key: 1,
65
46
  name: e.info.isSubsetFilter ? "cell-type-subset" : e.info.type === "String" ? "cell-type-txt" : "cell-type-num"
66
47
  }, null, 8, ["name"]))
67
48
  ], 2),
68
- e.sortable ? (i(), s("div", L)) : p("", !0),
69
- D(d(v), { name: "drag-dots" }),
70
- u("div", N, [
71
- u("div", {
49
+ e.sortable ? (o(), s("div", V)) : d("", !0),
50
+ g(i(l), { name: "drag-dots" }),
51
+ t("div", w, [
52
+ t("div", {
72
53
  class: "dnd-basket-chip__title",
73
54
  title: e.info.title
74
- }, x(e.info.title), 9, j),
75
- e.info.nonHomogenous ? (i(), s("div", {
55
+ }, m(e.info.title), 9, D),
56
+ e.info.nonHomogenous ? (o(), s("div", {
76
57
  key: 0,
77
58
  class: "dnd-basket-chip__sub-title",
78
- title: k.value
79
- }, x(k.value), 9, E)) : p("", !0)
59
+ title: a.value
60
+ }, m(a.value), 9, H)) : d("", !0)
80
61
  ]),
81
- u("div", {
82
- innerHTML: d(H),
62
+ t("div", {
63
+ innerHTML: i(S),
83
64
  class: "dnd-basket-chip__icon-close",
84
- onClick: _
85
- }, null, 8, R)
86
- ], 2),
87
- e.info.axesToBeFixed.length > 0 ? (i(), s("div", q, [
88
- (i(!0), s(B, null, P(e.info.axesToBeFixed, (o) => (i(), s(B, { key: o }, [
89
- n.value[o] && r.value[o] !== null ? (i(), c(d(U), {
90
- key: 0,
91
- modelValue: n.value[o].axisValue,
92
- "onUpdate:modelValue": [
93
- (l) => n.value[o].axisValue = l,
94
- a[0] || (a[0] = (l) => e.$emit("update:modelValue", n.value))
95
- ],
96
- options: r.value[o],
97
- label: e.info.axesToBeFixedInfo[o].title
98
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options", "label"])) : n.value[o] ? (i(), c(d($), {
99
- key: 1,
100
- modelValue: n.value[o].axisValue,
101
- "onUpdate:modelValue": [
102
- (l) => n.value[o].axisValue = l,
103
- a[1] || (a[1] = (l) => e.$emit("update:modelValue", n.value))
104
- ],
105
- "options-search": (l) => e.searchOptions(o, l),
106
- "model-search": (l) => e.searchModel(o, l),
107
- label: e.info.axesToBeFixedInfo[o].title
108
- }, null, 8, ["modelValue", "onUpdate:modelValue", "options-search", "model-search", "label"])) : p("", !0)
109
- ], 64))), 128))
110
- ])) : p("", !0)
65
+ onClick: k
66
+ }, null, 8, M)
67
+ ], 2)
111
68
  ], 512));
112
69
  }
113
70
  });
114
71
  export {
115
- Q as default
72
+ I as default
116
73
  };
117
74
  //# sourceMappingURL=DnDBasketChip.vue.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"DnDBasketChip.vue.js","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDBasketChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ListOption, PlAutocomplete, PlDropdown, PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, ref, watch } from 'vue';\nimport { ChipInfo, FixedAxisData } from './types.ts';\nimport { useStore } from '../../store';\nimport CloseChipIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\n\nconst props = defineProps<{\n error: boolean;\n info: ChipInfo;\n sortable?: boolean;\n searchModel: (sourceId:string, selectedValue:string) => Promise<ListOption<string>>;\n searchOptions: (sourceId:string, searchStr:string) => Promise<ListOption<string>[]>;\n loadOptions: (sourceId:string) => Promise<ListOption<string>[] | null>;\n}>();\n\nconst store = useStore();\n\nconst fixedAxesModel = defineModel<Record<string, FixedAxisData>>({default: {}});\n\nconst emit = defineEmits<{\n (e: 'close-chip', item: ChipInfo['id']): void;\n (e: 'update:modelValue', item: Record<string, FixedAxisData>): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n props.info.uniqueValues.join('/')\n);\n\nfunction closeChip() {\n emit('close-chip', props.info['id']);\n}\n\nconst preloadedOptions = ref<ListOption[]|null|undefined>();\nconst preloadedOptionsForAxesToBeFixed = ref<Record<string, ListOption[] | null | undefined>>(props.info.axesToBeFixed.reduce((res, v) => {\n res[v] = undefined;\n return res;\n}, {} as Record<string, ListOption[] | null | undefined>))\nonMounted(async () => {\n preloadedOptions.value = await props.loadOptions(props.info.id);\n});\nwatch(() => store.value.inputGuide.value, async (ig) => {\n if (Object.values(preloadedOptionsForAxesToBeFixed.value).every(v => v !== undefined)) {\n return;\n }\n if (props.info.axesToBeFixed.every((axisId) => ig.axesToBeFixedSet.has(axisId))) {\n const axesToBeFixedOptions = await Promise.all(props.info.axesToBeFixed.map((id) => props.loadOptions(id)));\n preloadedOptionsForAxesToBeFixed.value = props.info.axesToBeFixed.reduce((res, v, idx) => {\n res[v] = axesToBeFixedOptions[idx];\n return res;\n }, {} as Record<string, ListOption[] | null | undefined>)\n }\n}, {immediate: true});\n\nwatch(() => preloadedOptionsForAxesToBeFixed.value, async (opts) => {\n for (let i = 0; i < props.info.axesToBeFixed.length; i++) {\n const axisId = props.info.axesToBeFixed[i];\n if (fixedAxesModel.value[axisId].axisValue !== undefined || opts[axisId] === undefined) {\n continue;\n }\n let availableOptions = opts[axisId];\n if (opts[axisId] === null) {\n availableOptions = await props.searchOptions(axisId, '');\n }\n if (availableOptions?.length) {\n fixedAxesModel.value[axisId].axisValue = availableOptions[0].value as string;\n }\n emit('update:modelValue', fixedAxesModel.value);\n }\n}, {immediate: true});\n\n</script>\n<template>\n <div ref=\"chipRoot\" class=\"dnd-basket-chip__group\">\n <div :class=\"{ error, sortable }\" class=\"dnd-basket-chip\">\n <div class=\"dnd-basket-chip__icon\" :class=\"{error}\">\n <PlIcon16 v-if=\"error\" name=\"warning\" :class=\"{error}\" />\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-basket-chip__title-wrapper\">\n <div class=\"dnd-basket-chip__title\" :title=\"info.title\">\n {{ info.title }}\n </div>\n <div\n v-if=\"info.nonHomogenous\"\n class=\"dnd-basket-chip__sub-title\"\n :title=\"dimensionsTitle\"\n >\n {{ dimensionsTitle }}\n </div>\n </div>\n <div\n v-html=\"CloseChipIcon\"\n class=\"dnd-basket-chip__icon-close\"\n @click=\"closeChip\"\n />\n </div>\n <div class=\"dnd-basket-chip__fixed-axes-block\" v-if=\"info.axesToBeFixed.length > 0\">\n <template v-for=\"id in info.axesToBeFixed\" :key=\"id\">\n <PlDropdown\n v-if=\"fixedAxesModel[id] && preloadedOptionsForAxesToBeFixed[id] !== null\"\n v-model=\"fixedAxesModel[id].axisValue\"\n @update:model-value=\"$emit('update:modelValue', fixedAxesModel)\"\n :options=\"preloadedOptionsForAxesToBeFixed[id]\"\n :label=\"info.axesToBeFixedInfo[id].title\"\n />\n <PlAutocomplete\n v-else-if=\"fixedAxesModel[id]\"\n v-model=\"fixedAxesModel[id].axisValue\"\n @update:model-value=\"$emit('update:modelValue', fixedAxesModel)\"\n :options-search=\"(str) => searchOptions(id, str)\"\n :model-search=\"(v) => searchModel(id, v as string)\"\n :label=\"info.axesToBeFixedInfo[id].title\"\n />\n </template>\n </div>\n </div>\n</template>\n"],"names":["props","__props","store","useStore","fixedAxesModel","_useModel","emit","__emit","chipRoot","ref","dimensionsTitle","computed","closeChip","preloadedOptions","preloadedOptionsForAxesToBeFixed","res","v","onMounted","watch","ig","axisId","axesToBeFixedOptions","id","idx","opts","i","availableOptions"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC,GASRC,IAAQC,EAAA,GAERC,IAAiBC,EAA0CJ,GAAA,YAAc,GAEzEK,IAAOC,GAKPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BX,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAGlC,aAASY,IAAY;AACnB,MAAAN,EAAK,cAAcN,EAAM,KAAK,EAAK;AAAA,IACrC;AAEA,UAAMa,IAAmBJ,EAAA,GACnBK,IAAmCL,EAAqDT,EAAM,KAAK,cAAc,OAAO,CAACe,GAAKC,OAClID,EAAIC,CAAC,IAAI,QACFD,IACN,CAAA,CAAqD,CAAC;AACzD,WAAAE,EAAU,YAAY;AACpB,MAAAJ,EAAiB,QAAQ,MAAMb,EAAM,YAAYA,EAAM,KAAK,EAAE;AAAA,IAChE,CAAC,GACDkB,EAAM,MAAMhB,EAAM,MAAM,WAAW,OAAO,OAAOiB,MAAO;AACtD,UAAI,QAAO,OAAOL,EAAiC,KAAK,EAAE,MAAM,CAAAE,MAAKA,MAAM,MAAS,KAGhFhB,EAAM,KAAK,cAAc,MAAM,CAACoB,MAAWD,EAAG,iBAAiB,IAAIC,CAAM,CAAC,GAAG;AAC/E,cAAMC,IAAuB,MAAM,QAAQ,IAAIrB,EAAM,KAAK,cAAc,IAAI,CAACsB,MAAOtB,EAAM,YAAYsB,CAAE,CAAC,CAAC;AAC1G,QAAAR,EAAiC,QAAQd,EAAM,KAAK,cAAc,OAAO,CAACe,GAAKC,GAAGO,OAChFR,EAAIC,CAAC,IAAIK,EAAqBE,CAAG,GAC1BR,IACN,CAAA,CAAqD;AAAA,MAC1D;AAAA,IACF,GAAG,EAAC,WAAW,IAAK,GAEpBG,EAAM,MAAMJ,EAAiC,OAAO,OAAOU,MAAS;AAClE,eAASC,IAAI,GAAGA,IAAIzB,EAAM,KAAK,cAAc,QAAQyB,KAAK;AACxD,cAAML,IAASpB,EAAM,KAAK,cAAcyB,CAAC;AACzC,YAAIrB,EAAe,MAAMgB,CAAM,EAAE,cAAc,UAAaI,EAAKJ,CAAM,MAAM;AAC3E;AAEF,YAAIM,IAAmBF,EAAKJ,CAAM;AAClC,QAAII,EAAKJ,CAAM,MAAM,SACnBM,IAAmB,MAAM1B,EAAM,cAAcoB,GAAQ,EAAE,IAErDM,KAAA,QAAAA,EAAkB,WACpBtB,EAAe,MAAMgB,CAAM,EAAE,YAAYM,EAAiB,CAAC,EAAE,QAE/DpB,EAAK,qBAAqBF,EAAe,KAAK;AAAA,MAChD;AAAA,IACF,GAAG,EAAC,WAAW,IAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"DnDBasketChip.vue.js","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDBasketChip.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ListOption, PlIcon16 } from '@platforma-sdk/ui-vue';\nimport { computed, onMounted, ref } from 'vue';\nimport { ChipInfo } from './types.ts';\nimport { useStore } from '../../store';\nimport CloseChipIcon from '../../assets/drag-and-drop/img/chip-close.svg?raw';\n\nconst props = defineProps<{\n error: boolean;\n info: ChipInfo;\n sortable?: boolean;\n loadOptions: (sourceId:string) => Promise<ListOption<string>[] | null>;\n}>();\n\nconst store = useStore();\n\n\nconst emit = defineEmits<{\n (e: 'close-chip', item: ChipInfo['id']): void;\n}>();\n\nconst chipRoot = ref<HTMLElement>();\n\nconst dimensionsTitle = computed(() =>\n props.info.uniqueValues.join('/')\n);\n\nfunction closeChip() {\n emit('close-chip', props.info['id']);\n}\n\nconst preloadedOptions = ref<ListOption[]|null|undefined>();\nonMounted(async () => {\n preloadedOptions.value = await props.loadOptions(props.info.id);\n});\n\n</script>\n<template>\n <div ref=\"chipRoot\" class=\"dnd-basket-chip__group\">\n <div :class=\"{ error, sortable }\" class=\"dnd-basket-chip\">\n <div class=\"dnd-basket-chip__icon\" :class=\"{error}\">\n <PlIcon16 v-if=\"error\" name=\"warning\" :class=\"{error}\" />\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-basket-chip__title-wrapper\">\n <div class=\"dnd-basket-chip__title\" :title=\"info.title\">\n {{ info.title }}\n </div>\n <div\n v-if=\"info.nonHomogenous\"\n class=\"dnd-basket-chip__sub-title\"\n :title=\"dimensionsTitle\"\n >\n {{ dimensionsTitle }}\n </div>\n </div>\n <div\n v-html=\"CloseChipIcon\"\n class=\"dnd-basket-chip__icon-close\"\n @click=\"closeChip\"\n />\n </div>\n </div>\n</template>\n"],"names":["props","__props","useStore","emit","__emit","chipRoot","ref","dimensionsTitle","computed","closeChip","preloadedOptions","onMounted"],"mappings":";;;;;;;;;;;;;;;;;AAOA,UAAMA,IAAQC;AAOA,IAAAC,EAAA;AAGd,UAAMC,IAAOC,GAIPC,IAAWC,EAAA,GAEXC,IAAkBC;AAAA,MAAS,MAC/BR,EAAM,KAAK,aAAa,KAAK,GAAG;AAAA,IAAA;AAGlC,aAASS,IAAY;AACnB,MAAAN,EAAK,cAAcH,EAAM,KAAK,EAAK;AAAA,IACrC;AAEA,UAAMU,IAAmBJ,EAAA;AACzB,WAAAK,EAAU,YAAY;AACpB,MAAAD,EAAiB,QAAQ,MAAMV,EAAM,YAAYA,EAAM,KAAK,EAAE;AAAA,IAChE,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,26 +1,18 @@
1
- import { ChipInfo, FixedAxisData } from './types.ts';
2
- import { ListOption } from '@platforma-sdk/ui-vue';
1
+ import { ChipInfo } from './types.ts';
3
2
  type __VLS_Props = {
4
3
  info: ChipInfo;
5
4
  error: boolean;
6
- searchModel: (sourceId: string, selectedValue: string) => Promise<ListOption<string>>;
7
- searchOptions: (sourceId: string, searchStr: string) => Promise<ListOption<string>[]>;
8
- loadOptions: (sourceId: string) => Promise<ListOption<string>[] | null>;
9
5
  };
10
6
  type __VLS_PublicProps = {
11
7
  'filter': any;
12
- 'fixedAxes': Record<string, FixedAxisData>;
13
8
  } & __VLS_Props;
14
9
  declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
15
10
  "update:filter": (value: any) => any;
16
- "update:fixedAxes": (value: Record<string, FixedAxisData>) => any;
17
11
  } & {
18
12
  "close-chip": (id: string) => any;
19
- "update:fixedAxes": (id: Record<string, FixedAxisData>) => any;
20
13
  }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
21
14
  "onClose-chip"?: ((id: string) => any) | undefined;
22
15
  "onUpdate:filter"?: ((value: any) => any) | undefined;
23
- "onUpdate:fixedAxes"?: ((value: Record<string, FixedAxisData>) => any) | undefined;
24
16
  }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
25
17
  chipRoot: HTMLDivElement;
26
18
  }, HTMLDivElement>;
@@ -1 +1 @@
1
- {"version":3,"file":"DnDRangeChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDRangeChip.vue"],"names":[],"mappings":"AAmIA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGrD,OAAO,EAAwC,UAAU,EAAiB,MAAM,uBAAuB,CAAC;AAGxG,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,aAAa,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;IACpF,aAAa,EAAE,CAAC,QAAQ,EAAC,MAAM,EAAE,SAAS,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IACpF,WAAW,EAAE,CAAC,QAAQ,EAAC,MAAM,KAAK,OAAO,CAAC,UAAU,CAAC,MAAM,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC;CACxE,CAAC;AA8DF,KAAK,iBAAiB,GAAG;IACzB,QAAQ,EAAE,GAAG,CAAC;IACd,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;CAC1C,GAAG,WAAW,CAAC;;;;;;;;;;;;;;AAgMhB,wBASG"}
1
+ {"version":3,"file":"DnDRangeChip.vue.d.ts","sourceRoot":"","sources":["../../../../src/GraphMaker/components/DragAndDrop/DnDRangeChip.vue"],"names":[],"mappings":"AAyEA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAMtC,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,QAAQ,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;CAChB,CAAC;AA0BF,KAAK,iBAAiB,GAAG;IACzB,QAAQ,EAAE,GAAG,CAAC;CACb,GAAG,WAAW,CAAC;;;;;;;;;;;AA0HhB,wBASG"}