feat(vis-violin): violin vis subcategories and proper facets

src/demo/MainApp.tsx

@@ -13,31 +13,16 @@ import {
   IScatterConfig,
   Vis,
 } from '../vis';
-import { fetchIrisData } from '../vis/stories/fetchIrisData';
-import { iris } from '../vis/stories/irisData';
+import { breastCancerData } from '../vis/stories/breastCancerData';
+import { fetchBreastCancerData } from '../vis/stories/fetchBreastCancerData';
 import { MyCategoricalScore, MyLinkScore, MyNumberScore, MySMILESScore, MyStringScore } from './scoresUtils';
 
 export function MainApp() {
   const { user } = useVisynAppContext();
   const [visConfig, setVisConfig] = React.useState<BaseVisConfig>({
     type: ESupportedPlotlyVis.SCATTER,
-    numColumnsSelected: [
-      {
-        description: '',
-        id: 'sepalLength',
-        name: 'Sepal Length',
-      },
-      {
-        description: '',
-        id: 'sepalWidth',
-        name: 'Sepal Width',
-      },
-    ],
-    color: {
-      description: '',
-      id: 'species',
-      name: 'Species',
-    },
+    numColumnsSelected: [],
+    color: null,
     numColorScaleType: ENumericalColorScaleType.SEQUENTIAL,
     shape: null,
     dragMode: EScatterSelectSettings.RECTANGLE,
@@ -49,10 +34,10 @@ export function MainApp() {
       showStats: true,
     },
   } as IScatterConfig);
-  const columns = React.useMemo(() => (user ? fetchIrisData() : []), [user]);
-  const [selection, setSelection] = React.useState<typeof iris>([]);
+  const columns = React.useMemo(() => (user ? fetchBreastCancerData() : []), [user]);
+  const [selection, setSelection] = React.useState<typeof breastCancerData>([]);
 
-  const visSelection = React.useMemo(() => selection.map((s) => `${iris.indexOf(s)}`), [selection]);
+  const visSelection = React.useMemo(() => selection.map((s) => `${breastCancerData.indexOf(s)}`), [selection]);
   const [loading, setLoading] = React.useState(false);
   const lineupRef = React.useRef<DatavisynTaggle>();
 
@@ -111,7 +96,7 @@ export function MainApp() {
             />
 
             <VisynRanking
-              data={iris}
+              data={breastCancerData}
               selection={selection}
               setSelection={setSelection}
               getBuilder={({ data }) => defaultBuilder({ data, smilesOptions: { setDynamicHeight: true } })}
@@ -130,7 +115,7 @@ export function MainApp() {
             selected={visSelection}
             selectionCallback={(s) => {
               if (s) {
-                setSelection(s.map((i) => iris[+i]));
+                setSelection(s.map((i) => breastCancerData[+i]));
               }
             }}
             filterCallback={(f) => {

src/vis/general/SortIcon.tsx

@@ -1,9 +1,10 @@
-import * as React from 'react';
-import { Tooltip, ActionIcon, Text, Group } from '@mantine/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { VIS_LABEL_COLOR } from './constants';
+import { ActionIcon, Group, Text, Tooltip } from '@mantine/core';
+import * as d3v7 from 'd3v7';
+import * as React from 'react';
 import { dvSort, dvSortAsc, dvSortDesc } from '../../icons';
 import { selectionColorDark } from '../../utils';
+import { VIS_LABEL_COLOR } from './constants';
 
 export enum ESortStates {
   NONE = 'none',
@@ -53,3 +54,60 @@ export function SortIcon({
     </Group>
   );
 }
+
+export function createPlotlySortIcon({
+  sortState,
+  axis,
+  axisLabel,
+  onToggleSort,
+}: {
+  sortState: { col: string; state: ESortStates };
+  axis: string;
+  axisLabel: string;
+  onToggleSort: (col: string) => void;
+}) {
+  const icon = sortState?.col === axisLabel ? (sortState.state === ESortStates.ASC ? dvSortAsc.icon[4] : dvSortDesc.icon[4]) : dvSort.icon[4];
+  const color = sortState?.col === axisLabel ? selectionColorDark : VIS_LABEL_COLOR;
+
+  const isYAxis = axis.includes('y');
+  const titleElement = d3v7.select(`g .${axis}title`);
+
+  if (titleElement.node()) {
+    // @ts-ignore
+    const bounds = titleElement.node().getBoundingClientRect();
+    const yOffset = isYAxis ? bounds.height / 2 + 30 : bounds.height - 5;
+    const xOffset = isYAxis ? bounds.width / 2 : -(bounds.width / 2 + 15);
+    const y = Number.parseInt(titleElement.attr('y'), 10) - yOffset;
+    const x = Number.parseInt(titleElement.attr('x'), 10) - xOffset;
+    if (d3v7.select(`g .g-${axis}title`).select('svg').empty()) {
+      const title = d3v7.select(`g .g-${axis}title`);
+
+      title
+        .style('pointer-events', 'all')
+        .append('svg')
+        .attr('width', 14)
+        .attr('height', 16)
+        .attr('x', x)
+        .attr('y', y)
+        .attr('viewBox', '0 0 512 472')
+        .attr('xmlns', 'http://www.w3.org/2000/svg')
+        .attr('fill', color)
+        .append('path')
+        .style('stroke-width', '1')
+        .attr('d', icon)
+        .attr('transform', `${isYAxis ? 'rotate(-90, 256, 236)' : ''}`);
+
+      title
+        .append('foreignObject')
+        .attr('width', 16)
+        .attr('height', 18)
+        .attr('x', x)
+        .attr('y', y)
+        .html(`<div></div>`)
+        .style('cursor', 'pointer')
+        .on('click', () => {
+          onToggleSort(axisLabel);
+        });
+    }
+  }
+}

src/vis/general/constants.ts

@@ -30,6 +30,11 @@ export const VIS_GRID_COLOR = '#E9ECEF';
  */
 export const VIS_NEUTRAL_COLOR = '#71787E';
 
+/**
+ * Trace color (e.g., Dot labels in scatter plot)
+ */
+export const VIS_TRACES_COLOR = '#7f7f7f';
+
 /**
  * Color for unselected items. It is the VIS_NEUTRAL_COLOR but with 0.3 opacity.
  */

src/vis/general/layoutUtils.ts

@@ -1,14 +1,39 @@
-import { ColumnInfo, PlotlyInfo, VisColumn } from '../interfaces';
 import { PlotlyTypes } from '../../plotly';
-import { VIS_AXIS_LABEL_SIZE, VIS_AXIS_LABEL_SIZE_SMALL, VIS_GRID_COLOR, VIS_LABEL_COLOR, VIS_TICK_LABEL_SIZE, VIS_TICK_LABEL_SIZE_SMALL } from './constants';
+import { ColumnInfo, PlotlyInfo, VisColumn } from '../interfaces';
+import {
+  VIS_AXIS_LABEL_SIZE,
+  VIS_AXIS_LABEL_SIZE_SMALL,
+  VIS_GRID_COLOR,
+  VIS_LABEL_COLOR,
+  VIS_TICK_LABEL_SIZE,
+  VIS_TICK_LABEL_SIZE_SMALL,
+  VIS_TRACES_COLOR,
+} from './constants';
+
+/**
+ *
+ * @param alpha Alpha value from 0-1 to convert to hex representation
+ * @returns Hex representation of the given alpha value
+ */
+export const alphaToHex = (alpha: number) => {
+  const alphaInt = Math.round(alpha * 255);
+  const alphaHex = alphaInt.toString(16).toUpperCase();
+  return alphaHex.padStart(2, '0');
+};
 
 /**
  * Truncate long texts (e.g., to use as axes title)
  * @param text Input text to be truncated
+ * @param middle If true, truncate from the middle (default: false)
  * @param maxLength Maximum text length (default: 50)
  */
-export function truncateText(text: string, maxLength = 50) {
-  return text?.length > maxLength ? `${text.substring(0, maxLength)}\u2026` : text;
+export function truncateText(text: string, middle: boolean = false, maxLength = 50) {
+  const half = maxLength / 2;
+  return text?.length > maxLength
+    ? middle
+      ? `${text.substring(0, half)}\u2026${text.substring(text.length - half)}`
+      : `${text.substring(0, maxLength)}\u2026`
+    : text;
 }
 
 export function columnNameWithDescription(col: ColumnInfo) {
@@ -21,9 +46,22 @@ export function columnNameWithDescription(col: ColumnInfo) {
  * @param layout the current layout to be changed. Typed to any because the plotly types complain.p
  * @returns the changed layout
  */
-export function beautifyLayout(traces: PlotlyInfo, layout: Partial<PlotlyTypes.Layout>, oldLayout: Partial<PlotlyTypes.Layout>, automargin = true) {
+export function beautifyLayout(
+  traces: PlotlyInfo,
+  layout: Partial<PlotlyTypes.Layout>,
+  oldLayout: Partial<PlotlyTypes.Layout>,
+  categoryOrder: Map<number, string[]> = null,
+  automargin = true,
+  autorange = true,
+) {
   layout.annotations = [];
-  const titlePlots = traces.plots.filter((value, index, self) => {
+
+  // Sometimes we have multiple traces that share the same axis. For layout changes we only need to consider one per axis.
+  const sharedAxisTraces = traces.plots.filter((value, index, self) => {
+    return self.findIndex((v) => v.data.xaxis === value.data.xaxis && v.data.yaxis === value.data.yaxis) === index;
+  });
+
+  const titleTraces = sharedAxisTraces.filter((value, index, self) => {
     return value.title && self.findIndex((v) => v.title === value.title) === index;
   });
 
@@ -34,73 +72,82 @@ export function beautifyLayout(traces: PlotlyInfo, layout: Partial<PlotlyTypes.L
 
   // We should stop using plotly for a component like this one which wants a lot of unique functionality, and does not require complex rendering logic (like a canvas)
 
-  titlePlots.forEach((t) => {
+  titleTraces.forEach((t) => {
     if (t.title) {
       layout.annotations.push({
-        text: t.title,
+        text: truncateText(t.title, true, 30),
         showarrow: false,
         x: 0.5,
-        y: 1.1,
-        // @ts-ignore
-        xref: `${t.data.xaxis} domain`,
-        // @ts-ignore
-        yref: `${t.data.yaxis} domain`,
+        y: 1.0,
+        yshift: 5,
+        xref: `${t.data.xaxis} domain` as Plotly.XAxisName,
+        yref: `${t.data.yaxis} domain` as Plotly.YAxisName,
+        font: {
+          size: 13.4,
+          color: VIS_TRACES_COLOR,
+        },
       });
     }
   });
 
-  traces.plots.forEach((t, i) => {
+  sharedAxisTraces.forEach((t, i) => {
     const axisX = t.data.xaxis?.replace('x', 'xaxis') || 'xaxis';
     layout[axisX] = {
-      range: t.xDomain ? t.xDomain : null,
       ...oldLayout?.[`xaxis${i > 0 ? i + 1 : ''}`],
+      range: t.xDomain ? t.xDomain : null,
       color: VIS_LABEL_COLOR,
       gridcolor: VIS_GRID_COLOR,
       zerolinecolor: VIS_GRID_COLOR,
       automargin,
       tickvals: t.xTicks,
       ticktext: t.xTickLabels,
       tickfont: {
-        size: traces.plots.length > 1 ? VIS_TICK_LABEL_SIZE_SMALL : VIS_TICK_LABEL_SIZE,
+        size: sharedAxisTraces.length > 1 ? VIS_TICK_LABEL_SIZE_SMALL : VIS_TICK_LABEL_SIZE,
       },
+      type: typeof t.data.x[0] === 'string' ? 'category' : null,
       ticks: 'none',
       text: t.xTicks,
       showspikes: false,
       spikedash: 'dash',
+      categoryarray: categoryOrder?.get(i + 1) || null,
+      categoryorder: categoryOrder?.get(i + 1) ? 'array' : null,
+
       title: {
         standoff: 5,
-        text: traces.plots.length > 1 ? truncateText(t.xLabel, 20) : truncateText(t.xLabel, 55),
+        text: sharedAxisTraces.length > 1 ? truncateText(t.xLabel, false, 20) : truncateText(t.xLabel, true, 55),
         font: {
           family: 'Roboto, sans-serif',
-          size: traces.plots.length > 1 ? VIS_AXIS_LABEL_SIZE_SMALL : VIS_AXIS_LABEL_SIZE,
+          size: sharedAxisTraces.length > 1 ? VIS_AXIS_LABEL_SIZE_SMALL : VIS_AXIS_LABEL_SIZE,
           color: VIS_LABEL_COLOR,
         },
       },
     };
 
     const axisY = t.data.yaxis?.replace('y', 'yaxis') || 'yaxis';
     layout[axisY] = {
-      range: t.yDomain ? t.yDomain : null,
       ...oldLayout?.[`yaxis${i > 0 ? i + 1 : ''}`],
+      range: t.yDomain ? t.yDomain : null,
       automargin,
+      autorange,
       color: VIS_LABEL_COLOR,
       gridcolor: VIS_GRID_COLOR,
       zerolinecolor: VIS_GRID_COLOR,
       tickvals: t.yTicks,
       ticktext: t.yTickLabels,
       tickfont: {
-        size: traces.plots.length > 1 ? VIS_TICK_LABEL_SIZE_SMALL : VIS_TICK_LABEL_SIZE,
+        size: sharedAxisTraces.length > 1 ? VIS_TICK_LABEL_SIZE_SMALL : VIS_TICK_LABEL_SIZE,
       },
+      type: typeof t.data.y[0] === 'string' ? 'category' : null,
       ticks: 'none',
       text: t.yTicks,
       showspikes: false,
       spikedash: 'dash',
       title: {
         standoff: 5,
-        text: traces.plots.length > 1 ? truncateText(t.yLabel, 20) : truncateText(t.yLabel, 55),
+        text: sharedAxisTraces.length > 1 ? truncateText(t.yLabel, false, 20) : truncateText(t.yLabel, true, 55),
         font: {
           family: 'Roboto, sans-serif',
-          size: traces.plots.length > 1 ? VIS_AXIS_LABEL_SIZE_SMALL : VIS_AXIS_LABEL_SIZE,
+          size: sharedAxisTraces.length > 1 ? VIS_AXIS_LABEL_SIZE_SMALL : VIS_AXIS_LABEL_SIZE,
           color: VIS_LABEL_COLOR,
           weight: 'bold',
         },

src/vis/interfaces.ts

@@ -86,6 +86,7 @@ export interface VisNumericalColumn extends VisCommonColumn {
 export interface VisCategoricalColumn extends VisCommonColumn {
   type: EColumnTypes.CATEGORICAL;
   color?: Record<string, string>;
+  domain?: string[];
 }
 
 export type VisColumn = VisNumericalColumn | VisCategoricalColumn;

src/vis/scatter/ScatterVis.tsx

@@ -16,6 +16,7 @@ import { BrushOptionButtons } from '../sidebar/BrushOptionButtons';
 import { fitRegressionLine } from './Regression';
 import { ELabelingOptions, ERegressionLineType, IRegressionResult, IScatterConfig } from './interfaces';
 import { createScatterTraces, defaultRegressionLineStyle } from './utils';
+import { VIS_TRACES_COLOR } from '../general/constants';
 
 const formatPValue = (pValue: number) => {
   if (pValue === null) {
@@ -181,7 +182,7 @@ export function ScatterVis({
             showarrow: false,
             font: {
               size: 16,
-              color: '#7f7f7f',
+              color: VIS_TRACES_COLOR,
             },
           }),
         );
@@ -220,11 +221,11 @@ export function ScatterVis({
         b: 50,
       },
       shapes: [],
-      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.3, pattern: 'independent' },
+      grid: { rows: traces.rows, columns: traces.cols, xgap: 0.15, ygap: config.facets ? 0.2 : 0.15, pattern: 'independent' },
       dragmode: config.dragMode,
     };
 
-    setLayout({ ...layout, ...beautifyLayout(traces, innerLayout, layout, false) });
+    setLayout({ ...layout, ...beautifyLayout(traces, innerLayout, layout, null, false) });
     // WARNING: Do not update when layout changes, that would be an infinite loop.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [traces, config.dragMode, showLegend]);
@@ -349,6 +350,10 @@ export function ScatterVis({
                 selectionCallback([...selectedList, clickedId]);
               }
             }}
+            onLegendClick={() => false}
+            onDoubleClick={() => {
+              selectionCallback([]);
+            }}
             onInitialized={() => {
               d3.select(id).selectAll('.legend').selectAll('.traces').style('opacity', 1);
             }}