@milaboratories/graph-maker 1.2.0 → 1.2.1

package/dist/components/AesSettings/AesDataMappingDiscrete.css

@@ -1 +1 @@
-._discreteRow_19vpm_2{background-color:var(--color-ic-00);border-color:var(--color-div-grey)}._discreteRow_19vpm_2:hover{--head-background: var(--color-ic-00)}._discreteRowTitle_19vpm_9{padding-top:0;padding-bottom:0;background-color:var(--color-ic-00)}._discreteRow_19vpm_2:hover ._discreteRowTitle_19vpm_9{background-color:var(--color-ic-00)}
+.graph-maker ._discreteRow_1lqg1_2{background-color:var(--color-ic-00);border-color:var(--color-div-grey)}.graph-maker ._discreteRow_1lqg1_2:hover{--head-background: var(--color-ic-00)}.graph-maker ._discreteRowTitle_1lqg1_9,.sortable-chosen ._discreteRowTitle_1lqg1_9{padding-top:0;padding-bottom:0;background-color:var(--color-ic-00)}.graph-maker ._discreteRow_1lqg1_2:hover ._discreteRowTitle_1lqg1_9{background-color:var(--color-ic-00)}

package/dist/components/AesSettings/AesDataMappingDiscrete.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AAyRA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EACV,2BAA2B,EAC5B,MAAM,mBAAmB,CAAC;AAW3B,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;;;;;;AAsZF,wBAQG"}
+{"version":3,"file":"AesDataMappingDiscrete.vue.d.ts","sourceRoot":"","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"names":[],"mappings":"AA0RA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,KAAK,EACV,2BAA2B,EAC5B,MAAM,mBAAmB,CAAC;AAW3B,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;;;;;;AAsZF,wBAQG"}

package/dist/components/AesSettings/AesDataMappingDiscrete.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"AesDataMappingDiscrete.vue2.js","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  createCategoricalMappingFromPalette,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-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\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\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\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\nfunction getOptionsList(data: AestheticMappingCategorical, allowNullOption: boolean) {\n  const options = data.order.map((value: string) => {\n    return {\n      text: props.columnValueLabels[value],\n      value,\n      dotShape: data.mapping[value]?.aes?.dotShape,\n      color: data.mapping[value]?.aes?.color,\n      lineType: data.mapping[value]?.aes?.lineShape,\n    };\n  });\n  return allowNullOption ? options : options.filter((op) => op.value !== 'null');\n}\n\nconst optionsList = ref(getOptionsList(props.modelValue, props.allowNullOption));\nconst reordarableItems = computed(() => optionsList.value);\n\nwatch(\n  [() => palette.value, () => props.allowNullOption],\n  () => {\n    optionsList.value = getOptionsList(props.modelValue, props.allowNullOption);\n  },\n  { deep: true },\n);\nwatch(() => reordarableItems.value, (v) => {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    order: v.map((item) => item.value),\n  });\n}, { deep: true });\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        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\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\">\n      <PlElementList\n        v-model:items=\"reordarableItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\"\n            :active-value=\"activeValue\"\n            :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\"\n            :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\"\n            :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\"\n            :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n.discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n.discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n.discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n.discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","onPaletteSelect","value","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","closeForm","switchVisibility","option","_a","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","idx","v","continuousColorScale","PALETTE_MAP","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","item","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","getOptionsList","data","allowNullOption","options","_b","_d","_f","_e","op","optionsList","reordarableItems","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","MultiselectButton","_unref","_cache","$event","_hoisted_5","PlColorSlider","_createBlock","FormWrapper","PalettesForm","_hoisted_6","_hoisted_7","PlElementList","$style","_withCtx","DiscreteRow","field"],"mappings":"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"}
+{"version":3,"file":"AesDataMappingDiscrete.vue2.js","sources":["../../../src/components/AesSettings/AesDataMappingDiscrete.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { scaleLinear } from 'd3-scale';\nimport { computed, ref, watch } from 'vue';\nimport type {\n  DotShape,\n  LineType,\n  Palette,\n} from './types';\nimport {\n  isCategorical,\n  PALETTE_MAP, UNKNOWN_COLOR,\n} from '../../constantsAesthetic';\nimport type { AesType } from '../../constantsCommon';\nimport type {\n  AestheticMappingCategorical,\n} from '../../dataBindAes';\nimport {\n  createCategoricalMappingFromPalette,\n} from '../../dataBindAes';\nimport FormWrapper from './FormWrapper.vue';\nimport PalettesForm from './PalettesForm.vue';\nimport MultiselectButton from '../MultiselectButton.vue';\nimport PlColorSlider from '../PlColorSlider.vue';\nimport DiscreteRow from './DiscreteRow.vue';\nimport { PlElementList } from '@platforma-sdk/ui-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\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\nfunction closeForm() {\n  activeValue.value = null;\n  activeAesType.value = null;\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\nfunction getOptionsList(data: AestheticMappingCategorical, allowNullOption: boolean) {\n  const options = data.order.map((value: string) => {\n    return {\n      text: props.columnValueLabels[value],\n      value,\n      dotShape: data.mapping[value]?.aes?.dotShape,\n      color: data.mapping[value]?.aes?.color,\n      lineType: data.mapping[value]?.aes?.lineShape,\n    };\n  });\n  return allowNullOption ? options : options.filter((op) => op.value !== 'null');\n}\n\nconst optionsList = ref(getOptionsList(props.modelValue, props.allowNullOption));\nconst reordarableItems = computed(() => optionsList.value);\n\nwatch(\n  [() => palette.value, () => props.allowNullOption],\n  () => {\n    optionsList.value = getOptionsList(props.modelValue, props.allowNullOption);\n  },\n  { deep: true },\n);\nwatch(() => reordarableItems.value, (v) => {\n  emit('update:modelValue', {\n    ...props.modelValue,\n    order: v.map((item) => item.value),\n  });\n}, { deep: true });\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        <MultiselectButton\n          label=\"Color Palette \" icon=\"chevron-right\" :title=\"PALETTE_MAP[palette].title\"\n          :palette=\"palette\" @button-click=\"\n            palettesOpen = true;\n            closeForm();\n          \"\n        />\n      </div>\n      <div v-if=\"!categorical\" style=\"margin: 24px 0\">\n        <PlColorSlider\n          v-model=\"continuousMappingItems\" :colors=\"PALETTE_MAP[palette].colors\"\n          :get-color-for-percent=\"colorForPercent\" :active=\"activeValueIndex\" @active=\"setActiveElementFromColorSlider\"\n          @update:model-value=\"updateContinuousColors\"\n        />\n      </div>\n      <FormWrapper\n        v-if=\"palettesOpen\" title=\"Color Palette\" back-title=\"Color mapping\"\n        @form:close=\"palettesOpen = false\"\n      >\n        <PalettesForm :selected=\"palette\" @select=\"onPaletteSelect\" />\n      </FormWrapper>\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\">\n      <PlElementList\n        v-model:items=\"reordarableItems\"\n        :get-item-key=\"(item) => item.value\"\n        :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\"\n        :disableDragging=\"!allowReordering\"\n        :disableRemoving=\"true\"\n        :disableToggling=\"true\"\n        :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <DiscreteRow\n            :item=\"item\"\n            :active-value=\"activeValue\"\n            :active-aes-type=\"activeAesType\"\n            :used-aes-in-mapping=\"props.usedAesInMapping\"\n            :allow-hiding=\"allowHiding ?? false\"\n            :allow-reordering=\"allowReordering ?? false\"\n            :hidden=\"props.modelValue.hidden?.[item.value] ?? false\"\n            :palette=\"palette\"\n            :is-categorical=\"categorical\"\n            :on-aes-value-update=\"(field: string, value: string | DotShape | LineType) => onAesValueUpdate(item.value, field, value)\"\n            :on-switch-visibility=\"() => switchVisibility(item)\" :on-active-value-change=\"(v) => activeValue = v\"\n            :on-active-aes-type-change=\"(v) => activeAesType = v\" :on-close-form=\"closeForm\"\n          />\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n:global(.graph-maker) .discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n:global(.graph-maker) .discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRowTitle,\n:global(.sortable-chosen) .discreteRowTitle {\n  padding-top: 0;\n  padding-bottom: 0;\n  background-color: var(--color-ic-00);\n}\n:global(.graph-maker) .discreteRow:hover .discreteRowTitle {\n  background-color: var(--color-ic-00);\n}\n</style>\n"],"names":["props","__props","emit","__emit","palettesOpen","ref","palette","categorical","computed","isCategorical","activeValue","activeValueIndex","activeAesType","onPaletteSelect","value","createCategoricalMappingFromPalette","onAesValueUpdate","aesField","aesValue","closeForm","switchVisibility","option","_a","getColorScale","colors","unknownColor","from","to","colorStep","scale","scaleLinear","_c","idx","v","continuousColorScale","PALETTE_MAP","UNKNOWN_COLOR","colorForPercent","continuousMappingItems","item","watch","updateContinuousColors","newColorIdx","setActiveElementFromColorSlider","getOptionsList","data","allowNullOption","options","_b","_d","_f","_e","op","optionsList","reordarableItems","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","_createVNode","MultiselectButton","_unref","_cache","$event","_hoisted_5","PlColorSlider","_createBlock","FormWrapper","PalettesForm","_hoisted_6","_hoisted_7","PlElementList","$style","_withCtx","DiscreteRow","field"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0BA,UAAMA,IAAQC,GAURC,IAAOC,GAEPC,IAAeC,EAAI,EAAK,GACxBC,IAAUD,EAAaL,EAAM,WAAW,OAAO,GAC/CO,IAAcC,EAAS,MAAMC,EAAcH,EAAQ,KAAK,CAAC,GAIzDI,IAAcL,EAAmB,IAAI,GACrCM,IAAmBH,EAAS,MAC5BE,EAAY,UAAU,OACjB,OAEFV,EAAM,WAAW,MAAM,QAAQU,EAAY,KAAK,CACxD,GACKE,IAAgBP,EAA4B,IAAI;AAEtD,aAASQ,EAAgBC,GAAgB;AACvC,MAAAR,EAAQ,QAAQQ,GAChBV,EAAa,QAAQ,IACrBF;AAAA,QACE;AAAA,QACAa,EAAoCD,GAAOd,EAAM,WAAW,KAAK;AAAA,MAAA;AAAA,IAErE;AAEA,aAASgB,EACPF,GACAG,GACAC,GACA;AACA,MAAAhB,EAAK,qBAAqB;AAAA,QACxB,GAAGF,EAAM;AAAA,QACT,SAAS;AAAA,UACP,GAAGA,EAAM,WAAW;AAAA,UACpB,CAACc,CAAK,GAAG;AAAA,YACP,GAAGd,EAAM,WAAW,QAAQc,CAAK;AAAA,YACjC,KAAK;AAAA,cACH,GAAGd,EAAM,WAAW,QAAQc,CAAK,EAAE;AAAA,cACnC,CAACG,CAAQ,GAAGC;AAAA,YAAA;AAAA,UACd;AAAA,QACF;AAAA,MACF,CACD;AAAA,IACH;AAEA,aAASC,IAAY;AACnB,MAAAT,EAAY,QAAQ,MACpBE,EAAc,QAAQ;AAAA,IACxB;AAEA,aAASQ,EAAiBC,GAA2B;;AACnD,MAAAnB,EAAK,qBAAqB;AAAA,QACxB,GAAGF,EAAM;AAAA,QACT,QAAQ;AAAA,UACN,GAAGA,EAAM,WAAW;AAAA,UACpB,CAACqB,EAAO,KAAK,GAAG,GAAAC,IAAAtB,EAAM,WAAW,WAAjB,QAAAsB,EAA0BD,EAAO;AAAA,QAAiB;AAAA,MACpE,CACD;AAAA,IACH;AAEA,aAASE,EAAcC,GAAkBC,GAAsBC,IAAO,GAAGC,IAAK,GAAG;AAC/E,YAAMC,IAAY,KAAKJ,EAAO,SAAS,IACjCK,IAAQC,IACX,OAAON,EAAO,IAAI,CAACO,GAAIC,MAAQN,IAAOM,IAAMJ,KAAaD,IAAKD,EAAK,CAAC,EACpE,MAAMF,CAAM;AACf,aAAO,CAACS,MACFA,IAAIN,KAAMM,IAAIP,IACTD,IAEFI,EAAMI,CAAC;AAAA,IAElB;AAEA,UAAMC,IAAuB1B;AAAA,MAAS,MACpCe,EAAcY,EAAY7B,EAAQ,KAAK,EAAE,QAAQ8B,CAAa;AAAA,IAAA,GAG1DC,IAAkB7B;AAAA,MAAS,MAC/Be,EAAcY,EAAY7B,EAAQ,KAAK,EAAE,QAAQ8B,GAAe,GAAG,GAAG;AAAA,IAAA,GAElEE,IAAyBjC;AAAA,MAC7BL,EAAM,WAAW,MAAM;AAAA,QACrB,CAACuC,MAASvC,EAAM,WAAW,QAAQuC,CAAI,EAAE,WAAW;AAAA,MAAA;AAAA,IACtD;AAEF,IAAAC;AAAA,MACE,MAAMxC,EAAM;AAAA,MACZ,CAACiC,MAAM;AACL,QAAAK,EAAuB,QAAQL,EAAE,MAAM;AAAA,UACrC,CAACM,MAASN,EAAE,QAAQM,CAAI,EAAE,WAAW;AAAA,QAAA;AAAA,MAEzC;AAAA,IAAA;AAEF,aAASE,EAAuBR,GAAa;AAC3C,MAAAA,EAAE,QAAQ,CAACnB,GAAOkB,MAAQ;AACxB,cAAMO,IAAOvC,EAAM,WAAW,MAAMgC,CAAG,GACjCU,IAAc5B,IAAQ;AAC5B,QAAId,EAAM,WAAW,QAAQuC,CAAI,EAAE,aAAaG,KAC9CxC,EAAK,qBAAqB;AAAA,UACxB,GAAGF,EAAM;AAAA,UACT,SAAS;AAAA,YACP,GAAGA,EAAM,WAAW;AAAA,YACpB,CAACuC,CAAI,GAAG;AAAA,cACN,UAAUG;AAAA,cACV,KAAK;AAAA,gBACH,GAAG1C,EAAM,WAAW,QAAQuC,CAAI,EAAE;AAAA,gBAClC,OAAOL,EAAqB,MAAMQ,CAAW;AAAA,cAAA;AAAA,YAC/C;AAAA,UACF;AAAA,QACF,CACD;AAAA,MAEL,CAAC;AAAA,IACH;AAEA,aAASC,EAAgC,GAAuC;AAC9E,MAAA/B,EAAc,QAAQ,SACtBF,EAAY,QAAQ,EAAE,SAASV,EAAM,WAAW,MAAM,EAAE,KAAK,IAAI;AAAA,IACnE;AAEA,aAAS4C,EAAeC,GAAmCC,GAA0B;AACnF,YAAMC,IAAUF,EAAK,MAAM,IAAI,CAAC/B,MAAkB;;AAChD,eAAO;AAAA,UACL,MAAMd,EAAM,kBAAkBc,CAAK;AAAA,UACnC,OAAAA;AAAA,UACA,WAAUkC,KAAA1B,IAAAuB,EAAK,QAAQ/B,CAAK,MAAlB,gBAAAQ,EAAqB,QAArB,gBAAA0B,EAA0B;AAAA,UACpC,QAAOC,KAAAlB,IAAAc,EAAK,QAAQ/B,CAAK,MAAlB,gBAAAiB,EAAqB,QAArB,gBAAAkB,EAA0B;AAAA,UACjC,WAAUC,KAAAC,IAAAN,EAAK,QAAQ/B,CAAK,MAAlB,gBAAAqC,EAAqB,QAArB,gBAAAD,EAA0B;AAAA,QAAA;AAAA,MAExC,CAAC;AACD,aAAOJ,IAAkBC,IAAUA,EAAQ,OAAO,CAACK,MAAOA,EAAG,UAAU,MAAM;AAAA,IAC/E;AAEA,UAAMC,IAAchD,EAAIuC,EAAe5C,EAAM,YAAYA,EAAM,eAAe,CAAC,GACzEsD,IAAmB9C,EAAS,MAAM6C,EAAY,KAAK;AAEzD,WAAAb;AAAA,MACE,CAAC,MAAMlC,EAAQ,OAAO,MAAMN,EAAM,eAAe;AAAA,MACjD,MAAM;AACJ,QAAAqD,EAAY,QAAQT,EAAe5C,EAAM,YAAYA,EAAM,eAAe;AAAA,MAC5E;AAAA,MACA,EAAE,MAAM,GAAA;AAAA,IAAK,GAEfwC,EAAM,MAAMc,EAAiB,OAAO,CAACrB,MAAM;AACzC,MAAA/B,EAAK,qBAAqB;AAAA,QACxB,GAAGF,EAAM;AAAA,QACT,OAAOiC,EAAE,IAAI,CAACM,MAASA,EAAK,KAAK;AAAA,MAAA,CAClC;AAAA,IACH,GAAG,EAAE,MAAM,IAAM,cAIfgB,EAAA,GAAAC,EA4DM,OA5DNC,IA4DM;AAAA,MA3DJC,EA0BM,OA1BNC,IA0BM;AAAA,QAzBJD,EAEM,OAFNE,IAEM;AAAA,UADJF,EAAkC,gBAAzBzD,EAAA,eAAe,GAAA,CAAA;AAAA,QAAA;QAE1ByD,EAQM,OARNG,IAQM;AAAA,UAPJC,EAMEC,GAAA;AAAA,YALA,OAAM;AAAA,YAAiB,MAAK;AAAA,YAAiB,OAAOC,EAAA7B,CAAA,EAAY7B,EAAA,KAAO,EAAE;AAAA,YACxE,SAASA,EAAA;AAAA,YAAU,eAAY2D,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAA,CAAAC,MAAA;AAAe,cAAA9D,EAAA,QAAY,IAAqBe,EAAA;AAAA;;;QAMxEZ,EAAA,qBAAZgD,KAAAC,EAMM,OANNW,IAMM;AAAA,UALJL,EAIEM,IAAA;AAAA,wBAHS9B,EAAA;AAAA;qCAAAA,EAAsB,QAAA4B;AAAA,cAEVzB;AAAA,YAAA;AAAA,YAFa,QAAQuB,EAAA7B,CAAA,EAAY7B,EAAA,KAAO,EAAE;AAAA,YAC9D,yBAAuB+B,EAAA;AAAA,YAAkB,QAAQ1B,EAAA;AAAA,YAAmB,UAAQgC;AAAA,UAAA;;QAKzEvC,EAAA,cADRiE,EAKcC,GAAA;AAAA;UAJQ,OAAM;AAAA,UAAgB,cAAW;AAAA,UACpD,uCAAYlE,EAAA,QAAY;AAAA,QAAA;qBAEzB,MAA8D;AAAA,YAA9D0D,EAA8DS,GAAA;AAAA,cAA/C,UAAUjE,EAAA;AAAA,cAAU,UAAQO;AAAA,YAAA;;;;;MAGpCZ,EAAA,wBAAXuD,EAEM,OAFNgB,IAAsD,4BAEtD;MACAd,EA4BM,OA5BNe,IA4BM;AAAA,QA3BJX,EA0BgBE,EAAAU,EAAA,GAAA;AAAA,UAzBN,OAAOpB,EAAA;AAAA,mDAAAA,EAAgB,QAAAY;AAAA,UAC9B,gBAAY,CAAG3B,MAASA,EAAK;AAAA,UAC7B,cAAYoC,EAAAA,OAAO;AAAA,UACnB,oBAAkBA,EAAAA,OAAO;AAAA,UACzB,kBAAkB1E,EAAA;AAAA,UAClB,iBAAiB;AAAA,UACjB,iBAAiB;AAAA,UACjB,gBAAgB;AAAA,QAAA;UAEN,cAAU2E,EACnB,CAaE,EAdqB,MAAArC,QAAI;;AAAA;AAAA,cAC3BuB,EAaEe,IAAA;AAAA,gBAZC,MAAAtC;AAAA,gBACA,gBAAc7B,EAAA;AAAA,gBACd,mBAAiBE,EAAA;AAAA,gBACjB,uBAAqBZ,EAAM;AAAA,gBAC3B,gBAAcC,EAAA,eAAW;AAAA,gBACzB,oBAAkBA,EAAA,mBAAe;AAAA,gBACjC,UAAQqB,IAAAtB,EAAM,WAAW,WAAjB,gBAAAsB,EAA0BiB,EAAK,WAAK;AAAA,gBAC5C,SAASjC,EAAA;AAAA,gBACT,kBAAgBC,EAAA;AAAA,gBAChB,uBAAmB,CAAGuE,GAAehE,MAAwCE,EAAiBuB,EAAK,OAAOuC,GAAOhE,CAAK;AAAA,gBACtH,wBAAoB,MAAQM,EAAiBmB,CAAI;AAAA,gBAAI,0BAAsB,CAAGN,MAAMvB,EAAA,QAAcuB;AAAA,gBAClG,6BAAyB,CAAGA,MAAMrB,EAAA,QAAgBqB;AAAA,gBAAI,iBAAed;AAAA,cAAA;;;;;;;;;"}

package/dist/components/AesSettings/AesDataMappingDiscrete.vue3.js

@@ -1,4 +1,4 @@
-import './AesDataMappingDiscrete.css';const e = "_discreteRow_19vpm_2", t = "_discreteRowTitle_19vpm_9", s = {
+import './AesDataMappingDiscrete.css';const e = "_discreteRow_1lqg1_2", t = "_discreteRowTitle_1lqg1_9", s = {
   discreteRow: e,
   discreteRowTitle: t
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../src/components/Chart.vue"],"names":[],"mappings":"AAmQA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAY1E,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO/D,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;IAChC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AA+JF,iBAAS,cAAc;WAyQT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAiCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Chart.vue.d.ts","sourceRoot":"","sources":["../../src/components/Chart.vue"],"names":[],"mappings":"AAsQA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAC;AAY1E,OAAO,KAAK,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAO/D,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;IAChC,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,gBAAgB,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,CAAC;IAC3C,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,CAAC;AA+JF,iBAAS,cAAc;WA2QT,OAAO,IAA6B;;yBAXrB,GAAG;;;;;;EAgB/B;AAiCD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;kBASnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/components/Chart.vue.js

@@ -1,4 +1,4 @@
-import { defineComponent as X, ref as h, watch as y, computed as p, createElementBlock as C, openBlock as s, createElementVNode as S, createVNode as k, createCommentVNode as c, createBlock as d, withKeys as J, resolveDynamicComponent as Q, renderSlot as Y, unref as r, withCtx as B, createTextVNode as D, normalizeClass as R, withModifiers as U } from "vue";
+import { defineComponent as X, ref as h, watch as y, computed as p, createElementBlock as C, openBlock as s, createElementVNode as S, createBlock as c, createCommentVNode as d, withKeys as J, resolveDynamicComponent as Q, renderSlot as Y, unref as l, withCtx as k, createTextVNode as B, normalizeClass as O, createVNode as R, withModifiers as U } from "vue";
 import { PlNotificationAlert as _, PlDropdown as ee, PlAutocomplete as te, PlBtnGhost as $ } from "@platforma-sdk/ui-vue";
 import ae from "./DendroTable.vue.js";
 import oe from "./DendroTooltip.vue.js";
@@ -9,10 +9,10 @@ import ne from "../icons/EditIcon.vue.js";
 import { useStore as ie } from "../store.js";
 import se from "./GraphStatusScreen.vue.js";
 const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["value", "disabled"], ve = { class: "chart_titleLineSlot" }, me = {
-  key: 0,
+  key: 1,
   class: "chart_tabBy"
 }, pe = {
-  key: 1,
+  key: 2,
   class: "chart_controls"
 }, ke = /* @__PURE__ */ X({
   __name: "Chart",
@@ -29,20 +29,20 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
   },
   emits: ["graph-title-update", "dendro-node-select", "dendro-tooltip-btn-click"],
   setup(n, { emit: I }) {
-    const x = I, o = ie(), P = n, g = h(P.graphTitle);
-    y(() => P.graphTitle, (t) => {
+    const D = I, o = ie(), x = n, g = h(x.graphTitle);
+    y(() => x.graphTitle, (t) => {
       g.value = t;
     });
-    const G = p(() => {
+    const P = p(() => {
       var t;
       return (t = o.value.reactive.optionsState.components.tabBy) == null ? void 0 : t.selectorStates[0];
     }), v = p(() => {
       var t;
-      return (t = G.value) == null ? void 0 : t.selectedSource;
+      return (t = P.value) == null ? void 0 : t.selectedSource;
     }), b = p(() => {
       var t, e;
-      return (e = (t = G.value) == null ? void 0 : t.selectedFilterValues) == null ? void 0 : e[0];
-    }), L = p(() => {
+      return (e = (t = P.value) == null ? void 0 : t.selectedFilterValues) == null ? void 0 : e[0];
+    }), G = p(() => {
       var t;
       return (t = o.value.reactive.optionsState.components.filters) == null ? void 0 : t.selectorStates;
     }), m = h(b.value);
@@ -53,18 +53,18 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
       var a;
       if (!o.value.columnsDataStore.value)
         return Promise.resolve([]);
-      const e = L.value.find((i) => i.selectedSource === t);
+      const e = G.value.find((i) => i.selectedSource === t);
       if (e && (((a = e.selectedFilterValues) == null ? void 0 : a.length) ?? 0) > 0) {
         const i = e.selectedFilterValues ?? [];
-        return Promise.all(i.map((u) => H(t, u)));
+        return Promise.all(i.map((u) => F(t, u)));
       }
-      const l = await o.value.controller.getUniqueSourceValuesWithLabels(
+      const r = await o.value.controller.getUniqueSourceValuesWithLabels(
         o.value.columnsDataStore.value,
         o.value.inputGuide.value,
         t,
         A
       );
-      return l.overflow ? null : l.values;
+      return r.overflow ? null : r.values;
     }
     const f = h();
     y([
@@ -76,9 +76,9 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
       if (v.value === void 0 || m.value !== void 0 || t === void 0)
         return;
       let e = t;
-      if (t === null && (e = await F(v.value, "")), e != null && e.length) {
-        const l = e[0].value;
-        m.value = l, T(l);
+      if (t === null && (e = await L(v.value, "")), e != null && e.length) {
+        const r = e[0].value;
+        m.value = r, T(r);
       }
     }, { immediate: !0 });
     function T(t) {
@@ -91,24 +91,24 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
     }
     function q(t) {
       const e = t.currentTarget;
-      g.value = e.value, x("graph-title-update", e.value);
+      g.value = e.value, D("graph-title-update", e.value);
     }
     function Z(t) {
-      x("dendro-node-select", t);
+      D("dendro-node-select", t);
     }
-    async function F(t, e, l = "label") {
-      var N;
+    async function L(t, e, r = "label") {
+      var E;
       if (!o.value.columnsDataStore.value)
         return Promise.resolve([]);
-      const a = L.value.find((V) => V.selectedSource === t);
-      if (a && (((N = a.selectedFilterValues) == null ? void 0 : N.length) ?? 0) > 0) {
-        const V = a.selectedFilterValues ?? [], O = await Promise.all(V.map((w) => H(t, w)));
-        return e ? O.filter((w) => w.label.toLowerCase().includes(e.toLowerCase())) : O;
+      const a = G.value.find((V) => V.selectedSource === t);
+      if (a && (((E = a.selectedFilterValues) == null ? void 0 : E.length) ?? 0) > 0) {
+        const V = a.selectedFilterValues ?? [], N = await Promise.all(V.map((w) => F(t, w)));
+        return e ? N.filter((w) => w.label.toLowerCase().includes(e.toLowerCase())) : N;
       }
-      const i = l === "label" ? e : void 0, u = l === "value" ? e : void 0;
+      const i = r === "label" ? e : void 0, u = r === "value" ? e : void 0;
       return (await o.value.controller.getUniqueSourceValuesWithLabels(o.value.columnsDataStore.value, o.value.inputGuide.value, t, A, i, u)).values;
     }
-    async function H(t, e) {
+    async function F(t, e) {
       return o.value.columnsDataStore.value ? await o.value.controller.getUniqueSourceValuesWithLabels(
         o.value.columnsDataStore.value,
         o.value.inputGuide.value,
@@ -118,13 +118,13 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
         e
       ).then((a) => a.values[0]) : Promise.resolve({ value: e, label: " " });
     }
-    const E = h(), j = p(() => {
+    const H = h(), j = p(() => {
       var e;
       if (o.value.reactive.chartType !== "discrete")
         return !1;
       const t = o.value.reactive.optionsState.components;
       if ((e = t.primaryGrouping) != null && e.selectorStates.length) {
-        const l = t.primaryGrouping.selectorStates[0].selectedSource, a = o.value.reactive.dataBindAes[l];
+        const r = t.primaryGrouping.selectorStates[0].selectedSource, a = o.value.reactive.dataBindAes[r];
         if ((a == null ? void 0 : a.type) === "categorical" && a.hidden)
           return Object.values(a.hidden).length > 0 && a.order.some((i) => {
             var u;
@@ -138,7 +138,7 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
         return !1;
       const t = o.value.reactive.optionsState.components;
       if ((e = t.secondaryGrouping) != null && e.selectorStates.length) {
-        const l = t.secondaryGrouping.selectorStates[0].selectedSource, a = o.value.reactive.dataBindAes[l];
+        const r = t.secondaryGrouping.selectorStates[0].selectedSource, a = o.value.reactive.dataBindAes[r];
         if ((a == null ? void 0 : a.type) === "categorical" && a.hidden)
           return Object.values(a.hidden).length > 0 && a.order.some((i) => {
             var u;
@@ -154,7 +154,7 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
       o.value.reactive.tabDefaultState.axes.reorderSecondaryOpen = !0, o.value.reactive.currentTab = "axes";
     }
     return (t, e) => {
-      var l;
+      var r;
       return s(), C("div", ue, [
         S("div", ce, [
           S("input", {
@@ -167,28 +167,29 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
               (i = a.target) == null || i.blur();
             }, ["enter"]))
           }, null, 40, de),
-          n.allowTitleEditing ? (s(), d(Q(ne), {
+          n.allowTitleEditing ? (s(), c(Q(ne), {
             key: 0,
             class: "chart_titleEdit"
-          })) : c("", !0),
+          })) : d("", !0),
           S("div", ve, [
             Y(t.$slots, "default")
           ])
         ]),
-        k(r(_), {
-          modelValue: r(o).reactive.showTooltipHint,
-          "onUpdate:modelValue": e[1] || (e[1] = (a) => r(o).reactive.showTooltipHint = a),
+        l(o).reactive.tooltipHintWasShown ? d("", !0) : (s(), c(l(_), {
+          key: 0,
+          modelValue: l(o).reactive.showTooltipHint,
+          "onUpdate:modelValue": e[1] || (e[1] = (a) => l(o).reactive.showTooltipHint = a),
           type: "success",
           class: "chart_tooltipHint",
           width: "170px"
         }, {
-          default: B(() => [...e[10] || (e[10] = [
-            D(" Hit enter to pin tooltip ", -1)
+          default: k(() => [...e[10] || (e[10] = [
+            B(" Hit enter to pin tooltip ", -1)
           ])]),
           _: 1
-        }, 8, ["modelValue"]),
+        }, 8, ["modelValue"])),
         v.value ? (s(), C("div", me, [
-          f.value || f.value === void 0 && r(o).loading.inputGuide ? (s(), d(r(ee), {
+          f.value || f.value === void 0 && l(o).loading.inputGuide ? (s(), c(l(ee), {
             key: 0,
             modelValue: m.value,
             "onUpdate:modelValue": [
@@ -197,7 +198,7 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
             ],
             label: "Show for",
             options: f.value
-          }, null, 8, ["modelValue", "options"])) : (s(), d(r(te), {
+          }, null, 8, ["modelValue", "options"])) : (s(), c(l(te), {
             key: 1,
             modelValue: m.value,
             "onUpdate:modelValue": [
@@ -205,73 +206,73 @@ const ue = { class: "chart_container" }, ce = { class: "chart_header" }, de = ["
               e[5] || (e[5] = (a) => T(a))
             ],
             label: "Show for",
-            "options-search": (a, i) => F(v.value, a, i)
+            "options-search": (a, i) => L(v.value, a, i)
           }, null, 8, ["modelValue", "options-search"]))
-        ])) : c("", !0),
+        ])) : d("", !0),
         S("div", {
           ref_key: "chartContainerRef",
-          ref: E,
-          class: R(["chart_main-content", [{ "chart_main-content__dendro": r(o).reactive.chartType === "dendro" }, "pl-scrollable"]])
+          ref: H,
+          class: O(["chart_main-content", [{ "chart_main-content__dendro": l(o).reactive.chartType === "dendro" }, "pl-scrollable"]])
         }, [
           S("div", {
             id: "chartSvgContainer",
-            class: R({
+            class: O({
               chart_ready: n.graphStatus === "ready",
               chart_loading: n.graphStatus === "loading",
-              chart_activeLassoSelection: ((l = r(o).reactive.lassoControlsState) == null ? void 0 : l.mode) === "selection"
+              chart_activeLassoSelection: ((r = l(o).reactive.lassoControlsState) == null ? void 0 : r.mode) === "selection"
             })
           }, null, 2),
-          k(se, {
+          R(se, {
             graphStatus: n.graphStatus,
             top: v.value ? 24 : 0,
             bottom: 11,
             customStatusText: n.customStatusText,
             errorInfo: n.errorInfo
           }, null, 8, ["graphStatus", "top", "customStatusText", "errorInfo"]),
-          r(o).reactive.chartType === "dendro" && n.chartData && r(o).reactive.layersSettings.dendro.showTable ? (s(), d(ae, {
+          l(o).reactive.chartType === "dendro" && n.chartData && l(o).reactive.layersSettings.dendro.showTable ? (s(), c(ae, {
             key: 0,
             chartData: n.chartData,
             onRowSelect: Z
-          }, null, 8, ["chartData"])) : c("", !0),
-          r(o).reactive.dendroInfoByClick ? (s(), d(oe, {
+          }, null, 8, ["chartData"])) : d("", !0),
+          l(o).reactive.dendroInfoByClick ? (s(), c(oe, {
             key: 1,
-            info: r(o).reactive.dendroInfoByClick,
-            containerRef: E.value,
+            info: l(o).reactive.dendroInfoByClick,
+            containerRef: H.value,
             tooltipBtn: n.dendroTooltipButton,
             onTooltipBtnClick: e[6] || (e[6] = (a) => t.$emit("dendro-tooltip-btn-click", a)),
             onClose: e[7] || (e[7] = (a) => {
-              r(o).reactive.dendroInfoByClick = null, t.$emit("dendro-node-select", null);
+              l(o).reactive.dendroInfoByClick = null, t.$emit("dendro-node-select", null);
             })
-          }, null, 8, ["info", "containerRef", "tooltipBtn"])) : c("", !0)
+          }, null, 8, ["info", "containerRef", "tooltipBtn"])) : d("", !0)
         ], 2),
         n.graphStatus === "ready" ? (s(), C("div", pe, [
-          k(re),
-          r(o).reactive.chartType === "scatterplot-umap" ? (s(), d(le, {
+          R(re),
+          l(o).reactive.chartType === "scatterplot-umap" ? (s(), c(le, {
             key: 0,
             "chart-ref": n.chartRef,
             isScatterplotZoomChanged: n.isScatterplotZoomChanged
-          }, null, 8, ["chart-ref", "isScatterplotZoomChanged"])) : c("", !0),
-          j.value ? (s(), d(r($), {
+          }, null, 8, ["chart-ref", "isScatterplotZoomChanged"])) : d("", !0),
+          j.value ? (s(), c(l($), {
             key: 1,
             icon: "view-hide",
             onClick: e[8] || (e[8] = U(() => M(), ["stop"]))
           }, {
-            default: B(() => [...e[11] || (e[11] = [
-              D(" Hidden (primary) ", -1)
+            default: k(() => [...e[11] || (e[11] = [
+              B(" Hidden (primary) ", -1)
             ])]),
             _: 1
-          })) : c("", !0),
-          K.value ? (s(), d(r($), {
+          })) : d("", !0),
+          K.value ? (s(), c(l($), {
             key: 2,
             icon: "view-hide",
             onClick: e[9] || (e[9] = U(() => z(), ["stop"]))
           }, {
-            default: B(() => [...e[12] || (e[12] = [
-              D(" Hidden (secondary) ", -1)
+            default: k(() => [...e[12] || (e[12] = [
+              B(" Hidden (secondary) ", -1)
             ])]),
             _: 1
-          })) : c("", !0)
-        ])) : c("", !0)
+          })) : d("", !0)
+        ])) : d("", !0)
       ]);
     };
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Chart.vue.js","sources":["../../src/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ChartInterface, ErrorInfo } from '@milaboratories/miplots4';\nimport type { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport type { ListOption } from '@platforma-sdk/ui-vue';\nimport { PlAutocomplete, PlBtnGhost, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../components/DendroTable.vue';\nimport DendroTooltip from '../components/DendroTooltip.vue';\nimport LassoControls from '../components/LassoControls/index.vue';\nimport Zoom from '../components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../constantsCommon.ts';\nimport EditIcon from '../icons/EditIcon.vue';\nimport { useStore } from '../store.ts';\nimport type { GraphStatus, StatusTextData } from '../types.ts';\nimport GraphStatusScreen from './GraphStatusScreen.vue';\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  errorInfo: ErrorInfo | null;\n  customStatusText?: Partial<StatusTextData>;\n  allowTitleEditing?: boolean;\n  isScatterplotZoomChanged?: boolean;\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]);\nconst filtersStates = computed(() => store.value.reactive.optionsState.components.filters?.selectorStates as SelectorStateFilter[]);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch([() => tabBySource.value, () => tabByFilterValue.value], () => { // tabBy column changed, needs to update selected value\n  tabByLocalValue.value = tabByFilterValue.value;\n}, { deep: true });\n\n// try to load full options list, without search query; if result is not overflow, use values from it in regular dropdown, no autocomplete;\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    return Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value,\n    store.value.inputGuide.value,\n    sourceId,\n    MAX_SEARCH_OPTIONS_LIST_LENGTH,\n  );\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 || !store.value.columnsDataStore.value) {\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\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\n// search options for autocomplete component; use label-mode search for options and value-mode for search of label of selected by default value;\nasync function searchFilterOptions(sourceId: string, searchStr: string, type: 'value' | 'label' = 'label') {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    const results = await Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n    return searchStr ? results.filter((v) => v.label.toLowerCase().includes(searchStr.toLowerCase())) : results;\n  }\n  const searchLabelStr = type === 'label' ? searchStr : undefined;\n  const searchValueStr = type === 'value' ? searchStr : undefined;\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchLabelStr, searchValueStr)).values;\n}\n\n// search by value, not by label;\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ value: selectedValue, label: ' ' }); // don't show non-human-readable value\n  }\n  const value = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value, store.value.inputGuide.value,\n    sourceId, 1, undefined, selectedValue).then((v) => v.values[0]);\n  return value;\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\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input\n        class=\"chart_title\"\n        :value=\"title\"\n        :disabled=\"!allowTitleEditing\"\n        @change=\"onTitleChange\"\n        @keyup.enter=\"(e) => { (e.target as HTMLInputElement)?.blur() }\"\n      />\n      <component :is=\"EditIcon\" v-if=\"allowTitleEditing\" class=\"chart_titleEdit\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot />\n      </div>\n    </div>\n    <PlNotificationAlert\n      v-model=\"store.reactive.showTooltipHint\" type=\"success\" class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div v-if=\"tabBySource\" class=\"chart_tabBy\">\n      <PlDropdown\n        v-if=\"preloadedOptions || (preloadedOptions === undefined && store.loading.inputGuide)\"\n        v-model=\"tabByLocalValue\" label=\"Show for\" :options=\"preloadedOptions\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n      <PlAutocomplete\n        v-else v-model=\"tabByLocalValue\" label=\"Show for\"\n        :options-search=\"(str, type) => searchFilterOptions(tabBySource as string, str, type)\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n    </div>\n    <div\n      ref=\"chartContainerRef\" class=\"chart_main-content\"\n      :class=\"[{ 'chart_main-content__dendro': store.reactive.chartType === 'dendro' }, 'pl-scrollable']\"\n    >\n      <div\n        id=\"chartSvgContainer\" :class=\"{\n          'chart_ready': graphStatus === 'ready',\n          'chart_loading': graphStatus === 'loading',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      />\n      <GraphStatusScreen :graphStatus=\"graphStatus\" :top=\"tabBySource ? 24 : 0\" :bottom=\"11\" :customStatusText=\"customStatusText\" :errorInfo=\"errorInfo\"/>\n      <DendroTable\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\" @row-select=\"onTableRowSelect\"\n      />\n      <DendroTooltip\n        v-if=\"store.reactive.dendroInfoByClick\" :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\" :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id: string) => $emit('dendro-tooltip-btn-click', id)\" @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <div v-if=\"graphStatus === 'ready'\" class=\"chart_controls\">\n      <Zoom />\n      <LassoControls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\" :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"/>\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","filtersStates","tabByLocalValue","loadOptions","sourceId","filtersStateWithTheSameSource","state","selectedValues","selectedValue","searchSelectedFilterValueOptions","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","loading","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","value","prevSelectorStates","onTitleChange","e","target","onTableRowSelect","id","searchStr","type","results","searchLabelStr","searchValueStr","chartContainerRef","hasPrimaryHidden","optionsState","columnName","dataBindAes","hasSecondaryHidden","openAxesSettingsPrimary","openAxesSettingsSecondary","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createBlock","_resolveDynamicComponent","EditIcon","_hoisted_4","_renderSlot","_ctx","_createVNode","_unref","PlNotificationAlert","$event","_cache","_hoisted_5","PlDropdown","PlAutocomplete","str","_normalizeClass","GraphStatusScreen","DendroTable","DendroTooltip","$emit","_hoisted_6","Zoom","LassoControls","PlBtnGhost"],"mappings":"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"}
+{"version":3,"file":"Chart.vue.js","sources":["../../src/components/Chart.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport type { ChartInterface, ErrorInfo } from '@milaboratories/miplots4';\nimport type { SelectorStateFilter } from '@milaboratories/pf-plots';\nimport type { ListOption } from '@platforma-sdk/ui-vue';\nimport { PlAutocomplete, PlBtnGhost, PlDropdown, PlNotificationAlert } from '@platforma-sdk/ui-vue';\nimport { computed, ref, watch } from 'vue';\nimport DendroTable from '../components/DendroTable.vue';\nimport DendroTooltip from '../components/DendroTooltip.vue';\nimport LassoControls from '../components/LassoControls/index.vue';\nimport Zoom from '../components/Zoom/index.vue';\nimport { MAX_SEARCH_OPTIONS_LIST_LENGTH } from '../constantsCommon.ts';\nimport EditIcon from '../icons/EditIcon.vue';\nimport { useStore } from '../store.ts';\nimport type { GraphStatus, StatusTextData } from '../types.ts';\nimport GraphStatusScreen from './GraphStatusScreen.vue';\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  errorInfo: ErrorInfo | null;\n  customStatusText?: Partial<StatusTextData>;\n  allowTitleEditing?: boolean;\n  isScatterplotZoomChanged?: boolean;\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]);\nconst filtersStates = computed(() => store.value.reactive.optionsState.components.filters?.selectorStates as SelectorStateFilter[]);\n\nconst tabByLocalValue = ref(tabByFilterValue.value);\nwatch([() => tabBySource.value, () => tabByFilterValue.value], () => { // tabBy column changed, needs to update selected value\n  tabByLocalValue.value = tabByFilterValue.value;\n}, { deep: true });\n\n// try to load full options list, without search query; if result is not overflow, use values from it in regular dropdown, no autocomplete;\nasync function loadOptions(sourceId: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    return Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n  }\n  const response = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value,\n    store.value.inputGuide.value,\n    sourceId,\n    MAX_SEARCH_OPTIONS_LIST_LENGTH,\n  );\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 || !store.value.columnsDataStore.value) {\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\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\n// search options for autocomplete component; use label-mode search for options and value-mode for search of label of selected by default value;\nasync function searchFilterOptions(sourceId: string, searchStr: string, type: 'value' | 'label' = 'label') {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve([]);\n  }\n  // if the same source is selected in filters, return only selected values;\n  const filtersStateWithTheSameSource = filtersStates.value.find((state) => state.selectedSource === sourceId) as SelectorStateFilter | undefined;\n  if (filtersStateWithTheSameSource && (filtersStateWithTheSameSource.selectedFilterValues?.length ?? 0) > 0) {\n    const selectedValues = filtersStateWithTheSameSource.selectedFilterValues ?? [];\n    const results = await Promise.all(selectedValues.map((selectedValue) => searchSelectedFilterValueOptions(sourceId, selectedValue)));\n    return searchStr ? results.filter((v) => v.label.toLowerCase().includes(searchStr.toLowerCase())) : results;\n  }\n  const searchLabelStr = type === 'label' ? searchStr : undefined;\n  const searchValueStr = type === 'value' ? searchStr : undefined;\n  return (await store.value.controller.getUniqueSourceValuesWithLabels(store.value.columnsDataStore.value, store.value.inputGuide.value, sourceId, MAX_SEARCH_OPTIONS_LIST_LENGTH, searchLabelStr, searchValueStr)).values;\n}\n\n// search by value, not by label;\nasync function searchSelectedFilterValueOptions(sourceId: string, selectedValue: string) {\n  if (!store.value.columnsDataStore.value) {\n    return Promise.resolve({ value: selectedValue, label: ' ' }); // don't show non-human-readable value\n  }\n  const value = await store.value.controller.getUniqueSourceValuesWithLabels(\n    store.value.columnsDataStore.value, store.value.inputGuide.value,\n    sourceId, 1, undefined, selectedValue).then((v) => v.values[0]);\n  return value;\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\n</script>\n\n<template>\n  <div class=\"chart_container\">\n    <div class=\"chart_header\">\n      <input\n        class=\"chart_title\"\n        :value=\"title\"\n        :disabled=\"!allowTitleEditing\"\n        @change=\"onTitleChange\"\n        @keyup.enter=\"(e) => { (e.target as HTMLInputElement)?.blur() }\"\n      />\n      <component :is=\"EditIcon\" v-if=\"allowTitleEditing\" class=\"chart_titleEdit\" />\n      <div class=\"chart_titleLineSlot\">\n        <slot />\n      </div>\n    </div>\n    <PlNotificationAlert\n      v-if=\"!store.reactive.tooltipHintWasShown\"\n      v-model=\"store.reactive.showTooltipHint\"\n      type=\"success\"\n      class=\"chart_tooltipHint\"\n      width=\"170px\"\n    >\n      Hit enter to pin tooltip\n    </PlNotificationAlert>\n    <div v-if=\"tabBySource\" class=\"chart_tabBy\">\n      <PlDropdown\n        v-if=\"preloadedOptions || (preloadedOptions === undefined && store.loading.inputGuide)\"\n        v-model=\"tabByLocalValue\" label=\"Show for\" :options=\"preloadedOptions\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n      <PlAutocomplete\n        v-else v-model=\"tabByLocalValue\" label=\"Show for\"\n        :options-search=\"(str, type) => searchFilterOptions(tabBySource as string, str, type)\"\n        @update:modelValue=\"(v) => onFilterValueUpdate(v as string)\"\n      />\n    </div>\n    <div\n      ref=\"chartContainerRef\" class=\"chart_main-content\"\n      :class=\"[{ 'chart_main-content__dendro': store.reactive.chartType === 'dendro' }, 'pl-scrollable']\"\n    >\n      <div\n        id=\"chartSvgContainer\" :class=\"{\n          'chart_ready': graphStatus === 'ready',\n          'chart_loading': graphStatus === 'loading',\n          'chart_activeLassoSelection': store.reactive.lassoControlsState?.mode === 'selection'\n        }\"\n      />\n      <GraphStatusScreen :graphStatus=\"graphStatus\" :top=\"tabBySource ? 24 : 0\" :bottom=\"11\" :customStatusText=\"customStatusText\" :errorInfo=\"errorInfo\"/>\n      <DendroTable\n        v-if=\"store.reactive.chartType === 'dendro' && chartData && store.reactive.layersSettings.dendro.showTable\"\n        :chartData=\"chartData\" @row-select=\"onTableRowSelect\"\n      />\n      <DendroTooltip\n        v-if=\"store.reactive.dendroInfoByClick\" :info=\"store.reactive.dendroInfoByClick\"\n        :containerRef=\"chartContainerRef\" :tooltipBtn=\"dendroTooltipButton\"\n        @tooltip-btn-click=\"(id: string) => $emit('dendro-tooltip-btn-click', id)\" @close=\"\n          store.reactive.dendroInfoByClick = null;\n          $emit('dendro-node-select', null);\n        \"\n      />\n    </div>\n    <div v-if=\"graphStatus === 'ready'\" class=\"chart_controls\">\n      <Zoom />\n      <LassoControls v-if=\"store.reactive.chartType === 'scatterplot-umap'\" :chart-ref=\"chartRef\" :isScatterplotZoomChanged=\"isScatterplotZoomChanged\"/>\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","filtersStates","tabByLocalValue","loadOptions","sourceId","filtersStateWithTheSameSource","state","selectedValues","selectedValue","searchSelectedFilterValueOptions","response","MAX_SEARCH_OPTIONS_LIST_LENGTH","preloadedOptions","v","loading","opts","availableOptions","searchFilterOptions","nextFilterValue","onFilterValueUpdate","value","prevSelectorStates","onTitleChange","e","target","onTableRowSelect","id","searchStr","type","results","searchLabelStr","searchValueStr","chartContainerRef","hasPrimaryHidden","optionsState","columnName","dataBindAes","hasSecondaryHidden","openAxesSettingsPrimary","openAxesSettingsSecondary","_openBlock","_createElementBlock","_hoisted_1","_createElementVNode","_hoisted_2","_createBlock","_resolveDynamicComponent","EditIcon","_hoisted_4","_renderSlot","_ctx","_unref","PlNotificationAlert","$event","_cache","_hoisted_5","PlDropdown","PlAutocomplete","str","_normalizeClass","_createVNode","GraphStatusScreen","DendroTable","DendroTooltip","$emit","_hoisted_6","Zoom","LassoControls","PlBtnGhost"],"mappings":"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"}

package/dist/components/ReorderForm.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/ReorderForm.vue"],"names":[],"mappings":"AAsFA,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;;;;;;AA2FF,wBAWG"}
+{"version":3,"file":"ReorderForm.vue.d.ts","sourceRoot":"","sources":["../../src/components/ReorderForm.vue"],"names":[],"mappings":"AA0FA,KAAK,iBAAiB,GAAG;IACzB,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;CAC9C,CAAC;;;;;;AA2FF,wBAWG"}

package/dist/components/ReorderForm.vue2.js

@@ -1,14 +1,15 @@
-import { defineComponent as r, mergeModels as d, useModel as u, computed as n, ref as p, watch as c, createElementBlock as g, openBlock as v, createElementVNode as i, createVNode as f, unref as b, withCtx as y, normalizeClass as V, toDisplayString as _ } from "vue";
-import { PlElementList as k } from "@platforma-sdk/ui-vue";
-const w = { class: "aes-mapping-block" }, R = { class: "column-values-list" }, D = /* @__PURE__ */ r({
+import { defineComponent as u, mergeModels as n, useModel as d, computed as c, ref as p, watch as g, createElementBlock as v, openBlock as f, createElementVNode as i, createVNode as b, unref as V, withCtx as y, normalizeClass as _, toDisplayString as k } from "vue";
+import { PlElementList as w } from "@platforma-sdk/ui-vue";
+import { useStore as x } from "../store.js";
+const h = { class: "aes-mapping-block" }, R = { class: "column-values-list" }, M = /* @__PURE__ */ u({
   __name: "ReorderForm",
   props: {
     modelValue: { required: !0 },
     modelModifiers: {}
   },
-  emits: /* @__PURE__ */ d(["update:modelValue"], ["update:modelValue"]),
-  setup(m, { emit: h }) {
-    const a = u(m, "modelValue"), o = n({
+  emits: /* @__PURE__ */ n(["update:modelValue"], ["update:modelValue"]),
+  setup(r, { emit: C }) {
+    const m = x(), a = d(r, "modelValue"), o = c({
       get: () => a.value.map((e) => ({
         text: e.label,
         value: e.value
@@ -16,16 +17,16 @@ const w = { class: "aes-mapping-block" }, R = { class: "column-values-list" }, D
       set: (e) => {
         a.value = e.map((t) => ({
           value: t.value,
-          label: t.text
+          label: t.text === "null" ? m.value.reactive.axesSettings.other.nullValueLabel : t.text
         }));
       }
     }), s = p(o.value);
-    return c(() => s.value, (e) => {
+    return g(() => s.value, (e) => {
       o.value = e;
-    }, { deep: !0 }), (e, t) => (v(), g("div", w, [
+    }, { deep: !0 }), (e, t) => (f(), v("div", h, [
       t[1] || (t[1] = i("div", { class: "aes-settings-hint" }, " Drag the rows to reorder ", -1)),
       i("div", R, [
-        f(b(k), {
+        b(V(w), {
           items: s.value,
           "onUpdate:items": t[0] || (t[0] = (l) => s.value = l),
           "get-item-key": (l) => l.value,
@@ -38,8 +39,8 @@ const w = { class: "aes-mapping-block" }, R = { class: "column-values-list" }, D
         }, {
           "item-title": y(({ item: l }) => [
             i("div", {
-              class: V(e.$style.title)
-            }, _(l.text), 3)
+              class: _(e.$style.title)
+            }, k(l.text), 3)
           ]),
           _: 1
         }, 8, ["items", "get-item-key", "item-class", "item-class-title"])
@@ -48,6 +49,6 @@ const w = { class: "aes-mapping-block" }, R = { class: "column-values-list" }, D
   }
 });
 export {
-  D as default
+  M as default
 };
 //# sourceMappingURL=ReorderForm.vue2.js.map

package/dist/components/ReorderForm.vue2.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReorderForm.vue2.js","sources":["../../src/components/ReorderForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\n\nconst model = defineModel<{ value: string; label: string }[]>({ required: true });\n\nconst _emit = defineEmits(['update:modelValue']);\n\nconst optionsList = computed({\n  get: () => model.value.map((v) => ({\n    text: v.label,\n    value: v.value,\n  })),\n  set: (value) => {\n    model.value = value.map((v) => ({\n      value: v.value,\n      label: v.text,\n    }));\n  },\n});\nconst listItems = ref(optionsList.value);\nwatch(() => listItems.value, (v) => {\n  optionsList.value = v;\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"listItems\" :get-item-key=\"(item) => item.value\" :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\" :disableDragging=\"false\" :disableRemoving=\"true\"\n        :disableToggling=\"true\" :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <div :class=\"$style.title\">{{ item.text }}</div>\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n.discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n\n.discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n.title {\n  margin-left: 4px;\n}\n</style>\n"],"names":["model","_useModel","__props","optionsList","computed","v","value","listItems","ref","watch","_openBlock","_createElementBlock","_hoisted_1","_cache","_createElementVNode","_hoisted_2","_createVNode","_unref","PlElementList","$event","item","$style","_withCtx","_normalizeClass","_toDisplayString"],"mappings":";;;;;;;;;;AAIA,UAAMA,IAAQC,EAA+CC,GAAA,YAAmB,GAI1EC,IAAcC,EAAS;AAAA,MAC3B,KAAK,MAAMJ,EAAM,MAAM,IAAI,CAACK,OAAO;AAAA,QACjC,MAAMA,EAAE;AAAA,QACR,OAAOA,EAAE;AAAA,MAAA,EACT;AAAA,MACF,KAAK,CAACC,MAAU;AACd,QAAAN,EAAM,QAAQM,EAAM,IAAI,CAACD,OAAO;AAAA,UAC9B,OAAOA,EAAE;AAAA,UACT,OAAOA,EAAE;AAAA,QAAA,EACT;AAAA,MACJ;AAAA,IAAA,CACD,GACKE,IAAYC,EAAIL,EAAY,KAAK;AACvC,WAAAM,EAAM,MAAMF,EAAU,OAAO,CAACF,MAAM;AAClC,MAAAF,EAAY,QAAQE;AAAA,IACtB,GAAG,EAAE,MAAM,IAAM,cAIfK,EAAA,GAAAC,EAeM,OAfNC,GAeM;AAAA,MAdJC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAEM,OAAA,EAFD,OAAM,oBAAA,GAAoB,8BAE/B,EAAA;AAAA,MACAA,EAUM,OAVNC,GAUM;AAAA,QATJC,EAQgBC,EAAAC,CAAA,GAAA;AAAA,UAPN,OAAOX,EAAA;AAAA,mDAAAA,EAAS,QAAAY;AAAA,UAAG,gBAAY,CAAGC,MAASA,EAAK;AAAA,UAAQ,cAAYC,EAAAA,OAAO;AAAA,UAClF,oBAAkBA,EAAAA,OAAO;AAAA,UAAmB,iBAAiB;AAAA,UAAQ,iBAAiB;AAAA,UACtF,iBAAiB;AAAA,UAAO,gBAAgB;AAAA,QAAA;UAE9B,cAAUC,EACnB,CAAgD,EADzB,MAAAF,QAAI;AAAA,YAC3BN,EAAgD,OAAA;AAAA,cAA1C,OAAKS,EAAEF,EAAAA,OAAO,KAAK;AAAA,YAAA,GAAKG,EAAAJ,EAAK,IAAI,GAAA,CAAA;AAAA,UAAA;;;;;;;"}
+{"version":3,"file":"ReorderForm.vue2.js","sources":["../../src/components/ReorderForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { computed, ref, watch } from 'vue';\nimport { PlElementList } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../store';\n\nconst store = useStore();\nconst model = defineModel<{ value: string; label: string }[]>({ required: true });\n\nconst _emit = defineEmits(['update:modelValue']);\n\nconst optionsList = computed({\n  get: () => model.value.map((v) => ({\n    text: v.label,\n    value: v.value,\n  })),\n  set: (value) => {\n    model.value = value.map((v) => ({\n      value: v.value,\n      label: v.text === 'null' ? store.value.reactive.axesSettings.other.nullValueLabel : v.text,\n    }));\n  },\n});\nconst listItems = ref(optionsList.value);\nwatch(() => listItems.value, (v) => {\n  optionsList.value = v;\n}, { deep: true });\n</script>\n\n<template>\n  <div class=\"aes-mapping-block\">\n    <div class=\"aes-settings-hint\">\n      Drag the rows to reorder\n    </div>\n    <div class=\"column-values-list\">\n      <PlElementList\n        v-model:items=\"listItems\" :get-item-key=\"(item) => item.value\" :item-class=\"$style.discreteRow\"\n        :item-class-title=\"$style.discreteRowTitle\" :disableDragging=\"false\" :disableRemoving=\"true\"\n        :disableToggling=\"true\" :disablePinning=\"true\"\n      >\n        <template #item-title=\"{ item }\">\n          <div :class=\"$style.title\">{{ item.text }}</div>\n        </template>\n      </PlElementList>\n    </div>\n  </div>\n</template>\n<style module>\n.discreteRow {\n  background-color: var(--color-ic-00);\n  border-color: var(--color-div-grey);\n}\n\n.discreteRow:hover {\n  --head-background: var(--color-ic-00);\n}\n.title {\n  margin-left: 4px;\n}\n</style>\n"],"names":["store","useStore","model","_useModel","__props","optionsList","computed","v","value","listItems","ref","watch","_openBlock","_createElementBlock","_hoisted_1","_cache","_createElementVNode","_hoisted_2","_createVNode","_unref","PlElementList","$event","item","$style","_withCtx","_normalizeClass","_toDisplayString"],"mappings":";;;;;;;;;;;AAKA,UAAMA,IAAQC,EAAA,GACRC,IAAQC,EAA+CC,GAAA,YAAmB,GAI1EC,IAAcC,EAAS;AAAA,MAC3B,KAAK,MAAMJ,EAAM,MAAM,IAAI,CAACK,OAAO;AAAA,QACjC,MAAMA,EAAE;AAAA,QACR,OAAOA,EAAE;AAAA,MAAA,EACT;AAAA,MACF,KAAK,CAACC,MAAU;AACd,QAAAN,EAAM,QAAQM,EAAM,IAAI,CAACD,OAAO;AAAA,UAC9B,OAAOA,EAAE;AAAA,UACT,OAAOA,EAAE,SAAS,SAASP,EAAM,MAAM,SAAS,aAAa,MAAM,iBAAiBO,EAAE;AAAA,QAAA,EACtF;AAAA,MACJ;AAAA,IAAA,CACD,GACKE,IAAYC,EAAIL,EAAY,KAAK;AACvC,WAAAM,EAAM,MAAMF,EAAU,OAAO,CAACF,MAAM;AAClC,MAAAF,EAAY,QAAQE;AAAA,IACtB,GAAG,EAAE,MAAM,IAAM,cAIfK,EAAA,GAAAC,EAeM,OAfNC,GAeM;AAAA,MAdJC,EAAA,CAAA,MAAAA,EAAA,CAAA,IAAAC,EAEM,OAAA,EAFD,OAAM,oBAAA,GAAoB,8BAE/B,EAAA;AAAA,MACAA,EAUM,OAVNC,GAUM;AAAA,QATJC,EAQgBC,EAAAC,CAAA,GAAA;AAAA,UAPN,OAAOX,EAAA;AAAA,mDAAAA,EAAS,QAAAY;AAAA,UAAG,gBAAY,CAAGC,MAASA,EAAK;AAAA,UAAQ,cAAYC,EAAAA,OAAO;AAAA,UAClF,oBAAkBA,EAAAA,OAAO;AAAA,UAAmB,iBAAiB;AAAA,UAAQ,iBAAiB;AAAA,UACtF,iBAAiB;AAAA,UAAO,gBAAgB;AAAA,QAAA;UAE9B,cAAUC,EACnB,CAAgD,EADzB,MAAAF,QAAI;AAAA,YAC3BN,EAAgD,OAAA;AAAA,cAA1C,OAAKS,EAAEF,EAAAA,OAAO,KAAK;AAAA,YAAA,GAAKG,EAAAJ,EAAK,IAAI,GAAA,CAAA;AAAA,UAAA;;;;;;;"}

package/dist/constantsCommon.d.ts

@@ -302,6 +302,7 @@ export type AxesState = {
         groupingStack: 'vertical' | 'horizontal';
         canvasRenderMode: boolean;
         showLegend: boolean;
+        nullValueLabel: string;
     };
 };
 export declare function getInitialAxesSettings(chartType: ChartType, initialAxesSettings?: DeepPartial<AxesState>): AxesState;