DM-11477 update the logic for rendering tool bar 'select' button and XY options for chart options side bar.

Author: Cindy Wang

src/firefly/js/charts/ui/PlotlyToolbar.jsx

@@ -4,7 +4,7 @@ import {get, isEmpty} from 'lodash';
 
 import {dispatchChartUpdate, dispatchChartFilterSelection, dispatchChartSelect, getChartData, dispatchSetActiveTrace, dispatchChartExpanded} from '../ChartsCntlr.js';
 import {SimpleComponent} from '../../ui/SimpleComponent.jsx';
-import {getTblById, clearFilters, getColumnIdx} from '../../tables/TableUtil.js';
+import {getTblById, clearFilters, getColumnIdx, getColumnType} from '../../tables/TableUtil.js';
 import {dispatchSetLayoutMode, LO_MODE, LO_VIEW} from '../../core/LayoutCntlr.js';
 import {downloadChart} from './PlotlyWrapper.jsx';
 
@@ -45,29 +45,36 @@ export class ScatterToolbar extends SimpleComponent {
     }
 }
 
-function isSelectable(tbl_id, chartId, type, activeTrace) {
-    const typeWithX = ['heatmap', 'histogram2dcontour', 'histogram2d'];
-    const typeWithY = ['heatmap', 'histogram2dcontour', 'histogram2d'];
+function isSelectable(tbl_id, chartId, type) {
+    const typeWithX = ['heatmap', 'histogram2dcontour', 'histogram2d', 'scatter'];
+    const typeWithY = ['heatmap', 'histogram2dcontour', 'histogram2d', 'scatter'];
 
     if (!tbl_id) return false;
+
     const checkX = typeWithX.includes(type);
     const checkY = typeWithY.includes(type);
-
     if (!checkX&&!checkY) return false;     // chart type has no selection box in tool bar
 
-    const {x, y} = get(getChartData(chartId), `tablesources.${activeTrace}.mappings`) || {};
+    const {tablesources} = getChartData(chartId);
+    const strCol = ['str', 's', 'char', 'c'];
     const tableModel = getTblById(tbl_id);
-    const dataExp = [x, y];
-
-    const noSelectionIdx = [checkX, checkY].findIndex((checkItem, idx) => {
-        if (!checkItem) return false;      // ignore
-        if (dataExp[idx]) {
-            return getColumnIdx(tableModel, dataExp[idx]) < 0;
-        } else {
-            return true;   // not qualified to have selection box
-        }
+    const noSelectionTraceIdx = tablesources.findIndex((tablesource) =>  {
+          const {x, y} = get(tablesource, 'mappings') || {};
+          const dataExp = [x, y];
+
+          const noSelectionIdx = [checkX, checkY].findIndex((checkItem, idx) => {
+              if (!checkItem) return false;      // ignore
+
+              if (dataExp[idx]) {
+                  return getColumnIdx(tableModel, dataExp[idx]) < 0 ||
+                         strCol.includes(getColumnType(tableModel, dataExp[idx]));
+              } else {
+                  return true;   // not qualified to have selection box
+              }
+          });
+          return noSelectionIdx >= 0;
     });
-    return (noSelectionIdx < 0);
+    return (noSelectionTraceIdx < 0);
 }
 
 export class BasicToolbar extends SimpleComponent {
@@ -83,7 +90,7 @@ export class BasicToolbar extends SimpleComponent {
         const {activeTrace, hasFilter, hasSelection, tbl_id, dragmode} = this.state;
 
         const type = get(getChartData(chartId), `data.${activeTrace}.type`, '');
-        const showSelectionPart = isSelectable(tbl_id, chartId, type, activeTrace);
+        const showSelectionPart = isSelectable(tbl_id, chartId, type);
         const showDragPart = !type.includes('pie');
         const is3d = type.endsWith('3d') || type === 'surface'; // scatter3d, mesh3d, surface
 

src/firefly/js/charts/ui/options/BasicOptions.jsx

@@ -67,14 +67,13 @@ export function hasMarkerColor(type) {
     return type.startsWith('scatter') || ['histogram', 'box', 'bar', 'area', 'plotcloud'].includes(type);
 }
 
-function hasNoXY(type, tablesources) {
+/*
+ * check if the trace is not 3d-like chart or pie and has x and y defined
+*/
+function hasNoXY(type, tablesource) {
     if (type.endsWith('3d') || ['pie', 'surface'].includes(type)) return true;
 
-    const noXYtrace = tablesources.findIndex((trace) => {
-        return (!get(trace, ['mappings', 'x']) || !get(trace, ['mappings', 'y']));
-    });
-
-    return noXYtrace >= 0;
+    return (!get(tablesource, ['mappings', 'x']) || !get(tablesource, ['mappings', 'y']));
 }
 
 export class BasicOptions extends SimpleComponent {
@@ -94,7 +93,7 @@ export class BasicOptions extends SimpleComponent {
         const tbl_id = get(tablesource, 'tbl_id');
         const type = get(data, `${activeTrace}.type`, 'scatter');
         const noColor = !hasMarkerColor(type);
-        const noXY = hasNoXY(type, tablesources);
+        const noXY = hasNoXY(type, tablesource);
         const xColType = noXY ? '' : getColumnType(getTblById(tbl_id), get(tablesource, ['mappings', 'x'], ''));
         const yColType = noXY ? '' : getColumnType(getTblById(tbl_id), get(tablesource, ['mappings', 'y'], ''));
         const xNoLog = type.includes('histogram') ? true : undefined;          // histogram2d or histogram2dcontour