DM-11477: fixed: highlighting charts stopped working, this is

related to controlling event propagation when in the the slate view.

Author: robyww

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

@@ -73,20 +73,29 @@ export class MultiChartViewer extends PureComponent {
             activeItemId = viewer.itemIdAry[0];
         }
 
-        const onChartSelect = (chartId) => {
+        const onChartSelect = (ev,chartId) => {
             if (chartId !== activeItemId) {
                 dispatchUpdateCustom(viewerId, {activeItemId: chartId});
             }
+            stopPropagation(ev);
         };
 
+
         const makeItemViewer = (chartId) => (
-            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'} onClick={()=>onChartSelect(chartId)}>
+            <div className={chartId === activeItemId ? 'ChartPanel ChartPanel--active' : 'ChartPanel'}
+                 onClick={(ev)=>onChartSelect(ev,chartId)}
+                 onTouchStart={stopPropagation}
+                 onMouseDown={stopPropagation}>
                 <ChartPanel key={chartId} showToolbar={false} chartId={chartId}/>
             </div>
         );
 
         const makeItemViewerFull = (chartId) => (
-            <ChartPanel key={chartId} showToolbar={false} chartId={chartId}/>
+            <div onClick={stopPropagation}
+                 onTouchStart={stopPropagation}
+                 onMouseDown={stopPropagation}>
+                <ChartPanel key={chartId} showToolbar={false} chartId={chartId}/>
+            </div>
         );
 
         const newProps = {
@@ -115,6 +124,10 @@ export class MultiChartViewer extends PureComponent {
     }
 }
 
+
+const stopPropagation= (ev) => ev.stopPropagation();
+
+
 MultiChartViewer.propTypes= {
     viewerId : PropTypes.string.isRequired,
     canReceiveNewItems : PropTypes.string,

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

@@ -341,20 +341,14 @@ isDebug() && console.log(`${renderType.toString()} ${dataUpdateTraces} elapsed:
         // chart image download relies on div id matching chartId
         const nstyle = Object.assign({position:'relative', height: '100%', width: '100%'}, style);
         return (
-            <div style={nstyle}
-                 onClick={stopPropagation}
-                 onTouchStart={stopPropagation}
-                 onMouseDown={stopPropagation} >
+            <div style={nstyle} >
                 <div id={chartId || this.id} style={{height: '100%', width: '100%'}} ref={this.refUpdate}/>
                 {showMask && <div style={maskWrapper}> <div className='loading-mask'/> </div>}
             </div>
         );
     }
 }
 
-
-const stopPropagation= (ev) => ev.stopPropagation();
-
 PlotlyWrapper.propTypes = {
     chartId: PropTypes.string,
     data: PropTypes.arrayOf(PropTypes.object),