Merge branch 'develop' into ua/xaira-48-focus-facet-in-protein-abunda…

…nce-view-broken
datavisyn · Dec 19, 2024 · d951ce1 · d951ce1
2 parents efc1744 + 4a46537
commit d951ce1
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 17 deletions.
diff --git a/src/vis/EagerVis.tsx b/src/vis/EagerVis.tsx
@@ -195,6 +195,12 @@ export function EagerVis({
    */
   showDownloadScreenshot?: boolean;
 }) {
+  const [selectedList, setSelectedList] = useUncontrolled<string[]>({
+    value: selected,
+    defaultValue: [],
+    onChange: selectionCallback,
+  });
+
   const [showSidebar, setShowSidebar] = useUncontrolled<boolean>({
     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({
       </Stack>
       {showSidebar && visConfig?.merged ? (
         <VisSidebarWrapper config={visConfig} setConfig={setVisConfig} onClick={() => setShowSidebar(false)}>
-          <VisSidebar config={visConfig} columns={columns} filterCallback={filterCallback} setConfig={setVisConfig} />
+          <VisSidebar config={visConfig} columns={columns} filterCallback={filterCallback} setConfig={setVisConfig} selectedList={selectedList} />
         </VisSidebarWrapper>
       ) : null}
     </Group>

diff --git 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<typeof config>) {
@@ -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
@@ -144,6 +144,7 @@ export interface ICommonVisSideBarProps<T> {
   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
@@ -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 (
     <Input.Wrapper label="Opacity" mb="md">
       <Slider
+        disabled={disabled}
         data-testid="OpacitySlider"
         step={0.05}
         value={+currentValue.toFixed(2)}

diff --git a/src/vis/scatter/ScatterVisSidebar.tsx b/src/vis/scatter/ScatterVisSidebar.tsx
@@ -40,11 +40,12 @@ const defaultConfig = {
   },
 };
 
-export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallback, setConfig }: ICommonVisSideBarProps<IInternalScatterConfig>) {
+export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallback, setConfig, selectedList }: ICommonVisSideBarProps<IInternalScatterConfig>) {
   const mergedOptionsConfig = useMemo(() => {
     return merge({}, defaultConfig, optionsConfig);
   }, [optionsConfig]);
 
+  const disableOpacitySlider = React.useMemo(() => selectedList && selectedList.length > 0, [selectedList]);
   return (
     <>
       <MultiSelect
@@ -95,6 +96,7 @@ export function ScatterVisSidebar({ config, optionsConfig, columns, filterCallba
         label="Tooltip labels"
       />
       <OpacitySlider
+        disabled={disableOpacitySlider}
         callback={(e) => {
           if (config.alphaSliderVal !== e) {
             setConfig({ ...config, alphaSliderVal: e });

diff --git 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<PlotlyTypes.
   return {
     selected: {
       textfont: {
-        color: VIS_NEUTRAL_COLOR,
+        color: DEFAULT_COLOR,
       },
       marker: {
         opacity: 1,
@@ -28,7 +26,7 @@ export function baseData(alpha: number, hasColor: boolean): Partial<PlotlyTypes.
       },
       marker: {
         color: VIS_NEUTRAL_COLOR,
-        opacity: Math.min(alpha, 0.2),
+        opacity: Math.min(alpha, 0.15),
       },
     },
   };
@@ -68,7 +66,7 @@ export function useData({
     if (status !== 'success' || !value) {
       return [];
     }
-
+    const fullOpacityOrAlpha = selectedList.length > 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,