@milaboratories/graph-maker 1.1.165 → 1.1.167

package/dist/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteAxesSettingsForm.vue.js","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport AesButton from '../../components/AesButton.vue';\nimport FormWrapper from '../../components/AesSettings/FormWrapper.vue';\nimport { computed, onMounted, ref } from 'vue';\nimport AesDataMapping from '../../components/AesSettings/AesDataMappingDiscrete.vue';\nimport { AestheticMappingCategorical, createDefaultMapping } from '../../dataBindAes';\nimport { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close'\n};\n\nconst OPTIONS_TITLE_ALIGN = [\n  {value: 'left', icon: AlignLeft},\n  {value: 'center', icon: AlignCenter},\n  {value: 'right', icon: AlignRight},\n]\n// const OPTIONS_FACET_FRAME = [\n//   {value: 'empty', icon: FrameEmpty},\n//   {value: 'full', icon: FrameFull},\n// ]\nconst OPTIONS_LABELS_ROTATION = [\n  { value: 'center', icon: Rotation0 },\n  { value: '45deg', icon: Rotation45 },\n  { value: '90deg', icon: Rotation90 }\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hide' }\n];\nconst OPTIONS_SCALE = [\n  { value: 'linear', text: 'Linear' },\n  { value: 'log', text: 'Log' }\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'empty', icon: FrameEmpty },\n  { value: 'left', icon: FrameLeft },\n  { value: 'bottom', icon: FrameBottom },\n  { value: 'left-bottom', icon: FrameLeftBottom },\n  { value: 'full', icon: FrameFull }\n];\n\nconst inputGuide = computed(() => store.value.inputGuide.value)\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value)\n\nconst reorderPrimaryOpen = ref(false);\nconst reorderSecondaryOpen = ref(false);\n\nconst defaultReorderPrimaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen);\nconst defaultReorderSecondaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen);\nonMounted(() => {\n  if (defaultReorderPrimaryOpen.value) {\n    reorderPrimaryOpen.value = true;\n  }\n  if (defaultReorderSecondaryOpen.value) {\n    reorderSecondaryOpen.value = true;\n  }\n})\nwatch(() => defaultReorderPrimaryOpen.value, (v) => {\n  if (v) {\n    reorderSecondaryOpen.value = false;\n    reorderPrimaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderSecondaryOpen.value, (v) => {\n  if (v) {\n    reorderPrimaryOpen.value = false;\n    reorderSecondaryOpen.value = true;\n  }\n});\n\nconst primaryGrouping = computed(() => store.value.reactive.optionsState.components.primaryGrouping?.selectorStates[0]?.selectedSource);\nconst secondaryGrouping = computed(() => store.value.reactive.optionsState.components.secondaryGrouping?.selectorStates[0]?.selectedSource);\n\nconst primaryGroups = computed(() => store.value.commonHelpersData.primaryGroups.value)\nconst secondaryGroups = computed(() => store.value.commonHelpersData.secondaryGroups.value)\n\nconst usedAesInMapping = computed(() => store.value.commonHelpersData.usedAesInMapping.value);\n\nconst mappingPrimary = ref(store.value.reactive.dataBindAes[primaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(primaryGroups.value));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value));\n\nconst primaryInfo = computed(() => {\n  if (primaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n    const valueLabels = labelsInfo.value[primaryGrouping.value]?.labels ?? null;\n    return {\n      selectedSourceInfo,\n      labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        return res;\n      }, {})\n    };\n  }\n});\nconst secondaryInfo = computed(() => {\n  if (secondaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n    const valueLabels = labelsInfo.value[secondaryGrouping.value]?.labels ?? null;\n    return {\n      selectedSourceInfo,\n      labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        return res;\n      }, {})\n    };\n  }\n});\n\nfunction updateOrder(value: AestheticMappingCategorical, sourceId: string) {\n  store.value.reactive.dataBindAes[sourceId] = value;\n}\n\nconst OPTIONS_FACET_SHARED = [\n  { text: 'X', value: 'x' },\n  { text: 'Y', value: 'y' },\n  { text: 'XY', value: 'xy' },\n  { text: 'None', value: 'none' }\n];\n\nconst primaryOptions = computed(() => labelsInfo.value[primaryGrouping.value])\nconst xLabelsRotation = computed({\n  get(){\n    return getDiscreteLabelsRotation(settings.axisX.labelsRotation, primaryOptions.value?.options)\n  },\n  set(value:LabelsRotation) {\n    settings.axisX.labelsRotation = value;\n  }\n})\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <collapsable-block title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.title.mode\"\n          />\n        </div>\n        <div class=\"axes-settings-input\" v-if=\"settings.title.mode === 'custom'\">\n          <pl-text-field\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n            v-model=\"settings.title.value\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <btn-icon-group :options=\"OPTIONS_TITLE_ALIGN\" v-model=\"settings.title.position\"/>\n        </div>\n<!--          <div class=\"axes-settings-options-row\">-->\n<!--            <span>Facet frame style</span>-->\n<!--            <btn-icon-group :options=\"OPTIONS_FACET_FRAME\" v-model=\"settings.title.facetTitleFrame\"/>-->\n<!--          </div>-->\n      </collapsable-block>\n      <!--      X axis settings-->\n      <collapsable-block title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n          <span>Primary groups order: </span>\n          <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n          <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n            <form-wrapper\n              title=\"Reorder primary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderPrimaryOpen = false\"\n              @form:close=\"reorderPrimaryOpen = false\"\n            >\n              <aes-data-mapping\n                :column-value-labels=\"primaryInfo.labels\"\n                :data-column-label=\"primaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[primaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullPrimaryGroups\"\n                v-model=\"mappingPrimary\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n              />\n            </form-wrapper>\n          </template>\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n          <span>Allow null primary group</span>\n          <pl-toggle-switch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n          <span>Secondary groups order: </span>\n          <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n          <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n            <form-wrapper\n              title=\"Reorder secondary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderSecondaryOpen = false\"\n              @form:close=\"reorderSecondaryOpen = false\"\n            >\n              <aes-data-mapping\n                :column-value-labels=\"secondaryInfo.labels\"\n                :data-column-label=\"secondaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[secondaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullSecondaryGroups\"\n                v-model=\"mappingSecondary\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n              />\n            </form-wrapper>\n          </template>\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n          <span>Allow null secondary group</span>\n          <pl-toggle-switch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"store.reactive.chartType === 'discrete'\">\n          <span>Labels rotation</span>\n          <btn-icon-group :options=\"OPTIONS_LABELS_ROTATION\" v-model=\"xLabelsRotation\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.axisX.titleMode\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <pl-text-field\n            label=\"Text\"\n            placeholder=\"Type\"\n            v-model=\"settings.axisX.customTitle\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <pl-toggle-switch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Lines between categories</span>\n          <pl-toggle-switch v-model=\"settings.axisX.linesBetweenCategories\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <pl-toggle-switch v-model=\"settings.axisX.ticks\" />\n        </div>\n      </collapsable-block>\n      <!--      Y axis settings-->\n      <collapsable-block title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.axisY.titleMode\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <pl-text-field\n            label=\"Text\"\n            placeholder=\"Type\"\n            v-model=\"settings.axisY.customTitle\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Scale\"\n            :options=\"OPTIONS_SCALE\"\n            v-model=\"settings.axisY.scale\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <pl-toggle-switch v-model=\"settings.axisY.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <pl-toggle-switch v-model=\"settings.axisY.ticks\" />\n        </div>\n      </collapsable-block>\n      <!--      Facet settings-->\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <btn-icon-group :options=\"OPTIONS_CHART_FRAME\" v-model=\"settings.other.frame\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Reverse axes</span>\n          <pl-toggle-switch v-model=\"settings.other.reverse\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n            v-model=\"settings.other.facetColumns\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Facet shared by\"\n            :options=\"OPTIONS_FACET_SHARED\"\n            v-model=\"settings.other.facetSharedBy\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["store","useStore","settings","blockSettings","OPTIONS_TITLE_ALIGN","AlignLeft","AlignCenter","AlignRight","OPTIONS_LABELS_ROTATION","Rotation0","Rotation45","Rotation90","OPTIONS_AXIS_LABEL_MODE","OPTIONS_SCALE","OPTIONS_CHART_FRAME","FrameEmpty","FrameLeft","FrameBottom","FrameLeftBottom","FrameFull","inputGuide","computed","labelsInfo","reorderPrimaryOpen","ref","reorderSecondaryOpen","defaultReorderPrimaryOpen","defaultReorderSecondaryOpen","onMounted","watch","v","primaryGrouping","_b","_a","secondaryGrouping","primaryGroups","secondaryGroups","usedAesInMapping","mappingPrimary","createDefaultMapping","mappingSecondary","primaryInfo","selectedSourceInfo","valueLabels","res","secondaryInfo","updateOrder","value","sourceId","OPTIONS_FACET_SHARED","primaryOptions","xLabelsRotation","getDiscreteLabelsRotation"],"mappings":"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"}
+{"version":3,"file":"DiscreteAxesSettingsForm.vue.js","sources":["../../../../src/GraphMaker/forms/AxesSettingsForm/DiscreteAxesSettingsForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { Slider, PlToggleSwitch } from '@platforma-sdk/ui-vue';\nimport { useStore } from '../../store';\nimport CollapsableBlock from '../../components/CollapsableBlock.vue';\nimport Right from '../../icons/Right.vue';\nimport Down from '../../icons/Down.vue';\nimport { PlTextField, PlBtnGroup } from '@platforma-sdk/ui-vue';\nimport BtnIconGroup from '../../components/BtnIconGroup.vue';\nimport AlignLeft from '../../icons/AlignLeft.vue';\nimport AlignCenter from '../../icons/AlignCenter.vue';\nimport AlignRight from '../../icons/AlignRight.vue';\nimport FrameFull from '../../icons/FrameFull.vue';\nimport FrameEmpty from '../../icons/FrameEmpty.vue';\nimport Rotation0 from '../../icons/Rotation0.vue';\nimport Rotation45 from '../../icons/Rotation45.vue';\nimport Rotation90 from '../../icons/Rotation90.vue';\nimport FrameLeft from '../../icons/FrameLeft.vue';\nimport FrameBottom from '../../icons/FrameBottom.vue';\nimport FrameLeftBottom from '../../icons/FrameLeftBottom.vue';\nimport AesButton from '../../components/AesButton.vue';\nimport FormWrapper from '../../components/AesSettings/FormWrapper.vue';\nimport { computed, onMounted, ref } from 'vue';\nimport AesDataMapping from '../../components/AesSettings/AesDataMappingDiscrete.vue';\nimport { AestheticMappingCategorical, createDefaultMapping } from '../../dataBindAes';\nimport { LabelsRotation } from '../../types';\nimport { getDiscreteLabelsRotation } from '../../utils';\nimport { watch } from 'vue';\n\nconst store = useStore();\nconst settings = store.value.reactive.axesSettings;\nconst blockSettings = {\n  height: 40,\n  horizontalPadding: 12,\n  defaultState: 'open' as 'open' | 'close'\n};\n\nconst OPTIONS_TITLE_ALIGN = [\n  {value: 'left', icon: AlignLeft},\n  {value: 'center', icon: AlignCenter},\n  {value: 'right', icon: AlignRight},\n]\n// const OPTIONS_FACET_FRAME = [\n//   {value: 'empty', icon: FrameEmpty},\n//   {value: 'full', icon: FrameFull},\n// ]\nconst OPTIONS_LABELS_ROTATION = [\n  { value: 'center', icon: Rotation0 },\n  { value: '45deg', icon: Rotation45 },\n  { value: '90deg', icon: Rotation90 }\n];\nconst OPTIONS_AXIS_LABEL_MODE = [\n  { value: 'auto', text: 'Auto' },\n  { value: 'custom', text: 'Custom' },\n  { value: 'hidden', text: 'Hide' }\n];\nconst OPTIONS_SCALE = [\n  { value: 'linear', text: 'Linear' },\n  { value: 'log', text: 'Log' }\n];\nconst OPTIONS_CHART_FRAME = [\n  { value: 'empty', icon: FrameEmpty },\n  { value: 'left', icon: FrameLeft },\n  { value: 'bottom', icon: FrameBottom },\n  { value: 'left-bottom', icon: FrameLeftBottom },\n  { value: 'full', icon: FrameFull }\n];\n\nconst inputGuide = computed(() => store.value.inputGuide.value)\nconst labelsInfo = computed(() => store.value.uniqueValuesData.value)\n\nconst reorderPrimaryOpen = ref(false);\nconst reorderSecondaryOpen = ref(false);\n\nconst defaultReorderPrimaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderPrimaryOpen);\nconst defaultReorderSecondaryOpen = computed(() => store.value.reactive.tabDefaultState['axes'].reorderSecondaryOpen);\nonMounted(() => {\n  if (defaultReorderPrimaryOpen.value) {\n    reorderPrimaryOpen.value = true;\n  }\n  if (defaultReorderSecondaryOpen.value) {\n    reorderSecondaryOpen.value = true;\n  }\n})\nwatch(() => defaultReorderPrimaryOpen.value, (v) => {\n  if (v) {\n    reorderSecondaryOpen.value = false;\n    reorderPrimaryOpen.value = true;\n  }\n});\nwatch(() => defaultReorderSecondaryOpen.value, (v) => {\n  if (v) {\n    reorderPrimaryOpen.value = false;\n    reorderSecondaryOpen.value = true;\n  }\n});\n\nconst primaryGrouping = computed(() => store.value.reactive.optionsState.components.primaryGrouping?.selectorStates[0]?.selectedSource);\nconst secondaryGrouping = computed(() => store.value.reactive.optionsState.components.secondaryGrouping?.selectorStates[0]?.selectedSource);\n\nconst primaryGroups = computed(() => store.value.commonHelpersData.primaryGroups.value)\nconst secondaryGroups = computed(() => store.value.commonHelpersData.secondaryGroups.value)\n\nconst usedAesInMapping = computed(() => store.value.commonHelpersData.usedAesInMapping.value);\n\nconst mappingPrimary = ref(store.value.reactive.dataBindAes[primaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(primaryGroups.value));\nconst mappingSecondary = ref(store.value.reactive.dataBindAes[secondaryGrouping.value] as AestheticMappingCategorical ?? createDefaultMapping(secondaryGroups.value));\n\nconst primaryInfo = computed(() => {\n  if (primaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(primaryGrouping.value) ?? null;\n    const valueLabels = labelsInfo.value[primaryGrouping.value]?.labels ?? null;\n    return {\n      selectedSourceInfo,\n      labels: primaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        return res;\n      }, {})\n    };\n  }\n});\nconst secondaryInfo = computed(() => {\n  if (secondaryGrouping.value) {\n    const selectedSourceInfo = inputGuide.value.getSourceInfo(secondaryGrouping.value) ?? null;\n    const valueLabels = labelsInfo.value[secondaryGrouping.value]?.labels ?? null;\n    return {\n      selectedSourceInfo,\n      labels: secondaryGroups.value.reduce((res: Record<string, string>, v) => {\n        res[v] = valueLabels?.[v] ?? String(v);\n        return res;\n      }, {})\n    };\n  }\n});\n\nfunction updateOrder(value: AestheticMappingCategorical, sourceId: string) {\n  store.value.reactive.dataBindAes[sourceId] = value;\n}\n\nconst OPTIONS_FACET_SHARED = [\n  { text: 'X', value: 'x' },\n  { text: 'Y', value: 'y' },\n  { text: 'XY', value: 'xy' },\n  { text: 'None', value: 'none' }\n];\n\nconst primaryOptions = computed(() => labelsInfo.value[primaryGrouping.value])\nconst xLabelsRotation = computed({\n  get(){\n    return getDiscreteLabelsRotation(settings.axisX.labelsRotation, primaryOptions.value?.options)\n  },\n  set(value:LabelsRotation) {\n    settings.axisX.labelsRotation = value;\n  }\n})\n</script>\n\n<template>\n  <div class=\"axes-form\" @click=\"(e) => e.stopPropagation()\">\n    <h3 class=\"axes-title\">\n      Axes\n    </h3>\n    <div class=\"axes-settings-list\">\n      <!--      Chart title -->\n      <collapsable-block title=\"Title\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.title.mode\"\n          />\n        </div>\n        <div class=\"axes-settings-input\" v-if=\"settings.title.mode === 'custom'\">\n          <pl-text-field\n            label=\"Chart title\"\n            placeholder=\"Chart title\"\n            v-model=\"settings.title.value\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Alignment</span>\n          <btn-icon-group :options=\"OPTIONS_TITLE_ALIGN\" v-model=\"settings.title.position\"/>\n        </div>\n<!--          <div class=\"axes-settings-options-row\">-->\n<!--            <span>Facet frame style</span>-->\n<!--            <btn-icon-group :options=\"OPTIONS_FACET_FRAME\" v-model=\"settings.title.facetTitleFrame\"/>-->\n<!--          </div>-->\n      </collapsable-block>\n      <!--      X axis settings-->\n      <collapsable-block title=\"X-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n          <span>Primary groups order: </span>\n          <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderPrimaryOpen = true\" />\n          <template v-if=\"reorderPrimaryOpen && primaryInfo\">\n            <form-wrapper\n              title=\"Reorder primary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderPrimaryOpen = false\"\n              @form:close=\"reorderPrimaryOpen = false\"\n            >\n              <aes-data-mapping\n                :column-value-labels=\"primaryInfo.labels\"\n                :data-column-label=\"primaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[primaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullPrimaryGroups\"\n                v-model=\"mappingPrimary\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, primaryGrouping)\"\n              />\n            </form-wrapper>\n          </template>\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"primaryGroups.length > 1\">\n          <span>Allow null primary group</span>\n          <pl-toggle-switch v-model=\"settings.axisX.allowNullPrimaryGroups\" />\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n          <span>Secondary groups order: </span>\n          <aes-button :data=\"{type: 'data', value: null}\" @click=\"reorderSecondaryOpen = true\" />\n          <template v-if=\"reorderSecondaryOpen && secondaryInfo\">\n            <form-wrapper\n              title=\"Reorder secondary groups\"\n              back-title=\"Axes Settings\"\n              @form:open=\"store.reactive.tabDefaultState['axes'].reorderSecondaryOpen = false\"\n              @form:close=\"reorderSecondaryOpen = false\"\n            >\n              <aes-data-mapping\n                :column-value-labels=\"secondaryInfo.labels\"\n                :data-column-label=\"secondaryInfo.selectedSourceInfo?.label ?? ''\"\n                :used-aes-in-mapping=\"usedAesInMapping[secondaryGrouping]\"\n                allow-reordering\n                allow-hiding\n                :allow-null-option=\"settings.axisX.allowNullSecondaryGroups\"\n                v-model=\"mappingSecondary\"\n                @update:modelValue=\"(value:AestheticMappingCategorical) => updateOrder(value, secondaryGrouping)\"\n              />\n            </form-wrapper>\n          </template>\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"secondaryGroups.length > 1\">\n          <span>Allow null secondary group</span>\n          <pl-toggle-switch v-model=\"settings.axisX.allowNullSecondaryGroups\" />\n        </div>\n        <div class=\"axes-settings-options-row\" v-if=\"store.reactive.chartType === 'discrete'\">\n          <span>Labels rotation</span>\n          <btn-icon-group :options=\"OPTIONS_LABELS_ROTATION\" v-model=\"xLabelsRotation\" />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.axisX.titleMode\"\n          />\n        </div>\n        <div v-if=\"settings.axisX.titleMode === 'custom'\">\n          <pl-text-field\n            label=\"Text\"\n            placeholder=\"Type\"\n            v-model=\"settings.axisX.customTitle\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <pl-toggle-switch v-model=\"settings.axisX.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Lines between categories</span>\n          <pl-toggle-switch v-model=\"settings.axisX.linesBetweenCategories\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <pl-toggle-switch v-model=\"settings.axisX.ticks\" />\n        </div>\n      </collapsable-block>\n      <!--      Y axis settings-->\n      <collapsable-block title=\"Y-axis\" :settings=\"blockSettings\" :icon=\"Right\" :icon-open=\"Down\">\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Title\"\n            :options=\"OPTIONS_AXIS_LABEL_MODE\"\n            v-model=\"settings.axisY.titleMode\"\n          />\n        </div>\n        <div v-if=\"settings.axisY.titleMode === 'custom'\">\n          <pl-text-field\n            label=\"Text\"\n            placeholder=\"Type\"\n            v-model=\"settings.axisY.customTitle\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Scale\"\n            :options=\"OPTIONS_SCALE\"\n            v-model=\"settings.axisY.scale\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Gridlines</span>\n          <pl-toggle-switch v-model=\"settings.axisY.gridlines\" />\n        </div>\n        <div class=\"axes-settings-options-row table\">\n          <span>Ticks</span>\n          <pl-toggle-switch v-model=\"settings.axisY.ticks\" />\n        </div>\n      </collapsable-block>\n      <!--      Facet settings-->\n      <div class=\"other\">\n        <div class=\"axes-settings-options-row\">\n          <span>Frame</span>\n          <btn-icon-group :options=\"OPTIONS_CHART_FRAME\" v-model=\"settings.other.frame\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <span>Reverse axes</span>\n          <pl-toggle-switch v-model=\"settings.other.reverse\" />\n        </div>\n        <div class=\"axes-settings-options-row\">\n          <Slider\n            :style=\"{width: '100%'}\"\n            label=\"Facet column count\"\n            :min=\"1\"\n            :max=\"6\"\n            :step=\"1\"\n            :breakpoints=\"true\"\n            mode=\"input\"\n            v-model=\"settings.other.facetColumns\"\n          />\n        </div>\n        <div class=\"axes-settings-options-row block\">\n          <pl-btn-group\n            label=\"Facet shared by\"\n            :options=\"OPTIONS_FACET_SHARED\"\n            v-model=\"settings.other.facetSharedBy\"\n          />\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n"],"names":["store","useStore","settings","blockSettings","OPTIONS_TITLE_ALIGN","AlignLeft","AlignCenter","AlignRight","OPTIONS_LABELS_ROTATION","Rotation0","Rotation45","Rotation90","OPTIONS_AXIS_LABEL_MODE","OPTIONS_SCALE","OPTIONS_CHART_FRAME","FrameEmpty","FrameLeft","FrameBottom","FrameLeftBottom","FrameFull","inputGuide","computed","labelsInfo","reorderPrimaryOpen","ref","reorderSecondaryOpen","defaultReorderPrimaryOpen","defaultReorderSecondaryOpen","onMounted","watch","v","primaryGrouping","_b","_a","secondaryGrouping","primaryGroups","secondaryGroups","usedAesInMapping","mappingPrimary","createDefaultMapping","mappingSecondary","primaryInfo","selectedSourceInfo","valueLabels","res","secondaryInfo","updateOrder","value","sourceId","OPTIONS_FACET_SHARED","primaryOptions","xLabelsRotation","getDiscreteLabelsRotation"],"mappings":"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"}

package/dist/GraphMaker/forms/DataMappingForm/DiscreteForm.vue.js

@@ -1,22 +1,28 @@
-import { defineComponent as I, watch as b, computed as v, createBlock as G, openBlock as s, withCtx as a, createElementBlock as u, Fragment as S, renderList as V, unref as r, createVNode as n, mergeProps as D, toHandlers as E, createElementVNode as h } from "vue";
+import { defineComponent as I, watch as b, computed as v, createBlock as G, openBlock as p, withCtx as a, createElementBlock as u, Fragment as S, renderList as V, unref as r, createVNode as i, mergeProps as D, toHandlers as E, createElementVNode as h } from "vue";
 import { PlDropdown as k } from "@platforma-sdk/ui-vue";
 import { useStore as F } from "../../store.js";
 import { getErrorForPlDropdown as O } from "./utils.js";
 import "../../constantsAesthetic.js";
 import "../../../node_modules/@milaboratories/pf-plots/dist/index.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/drivers/blob.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/drivers/pframe/spec/spec.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/plid.js";
+import "../../../node_modules/@milaboratories/pl-model-common/dist/ref.js";
+import "../../../node_modules/@platforma-sdk/model/dist/render/util/label.js";
+import "../../../node_modules/@milaboratories/pl-error-like/dist/error_like_shape.js";
 import { checkStatisticsInputsValidity as w } from "../../utils/getStatisticsOptions.js";
 import $ from "../../components/DragAndDrop/DndBasket.vue.js";
 import x from "./Layout/FormLayout.vue.js";
 import A from "./Layout/OptionsList.vue.js";
 import L from "./Layout/MandatoryOptions.vue.js";
 import { useBaskets as T } from "./useBaskets.js";
-const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
+const U = { class: "data-form-input-item" }, er = /* @__PURE__ */ I({
   __name: "DiscreteForm",
   setup(C) {
-    const t = F();
+    const e = F();
     b(
-      () => t.value.commonHelpersData.primaryGroups.value,
-      w(t)
+      () => e.value.commonHelpersData.primaryGroups.value,
+      w(e)
     );
     const c = [
       "filters",
@@ -31,7 +37,7 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
       tabBy: "Tab by",
       facetBy: "Facet by"
     }, {
-      draggedId: p,
+      draggedId: s,
       basketsData: y,
       freeMetaOptions: g,
       freeMandatoryOptions: _,
@@ -39,50 +45,50 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
       dataStateValues: m,
       dataOptions: B
     } = T(
-      t,
+      e,
       ["y"],
       ["filters", "tabBy"],
       ["primaryGrouping", "secondaryGrouping", "facetBy"],
       c,
       f
     ), d = v(() => {
-      var i;
-      return ((i = t.value.readonlyInputs) == null ? void 0 : i.includes("y")) ?? !1;
+      var n;
+      return ((n = e.value.readonlyInputs) == null ? void 0 : n.includes("y")) ?? !1;
     });
-    return (i, e) => (s(), G(x, null, {
+    return (n, t) => (p(), G(x, null, {
       dataInputs: a(() => [
         h("div", U, [
-          n(r(k), {
+          i(r(k), {
             modelValue: r(m).y,
-            "onUpdate:modelValue": e[0] || (e[0] = (o) => r(m).y = o),
+            "onUpdate:modelValue": t[0] || (t[0] = (o) => r(m).y = o),
             options: r(B).y,
             disabled: d.value,
-            error: r(O)("y", r(t).inputGuide.value),
+            error: r(O)("y", r(e).inputGuide.value),
             label: "Y:",
             clearable: !d.value
           }, null, 8, ["modelValue", "options", "disabled", "error", "clearable"])
         ])
       ]),
       mandatoryOptions: a(() => [
-        n(L, {
+        i(L, {
           options: r(_),
           chipInfo: r(l),
-          onDraggedIdUpdate: e[1] || (e[1] = (o) => p.value = o)
+          onDraggedIdUpdate: t[1] || (t[1] = (o) => s.value = o)
         }, null, 8, ["options", "chipInfo"])
       ]),
       metadataOptions: a(() => [
-        n(A, {
+        i(A, {
           options: r(g),
           chipInfo: r(l),
-          onDraggedIdUpdate: e[2] || (e[2] = (o) => p.value = o)
+          onDraggedIdUpdate: t[2] || (t[2] = (o) => s.value = o)
         }, null, 8, ["options", "chipInfo"])
       ]),
       chartVar: a(() => [
-        (s(!0), u(S, null, V(r(y), (o) => (s(), u("div", {
+        (p(!0), u(S, null, V(r(y), (o) => (p(), u("div", {
           key: o.id,
           class: "data-form-input-item"
         }, [
-          n($, D({ ref_for: !0 }, o, E(o.listeners)), null, 16)
+          i($, D({ ref_for: !0 }, o, E(o.listeners)), null, 16)
         ]))), 128))
       ]),
       _: 1
@@ -90,6 +96,6 @@ const U = { class: "data-form-input-item" }, W = /* @__PURE__ */ I({
   }
 });
 export {
-  W as default
+  er as default
 };
 //# sourceMappingURL=DiscreteForm.vue.js.map

package/dist/GraphMaker/forms/DataMappingForm/DiscreteForm.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"DiscreteForm.vue.js","sources":["../../../../src/GraphMaker/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch} from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n  () => store.value.commonHelpersData.primaryGroups.value,\n  checkStatisticsInputsValidity(store)\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y'\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'primaryGrouping',\n  'secondaryGrouping',\n  'tabBy',\n  'facetBy'\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  primaryGrouping: 'Primary grouping',\n  secondaryGrouping: 'Secondary grouping',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by'\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n  store,\n  ['y'],\n  ['filters', 'tabBy'],\n  ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n  BASKETS,\n  BASKET_LABELS\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n</script>\n\n<template>\n  <form-layout>\n    <template v-slot:dataInputs>\n      <div class=\"data-form-input-item\">\n        <pl-dropdown\n          v-model=\"dataStateValues.y\"\n          :options=\"dataOptions.y\"\n          :disabled=\"readonlyY\"\n          :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n          label=\"Y:\"\n          :clearable=\"!readonlyY\"\n        />\n      </div>\n    </template>\n    <template v-slot:mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template v-slot:metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template v-slot:chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </form-layout>\n</template>\n"],"names":["store","useStore","watch","checkStatisticsInputsValidity","BASKETS","BASKET_LABELS","draggedId","basketsData","freeMetaOptions","freeMandatoryOptions","chipInfo","dataStateValues","dataOptions","useBaskets","readonlyY","computed","_a"],"mappings":";;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,EAAA;AAEd,IAAAC;AAAA,MACE,MAAMF,EAAM,MAAM,kBAAkB,cAAc;AAAA,MAClDG,EAA8BH,CAAK;AAAA,IAAA;AAMrC,UAAMI,IAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAEIC,IAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,GAGL;AAAA,MACJ,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,aAAAC;AAAA,IAAA,IACEC;AAAA,MACFb;AAAA,MACA,CAAC,GAAG;AAAA,MACJ,CAAC,WAAW,OAAO;AAAA,MACnB,CAAC,mBAAmB,qBAAqB,SAAS;AAAA,MAClDI;AAAA,MACAC;AAAA,IAAA,GAGIS,IAAYC,EAAS,MAAA;;AAAM,eAAAC,IAAAhB,EAAM,MAAM,mBAAZ,gBAAAgB,EAA4B,SAAS,SAAQ;AAAA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DiscreteForm.vue.js","sources":["../../../../src/GraphMaker/forms/DataMappingForm/DiscreteForm.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { PlDropdown } from '@platforma-sdk/ui-vue';\nimport { DiscreteUIState } from '@milaboratories/pf-plots';\nimport { computed, watch} from 'vue';\nimport { useStore } from '../../store';\nimport { getErrorForPlDropdown } from './utils';\nimport { checkStatisticsInputsValidity } from '../../utils';\nimport DndBasket from '../../components/DragAndDrop/DndBasket.vue';\nimport FormLayout from './Layout/FormLayout.vue';\nimport OptionsList from './Layout/OptionsList.vue';\nimport MandatoryOptionsList from './Layout/MandatoryOptions.vue';\nimport { useBaskets } from './useBaskets';\n\nconst store = useStore();\n\nwatch(\n  () => store.value.commonHelpersData.primaryGroups.value,\n  checkStatisticsInputsValidity(store)\n);\n\ntype BasketIds = Exclude<keyof DiscreteUIState['components'], 'y'>;\ntype DataIds = keyof DiscreteUIState['components'] & 'y'\n\nconst BASKETS: BasketIds[] = [\n  'filters',\n  'primaryGrouping',\n  'secondaryGrouping',\n  'tabBy',\n  'facetBy'\n];\nconst BASKET_LABELS: Record<BasketIds, string> = {\n  filters: 'Filter',\n  primaryGrouping: 'Primary grouping',\n  secondaryGrouping: 'Secondary grouping',\n  tabBy: 'Tab by',\n  facetBy: 'Facet by'\n};\n\nconst {\n  draggedId,\n  basketsData,\n  freeMetaOptions,\n  freeMandatoryOptions,\n  chipInfo,\n  dataStateValues,\n  dataOptions\n} = useBaskets<DiscreteUIState, BasketIds, DataIds>(\n  store,\n  ['y'],\n  ['filters', 'tabBy'],\n  ['primaryGrouping', 'secondaryGrouping', 'facetBy'],\n  BASKETS,\n  BASKET_LABELS\n);\n\nconst readonlyY = computed(() => store.value.readonlyInputs?.includes('y') ?? false);\n</script>\n\n<template>\n  <form-layout>\n    <template v-slot:dataInputs>\n      <div class=\"data-form-input-item\">\n        <pl-dropdown\n          v-model=\"dataStateValues.y\"\n          :options=\"dataOptions.y\"\n          :disabled=\"readonlyY\"\n          :error=\"getErrorForPlDropdown('y', store.inputGuide.value)\"\n          label=\"Y:\"\n          :clearable=\"!readonlyY\"\n        />\n      </div>\n    </template>\n    <template v-slot:mandatoryOptions>\n      <MandatoryOptionsList\n        :options=\"freeMandatoryOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template v-slot:metadataOptions>\n      <OptionsList\n        :options=\"freeMetaOptions\"\n        :chipInfo=\"chipInfo\"\n        @dragged-id-update=\"draggedId = $event\"\n      />\n    </template>\n    <template v-slot:chartVar>\n      <div\n        v-for=\"basketProp in basketsData\"\n        :key=\"basketProp.id\"\n        class=\"data-form-input-item\"\n      >\n        <DndBasket v-bind=\"basketProp\" v-on=\"basketProp.listeners\" />\n      </div>\n    </template>\n  </form-layout>\n</template>\n"],"names":["store","useStore","watch","checkStatisticsInputsValidity","BASKETS","BASKET_LABELS","draggedId","basketsData","freeMetaOptions","freeMandatoryOptions","chipInfo","dataStateValues","dataOptions","useBaskets","readonlyY","computed","_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaA,UAAMA,IAAQC,EAAA;AAEd,IAAAC;AAAA,MACE,MAAMF,EAAM,MAAM,kBAAkB,cAAc;AAAA,MAClDG,EAA8BH,CAAK;AAAA,IAAA;AAMrC,UAAMI,IAAuB;AAAA,MAC3B;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA,GAEIC,IAA2C;AAAA,MAC/C,SAAS;AAAA,MACT,iBAAiB;AAAA,MACjB,mBAAmB;AAAA,MACnB,OAAO;AAAA,MACP,SAAS;AAAA,IAAA,GAGL;AAAA,MACJ,WAAAC;AAAA,MACA,aAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,sBAAAC;AAAA,MACA,UAAAC;AAAA,MACA,iBAAAC;AAAA,MACA,aAAAC;AAAA,IAAA,IACEC;AAAA,MACFb;AAAA,MACA,CAAC,GAAG;AAAA,MACJ,CAAC,WAAW,OAAO;AAAA,MACnB,CAAC,mBAAmB,qBAAqB,SAAS;AAAA,MAClDI;AAAA,MACAC;AAAA,IAAA,GAGIS,IAAYC,EAAS,MAAA;;AAAM,eAAAC,IAAAhB,EAAM,MAAM,mBAAZ,gBAAAgB,EAA4B,SAAS,SAAQ;AAAA,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Scatter.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"names":[],"mappings":";AAsWA,wBAKG"}
+{"version":3,"file":"Scatter.vue.d.ts","sourceRoot":"","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"names":[],"mappings":";AAwWA,wBAKG"}

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue.js

@@ -1,38 +1,44 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dot-size-selector{margin-top:24px}.dot-size-selector__row{margin:12px 0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as F, computed as n, createElementBlock as E, openBlock as U, Fragment as T, createVNode as c } from "vue";
-import { useStore as C } from "../../../../store.js";
+import { defineComponent as F, computed as n, createElementBlock as U, openBlock as C, Fragment as E, createVNode as p } from "vue";
+import { useStore as x } from "../../../../store.js";
 import g from "../../AesSelector.vue.js";
-import { DEFAULT_BLACK as f, DEFAULT_DOT_SHAPE as m } from "../../../../constantsAesthetic.js";
-import { DEFAULT_DOT_RANGE as L, DEFAULT_DOT_SIZE as S, isAestheticMapping as x } from "../../../../dataBindAes.js";
-import { isContinuousDataMapping as v, PALETTE_KEY as z } from "../../../../constantsCommon.js";
-import B from "../../DotSizeSelector.vue.js";
+import { DEFAULT_BLACK as m, DEFAULT_DOT_SHAPE as f } from "../../../../constantsAesthetic.js";
+import { DEFAULT_DOT_RANGE as L, DEFAULT_DOT_SIZE as S, isAestheticMapping as T } from "../../../../dataBindAes.js";
+import { isContinuousDataMapping as v } from "../../../../constantsCommon.js";
+import z from "../../DotSizeSelector.vue.js";
 
-const a = "dots", $ = /* @__PURE__ */ F({
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/drivers/blob.js";
+import { readAnnotation as B, Annotation as k } from "../../../../../node_modules/@milaboratories/pl-model-common/dist/drivers/pframe/spec/spec.js";
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/plid.js";
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/ref.js";
+import "../../../../../node_modules/@platforma-sdk/model/dist/render/util/label.js";
+import "../../../../../node_modules/@milaboratories/pl-error-like/dist/error_like_shape.js";
+const a = "dots", Q = /* @__PURE__ */ F({
   __name: "Scatter",
-  setup(k) {
-    const s = C(), i = s.value.reactive.optionsState, y = n(
+  setup(w) {
+    const s = x(), r = s.value.reactive.optionsState, y = n(
       () => s.value.inputGuide.value
     ), l = n(() => s.value.reactive.layersSettings[a]);
-    function r(e) {
+    function i(e) {
       return e !== null && typeof e == "object" && "type" in e;
     }
-    const p = n(() => {
-      const e = l.value.dotFill, t = i.components.grouping.selectorStates.map((o) => o.selectedSource);
-      return r(e) && t.length ? t.includes(e.value) ? e : { type: "grouping", value: t[0] } : t.length ? { type: "grouping", value: t[0] } : r(e) ? f : e ?? f;
+    const c = n(() => {
+      const e = l.value.dotFill, t = r.components.grouping.selectorStates.map((o) => o.selectedSource);
+      return i(e) && t.length ? t.includes(e.value) ? e : { type: "grouping", value: t[0] } : t.length ? { type: "grouping", value: t[0] } : i(e) ? m : e ?? m;
     }), d = n(() => {
-      const e = l.value.dotShape, t = i.components.shape.selectorStates.map((o) => o.selectedSource);
-      return r(e) && t.length ? e.value === t[0] ? e : { type: "shape", value: t[0] } : t.length ? { type: "shape", value: t[0] } : r(e) ? m : e ?? m;
+      const e = l.value.dotShape, t = r.components.shape.selectorStates.map((o) => o.selectedSource);
+      return i(e) && t.length ? e.value === t[0] ? e : { type: "shape", value: t[0] } : t.length ? { type: "shape", value: t[0] } : i(e) ? f : e ?? f;
     }), h = n(() => {
-      const e = l.value.dotSize, t = i.components.size.selectorStates.map((o) => o.selectedSource);
+      const e = l.value.dotSize, t = r.components.size.selectorStates.map((o) => o.selectedSource);
       return t.length ? { column: t[0], range: v(e) ? e.range : L } : v(e) ? S : e ?? S;
     });
-    function _(e, t, o) {
+    function A(e, t, o) {
       typeof e == "string" ? s.value.reactive.layersSettings[a][o] = e : (t.type === "dataCategorical" || t.type === "dataContinuous") && (s.value.reactive.layersSettings[a][o] = {
         type: "grouping",
         value: t.selectedSource
-      }), x(e) && t.type !== "fix" && (s.value.reactive.dataBindAes[t.selectedSource] = e);
+      }), T(e) && t.type !== "fix" && (s.value.reactive.dataBindAes[t.selectedSource] = e);
     }
-    function A(e, t, o) {
+    function _(e, t, o) {
       typeof e == "string" ? s.value.reactive.layersSettings[a][o] = e : t.type === "dataCategorical" && (s.value.reactive.layersSettings[a][o] = {
         type: "grouping",
         value: t.selectedSource
@@ -42,26 +48,26 @@ const a = "dots", $ = /* @__PURE__ */ F({
       s.value.reactive.layersSettings[a].dotSize = e;
     }
     const b = n(() => {
-      if (i.components.grouping.selectorStates.length) {
-        const e = i.components.grouping.selectorStates[0].selectedSource, t = y.value.getSourceInfo(e).annotations;
-        if (t != null && t[z])
+      if (r.components.grouping.selectorStates.length) {
+        const e = r.components.grouping.selectorStates[0].selectedSource, t = y.value.getSourceInfo(e).spec;
+        if (B(t, k.Graph.Palette))
           return !0;
       }
       return !1;
     });
-    return (e, t) => (U(), E(T, null, [
-      c(g, {
+    return (e, t) => (C(), U(E, null, [
+      p(g, {
         label: "Dot color",
         "form-title": "Dot color Settings",
         "form-back-title": "Layers",
         type: "fill",
-        selected: p.value,
+        selected: c.value,
         "possible-aes-source-inputs": ["grouping"],
         disabled: b.value,
-        withoutFixed: typeof p.value == "object",
-        onAesUpdate: t[0] || (t[0] = (o, u) => _(o, u, "dotFill"))
+        withoutFixed: typeof c.value == "object",
+        onAesUpdate: t[0] || (t[0] = (o, u) => A(o, u, "dotFill"))
       }, null, 8, ["selected", "disabled", "withoutFixed"]),
-      c(g, {
+      p(g, {
         label: "Dot shape",
         "form-title": "Dot shape Settings",
         "form-back-title": "Layers",
@@ -69,9 +75,9 @@ const a = "dots", $ = /* @__PURE__ */ F({
         "possible-aes-source-inputs": ["shape"],
         selected: d.value,
         withoutFixed: typeof d.value == "object",
-        onAesUpdate: t[1] || (t[1] = (o, u) => A(o, u, "dotShape"))
+        onAesUpdate: t[1] || (t[1] = (o, u) => _(o, u, "dotShape"))
       }, null, 8, ["selected", "withoutFixed"]),
-      c(B, {
+      p(z, {
         selected: h.value,
         onAesUpdate: D
       }, null, 8, ["selected"])
@@ -79,6 +85,6 @@ const a = "dots", $ = /* @__PURE__ */ F({
   }
 });
 export {
-  $ as default
+  Q as default
 };
 //# sourceMappingURL=Scatter.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scatter.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport AesSelector from '../../AesSelector.vue';\nimport { computed, Ref } from 'vue';\nimport { DEFAULT_BLACK, DEFAULT_DOT_SHAPE } from '../../../../constantsAesthetic';\nimport {\n  AestheticMappingCategorical,\n  AestheticMappingContinuous,\n  DEFAULT_DOT_RANGE,\n  DEFAULT_DOT_SIZE, isAestheticMapping\n} from '../../../../dataBindAes';\nimport { AesMappingOption, AesOption, DotShape } from '../../../../components/AesSettings/types';\nimport { ContinuousDataMappingSize, isContinuousDataMapping, MappingLink, PALETTE_KEY } from '../../../../constantsCommon';\nimport DotSizeSelector from '../../DotSizeSelector.vue';\nimport { InputGuide, ScatterplotUIState } from '@milaboratories/pf-plots';\n\nconst store = useStore();\nconst layer = 'dots';\nconst state = store.value.reactive.optionsState as ScatterplotUIState;\nconst inputGuide = computed(\n  () => store.value.inputGuide.value\n) as unknown as Ref<InputGuide<ScatterplotUIState>>;\n\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\n\nfunction isMapping(value:MappingLink|string|null): value is MappingLink {\n  return value !== null && typeof value === 'object' && 'type' in value;\n}\nconst dotFill = computed(() => {\n  const value = settings.value.dotFill;\n  const columns = state.components.grouping.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return columns.includes(value.value as string) ? value : { type: 'grouping', value: columns[0] };\n  }\n  return columns.length ? { type: 'grouping', value: columns[0] } : isMapping(value) ? DEFAULT_BLACK : value ?? DEFAULT_BLACK\n});\n\nconst dotShape = computed(() => {\n  const value = settings.value.dotShape;\n  const columns = state.components.shape.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return value.value === columns[0] ? value : { type: 'shape', value: columns[0] };\n  }\n  return columns.length ? { type: 'shape', value: columns[0] } : isMapping(value) ? DEFAULT_DOT_SHAPE : value ?? DEFAULT_DOT_SHAPE\n});\n\nconst dotSize = computed(() => {\n  const value = settings.value.dotSize;\n  const columns = state.components.size.selectorStates.map((s) => s.selectedSource);\n\n  if (columns.length) {\n    return {column: columns[0], range: isContinuousDataMapping(value) ? value.range : DEFAULT_DOT_RANGE};\n  }\n  return isContinuousDataMapping(value) ? DEFAULT_DOT_SIZE : value ?? DEFAULT_DOT_SIZE;\n});\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical | AestheticMappingContinuous,\n  colorOption: AesOption,\n  field: 'dotFill'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical' || colorOption.type === 'dataContinuous') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (isAestheticMapping(value) && colorOption.type !== 'fix') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDot(\n  value: DotShape | AestheticMappingCategorical,\n  colorOption: AesMappingOption,\n  field: 'dotShape'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDotSize(value: number | ContinuousDataMappingSize) {\n  store.value.reactive.layersSettings[layer].dotSize = value;\n}\n\nconst disabledColor = computed(() => {\n  if (state.components.grouping.selectorStates.length) {\n    const groupingSource = state.components.grouping.selectorStates[0].selectedSource;\n    const annotations = inputGuide.value.getSourceInfo(groupingSource).annotations;\n    if (annotations?.[PALETTE_KEY]) {\n      return true;\n    }\n  }\n  return false;\n})\n</script>\n\n<template>\n  <aes-selector\n    label=\"Dot color\"\n    form-title=\"Dot color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"dotFill\"\n    :possible-aes-source-inputs=\"['grouping']\"\n    :disabled=\"disabledColor\"\n    :withoutFixed=\"typeof dotFill === 'object'\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'dotFill')\"\n  />\n  <aes-selector\n    label=\"Dot shape\"\n    form-title=\"Dot shape Settings\"\n    form-back-title=\"Layers\"\n    type=\"dotShape\"\n    :possible-aes-source-inputs=\"['shape']\"\n    :selected=\"dotShape\"\n    :withoutFixed=\"typeof dotShape === 'object'\"\n    @aes-update=\"(v, c) => onUpdateDot(v, c, 'dotShape')\"\n  />\n  <dot-size-selector :selected=\"dotSize\" @aes-update=\"onUpdateDotSize\" />\n</template>\n"],"names":["layer","store","useStore","state","inputGuide","computed","settings","isMapping","value","dotFill","columns","s","DEFAULT_BLACK","dotShape","DEFAULT_DOT_SHAPE","dotSize","isContinuousDataMapping","DEFAULT_DOT_RANGE","DEFAULT_DOT_SIZE","onUpdate","colorOption","field","isAestheticMapping","onUpdateDot","onUpdateDotSize","disabledColor","groupingSource","annotations","PALETTE_KEY"],"mappings":"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"}
+{"version":3,"file":"Scatter.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot/Scatter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport AesSelector from '../../AesSelector.vue';\nimport { computed, Ref } from 'vue';\nimport { DEFAULT_BLACK, DEFAULT_DOT_SHAPE } from '../../../../constantsAesthetic';\nimport {\n  AestheticMappingCategorical,\n  AestheticMappingContinuous,\n  DEFAULT_DOT_RANGE,\n  DEFAULT_DOT_SIZE, isAestheticMapping\n} from '../../../../dataBindAes';\nimport { AesMappingOption, AesOption, DotShape } from '../../../../components/AesSettings/types';\nimport { ContinuousDataMappingSize, isContinuousDataMapping, MappingLink } from '../../../../constantsCommon';\nimport DotSizeSelector from '../../DotSizeSelector.vue';\nimport { InputGuide, ScatterplotUIState } from '@milaboratories/pf-plots';\nimport { Annotation, readAnnotation } from '@platforma-sdk/model';\n\nconst store = useStore();\nconst layer = 'dots';\nconst state = store.value.reactive.optionsState as ScatterplotUIState;\nconst inputGuide = computed(\n  () => store.value.inputGuide.value\n) as unknown as Ref<InputGuide<ScatterplotUIState>>;\n\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\n\nfunction isMapping(value:MappingLink|string|null): value is MappingLink {\n  return value !== null && typeof value === 'object' && 'type' in value;\n}\nconst dotFill = computed(() => {\n  const value = settings.value.dotFill;\n  const columns = state.components.grouping.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return columns.includes(value.value as string) ? value : { type: 'grouping', value: columns[0] };\n  }\n  return columns.length ? { type: 'grouping', value: columns[0] } : isMapping(value) ? DEFAULT_BLACK : value ?? DEFAULT_BLACK\n});\n\nconst dotShape = computed(() => {\n  const value = settings.value.dotShape;\n  const columns = state.components.shape.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return value.value === columns[0] ? value : { type: 'shape', value: columns[0] };\n  }\n  return columns.length ? { type: 'shape', value: columns[0] } : isMapping(value) ? DEFAULT_DOT_SHAPE : value ?? DEFAULT_DOT_SHAPE\n});\n\nconst dotSize = computed(() => {\n  const value = settings.value.dotSize;\n  const columns = state.components.size.selectorStates.map((s) => s.selectedSource);\n\n  if (columns.length) {\n    return {column: columns[0], range: isContinuousDataMapping(value) ? value.range : DEFAULT_DOT_RANGE};\n  }\n  return isContinuousDataMapping(value) ? DEFAULT_DOT_SIZE : value ?? DEFAULT_DOT_SIZE;\n});\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical | AestheticMappingContinuous,\n  colorOption: AesOption,\n  field: 'dotFill'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical' || colorOption.type === 'dataContinuous') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (isAestheticMapping(value) && colorOption.type !== 'fix') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDot(\n  value: DotShape | AestheticMappingCategorical,\n  colorOption: AesMappingOption,\n  field: 'dotShape'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (colorOption.type === 'dataCategorical' && typeof value !== 'string') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nfunction onUpdateDotSize(value: number | ContinuousDataMappingSize) {\n  store.value.reactive.layersSettings[layer].dotSize = value;\n}\n\nconst disabledColor = computed(() => {\n  if (state.components.grouping.selectorStates.length) {\n    const groupingSource = state.components.grouping.selectorStates[0].selectedSource;\n    const spec = inputGuide.value.getSourceInfo(groupingSource).spec;\n    if (readAnnotation(spec, Annotation.Graph.Palette)) {\n      return true;\n    }\n  }\n  return false;\n})\n</script>\n\n<template>\n  <aes-selector\n    label=\"Dot color\"\n    form-title=\"Dot color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"dotFill\"\n    :possible-aes-source-inputs=\"['grouping']\"\n    :disabled=\"disabledColor\"\n    :withoutFixed=\"typeof dotFill === 'object'\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'dotFill')\"\n  />\n  <aes-selector\n    label=\"Dot shape\"\n    form-title=\"Dot shape Settings\"\n    form-back-title=\"Layers\"\n    type=\"dotShape\"\n    :possible-aes-source-inputs=\"['shape']\"\n    :selected=\"dotShape\"\n    :withoutFixed=\"typeof dotShape === 'object'\"\n    @aes-update=\"(v, c) => onUpdateDot(v, c, 'dotShape')\"\n  />\n  <dot-size-selector :selected=\"dotSize\" @aes-update=\"onUpdateDotSize\" />\n</template>\n"],"names":["layer","store","useStore","state","inputGuide","computed","settings","isMapping","value","dotFill","columns","s","DEFAULT_BLACK","dotShape","DEFAULT_DOT_SHAPE","dotSize","isContinuousDataMapping","DEFAULT_DOT_RANGE","DEFAULT_DOT_SIZE","onUpdate","colorOption","field","isAestheticMapping","onUpdateDot","onUpdateDotSize","disabledColor","groupingSource","spec","readAnnotation","Annotation"],"mappings":";;;;;;;;;;;;;;AAkBA,MAAMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAQF,EAAM,MAAM,SAAS,cAC7BG,IAAaC;AAAA,MACjB,MAAMJ,EAAM,MAAM,WAAW;AAAA,IAAA,GAGzBK,IAAWD,EAAS,MAAMJ,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC;AAE1E,aAASO,EAAUC,GAAqD;AACtE,aAAOA,MAAU,QAAQ,OAAOA,KAAU,YAAY,UAAUA;AAAA,IAClE;AACA,UAAMC,IAAUJ,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,SAAS,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AACpF,aAAIJ,EAAUC,CAAK,KAAKE,EAAQ,SACvBA,EAAQ,SAASF,EAAM,KAAe,IAAIA,IAAQ,EAAE,MAAM,YAAY,OAAOE,EAAQ,CAAC,EAAA,IAExFA,EAAQ,SAAS,EAAE,MAAM,YAAY,OAAOA,EAAQ,CAAC,EAAA,IAAMH,EAAUC,CAAK,IAAII,IAAgBJ,KAASI;AAAA,IAChH,CAAC,GAEKC,IAAWR,EAAS,MAAM;AAC9B,YAAMG,IAAQF,EAAS,MAAM,UACvBI,IAAUP,EAAM,WAAW,MAAM,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AACjF,aAAIJ,EAAUC,CAAK,KAAKE,EAAQ,SACvBF,EAAM,UAAUE,EAAQ,CAAC,IAAIF,IAAQ,EAAE,MAAM,SAAS,OAAOE,EAAQ,CAAC,EAAA,IAExEA,EAAQ,SAAS,EAAE,MAAM,SAAS,OAAOA,EAAQ,CAAC,EAAA,IAAMH,EAAUC,CAAK,IAAIM,IAAoBN,KAASM;AAAA,IACjH,CAAC,GAEKC,IAAUV,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,KAAK,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AAEhF,aAAID,EAAQ,SACH,EAAC,QAAQA,EAAQ,CAAC,GAAG,OAAOM,EAAwBR,CAAK,IAAIA,EAAM,QAAQS,EAAA,IAE7ED,EAAwBR,CAAK,IAAIU,IAAmBV,KAASU;AAAA,IACtE,CAAC;AAED,aAASC,EACPX,GACAY,GACAC,GACA;AACA,MAAI,OAAOb,KAAU,WACnBP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEqB,CAAK,IAAIb,KAC3CY,EAAY,SAAS,qBAAqBA,EAAY,SAAS,sBACxEnB,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEqB,CAAK,IAAI;AAAA,QAClD,MAAM;AAAA,QACN,OAAOD,EAAY;AAAA,MAAA,IAGnBE,EAAmBd,CAAK,KAAKY,EAAY,SAAS,UACpDnB,EAAM,MAAM,SAAS,YAAYmB,EAAY,cAAc,IAAIZ;AAAA,IAEnE;AAEA,aAASe,EACPf,GACAY,GACAC,GACA;AACA,MAAI,OAAOb,KAAU,WACnBP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEqB,CAAK,IAAIb,IAC3CY,EAAY,SAAS,sBAC9BnB,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEqB,CAAK,IAAI;AAAA,QAClD,MAAM;AAAA,QACN,OAAOD,EAAY;AAAA,MAAA,IAGnBA,EAAY,SAAS,qBAAqB,OAAOZ,KAAU,aAC7DP,EAAM,MAAM,SAAS,YAAYmB,EAAY,cAAc,IAAIZ;AAAA,IAEnE;AAEA,aAASgB,EAAgBhB,GAA2C;AAClE,MAAAP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAE,UAAUQ;AAAA,IACvD;AAEA,UAAMiB,IAAgBpB,EAAS,MAAM;AACnC,UAAIF,EAAM,WAAW,SAAS,eAAe,QAAQ;AACnD,cAAMuB,IAAiBvB,EAAM,WAAW,SAAS,eAAe,CAAC,EAAE,gBAC7DwB,IAAOvB,EAAW,MAAM,cAAcsB,CAAc,EAAE;AAC5D,YAAIE,EAAeD,GAAME,EAAW,MAAM,OAAO;AAC/C,iBAAO;AAAA,MAEX;AACA,aAAO;AAAA,IACT,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue.js

@@ -1,46 +1,52 @@
 (function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.appendChild(document.createTextNode(".dot-size-selector{margin-top:24px}.dot-size-selector__row{margin:12px 0}")),document.head.appendChild(e)}}catch(t){console.error("vite-plugin-css-injected-by-js",t)}})();
-import { defineComponent as A, computed as s, createElementBlock as D, openBlock as E, Fragment as F, createVNode as c } from "vue";
-import { useStore as b } from "../../../../store.js";
+import { defineComponent as A, computed as r, createElementBlock as D, openBlock as F, Fragment as b, createVNode as c } from "vue";
+import { useStore as h } from "../../../../store.js";
 import C from "../../AesSelector.vue.js";
 import { DEFAULT_BLACK as p } from "../../../../constantsAesthetic.js";
-import { DEFAULT_DOT_RANGE as T, DEFAULT_DOT_SIZE_CANVAS as d, isAestheticMapping as U } from "../../../../dataBindAes.js";
-import { PALETTE_KEY as h, isContinuousDataMapping as g } from "../../../../constantsCommon.js";
-import L from "../../DotSizeSelector.vue.js";
+import { DEFAULT_DOT_RANGE as U, DEFAULT_DOT_SIZE_CANVAS as m, isAestheticMapping as E } from "../../../../dataBindAes.js";
+import { isContinuousDataMapping as d } from "../../../../constantsCommon.js";
+import x from "../../DotSizeSelector.vue.js";
 
-const i = "dots", I = /* @__PURE__ */ A({
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/drivers/blob.js";
+import { readAnnotation as z, Annotation as L } from "../../../../../node_modules/@milaboratories/pl-model-common/dist/drivers/pframe/spec/spec.js";
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/plid.js";
+import "../../../../../node_modules/@milaboratories/pl-model-common/dist/ref.js";
+import "../../../../../node_modules/@platforma-sdk/model/dist/render/util/label.js";
+import "../../../../../node_modules/@milaboratories/pl-error-like/dist/error_like_shape.js";
+const s = "dots", q = /* @__PURE__ */ A({
   __name: "Scatter",
-  setup(x) {
-    const n = b(), r = n.value.reactive.optionsState, m = s(
+  setup(T) {
+    const n = h(), i = n.value.reactive.optionsState, g = r(
       () => n.value.inputGuide.value
-    ), a = s(() => n.value.reactive.layersSettings[i]);
+    ), a = r(() => n.value.reactive.layersSettings[s]);
     function l(e) {
       return e !== null && typeof e == "object" && "type" in e;
     }
-    const u = s(() => {
-      const e = a.value.dotFill, t = r.components.grouping.selectorStates.map((o) => o.selectedSource);
+    const u = r(() => {
+      const e = a.value.dotFill, t = i.components.grouping.selectorStates.map((o) => o.selectedSource);
       return l(e) && t.length ? t.includes(e.value) ? e : { type: "grouping", value: t[0] } : t.length ? { type: "grouping", value: t[0] } : l(e) ? p : e ?? p;
     });
     function f(e, t, o) {
-      typeof e == "string" ? n.value.reactive.layersSettings[i][o] = e : (t.type === "dataCategorical" || t.type === "dataContinuous") && (n.value.reactive.layersSettings[i][o] = {
+      typeof e == "string" ? n.value.reactive.layersSettings[s][o] = e : (t.type === "dataCategorical" || t.type === "dataContinuous") && (n.value.reactive.layersSettings[s][o] = {
         type: "grouping",
         value: t.selectedSource
-      }), U(e) && t.type !== "fix" && (n.value.reactive.dataBindAes[t.selectedSource] = e);
+      }), E(e) && t.type !== "fix" && (n.value.reactive.dataBindAes[t.selectedSource] = e);
     }
-    const S = s(() => {
-      if (r.components.grouping.selectorStates.length) {
-        const e = r.components.grouping.selectorStates[0].selectedSource, t = m.value.getSourceInfo(e).annotations;
-        if (t != null && t[h])
+    const S = r(() => {
+      if (i.components.grouping.selectorStates.length) {
+        const e = i.components.grouping.selectorStates[0].selectedSource, t = g.value.getSourceInfo(e).spec;
+        if (z(t, L.Graph.Palette))
           return !0;
       }
       return !1;
-    }), v = s(() => {
-      const e = a.value.dotSize, t = r.components.size.selectorStates.map((o) => o.selectedSource);
-      return t.length ? { column: t[0], range: g(e) ? e.range : T } : g(e) ? d : e ?? d;
+    }), v = r(() => {
+      const e = a.value.dotSize, t = i.components.size.selectorStates.map((o) => o.selectedSource);
+      return t.length ? { column: t[0], range: d(e) ? e.range : U } : d(e) ? m : e ?? m;
     });
     function y(e) {
-      n.value.reactive.layersSettings[i].dotSize = e;
+      n.value.reactive.layersSettings[s].dotSize = e;
     }
-    return (e, t) => (E(), D(F, null, [
+    return (e, t) => (F(), D(b, null, [
       c(C, {
         label: "Dot color",
         "form-title": "Dot color Settings",
@@ -52,7 +58,7 @@ const i = "dots", I = /* @__PURE__ */ A({
         withoutFixed: typeof u.value == "object",
         onAesUpdate: t[0] || (t[0] = (o, _) => f(o, _, "dotFill"))
       }, null, 8, ["selected", "disabled", "withoutFixed"]),
-      c(L, {
+      c(x, {
         selected: v.value,
         onAesUpdate: y,
         min: 2
@@ -61,6 +67,6 @@ const i = "dots", I = /* @__PURE__ */ A({
   }
 });
 export {
-  I as default
+  q as default
 };
 //# sourceMappingURL=Scatter.vue.js.map

package/dist/GraphMaker/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue.js.map

@@ -1 +1 @@
-{"version":3,"file":"Scatter.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport AesSelector from '../../AesSelector.vue';\nimport { computed, Ref } from 'vue';\nimport { DEFAULT_BLACK } from '../../../../constantsAesthetic';\nimport {\n  AestheticMappingCategorical,\n  DEFAULT_DOT_RANGE, DEFAULT_DOT_SIZE_CANVAS,\n  isAestheticMapping\n} from '../../../../dataBindAes';\nimport { AesOption } from '../../../../components/AesSettings/types';\nimport {\n  ContinuousDataMappingSize,\n  isContinuousDataMapping,\n  MappingLink,\n  PALETTE_KEY\n} from '../../../../constantsCommon';\nimport { InputGuide, ScatterplotUIState } from '@milaboratories/pf-plots';\nimport DotSizeSelector from '../../DotSizeSelector.vue';\n\nconst store = useStore();\nconst layer = 'dots';\nconst state = store.value.reactive.optionsState as ScatterplotUIState;\nconst inputGuide = computed(\n  () => store.value.inputGuide.value\n) as unknown as Ref<InputGuide<ScatterplotUIState>>;\n\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\n\nfunction isMapping(value:MappingLink|string|null): value is MappingLink {\n  return value !== null && typeof value === 'object' && 'type' in value;\n}\nconst dotFill = computed(() => {\n  const value = settings.value.dotFill;\n  const columns = state.components.grouping.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return columns.includes(value.value as string) ? value : { type: 'grouping', value: columns[0] };\n  }\n  return columns.length ? { type: 'grouping', value: columns[0] } : isMapping(value) ? DEFAULT_BLACK : value ?? DEFAULT_BLACK\n});\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'dotFill'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical' || colorOption.type === 'dataContinuous') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (isAestheticMapping(value) && colorOption.type !== 'fix') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst disabledColor = computed(() => {\n  if (state.components.grouping.selectorStates.length) {\n    const groupingSource = state.components.grouping.selectorStates[0].selectedSource;\n    const annotations = inputGuide.value.getSourceInfo(groupingSource).annotations;\n    if (annotations?.[PALETTE_KEY]) {\n      return true;\n    }\n  }\n  return false;\n})\n\nconst dotSize = computed(() => {\n  const value = settings.value.dotSize;\n  const columns = state.components.size.selectorStates.map((s) => s.selectedSource);\n\n  if (columns.length) {\n    return  {column: columns[0], range: isContinuousDataMapping(value) ? value.range : DEFAULT_DOT_RANGE};\n  }\n  return isContinuousDataMapping(value) ? DEFAULT_DOT_SIZE_CANVAS : value ?? DEFAULT_DOT_SIZE_CANVAS;\n});\n\nfunction onUpdateDotSize(value: number | ContinuousDataMappingSize) {\n  store.value.reactive.layersSettings[layer].dotSize = value;\n}\n</script>\n\n<template>\n  <aes-selector\n    label=\"Dot color\"\n    form-title=\"Dot color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"dotFill\"\n    :possible-aes-source-inputs=\"['grouping']\"\n    :disabled=\"disabledColor\"\n    :withoutFixed=\"typeof dotFill === 'object'\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'dotFill')\"\n  />\n  <dot-size-selector :selected=\"dotSize\" @aes-update=\"onUpdateDotSize\" :min=\"2\" />\n</template>\n"],"names":["layer","store","useStore","state","inputGuide","computed","settings","isMapping","value","dotFill","columns","s","DEFAULT_BLACK","onUpdate","colorOption","field","isAestheticMapping","disabledColor","groupingSource","annotations","PALETTE_KEY","dotSize","isContinuousDataMapping","DEFAULT_DOT_RANGE","DEFAULT_DOT_SIZE_CANVAS","onUpdateDotSize"],"mappings":";;;;;;;;AAqBA,MAAMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAQF,EAAM,MAAM,SAAS,cAC7BG,IAAaC;AAAA,MACjB,MAAMJ,EAAM,MAAM,WAAW;AAAA,IAAA,GAGzBK,IAAWD,EAAS,MAAMJ,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC;AAE1E,aAASO,EAAUC,GAAqD;AACtE,aAAOA,MAAU,QAAQ,OAAOA,KAAU,YAAY,UAAUA;AAAA,IAClE;AACA,UAAMC,IAAUJ,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,SAAS,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AACpF,aAAIJ,EAAUC,CAAK,KAAKE,EAAQ,SACvBA,EAAQ,SAASF,EAAM,KAAe,IAAIA,IAAQ,EAAE,MAAM,YAAY,OAAOE,EAAQ,CAAC,EAAA,IAExFA,EAAQ,SAAS,EAAE,MAAM,YAAY,OAAOA,EAAQ,CAAC,EAAA,IAAMH,EAAUC,CAAK,IAAII,IAAgBJ,KAASI;AAAA,IAChH,CAAC;AAED,aAASC,EACPL,GACAM,GACAC,GACA;AACA,MAAI,OAAOP,KAAU,WACnBP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEe,CAAK,IAAIP,KAC3CM,EAAY,SAAS,qBAAqBA,EAAY,SAAS,sBACxEb,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEe,CAAK,IAAI;AAAA,QAClD,MAAM;AAAA,QACN,OAAOD,EAAY;AAAA,MAAA,IAGnBE,EAAmBR,CAAK,KAAKM,EAAY,SAAS,UACpDb,EAAM,MAAM,SAAS,YAAYa,EAAY,cAAc,IAAIN;AAAA,IAEnE;AAEA,UAAMS,IAAgBZ,EAAS,MAAM;AACnC,UAAIF,EAAM,WAAW,SAAS,eAAe,QAAQ;AACnD,cAAMe,IAAiBf,EAAM,WAAW,SAAS,eAAe,CAAC,EAAE,gBAC7DgB,IAAcf,EAAW,MAAM,cAAcc,CAAc,EAAE;AACnE,YAAIC,KAAA,QAAAA,EAAcC;AAChB,iBAAO;AAAA,MAEX;AACA,aAAO;AAAA,IACT,CAAC,GAEKC,IAAUhB,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,KAAK,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AAEhF,aAAID,EAAQ,SACF,EAAC,QAAQA,EAAQ,CAAC,GAAG,OAAOY,EAAwBd,CAAK,IAAIA,EAAM,QAAQe,EAAA,IAE9ED,EAAwBd,CAAK,IAAIgB,IAA0BhB,KAASgB;AAAA,IAC7E,CAAC;AAED,aAASC,EAAgBjB,GAA2C;AAClE,MAAAP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAE,UAAUQ;AAAA,IACvD;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Scatter.vue.js","sources":["../../../../../../src/GraphMaker/forms/LayersForm/Layer/scatterplot-umap/Scatter.vue"],"sourcesContent":["<script lang=\"ts\" setup>\nimport { useStore } from '../../../../store';\nimport AesSelector from '../../AesSelector.vue';\nimport { computed, Ref } from 'vue';\nimport { DEFAULT_BLACK } from '../../../../constantsAesthetic';\nimport {\n  AestheticMappingCategorical,\n  DEFAULT_DOT_RANGE, DEFAULT_DOT_SIZE_CANVAS,\n  isAestheticMapping\n} from '../../../../dataBindAes';\nimport { AesOption } from '../../../../components/AesSettings/types';\nimport {\n  ContinuousDataMappingSize,\n  isContinuousDataMapping,\n  MappingLink\n} from '../../../../constantsCommon';\nimport { InputGuide, ScatterplotUIState } from '@milaboratories/pf-plots';\nimport DotSizeSelector from '../../DotSizeSelector.vue';\nimport { Annotation, readAnnotation } from '@platforma-sdk/model';\n\nconst store = useStore();\nconst layer = 'dots';\nconst state = store.value.reactive.optionsState as ScatterplotUIState;\nconst inputGuide = computed(\n  () => store.value.inputGuide.value\n) as unknown as Ref<InputGuide<ScatterplotUIState>>;\n\nconst settings = computed(() => store.value.reactive.layersSettings[layer]);\n\nfunction isMapping(value:MappingLink|string|null): value is MappingLink {\n  return value !== null && typeof value === 'object' && 'type' in value;\n}\nconst dotFill = computed(() => {\n  const value = settings.value.dotFill;\n  const columns = state.components.grouping.selectorStates.map((s) => s.selectedSource);\n  if (isMapping(value) && columns.length) {\n    return columns.includes(value.value as string) ? value : { type: 'grouping', value: columns[0] };\n  }\n  return columns.length ? { type: 'grouping', value: columns[0] } : isMapping(value) ? DEFAULT_BLACK : value ?? DEFAULT_BLACK\n});\n\nfunction onUpdate(\n  value: string | AestheticMappingCategorical,\n  colorOption: AesOption,\n  field: 'dotFill'\n) {\n  if (typeof value === 'string') {\n    store.value.reactive.layersSettings[layer][field] = value;\n  } else if (colorOption.type === 'dataCategorical' || colorOption.type === 'dataContinuous') {\n    store.value.reactive.layersSettings[layer][field] = {\n      type: 'grouping',\n      value: colorOption.selectedSource\n    };\n  }\n  if (isAestheticMapping(value) && colorOption.type !== 'fix') {\n    store.value.reactive.dataBindAes[colorOption.selectedSource] = value;\n  }\n}\n\nconst disabledColor = computed(() => {\n  if (state.components.grouping.selectorStates.length) {\n    const groupingSource = state.components.grouping.selectorStates[0].selectedSource;\n    const spec = inputGuide.value.getSourceInfo(groupingSource).spec;\n    if (readAnnotation(spec, Annotation.Graph.Palette)) {\n      return true;\n    }\n  }\n  return false;\n})\n\nconst dotSize = computed(() => {\n  const value = settings.value.dotSize;\n  const columns = state.components.size.selectorStates.map((s) => s.selectedSource);\n\n  if (columns.length) {\n    return  {column: columns[0], range: isContinuousDataMapping(value) ? value.range : DEFAULT_DOT_RANGE};\n  }\n  return isContinuousDataMapping(value) ? DEFAULT_DOT_SIZE_CANVAS : value ?? DEFAULT_DOT_SIZE_CANVAS;\n});\n\nfunction onUpdateDotSize(value: number | ContinuousDataMappingSize) {\n  store.value.reactive.layersSettings[layer].dotSize = value;\n}\n</script>\n\n<template>\n  <aes-selector\n    label=\"Dot color\"\n    form-title=\"Dot color Settings\"\n    form-back-title=\"Layers\"\n    type=\"fill\"\n    :selected=\"dotFill\"\n    :possible-aes-source-inputs=\"['grouping']\"\n    :disabled=\"disabledColor\"\n    :withoutFixed=\"typeof dotFill === 'object'\"\n    @aes-update=\"(v, c) => onUpdate(v, c, 'dotFill')\"\n  />\n  <dot-size-selector :selected=\"dotSize\" @aes-update=\"onUpdateDotSize\" :min=\"2\" />\n</template>\n"],"names":["layer","store","useStore","state","inputGuide","computed","settings","isMapping","value","dotFill","columns","s","DEFAULT_BLACK","onUpdate","colorOption","field","isAestheticMapping","disabledColor","groupingSource","spec","readAnnotation","Annotation","dotSize","isContinuousDataMapping","DEFAULT_DOT_RANGE","DEFAULT_DOT_SIZE_CANVAS","onUpdateDotSize"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAMA,IAAQ;;;AADd,UAAMC,IAAQC,EAAA,GAERC,IAAQF,EAAM,MAAM,SAAS,cAC7BG,IAAaC;AAAA,MACjB,MAAMJ,EAAM,MAAM,WAAW;AAAA,IAAA,GAGzBK,IAAWD,EAAS,MAAMJ,EAAM,MAAM,SAAS,eAAeD,CAAK,CAAC;AAE1E,aAASO,EAAUC,GAAqD;AACtE,aAAOA,MAAU,QAAQ,OAAOA,KAAU,YAAY,UAAUA;AAAA,IAClE;AACA,UAAMC,IAAUJ,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,SAAS,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AACpF,aAAIJ,EAAUC,CAAK,KAAKE,EAAQ,SACvBA,EAAQ,SAASF,EAAM,KAAe,IAAIA,IAAQ,EAAE,MAAM,YAAY,OAAOE,EAAQ,CAAC,EAAA,IAExFA,EAAQ,SAAS,EAAE,MAAM,YAAY,OAAOA,EAAQ,CAAC,EAAA,IAAMH,EAAUC,CAAK,IAAII,IAAgBJ,KAASI;AAAA,IAChH,CAAC;AAED,aAASC,EACPL,GACAM,GACAC,GACA;AACA,MAAI,OAAOP,KAAU,WACnBP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEe,CAAK,IAAIP,KAC3CM,EAAY,SAAS,qBAAqBA,EAAY,SAAS,sBACxEb,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAEe,CAAK,IAAI;AAAA,QAClD,MAAM;AAAA,QACN,OAAOD,EAAY;AAAA,MAAA,IAGnBE,EAAmBR,CAAK,KAAKM,EAAY,SAAS,UACpDb,EAAM,MAAM,SAAS,YAAYa,EAAY,cAAc,IAAIN;AAAA,IAEnE;AAEA,UAAMS,IAAgBZ,EAAS,MAAM;AACnC,UAAIF,EAAM,WAAW,SAAS,eAAe,QAAQ;AACnD,cAAMe,IAAiBf,EAAM,WAAW,SAAS,eAAe,CAAC,EAAE,gBAC7DgB,IAAOf,EAAW,MAAM,cAAcc,CAAc,EAAE;AAC5D,YAAIE,EAAeD,GAAME,EAAW,MAAM,OAAO;AAC/C,iBAAO;AAAA,MAEX;AACA,aAAO;AAAA,IACT,CAAC,GAEKC,IAAUjB,EAAS,MAAM;AAC7B,YAAMG,IAAQF,EAAS,MAAM,SACvBI,IAAUP,EAAM,WAAW,KAAK,eAAe,IAAI,CAACQ,MAAMA,EAAE,cAAc;AAEhF,aAAID,EAAQ,SACF,EAAC,QAAQA,EAAQ,CAAC,GAAG,OAAOa,EAAwBf,CAAK,IAAIA,EAAM,QAAQgB,EAAA,IAE9ED,EAAwBf,CAAK,IAAIiB,IAA0BjB,KAASiB;AAAA,IAC7E,CAAC;AAED,aAASC,EAAgBlB,GAA2C;AAClE,MAAAP,EAAM,MAAM,SAAS,eAAeD,CAAK,EAAE,UAAUQ;AAAA,IACvD;;;;;;;;;;;;;;;;;;;;;"}