Release 14.4.3 (#673)

## What's Changed * fix: `@use` lineupengine vars to allow overriding them by @puehringer in #671 * fix: add back `showLabelLimit` option to scatter visualization by @oltionchampari in #670 **Full Changelog**: v14.4.2...v14.4.3
datavisyn · Jan 9, 2025 · dcced5d · dcced5d
2 parents 21f22f9 + f2caf62
commit dcced5d
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 33 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "visyn_core",
   "description": "Core repository for datavisyn applications.",
-  "version": "14.4.2",
+  "version": "14.4.3",
   "author": {
     "name": "datavisyn GmbH",
     "email": "contact@datavisyn.io",

diff --git a/src/scss/vendors/_lineup.scss b/src/scss/vendors/_lineup.scss
@@ -1,8 +1,11 @@
+// With https://github.com/lineupjs/lineupengine/releases/tag/v2.5.3, they changed from @import to @use, forcing us to use the variables before being able to override them.
+@use 'lineupengine/src/styles/vars' as *;
+
 // TODO: Without this, we get "Can't resolve './node_modules/lineupengine/src/styles/lineupengine/src/assets/loading.svg' in '.../workspaces/<repo>'"
 // Why do I need to do this? Probably because lineupjs defines $engine_assets and it is resolving it relatively?
 $engine_assets: '../assets';
-$engine_loading_image: url('#{$engine_assets}/loading.svg') !default;
-$engine_loading_static_image: url('#{$engine_assets}/loading_s.svg') !default;
+$engine_loading_image: url('#{$engine_assets}/loading.svg');
+$engine_loading_static_image: url('#{$engine_assets}/loading_s.svg');
 
 $lu_assets: '../assets' !default;
 $lu_use_font_awesome: true !default;

diff --git a/src/vis/scatter/ScatterVis.tsx b/src/vis/scatter/ScatterVis.tsx
@@ -18,7 +18,7 @@ import { VIS_NEUTRAL_COLOR } from '../general/constants';
 import { EColumnTypes, ENumericalColorScaleType, EScatterSelectSettings, ICommonVisProps } from '../interfaces';
 import { BrushOptionButtons } from '../sidebar/BrushOptionButtons';
 import { fitRegressionLine } from './Regression';
-import { ERegressionLineType, IInternalScatterConfig, IRegressionResult } from './interfaces';
+import { ERegressionLineType, IRegressionResult, IScatterConfig } from './interfaces';
 import { useData } from './useData';
 import { useDataPreparation } from './useDataPreparation';
 import { useLayout } from './useLayout';
@@ -71,7 +71,7 @@ export function ScatterVis({
   scrollZoom,
   uniquePlotId,
   showDownloadScreenshot,
-}: ICommonVisProps<IInternalScatterConfig>) {
+}: ICommonVisProps<IScatterConfig>) {
   const id = React.useMemo(() => uniquePlotId || uniqueId('ScatterVis'), [uniquePlotId]);
 
   const [shiftPressed, setShiftPressed] = React.useState(false);

diff --git a/src/vis/scatter/ScatterVisSidebar.tsx b/src/vis/scatter/ScatterVisSidebar.tsx
@@ -10,7 +10,7 @@ import { ColorSelect } from './ColorSelect';
 import { LabelingOptions } from './LabelingOptions';
 import { OpacitySlider } from './OpacitySlider';
 import { RegressionLineOptions } from './Regression';
-import { ELabelingOptions, IInternalScatterConfig, IRegressionLineOptions } from './interfaces';
+import { ELabelingOptions, IRegressionLineOptions, IScatterConfig } from './interfaces';
 
 const defaultConfig = {
   facets: {
@@ -40,7 +40,7 @@ const defaultConfig = {
   },
 };
 
-export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallback, setConfig, selectedList }: ICommonVisSideBarProps<IInternalScatterConfig>) {
+export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallback, setConfig, selectedList }: ICommonVisSideBarProps<IScatterConfig>) {
   const mergedOptionsConfig = useMemo(() => {
     return merge({}, defaultConfig, optionsConfig);
   }, [optionsConfig]);
@@ -113,7 +113,7 @@ export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallba
                 }
               }}
               currentSelected={config.showLabels}
-              labelLimit={config.selectedPointsCount > config.showLabelLimit ? config.showLabelLimit : 0}
+              labelLimit={selectedList?.length && config.showLabelLimit && selectedList?.length > config.showLabelLimit ? config.showLabelLimit : 0}
             />
           )
         : null}

diff --git a/src/vis/scatter/interfaces.ts b/src/vis/scatter/interfaces.ts
@@ -30,16 +30,6 @@ export interface IScatterConfig extends BaseVisConfig {
   yAxisScale?: 'linear' | 'log';
 }
 
-/**
- * @internal
- */
-export interface IInternalScatterConfig extends IScatterConfig {
-  /**
-   * Internal property used to show a message if show labels mode is `Selected`
-   */
-  selectedPointsCount?: number;
-}
-
 export function isScatterConfig(s: BaseVisConfig): s is IScatterConfig {
   return s.type === ESupportedPlotlyVis.SCATTER;
 }

diff --git a/src/vis/scatter/useData.tsx b/src/vis/scatter/useData.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import isEmpty from 'lodash/isEmpty';
 import { PlotlyTypes } from '../../plotly';
 import { DEFAULT_COLOR, VIS_NEUTRAL_COLOR } from '../general/constants';
-import { ELabelingOptions, IInternalScatterConfig } from './interfaces';
+import { ELabelingOptions, IScatterConfig } from './interfaces';
 import { FetchColumnDataResult } from './utils';
 import { getLabelOrUnknown } from '../general/utils';
 import { columnNameWithDescription, truncateText } from '../general/layoutUtils';
@@ -54,20 +54,24 @@ export function useData({
   status: string;
   value: FetchColumnDataResult | undefined;
   scatter?: ReturnType<typeof useDataPreparation>['scatter'];
-  config: IInternalScatterConfig;
+  config: IScatterConfig;
   facet?: ReturnType<typeof useDataPreparation>['facet'];
   splom?: ReturnType<typeof useDataPreparation>['splom'];
   subplots?: ReturnType<typeof useDataPreparation>['subplots'];
   selectedList: string[];
   shapeScale: (val: string) => string;
   mappingFunction?: (val: string | number | null | undefined) => string;
 }) {
+  const selectedSet = React.useMemo(() => new Set(selectedList), [selectedList]);
+
   return React.useMemo<PlotlyTypes.Data[]>(() => {
     if (status !== 'success' || !value) {
       return [];
     }
-    const fullOpacityOrAlpha = selectedList.length > 0 ? 1 : config.alphaSliderVal;
+    const fullOpacityOrAlpha = selectedSet.size > 0 ? 1 : config.alphaSliderVal;
+
     if (subplots) {
+      const visibleLabelsSet = config.showLabelLimit ? new Set(selectedList.slice(0, config.showLabelLimit)) : selectedSet;
       const plots = subplots.xyPairs.map((pair) => {
         return {
           ...BASE_DATA,
@@ -77,7 +81,7 @@ export function useData({
           xaxis: pair.xref,
           yaxis: pair.yref,
           textposition: subplots.text.map((_, i) => textPositionOptions[i % textPositionOptions.length]),
-          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => subplots.idToIndex.get(idx)) }),
+          ...(isEmpty(selectedSet) ? {} : { selectedpoints: selectedList.map((idx) => subplots.idToIndex.get(idx)) }),
           mode: config.showLabels === ELabelingOptions.NEVER || config.xAxisScale === 'log' || config.yAxisScale === 'log' ? 'markers' : 'text+markers',
           ...(config.showLabels === ELabelingOptions.NEVER
             ? {}
@@ -86,7 +90,7 @@ export function useData({
                   text: subplots.text.map((t) => truncateText(value.idToLabelMapper(t), true, 10)),
                 }
               : {
-                  text: subplots.text.map((t, i) => (selectedList.includes(subplots.ids[i] ?? '') ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
+                  text: subplots.text.map((t, i) => (visibleLabelsSet.has(subplots.ids[i]!) ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
                 }),
           hovertext: subplots.ids.map((p_id, index) =>
             `${value.idToLabelMapper(p_id)}
@@ -108,6 +112,7 @@ export function useData({
     }
 
     if (scatter && config && value && value.validColumns[0]) {
+      const visibleLabelsSet = config.showLabelLimit ? new Set(selectedList.slice(0, config.showLabelLimit)) : selectedSet;
       const traces = [
         {
           ...BASE_DATA,
@@ -116,7 +121,7 @@ export function useData({
           y: scatter.plotlyData.y,
           // text: scatter.plotlyData.text,
           textposition: scatter.plotlyData.text.map((_, i) => textPositionOptions[i % textPositionOptions.length]),
-          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => scatter.idToIndex.get(idx)) }),
+          ...(isEmpty(selectedSet) ? {} : { selectedpoints: selectedList.map((idx) => scatter.idToIndex.get(idx)) }),
           mode: config.showLabels === ELabelingOptions.NEVER || config.xAxisScale === 'log' || config.yAxisScale === 'log' ? 'markers' : 'text+markers',
           ...(config.showLabels === ELabelingOptions.NEVER
             ? {}
@@ -126,9 +131,7 @@ export function useData({
                   // textposition: 'top center',
                 }
               : {
-                  text: scatter.plotlyData.text.map((t, i) =>
-                    selectedList.includes(scatter.ids[i] ?? '') ? truncateText(value.idToLabelMapper(t), true, 10) : '',
-                  ),
+                  text: scatter.plotlyData.text.map((t, i) => (visibleLabelsSet.has(scatter.ids[i]!) ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
                   // textposition: 'top center',
                 }),
           hovertext: value.validColumns[0].resolvedValues.map((v, i) =>
@@ -155,6 +158,9 @@ export function useData({
 
     if (facet && config && value && value.validColumns[0] && value.validColumns[1]) {
       const plots = facet.resultData.map((group) => {
+        const visibleLabelsSet = config.showLabelLimit
+          ? new Set(group.data.ids.filter((id) => selectedSet.has(id)).slice(0, config.showLabelLimit))
+          : selectedSet;
         return {
           ...BASE_DATA,
           type: 'scattergl',
@@ -172,11 +178,11 @@ export function useData({
                   // textposition: 'top center',
                 }
               : {
-                  text: group.data.text.map((t, i) => (selectedList.includes(group.data.ids[i]!) ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
+                  text: group.data.text.map((t, i) => (visibleLabelsSet.has(group.data.ids[i]!) ? truncateText(value.idToLabelMapper(t), true, 10) : '')),
                   // textposition: 'top center',
                 }),
           name: getLabelOrUnknown(group.data.facet),
-          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => group.idToIndex.get(idx)).filter((v) => v !== undefined) }),
+          ...(isEmpty(selectedSet) ? {} : { selectedpoints: selectedList.map((idx) => group.idToIndex.get(idx)).filter((v) => v !== undefined) }),
           hovertext: group.data.ids.map((p_id, index) =>
             `${value.idToLabelMapper(p_id)}
             ${(value.resolvedLabelColumnsWithMappedValues ?? []).map((l) => `<br />${columnNameWithDescription(l.info)}: ${getLabelOrUnknown(l.mappedValues.get(p_id))}`)}
@@ -214,7 +220,7 @@ export function useData({
   ${value.colorColumn ? `<br />${columnNameWithDescription(value.colorColumn.info)}: ${getLabelOrUnknown(value.colorColumn.resolvedValues[i]?.val)}` : ''}
   ${value.shapeColumn && value.shapeColumn.info.id !== value.colorColumn?.info.id ? `<br />${columnNameWithDescription(value.shapeColumn.info)}: ${getLabelOrUnknown(value.shapeColumn.resolvedValues[i]?.val)}` : ''}`.trim(),
           ),
-          ...(isEmpty(selectedList) ? {} : { selectedpoints: selectedList.map((idx) => splom.idToIndex.get(idx)) }),
+          ...(isEmpty(selectedSet) ? {} : { selectedpoints: selectedList.map((idx) => splom.idToIndex.get(idx)) }),
           marker: {
             size: 8,
             color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR,
@@ -229,5 +235,5 @@ export function useData({
     }
 
     return [];
-  }, [status, value, subplots, scatter, config, facet, splom, selectedList, shapeScale, mappingFunction]);
+  }, [status, value, subplots, scatter, config, facet, splom, selectedList, selectedSet, shapeScale, mappingFunction]);
 }
diff --git a/src/vis/scatter/useLayout.tsx b/src/vis/scatter/useLayout.tsx
@@ -5,8 +5,8 @@ import { PlotlyTypes } from '../../plotly';
 import { VIS_NEUTRAL_COLOR, VIS_TRACES_COLOR } from '../general/constants';
 import { FastTextMeasure } from '../general/FastTextMeasure';
 import { getLabelOrUnknown } from '../general/utils';
-import { IInternalScatterConfig } from './interfaces';
 import { useDataPreparation } from './useDataPreparation';
+import { IScatterConfig } from './interfaces';
 
 const textMeasure = new FastTextMeasure('12px Open Sans');
 
@@ -87,7 +87,7 @@ export function useLayout({
   splom?: ReturnType<typeof useDataPreparation>['splom'];
   subplots?: ReturnType<typeof useDataPreparation>['subplots'];
   regressions: { shapes: Partial<PlotlyTypes.Shape>[]; annotations: Partial<PlotlyTypes.Annotations>[] };
-  config: IInternalScatterConfig;
+  config: IScatterConfig;
   width: number;
   height: number;
   internalLayoutRef: React.MutableRefObject<Partial<PlotlyTypes.Layout>>;