DM-10833 multi-trace charts as the default charts in triview

Author: tgoldina

src/firefly/html/demo/ffapi-highlevel-charttest.html

@@ -33,12 +33,15 @@ <h2>
 <br/><br/>
 <div id="plotlyDiv" style="resize: both; overflow: auto; padding: 5px; width: 800px; height: 550px; border: solid 1px gray;"></div>
 <br/><br/>
+<h3>Default chart for 'allwise' table group below</h3>
+<div id="defaultChart" style="resize: both; overflow: auto; padding: 5px; width: 800px; height: 550px; border: solid 1px gray;"></div>
+<br/><br/>
 <div id="table-1" style="width: 800px; height: 550px; border: solid 1px;"></div>
 <br/><br/>
 
 <script type="text/javascript">
     if (!window.firefly) window.firefly= {};
-    window.firefly.options= {charts: {chartEngine: 'plotly'}};
+    window.firefly.options= {charts: {chartEngine: 'plotly', chartEngine: 'plotly'}};
 </script>
 
 <script type="text/javascript">
@@ -157,17 +160,28 @@ <h2>
             firefly.showChart('plotlyDiv', {data: data});
 
 
-            var tblReq =  firefly.util.table.makeIrsaCatalogRequest('allwise_p3as_psd', 'WISE', 'allwise_p3as_psd',
+            var tblReq =  firefly.util.table.makeIrsaCatalogRequest('allwise-500', 'WISE', 'allwise_p3as_psd',
                     {   position: '10.68479;41.26906;EQ_J2000',
                         SearchMethod: 'Cone',
                         radius: 300
                     },
-//                    {   position: '202.48;47.23;EQ_J2000',
-//                        SearchMethod: 'Cone',
-//                        radius: 30,
-//                    },
-                    {tbl_id: 'test-tbl'});
-            firefly.showTable('table-1', tblReq);
+                    {   tbl_id: 'test-tbl',
+                         META_INFO: {defaultChartDef: JSON.stringify({data: [{x: 'tables::w1mpro', y: 'tables::w2mpro', mode: 'markers'}]})}
+                    });
+            var tblReqSm =  firefly.util.table.makeIrsaCatalogRequest('allwise-10', 'WISE', 'allwise_p3as_psd',
+                    {   position: '202.48;47.23;EQ_J2000',
+                        SearchMethod: 'Cone',
+                        radius: 30
+                    },
+                    {   tbl_id: 'test-tbl-sm',
+                        META_INFO: {defaultChartDef: JSON.stringify({data: [{x: 'tables::w3mpro', y: 'tables::w4mpro', mode: 'markers'}]})}
+                    });
+
+
+            firefly.showTable('table-1', tblReq, {tbl_group: 'allwise'});
+            firefly.showTable('table-1', tblReqSm, {tbl_group: 'allwise'});
+
+            firefly.showChart('defaultChart', {tbl_group: 'allwise'});
 
             // using column expressions
             var tblReqXpr =  Object.assign({}, tblReq, {inclCols: 'ra + dec as radec, ra, dec, ln(dec) as LnOfDec, power(ra, 2) as ra_sq'});

src/firefly/html/firefly.html

@@ -22,7 +22,7 @@
                 options : {
                     MenuItemKeys: {maskOverlay:true},
                     catalogSpacialOp: 'polygonWhenPlotExist',
-                    charts: {chartEngine: 'plotly'}
+                    charts: {chartEngine: 'plotly', multitrace: true}
                 }
             }
         };

src/firefly/html/images/icons-2014/magnifyingGlass.png

@@ -406,15 +406,26 @@ function doShowChart(llApi, targetDiv, params={}) {
     const {dispatchChartAdd}= llApi.action;
     const {uniqueChartId} = llApi.util.chart;
     const {renderDOM} = llApi.util;
-    const {MultiChartViewer}= llApi.ui;
+    const {ChartsContainer}= llApi.ui;
 
-    params = Object.assign({chartId: uniqueChartId(`${targetDiv}`), viewerId: targetDiv, chartType: 'plot.ly'}, params);
-    dispatchChartAdd(params);
+    const tbl_group = params.tbl_group;
+    // when tbl_group parameter is set, show a default chart
+    // for an active table in this table group
+    if (!tbl_group) {
+        params = Object.assign({
+            chartId: uniqueChartId(`${targetDiv}`),
+            viewerId: targetDiv,
+            chartType: 'plot.ly'
+        }, params);
+        dispatchChartAdd(params);
+    }
 
-    renderDOM(targetDiv, MultiChartViewer,
+    renderDOM(targetDiv, ChartsContainer,
         {
             key: `${targetDiv}-plot`,
             viewerId: targetDiv,
+            tbl_group,
+            addDefaultChart: Boolean(tbl_group),
             closeable: false,
             expandedMode: false
         }

src/firefly/js/api/ApiHighlevelBuild.js

@@ -31,7 +31,7 @@ import {getConnectionCount, WS_CONN_UPDATED, GRAB_WINDOW_FOCUS} from '../core/Ap
 import {dispatchAddCell, dispatchEnableSpecialViewer, LO_VIEW} from '../core/LayoutCntlr.js';
 import {dispatchAddSaga} from '../core/MasterSaga.js';
 import {modifyURLToFull} from '../util/BrowserUtil.js';
-import {DEFAULT_FITS_VIEWER_ID} from '../visualize/MultiViewCntlr.js';
+import {DEFAULT_FITS_VIEWER_ID, DEFAULT_PLOT2D_VIEWER_ID} from '../visualize/MultiViewCntlr.js';
 import {REINIT_APP} from '../core/AppDataCntlr.js';
 
 
@@ -362,7 +362,7 @@ function plotRemoteChart(params, viewerId, dispatch) {
 
     const dispatchParams= clone({
         groupId: viewerId || 'default',
-        viewerId:viewerId || 'default',
+        viewerId:viewerId || DEFAULT_PLOT2D_VIEWER_ID,
         chartId: params.chartId || uniqueChartId(),
         chartType: 'plot.ly',
         closeable: true,
@@ -401,7 +401,7 @@ function plotRemoteXYPlot(params, viewerId, dispatch) {
     // SCATTER
     dispatchChartAdd({chartId, chartType: SCATTER,
         groupId: viewerId || 'default',
-        viewerId:viewerId || 'default',
+        viewerId:viewerId || DEFAULT_PLOT2D_VIEWER_ID,
         chartDataElements: [
             {
                 type: DT_XYCOLS,
@@ -441,7 +441,7 @@ function plotRemoteHistogram(params, viewerId, dispatch) {
     dispatchChartAdd({chartId,
         chartType: HISTOGRAM,
         groupId: viewerId || 'default',
-        viewerId:viewerId || 'default',
+        viewerId:viewerId || DEFAULT_PLOT2D_VIEWER_ID,
         chartDataElements: [
             {
                 type: DT_HISTOGRAM,