From 4a4653728fcf9c0c41df38bec94e80c3ef70adf0 Mon Sep 17 00:00:00 2001 From: Champari Oltion <51322092+oltionchampari@users.noreply.github.com> Date: Wed, 18 Dec 2024 13:29:44 +0100 Subject: [PATCH] fix: scatter plot tweaks (#664) * fix: set full opacity on selected colored points * fix: disable opacity slider --- src/vis/EagerVis.tsx | 16 +++++++++++----- src/vis/VisSidebar.tsx | 2 ++ src/vis/interfaces.ts | 1 + src/vis/scatter/OpacitySlider.tsx | 4 +++- src/vis/scatter/ScatterVisSidebar.tsx | 4 +++- src/vis/scatter/useData.tsx | 22 ++++++++++++---------- 6 files changed, 32 insertions(+), 17 deletions(-) diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx index dded63b7c..5021a36cb 100644 --- a/src/vis/EagerVis.tsx +++ b/src/vis/EagerVis.tsx @@ -195,6 +195,12 @@ export function EagerVis({ */ showDownloadScreenshot?: boolean; }) { + const [selectedList, setSelectedList] = useUncontrolled({ + value: selected, + defaultValue: [], + onChange: selectionCallback, + }); + const [showSidebar, setShowSidebar] = useUncontrolled({ value: internalShowSidebar, defaultValue: showSidebarDefault, @@ -269,12 +275,12 @@ export function EagerVis({ const selectedMap: { [key: string]: boolean } = React.useMemo(() => { const currMap: { [key: string]: boolean } = {}; - selected.forEach((s) => { + selectedList.forEach((s) => { currMap[s] = true; }); return currMap; - }, [selected]); + }, [selectedList]); const commonProps = { showSidebar, @@ -333,9 +339,9 @@ export function EagerVis({ stats={stats} statsCallback={statsCallback} filterCallback={filterCallback} - selectionCallback={selectionCallback} + selectionCallback={setSelectedList} selectedMap={selectedMap} - selectedList={selected} + selectedList={selectedList} columns={columns} showSidebar={showSidebar} showCloseButton={showCloseButton} @@ -348,7 +354,7 @@ export function EagerVis({ {showSidebar && visConfig?.merged ? ( setShowSidebar(false)}> - + ) : null} diff --git a/src/vis/VisSidebar.tsx b/src/vis/VisSidebar.tsx index f1d9fdfcd..3e1955383 100644 --- a/src/vis/VisSidebar.tsx +++ b/src/vis/VisSidebar.tsx @@ -8,6 +8,7 @@ export function VisSidebar({ optionsConfig, config = null, setConfig = null, + selectedList, className, style, }: ICommonVisSideBarProps) { @@ -27,6 +28,7 @@ export function VisSidebar({ filterCallback={filterCallback} columns={columns} className={className} + selectedList={selectedList} style={style} /> ) : null; diff --git a/src/vis/interfaces.ts b/src/vis/interfaces.ts index 766798bb1..4ff1a78e4 100644 --- a/src/vis/interfaces.ts +++ b/src/vis/interfaces.ts @@ -144,6 +144,7 @@ export interface ICommonVisSideBarProps { style?: React.CSSProperties | undefined; className?: string | undefined; columns: VisColumn[]; + selectedList?: string[]; optionsConfig?: any; filterCallback?: (s: EFilterOptions) => void; config: T; diff --git a/src/vis/scatter/OpacitySlider.tsx b/src/vis/scatter/OpacitySlider.tsx index bc56a802d..2dea5cc2a 100644 --- a/src/vis/scatter/OpacitySlider.tsx +++ b/src/vis/scatter/OpacitySlider.tsx @@ -8,9 +8,10 @@ import { useSyncedRef } from '../../hooks'; interface OpacitySliderProps { callback: (n: number) => void; currentValue: number; + disabled?: boolean; } -export function OpacitySlider({ callback, currentValue }: OpacitySliderProps) { +export function OpacitySlider({ callback, currentValue, disabled }: OpacitySliderProps) { const syncedCallback = useSyncedRef(callback); const debouncedCallback = useMemo(() => { @@ -20,6 +21,7 @@ export function OpacitySlider({ callback, currentValue }: OpacitySliderProps) { return ( ) { +export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallback, setConfig, selectedList }: ICommonVisSideBarProps) { const mergedOptionsConfig = useMemo(() => { return merge({}, defaultConfig, optionsConfig); }, [optionsConfig]); + const disableOpacitySlider = React.useMemo(() => selectedList && selectedList.length > 0, [selectedList]); return ( <> { if (config.alphaSliderVal !== e) { setConfig({ ...config, alphaSliderVal: e }); diff --git a/src/vis/scatter/useData.tsx b/src/vis/scatter/useData.tsx index ab73491ef..3c8c9dfc5 100644 --- a/src/vis/scatter/useData.tsx +++ b/src/vis/scatter/useData.tsx @@ -1,9 +1,7 @@ import * as React from 'react'; import isEmpty from 'lodash/isEmpty'; -import d3v7 from 'd3v7'; import { PlotlyTypes } from '../../plotly'; -import { VIS_NEUTRAL_COLOR } from '../general/constants'; -import { EColumnTypes } from '../interfaces'; +import { DEFAULT_COLOR, VIS_NEUTRAL_COLOR } from '../general/constants'; import { ELabelingOptions, IInternalScatterConfig } from './interfaces'; import { FetchColumnDataResult } from './utils'; import { getLabelOrUnknown } from '../general/utils'; @@ -15,7 +13,7 @@ export function baseData(alpha: number, hasColor: boolean): Partial 0 ? 1 : config.alphaSliderVal; if (subplots) { const plots = subplots.xyPairs.map((pair) => { return { @@ -99,7 +97,8 @@ export function useData({ marker: { color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR, symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle', - opacity: config.alphaSliderVal, + opacity: fullOpacityOrAlpha, + size: 8, }, ...baseData(config.alphaSliderVal, !!value.colorColumn), } as PlotlyTypes.Data; @@ -142,9 +141,10 @@ export function useData({ textfont: { color: VIS_NEUTRAL_COLOR, }, + size: 8, color: value.colorColumn && mappingFunction ? value.colorColumn.resolvedValues.map((v) => mappingFunction(v.val)) : VIS_NEUTRAL_COLOR, symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle', - opacity: config.alphaSliderVal, + opacity: fullOpacityOrAlpha, }, ...baseData(config.alphaSliderVal, !!value.colorColumn), } as PlotlyTypes.Data, @@ -186,7 +186,8 @@ export function useData({ marker: { color: value.colorColumn && mappingFunction ? group.data.color.map((v) => mappingFunction(v!)) : VIS_NEUTRAL_COLOR, symbol: value.shapeColumn ? group.data.shape.map((shape) => shapeScale(shape as string)) : 'circle', - opacity: config.alphaSliderVal, + opacity: fullOpacityOrAlpha, + size: 8, }, ...baseData(config.alphaSliderVal, !!value.colorColumn), } as PlotlyTypes.Data; @@ -215,9 +216,10 @@ export function useData({ ), ...(isEmpty(selectedList) ? {} : { 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, symbol: value.shapeColumn ? value.shapeColumn.resolvedValues.map((v) => shapeScale(v.val as string)) : 'circle', - opacity: config.alphaSliderVal, + opacity: fullOpacityOrAlpha, }, ...baseData(config.alphaSliderVal, !!value.colorColumn), } as PlotlyTypes.Data,