Merge remote-tracking branch 'origin/main' into 616-fix-flashing-popups

VEuPathDB · Nov 10, 2023 · 4e259fa · 4e259fa
2 parents d2b3ad0 + 139dc2e
commit 4e259fa
Show file tree

Hide file tree

Showing 26 changed files with 306 additions and 593 deletions.
diff --git a/.gitignore b/.gitignore
@@ -110,6 +110,9 @@ dist
 # VSCode config files
 .vscode
 
+# IntelliJ config files
+.idea
+
 .editorconfig
 
 .pnp.*

diff --git a/packages/libs/components/src/components/plotControls/PlotBubbleLegend.tsx b/packages/libs/components/src/components/plotControls/PlotBubbleLegend.tsx
@@ -8,13 +8,6 @@ export interface PlotLegendBubbleProps {
   valueToDiameterMapper: ((value: number) => number) | undefined;
 }
 
-// legend ellipsis function for legend title and legend items (from custom legend work)
-// const legendEllipsis = (label: string, ellipsisLength: number) => {
-//   return (label || '').length > ellipsisLength
-//     ? (label || '').substring(0, ellipsisLength) + '...'
-//     : label;
-// };
-
 export default function PlotBubbleLegend({
   legendMax,
   valueToDiameterMapper,

diff --git a/packages/libs/components/src/components/plotControls/PlotGradientLegend.tsx b/packages/libs/components/src/components/plotControls/PlotGradientLegend.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { range } from 'd3';
+import { truncateWithEllipsis } from '../../utils/axis-tick-label-ellipsis';
 
 // set props for custom legend function
 export interface PlotLegendGradientProps {
@@ -10,13 +10,6 @@ export interface PlotLegendGradientProps {
   showMissingness?: boolean;
 }
 
-// legend ellipsis function for legend title and legend items (from custom legend work)
-const legendEllipsis = (label: string, ellipsisLength: number) => {
-  return (label || '').length > ellipsisLength
-    ? (label || '').substring(0, ellipsisLength) + '...'
-    : label;
-};
-
 // make gradient colorscale legend into a component so it can be more easily incorporated into DK's custom legend if we need
 export default function PlotGradientLegend({
   legendMax,
@@ -119,15 +112,15 @@ export default function PlotGradientLegend({
           <label
             title={'No data'}
             style={{
-              cursor: 'pointer',
+              cursor: 'default',
               display: 'flex',
               alignItems: 'center',
               fontSize: legendTextSize,
               color: '#999',
               margin: 0,
             }}
           >
-            <i>{legendEllipsis('No data', 20)}</i>
+            <i>{truncateWithEllipsis('No data', 20)}</i>
           </label>
         </div>
       )}

diff --git a/packages/libs/components/src/components/plotControls/PlotLegend.tsx b/packages/libs/components/src/components/plotControls/PlotLegend.tsx
@@ -44,14 +44,15 @@ export default function PlotLegend({
             width: 400,
             overflowX: 'hidden',
             overflowY: 'auto',
+            cursor: 'default',
             ...containerStyles,
           }}
         >
           <div
             title={legendTitle}
             // style={{ cursor: 'pointer', fontSize: legendTextSize, fontWeight: 'bold', margin: '0 0 0 0.15em' }}
             style={{
-              cursor: 'pointer',
+              cursor: 'default',
               fontSize: legendTextSize,
               fontWeight: 'bold',
               marginLeft: '0.15em',

diff --git a/packages/libs/components/src/components/plotControls/PlotListLegend.tsx b/packages/libs/components/src/components/plotControls/PlotListLegend.tsx
@@ -94,7 +94,9 @@ export default function PlotListLegend({
                     key={item.label}
                     title={item.label}
                     style={{
-                      cursor: 'pointer',
+                      // only those items with checkboxes that actually have data should look clickable
+                      cursor:
+                        showCheckbox && item.hasData ? 'pointer' : 'default',
                       display: 'flex',
                       alignItems: 'center',
                       fontSize: legendTextSize,

diff --git a/packages/libs/components/src/plots/VolcanoPlot.tsx b/packages/libs/components/src/plots/VolcanoPlot.tsx
@@ -40,6 +40,7 @@ import { ToImgopts } from 'plotly.js';
 import { DEFAULT_CONTAINER_HEIGHT } from './PlotlyPlot';
 import domToImage from 'dom-to-image';
 import './VolcanoPlot.css';
+import { truncateWithEllipsis } from '../utils/axis-tick-label-ellipsis';
 
 export interface RawDataMinMaxValues {
   x: NumberRange;
@@ -293,9 +294,9 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
           findNearestDatumOverride={findNearestDatumXY}
           margin={{
             top: MARGIN_DEFAULT,
-            right: showFlooredDataAnnotation ? 150 : MARGIN_DEFAULT,
-            left: MARGIN_DEFAULT,
-            bottom: MARGIN_DEFAULT,
+            right: showFlooredDataAnnotation ? 150 : MARGIN_DEFAULT + 10,
+            left: MARGIN_DEFAULT + 10, // Bottom annotatiions get wide (for right margin, too)
+            bottom: MARGIN_DEFAULT + 20, // Bottom annotations can get long
           }}
         >
           {/* Set up the axes and grid lines. XYChart magically lays them out correctly */}
@@ -317,11 +318,12 @@ function VolcanoPlot(props: VolcanoPlotProps, ref: Ref<HTMLDivElement>) {
                   {...xyAccessors}
                 >
                   <AnnotationLabel
-                    subtitle={label}
+                    subtitle={truncateWithEllipsis(label, 30)}
                     horizontalAnchor="middle"
                     verticalAnchor="start"
                     showAnchorLine={false}
                     showBackground={false}
+                    maxWidth={100}
                   />
                 </Annotation>
               );

diff --git a/packages/libs/components/src/stories/plots/VolcanoPlot.stories.tsx b/packages/libs/components/src/stories/plots/VolcanoPlot.stories.tsx
@@ -10,6 +10,7 @@ import { NumberRange } from '../../types/general';
 import { yellow } from '@veupathdb/coreui/lib/definitions/colors';
 import { assignSignificanceColor } from '../../plots/VolcanoPlot';
 import { significanceColors } from '../../types/plots';
+import { CSSProperties } from 'react';
 
 export default {
   title: 'Plots/VolcanoPlot',
@@ -126,6 +127,7 @@ interface TemplateProps {
   comparisonLabels?: string[];
   truncationBarFill?: string;
   showSpinner?: boolean;
+  containerStyles?: CSSProperties;
   statisticsFloors?: StatisticsFloors;
 }
 
@@ -158,36 +160,41 @@ const Template: Story<TemplateProps> = (args) => {
         })) ?? [],
   };
 
-  const rawDataMinMaxValues = {
-    x: {
-      min:
-        (volcanoDataPoints &&
-          Math.min(
-            ...volcanoDataPoints.statistics.map((d) => Number(d.effectSize))
-          )) ??
-        0,
-      max:
-        (volcanoDataPoints &&
-          Math.max(
-            ...volcanoDataPoints.statistics.map((d) => Number(d.effectSize))
-          )) ??
-        0,
-    },
-    y: {
-      min:
-        (volcanoDataPoints &&
-          Math.min(
-            ...volcanoDataPoints.statistics.map((d) => Number(d.pValue))
-          )) ??
-        1,
-      max:
-        (volcanoDataPoints &&
-          Math.max(
-            ...volcanoDataPoints.statistics.map((d) => Number(d.pValue))
-          )) ??
-        1,
-    },
-  };
+  const rawDataMinMaxValues = args.data
+    ? {
+        x: {
+          min:
+            (volcanoDataPoints &&
+              Math.min(
+                ...volcanoDataPoints.statistics.map((d) => Number(d.effectSize))
+              )) ??
+            0,
+          max:
+            (volcanoDataPoints &&
+              Math.max(
+                ...volcanoDataPoints.statistics.map((d) => Number(d.effectSize))
+              )) ??
+            0,
+        },
+        y: {
+          min:
+            (volcanoDataPoints &&
+              Math.min(
+                ...volcanoDataPoints.statistics.map((d) => Number(d.pValue))
+              )) ??
+            1,
+          max:
+            (volcanoDataPoints &&
+              Math.max(
+                ...volcanoDataPoints.statistics.map((d) => Number(d.pValue))
+              )) ??
+            1,
+        },
+      }
+    : {
+        x: { min: 0, max: 0 },
+        y: { min: 1, max: 1 },
+      };
 
   const volcanoPlotProps: VolcanoPlotProps = {
     data: volcanoDataPoints,
@@ -199,6 +206,7 @@ const Template: Story<TemplateProps> = (args) => {
     dependentAxisRange: args.dependentAxisRange,
     truncationBarFill: args.truncationBarFill,
     showSpinner: args.showSpinner,
+    containerStyles: args.containerStyles,
     rawDataMinMaxValues,
     statisticsFloors: args.statisticsFloors,
   };
@@ -279,6 +287,29 @@ Empty.args = {
   dependentAxisRange: { min: -1, max: 9 },
 };
 
+// With visualization plot container styles
+const plotContainerStyles = {
+  width: 750,
+  height: 450,
+  marginLeft: '0.75rem',
+  border: '1px solid #dedede',
+  boxShadow: '1px 1px 4px #00000066',
+};
+export const WithStyle = Template.bind({});
+WithStyle.args = {
+  data: dataSetVolcano,
+  markerBodyOpacity: 0.8,
+  effectSizeThreshold: 1,
+  significanceThreshold: 0.01,
+  comparisonLabels: [
+    'Up in group a, b, c, d, e, f, g, and h',
+    'Up in group i, j, k, l, m, n, o, pqrs',
+  ],
+  independentAxisRange: { min: -9, max: 9 },
+  dependentAxisRange: { min: 0, max: 9 },
+  containerStyles: plotContainerStyles,
+};
+
 // With a pvalue floor
 const testStatisticsFloors: StatisticsFloors = {
   pValueFloor: 0.006,

diff --git a/packages/libs/components/src/utils/axis-tick-label-ellipsis.ts b/packages/libs/components/src/utils/axis-tick-label-ellipsis.ts
@@ -1,16 +1,20 @@
 /**
- * A util functions for handling long tick labels
+ * Util functions for handling long tick labels
  */
 
+export const truncateWithEllipsis = (label: string, maxLabelLength: number) => {
+  return (label || '').length > maxLabelLength
+    ? (label || '').substring(0, maxLabelLength - 2) + '...'
+    : label;
+};
+
 export const axisTickLableEllipsis = (
   categoryOrder: string[],
   maxIndependentTickLabelLength: number
 ) => {
   // make array for tick label with ellipsis
   const categoryOrderEllipsis = categoryOrder.map((element) => {
-    return (element || '').length > maxIndependentTickLabelLength
-      ? (element || '').substring(0, maxIndependentTickLabelLength - 2) + '...'
-      : element;
+    return truncateWithEllipsis(element, maxIndependentTickLabelLength);
   });
 
   // identify duplicate element and duplicate indices in the array

diff --git a/...s/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx b/...s/eda/src/lib/core/components/visualizations/implementations/VolcanoPlotVisualization.tsx
@@ -420,11 +420,11 @@ function VolcanoPlotViz(props: VisualizationProps<Options>) {
           'Up in ' +
             computationConfiguration.comparator.groupA
               .map((entry) => entry.label)
-              .join(','),
+              .join(', '),
           'Up in ' +
             computationConfiguration.comparator.groupB
               .map((entry) => entry.label)
-              .join(','),
+              .join(', '),
         ]
       : [];
 
@@ -710,17 +710,17 @@ function VolcanoPlotViz(props: VisualizationProps<Options>) {
           markerColor: significanceColors['inconclusive'],
         },
         {
-          label: `Up regulated in ${computationConfiguration.comparator.groupB
+          label: `Up in ${computationConfiguration.comparator.groupB
             ?.map((entry) => entry.label)
-            .join(',')} (${countsData[significanceColors['high']]})`,
+            .join(', ')} (${countsData[significanceColors['high']]})`,
           marker: 'circle',
           hasData: true,
           markerColor: significanceColors['high'],
         },
         {
-          label: `Up regulated in ${computationConfiguration.comparator.groupA
+          label: `Up in ${computationConfiguration.comparator.groupA
             ?.map((entry) => entry.label)
-            .join(',')} (${countsData[significanceColors['low']]})`,
+            .join(', ')} (${countsData[significanceColors['low']]})`,
           marker: 'circle',
           hasData: true,
           markerColor: significanceColors['low'],
-Original file line number
+Diff line change
@@ Expand Up / @@ -110,6 +110,9 @@ dist @@
     # VSCode config files
     .vscode
+    # IntelliJ config files
+    .idea
     .editorconfig
     .pnp.*
@@ Expand Down @@