DM-6022 Lazy load related chart data on table data update

src/firefly/js/api/ApiHighlevelBuild.js

@@ -357,12 +357,12 @@ function makePlotId() {
 //================================================================
 
 function showXYPlot(llApi, targetDiv, params={}) {
-    const {dispatchSetupTblTracking, dispatchTableFetch}= llApi.action;
+    const {dispatchTableFetch}= llApi.action;
     const {TBL_RESULTS_ACTIVE} = llApi.action.type;
     const {renderDOM} = llApi.util;
     const {makeFileRequest, getActiveTableId, uniqueTblId} = llApi.util.table;
     const {uniqueChartId, loadPlotDataForTbl} = llApi.util.chart;
-    const {ChartsContainer, ChartsTableViewPanel}= llApi.ui;
+    const {ChartsTableViewPanel}= llApi.ui;
     const {addActionListener} = llApi.util;
 
     if ((typeof targetDiv).match(/string|HTMLDivElement/) === null) {
@@ -397,7 +397,6 @@ function showXYPlot(llApi, targetDiv, params={}) {
         );
         tblId = searchRequest.tbl_id;
         dispatchTableFetch(searchRequest);
-        dispatchSetupTblTracking(tblId);
     }
 
     const chartId = uniqueChartId(tblId||tblGroup);

src/firefly/js/tables/TablesCntlr.js

@@ -10,7 +10,6 @@ import shallowequal from 'shallowequal';
 import {dataReducer} from './reducer/TableDataReducer.js';
 import {uiReducer} from './reducer/TableUiReducer.js';
 import {resultsReducer} from './reducer/TableResultsReducer.js';
-import {dispatchSetupTblTracking} from '../visualize/TableStatsCntlr.js';
 import {dispatchAddSaga} from '../core/MasterSaga.js';
 
 export const TABLE_SPACE_PATH = 'table_space';
@@ -48,8 +47,7 @@ export function tableSearch(action) {
             var {request, options, tbl_group} = action.payload;
             const {tbl_id} = request;
             const title = get(request, 'META_INFO.title');
-
-            dispatchSetupTblTracking(tbl_id);
+
             dispatchTableFetch(request);
             if (!TblUtil.getTableInGroup(tbl_id, tbl_group)) {
                 const {tbl_group, removable} = options || {};

src/firefly/js/visualize/ChartUtil.js

@@ -18,6 +18,8 @@ import {logError} from '../util/WebUtil.js';
 import {XYPLOT_DATA_KEY} from '../visualize/XYPlotCntlr.js';
 import {HISTOGRAM_DATA_KEY} from '../visualize/HistogramCntlr';
 
+export const SCATTER = 'scatter';
+export const HISTOGRAM = 'histogram';
 
 /**
  * This method returns an object with the keys x,y,highlightedRow
@@ -63,20 +65,33 @@ function getExpressionValue(strExpr, tableModel, rowIdx) {
     }
 }
 
+
+export function getChartSpace(chartType) {
+    switch(chartType) {
+        case SCATTER:
+            return flux.getState()[XYPLOT_DATA_KEY];
+        case HISTOGRAM:
+            return flux.getState()[HISTOGRAM_DATA_KEY];
+        default:
+            logError(`Unknown chart type ${chartType}`);
+            return undefined;
+    }
+}
+
 export function hasRelatedCharts(tblId, space) {
     if (space) {
         return Boolean(Object.keys(space).find((chartId) => {
             return space[chartId].tblId === tblId;
         }));
     } else {
-        return hasRelatedCharts(tblId, flux.getState()[XYPLOT_DATA_KEY]) ||
-            hasRelatedCharts(tblId, flux.getState()[HISTOGRAM_DATA_KEY]);
+        return hasRelatedCharts(tblId, getChartSpace(SCATTER)) ||
+            hasRelatedCharts(tblId, getChartSpace(HISTOGRAM));
     }
 }
 
 export function getTblIdForChartId(chartId) {
-    return  get(flux.getState()[XYPLOT_DATA_KEY], [chartId, 'tblId']) ||
-            get(flux.getState()[HISTOGRAM_DATA_KEY], [chartId, 'tblId']);
+    return  get(getChartSpace(SCATTER), [chartId, 'tblId']) ||
+            get(getChartSpace(HISTOGRAM), [chartId, 'tblId']);
 }
 
 export function numRelatedCharts(tblId) {
@@ -86,7 +101,7 @@ export function numRelatedCharts(tblId) {
     keys.forEach( (key) => {
         const space = flux.getState()[key];
         for (c in space) {
-            if (space[c].tblId === tblId) {
+            if (space.hasOwnProperty(c) && space[c].tblId === tblId) {
                 numRelated++;
             }
         }

src/firefly/js/visualize/ChartsCntlr.js

@@ -2,13 +2,20 @@
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
 
+import {has, get, isUndefined, omit} from 'lodash';
+
 import {flux} from '../Firefly.js';
-import {updateSet} from '../util/WebUtil.js';
+import {updateSet, updateMerge} from '../util/WebUtil.js';
+
+import * as TablesCntlr from '../tables/TablesCntlr.js';
 
 export const CHART_SPACE_PATH = 'charts';
 export const UI_PREFIX = `${CHART_SPACE_PATH}.ui`;
 
 export const CHART_UI_EXPANDED      = `${UI_PREFIX}.expanded`;
+export const CHART_MOUNTED = `${UI_PREFIX}/mounted`;
+export const CHART_UNMOUNTED = `${UI_PREFIX}/unmounted`;
+export const DELETE = `${UI_PREFIX}/delete`;
 
 /**
  * request to put a chart into an expanded mode.
@@ -21,15 +28,132 @@ export function dispatchChartExpanded(chartId, tblId, chartType, optionsPopup) {
     flux.process( {type: CHART_UI_EXPANDED, payload: {chartId, tblId, chartType, optionsPopup}});
 }
 
+/*
+ *  Dispatched when chart becomes visible (is rendered for the first time after being invisible)
+ *  When chart is mounted, its data need to be in sync with the related table
+ *  @param {string} tblId - table id (table data for this chart)
+ *  @param {string} chartId - chart id
+ *  @param {string} chartType - chart type, ex. scatter, histogram
+ */
+export function dispatchChartMounted(tblId, chartId, chartType, dispatcher= flux.process) {
+    dispatcher({type: CHART_MOUNTED, payload: {tblId, chartId, chartType}});
+}
+
+/*
+ *  Dispatched when chart becomes invisible
+ *  When chart is unmounted, its data synced with the related table only when it becomes mounted again
+ *  @param {string} tblId - table id (table data for this chart)
+ *  @param {string} chartId - chart id
+ *  @param {string} chartType - chart type, ex. scatter, histogram
+ */
+export function dispatchChartUnmounted(tblId, chartId, chartType, dispatcher= flux.process) {
+    dispatcher({type: CHART_UNMOUNTED, payload: {tblId, chartId, chartType}});
+}
+
+/*
+ * Delete chart and related data
+ *  @param {string} tblId - table id (table data for this chart)
+ *  @param {string} chartId - chart id
+ *  @param {string} chartType - chart type, ex. scatter, histogram
+ */
+export function dispatchDelete(tblId, chartId, chartType, dispatcher= flux.process) {
+    dispatcher({type: DELETE, payload: {tblId, chartId, chartType}});
+}
+
+const uniqueId = (chartId, chartType) => { return `${chartType}|${chartId}`; };
+const isChartType = (uChartId, chartType) => { return uChartId.startsWith(chartType); };
+
+const chartActions = [CHART_UI_EXPANDED,CHART_MOUNTED,CHART_UNMOUNTED,DELETE];
+
 export function reducer(state={ui:{}}, action={}) {
-    //var root = state.ui;
-    switch (action.type) {
-        case (CHART_UI_EXPANDED) :
-            const {chartId, tblId, chartType, optionsPopup} = action.payload;
-            //return updateSet(root, 'expanded', {chartId, tblId});
-            return updateSet(state, 'ui.expanded', {chartId, tblId, chartType, optionsPopup});
-        default:
-            //return root;
-            return state;
+    if (action.type === TablesCntlr.TABLE_REMOVE) {
+        const {tbl_id} = action.payload;
+        if (has(state, tbl_id)) {
+            return Object.assign({}, omit(state, [tbl_id]));
+        }
+        return state;
+    } else if (chartActions.indexOf(action.type) > -1) {
+        const {chartId, tblId, chartType}  = action.payload;
+        const uChartId = uniqueId(chartId, chartType);
+        switch (action.type) {
+
+            case (CHART_UI_EXPANDED) :
+                const {optionsPopup} = action.payload;
+                //return updateSet(root, 'expanded', {chartId, tblId});
+                return updateSet(state, 'ui.expanded', {chartId, tblId, chartType, optionsPopup});
+            case (CHART_MOUNTED) :
+
+                if (!has(state, ['tbl', tblId])) {
+                    return updateSet(state, ['tbl',tblId], {[uChartId]: {mounted: true}});
+                } else {
+                    if (get(state, ['tbl', tblId, uChartId, 'mounted'])) {
+                        //other version of the same chart is mounted
+                        let n = get(state, ['tbl', tblId, uChartId, 'n']);
+                        n = n ? Number(n) : 1;
+                        return updateMerge(state, ['tbl', tblId, uChartId], {upToDate: true, n: n + 1});
+                    } else {
+                        return updateSet(state, ['tbl', tblId, uChartId], {mounted: true});
+                    }
+                }
+            case (CHART_UNMOUNTED) :
+                if (has(state, ['tbl', tblId])) {
+                    if (get(state, ['tbl', tblId, uChartId, 'mounted'])) {
+                        let n = get(state, ['tbl', tblId, uChartId, 'n']);
+                        n = n ? Number(n) : 1;
+                        if (n > 1) {
+                            //multiple versions of the same chart are mounted
+                            return updateMerge(state, ['tbl', tblId, uChartId], {n: n - 1});
+                        }
+                    } else {
+                        return updateSet(state, ['tbl', tblId, uChartId], {mounted: false});
+                    }
+                }
+                return state;
+            case (DELETE) :
+                if (has(state, ['tbl', tblId, uChartId])) {
+                    if (Object.keys(state['tbl'][tblId]).length > 1) {
+                        return updateSet(state, ['tbl', tblId], omit(state['tbl'][tblId], [uChartId]));
+                    } else {
+                        return updateSet(state, 'tbl', omit(state['tbl'], [tblId]));
+                    }
+                }
+                return state;
+            default:
+                return state;
+        }
+    } else {
+        return state;
     }
+}
+
+
+export function getExpandedChartProps() {
+    return get(flux.getState(), [CHART_SPACE_PATH, 'ui', 'expanded']);
+}
+
+
+export function getNumRelatedCharts(tblId, mounted, chartType) {
+    let numRelated = 0;
+    const byTblSpace = get(flux.getState(), [CHART_SPACE_PATH, 'tbl']);
+    if (byTblSpace) {
+        if (isUndefined(tblId)) {
+            Object.keys(byTblSpace).forEach((tblId)=>{
+                numRelated += getNumRelatedCharts(tblId, mounted);
+            });
+        } else if (byTblSpace[tblId]) {
+            Object.keys(byTblSpace[tblId]).forEach((uChartId) => {
+                if (isUndefined(mounted)||byTblSpace[tblId][uChartId].mounted===mounted) {
+                    if (isUndefined(chartType) || isChartType(uChartId, chartType)) {
+                        numRelated++;
+                    }
+                }
+            });
+        }
+    }
+    return numRelated;
+}
+
+export function isChartMounted(tblId, chartId, chartType) {
+    const uChartId = uniqueId(chartId, chartType);
+    return Boolean(get(flux.getState(), [CHART_SPACE_PATH, 'tbl', tblId, uChartId, 'mounted']));
 }

src/firefly/js/visualize/ChartsContainer.jsx

@@ -8,17 +8,13 @@ import shallowequal from 'shallowequal';
 
 
 import {flux} from '../Firefly.js';
-import {get} from 'lodash';
 
 import {LO_VIEW, LO_MODE, dispatchSetLayoutMode, getExpandedMode} from '../core/LayoutCntlr.js';
 import {CloseButton} from '../ui/CloseButton.jsx';
 
 import {ChartsTableViewPanel} from '../visualize/ChartsTableViewPanel.jsx';
-import {CHART_SPACE_PATH} from '../visualize/ChartsCntlr.js';
+import {getExpandedChartProps} from '../visualize/ChartsCntlr.js';
 
-export function getExpandedChartProps() {
-    return get(flux.getState(),[CHART_SPACE_PATH, 'ui', 'expanded']);
-}
 
 function nextState(props) {
     const {closeable, chartId, tblId, chartType, optionsPopup} = props;
@@ -34,16 +30,18 @@ export class ChartsContainer extends Component {
     }
 
     componentWillReceiveProps(np) {
-        if (!this.isUnmounted && !shallowequal(this.props, np)) {
+        if (this.iAmMounted && !shallowequal(this.props, np)) {
             this.setState(nextState(np));
         }
     }
 
     componentDidMount() {
         this.removeListener= flux.addListener(() => this.storeUpdate());
+        this.iAmMounted = true;
     }
 
     componentWillUnmount() {
+        this.iAmMounted = false;
         this.removeListener && this.removeListener();
     }
 
@@ -53,7 +51,7 @@ export class ChartsContainer extends Component {
 
 
     storeUpdate() {
-        if (!this.isUnmounted) {
+        if (this.iAmMounted) {
             const expandedMode = this.props.expandedMode && getExpandedMode() === LO_VIEW.xyPlots;
             if (expandedMode !== this.state.expandedMode) {
                 this.setState(nextState(this.props));