Merge branch 'dev' of https://github.com/Caltech-IPAC/Firefly into dev

Author: ejoliet

src/firefly/js/api/ApiBuild.js

@@ -33,7 +33,8 @@ import {ApiExpandedDisplay} from '../visualize/ui/ApiExpandedDisplay.jsx';
 import {TablesContainer} from '../tables/ui/TablesContainer.jsx';
 import {TablePanel} from '../tables/ui/TablePanel.jsx';
 import {ChartsContainer} from '../charts/ui/ChartsContainer.jsx';
-import {ChartsTableViewPanel} from '../charts/ui/ChartsTableViewPanel.jsx';
+import {ChartPanel} from '../charts/ui/ChartPanel.jsx';
+
 import {Histogram} from '../charts/ui/Histogram.jsx';
 import {PopupMouseReadoutMinimal} from  '../visualize/ui/PopupMouseReadoutMinimal.jsx';
 import {PopupMouseReadoutFull} from  '../visualize/ui/PopupMouseReadoutFull.jsx';
@@ -183,7 +184,7 @@ export function buildLowlevelAPI() {
         TablesContainer,
         TablePanel,
         ChartsContainer,
-        ChartsTableViewPanel,
+        ChartPanel,
         Histogram,
         PopupMouseReadoutMinimal,
         PopupMouseReadoutFull

src/firefly/js/api/ApiExpandedView.jsx

@@ -11,6 +11,7 @@ import {ChartsContainer} from '../charts/ui/ChartsContainer.jsx';
 import {ApiExpandedDisplay} from '../visualize/ui/ApiExpandedDisplay.jsx';
 import {dispatchChangeExpandedMode, ExpandType} from '../visualize/ImagePlotCntlr.js';
 import {dispatchSetLayoutMode, getExpandedMode, LO_MODE, LO_VIEW} from '../core/LayoutCntlr.js';
+import {getExpandedChartProps} from '../charts/ChartsCntlr.js';
 
 // import {deepDiff} from '../util/WebUtil.js';
 
@@ -23,9 +24,8 @@ export class ApiExpandedView extends Component {
             dispatchSetLayoutMode(LO_MODE.expanded, LO_VIEW.none);
         };
         const images  = (<ApiExpandedDisplay closeFunc={closeFunc}/>);
-        const xyPlots = (<ChartsContainer expandedMode={true} closeable={true}/>);
         const tables  = (<TablesContainer  mode='expanded' />);
-        this.state = {images, xyPlots, tables};
+        this.state = {images, tables};
     }
 
     componentDidMount() {
@@ -55,10 +55,11 @@ export class ApiExpandedView extends Component {
     // }
 
     render() {
-        var {expanded, images, xyPlots, tables} = this.state;
+        var {expanded, images, tables} = this.state;
         expanded = LO_VIEW.get(expanded) || LO_VIEW.none;
+        const {chartId} = expanded === LO_VIEW.xyPlots ? getExpandedChartProps() : {};
         const view = expanded === LO_VIEW.tables ? tables
-            : expanded === LO_VIEW.xyPlots ? xyPlots
+            : expanded === LO_VIEW.xyPlots ? (<ChartsContainer key='api' expandedMode={true} closeable={true} chartId={chartId}/>)
             : images;
         if (expanded === LO_VIEW.none) {
             document.body.style.overflow= this.saveOverflow;

src/firefly/js/api/ApiHighlevelBuild.js

@@ -394,7 +394,7 @@ function doShowXYPlot(llApi, targetDiv, params={}) {
     const {renderDOM} = llApi.util;
     const {makeFileRequest, getActiveTableId} = llApi.util.table;
     const {makeXYPlotParams, uniqueChartId} = llApi.util.chart;
-    const {ChartsTableViewPanel}= llApi.ui;
+    const {ChartsContainer}= llApi.ui;
     const {addActionListener} = llApi.util;
 
     if ((typeof targetDiv).match(/string|HTMLDivElement/) === null) {
@@ -423,7 +423,7 @@ function doShowXYPlot(llApi, targetDiv, params={}) {
         dispatchTableFetch(searchRequest);
     }
 
-    const chartId = uniqueChartId();
+    const chartId = targetDiv;
 
     if (tblGroup) {
         tblId = getActiveTableId(tblGroup);
@@ -455,10 +455,9 @@ function doShowXYPlot(llApi, targetDiv, params={}) {
             }
         ]});
 
-    renderDOM(targetDiv, ChartsTableViewPanel,
+    renderDOM(targetDiv, ChartsContainer,
         {
             key: `${targetDiv}-xyplot`,
-            tblId,
             chartId,
             closeable: false,
             expandedMode: false
@@ -472,7 +471,7 @@ function doShowHistogram(llApi, targetDiv, params={}) {
     const {renderDOM} = llApi.util;
     const {makeFileRequest, getActiveTableId} = llApi.util.table;
     const {makeHistogramParams, uniqueChartId} = llApi.util.chart;
-    const {ChartsTableViewPanel}= llApi.ui;
+    const {ChartsContainer}= llApi.ui;
     const {addActionListener} = llApi.util;
 
     const histogramParams = makeHistogramParams(params);
@@ -494,7 +493,7 @@ function doShowHistogram(llApi, targetDiv, params={}) {
         dispatchTableFetch(searchRequest);
     }
 
-    const chartId = uniqueChartId();
+    const chartId = targetDiv;
 
     if (tblGroup) {
         tblId = getActiveTableId(tblGroup);
@@ -525,10 +524,9 @@ function doShowHistogram(llApi, targetDiv, params={}) {
             }
         ]});
 
-    renderDOM(targetDiv, ChartsTableViewPanel,
+    renderDOM(targetDiv, ChartsContainer,
         {
             key: `${targetDiv}-histogram`,
-            tblId,
             chartId,
             closeable: false,
             expandedMode: false

src/firefly/js/charts/ChartType.js

@@ -0,0 +1,66 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+
+import {logError} from '../util/WebUtil.js';
+
+/**
+ * @global
+ * @public
+ * @typedef {Object} ChartType - an object which specifies how to render a chart type
+ * @prop {string} id - unique chart type id
+ * @prop {Function} Chart - React functional component to render chart part: Chart({chartId, ...chartProps, widthPx, heightPx})
+ * @prop {Function} Options - React functional component to render chart options: Options({chartId, optionsKey})
+ * @prop {Function} Toolbar - React functional component to render toolbar: Toolbar({chartId, expandable, expandedMode, toggleOptions})
+ * @prop {Function} getChartProperties - function to get chart properties: getChartProperties(chartId)
+ * @prop {Function} updateOnStoreChange - function with returns true if chart needs to update on store update: updateOnStoreChange(prevChartProps)
+ */
+
+const chartTypes = [];
+
+
+/**
+ * Get chart data type
+ * @param id
+ * @returns {ChartType}
+ */
+function getChartType(id) {
+    return chartTypes.find((el) => {
+        return el.id === id;
+    });
+}
+
+/**
+ * Add chart data type
+ * @param {ChartType} chartType
+ */
+function addChartType(chartType) {
+    const id = {chartType};
+    if (!id) {
+        logError('[ChartTypes] unable to add: missing id');
+        return;
+    }
+    if (chartTypes.find((el) => {
+            return el.id === id;
+        })) {
+        logError(`[ChartTypes] unable to add: id ${id} is already used`);
+        return;
+    }
+    // more validation?
+    chartTypes.push(chartType);
+}
+
+/**
+ * Create a factory to manage chart data types
+ * @param {Array<ChartType>} predefinedTypes
+ * @return {{getChartType:Function, addChartType:Function}}
+ */
+export function chartTypeFactory(predefinedTypes)
+{
+    predefinedTypes.forEach((cdt) => addChartType(cdt));
+    return {
+        getChartType,
+        addChartType
+    };
+}

src/firefly/js/charts/ChartsCntlr.js

@@ -59,8 +59,8 @@ const FIRST_CDEL_ID = '0'; // first data element id (if missing)
  *  @function dispatchChartAdd
  *  @memberof firefly.action
  */
-export function dispatchChartAdd({chartId, chartType, chartDataElements, groupId='main', deletable, help_id, dispatcher= flux.process}) {
-    dispatcher({type: CHART_ADD, payload: {chartId, chartType, chartDataElements, deletable, help_id, groupId}});
+export function dispatchChartAdd({chartId, chartType, chartDataElements, groupId='main', deletable, help_id, mounted=0, dispatcher= flux.process}) {
+    dispatcher({type: CHART_ADD, payload: {chartId, chartType, chartDataElements, groupId, deletable, help_id, mounted}});
 }
 
 /*
@@ -144,6 +144,7 @@ export function dispatchChartExpanded(chartId, dispatcher=flux.process) {
     dispatcher( {type: CHART_UI_EXPANDED, payload: {chartId}});
 }
 
+
 /*
  *  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
@@ -368,13 +369,20 @@ function reduceData(state={}, action={}) {
     //if (chartActions.indexOf(action.type) < 0) { return state; } // useful when debugging
     switch (action.type) {
         case (CHART_ADD) :
-            const {chartId, chartType, groupId, deletable, help_id, chartDataElements}  = action.payload;
+        {
+            const {chartId, chartType, chartDataElements, ...rest}  = action.payload;
 
             state = updateSet(state, chartId,
-                omitBy({chartType, chartDataElements: chartDataElementsToObj(chartDataElements), groupId, deletable, help_id}, isUndefined));
+                omitBy({
+                    chartType,
+                    chartDataElements: chartDataElementsToObj(chartDataElements),
+                    ...rest
+                }, isUndefined));
             return state;
+        }
         case (CHART_REMOVE)  :
-        {   const {chartId} = action.payload;
+        {
+            const {chartId} = action.payload;
             return omit(state, chartId);
         }
         case (CHART_DATA_FETCH)  :
@@ -564,11 +572,13 @@ export function updateRelatedData(tblId, invokedBy) {
     });
 }
 
-export function updateChartData(chartId) {
+export function updateChartData(chartId, tblId) {
     const chartDataElements = get(flux.getState(), [CHART_SPACE_PATH, 'data', chartId, 'chartDataElements']);
     if (chartDataElements) {
         Object.keys(chartDataElements).forEach((id) => {
-            dispatchChartDataFetch({chartId, chartDataElement: chartDataElements[id]});
+            if (chartDataElements[id].tblId === tblId) {
+                dispatchChartDataFetch({chartId, chartDataElement: chartDataElements[id]});
+            }
         });
     }
 }