DM-5334 Table results container

src/fftools/js/fftools.js

@@ -5,18 +5,18 @@
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import {get} from 'lodash';
 
 import {flux, firefly} from 'firefly/Firefly.js';
-import AppDataCntlr, {dispatchUpdateLayout, LO_XPD_MODE} from 'firefly/core/AppDataCntlr.js';
+import AppDataCntlr from 'firefly/core/AppDataCntlr.js';
+import {LO_EXPANDED, LAYOUT_PATH, dispatchUpdateLayout, getExpandedMode} from 'firefly/core/LayoutCntlr.js';
 import Menu from 'firefly/ui/Menu.jsx';
 import Banner from 'firefly/ui/Banner.jsx';
 import SearchPanel from 'firefly/ui/SearchPanel.jsx';
 import {ResultsPanel} from 'firefly/ui/ResultsPanel.jsx';
 import FormPanel from 'firefly/ui/FormPanel.jsx';
 import TestImagePanel from 'firefly/visualize/ui/TestImagePanel.jsx';
 import {ExpandedModeDisplay} from 'firefly/visualize/iv/ExpandedModeDisplay.jsx';
-import {TablePanel} from 'firefly/tables/ui/TablePanel.jsx';
+import {TablesContainer} from 'firefly/tables/ui/TablesContainer.jsx';
 import Validate from 'firefly/util/Validate.js';
 import * as TblUtil from 'firefly/tables/TableUtil.js';
 import {ChartsTableViewPanel} from 'firefly/visualize/ChartsTableViewPanel.jsx';
@@ -30,6 +30,7 @@ import {TableRequest} from 'firefly/tables/TableRequest.js';
 
 import * as TableStatsCntlr from 'firefly/visualize/TableStatsCntlr.js';
 import * as TablesCntlr from 'firefly/tables/TablesCntlr.js';
+import {dispatchTableAdded} from 'firefly/tables/TablesUiCntlr.js';
 import {getRootURL} from 'firefly/util/BrowserUtil.js';
 import {download} from 'firefly/util/WebUtil.js';
 
@@ -57,10 +58,13 @@ function doFileDownload() {
     download(getRootURL() + 'samplehistdata.csv');
 }
 
+const resultGroupId = TblUtil.uniqueTblUiGid();
+
 const App = React.createClass({
 
     propTypes: {
         appData : React.PropTypes.object.isRequired,
+        layout : React.PropTypes.object,
         title   : React.PropTypes.string,
         table   : React.PropTypes.object,
         expandedMode : React.PropTypes.string,
@@ -71,7 +75,6 @@ const App = React.createClass({
     },
 
     onSearchSubmit(request) {
-        console.log(request);
         if (request.srcTable) {
             var treq = TableRequest.newInstance({
                 id:'IpacTableFromSource',
@@ -82,6 +85,7 @@ const App = React.createClass({
 
             TableStatsCntlr.dispatchSetupTblTracking(getCurrentActiveTblId());
             TablesCntlr.dispatchTableFetch(treq);
+            dispatchTableAdded(resultGroupId, treq.tbl_id);
             hideSearchPanel();
         }
     },
@@ -93,7 +97,7 @@ const App = React.createClass({
 
 
     render() {
-        var {appData, title, table, expandedMode} = this.props;
+        var {appData, title, table, expandedMode, layout} = this.props;
 
         const tblId = table ? table.tbl_id : undefined;
 
@@ -112,7 +116,7 @@ const App = React.createClass({
                             visPreview={<VisHeader/> }
                             appTitle='Firefly'
                         />
-                        <SearchPanel show={appData.layoutInfo && appData.layoutInfo.search}>
+                        <SearchPanel show={layout && layout.search}>
                             <FormPanel
                                 width='640px' height='300px'
                                 groupKey='TBL_BY_URL_PANEL'
@@ -149,13 +153,12 @@ const App = React.createClass({
                     </header>
                     <main>
                         <ResultsPanel title={title}
-                            imagePlot = {expandedMode===LO_XPD_MODE.images.mode.expanded ?
+                            imagePlot = {expandedMode===LO_EXPANDED.images.view ?
                                              <ExpandedModeDisplay   key='results-plots-expanded' forceExpandedMode={true}/> :
                                              <TestImagePanel key='results-plots'/> }
                             visToolbar = {<VisToolbar/>}
                             xyPlot = {<ChartsTableViewPanel key='results-xyplots' tblId={tblId}/>
}
-                            tables = {tblId && <TablePanel key='results-tables' tbl_id={tblId}
-                                                expandedMode={expandedMode===LO_XPD_MODE.tables.mode.expanded} selectable={true}/> }
+                            tables = {tblId && <TablesContainer key='results-tables' tbl_ui_gid={resultGroupId} /> }
                             layoutInfo = { appData.layoutInfo }
                         />
                     </main>
@@ -169,9 +172,10 @@ function connector(state) {
     const activeTblId = getCurrentActiveTblId();
     return {
         appData: state[AppDataCntlr.APP_DATA_PATH],
+        layout: state[LAYOUT_PATH],
         title: 'FFTools entry point',
         table : TblUtil.findTblById(activeTblId),
-        expandedMode : get(state, [AppDataCntlr.APP_DATA_PATH,'layoutInfo','mode','expanded'])
+        expandedMode: getExpandedMode()
     };
 }
 const container = flux.createSmartComponent(connector, App);

src/firefly/html/css/global.css

@@ -229,6 +229,24 @@ img, html {
     cursor: pointer;
 }
 
+.btn-close {
+    color: #666;
+    font-size: 10px;
+    display: inline-block;
+    position: relative;
+    text-shadow: 0 1px 0 #fff;
+    width: 12px;
+    height: 14px;
+}
+.btn-close:hover {
+    background-color: #949494;
+    border-radius: 50%;
+    cursor: pointer;
+}
+.btn-close:after {
+    content: '×'; /* UTF-8 symbol */
+}
+
 /*------------------- loading mask ---------------------*/
 .loading-mask {
     position: absolute;

src/firefly/java/edu/caltech/ipac/firefly/server/util/ipactable/DataGroupFilter.java

@@ -155,7 +155,6 @@ private void close() {
                 DataGroupWriter.insertStatus(outf, DataGroupPart.State.COMPLETED);
                 writer.flush();
                 writer.close();
-                IpacTableUtil.sendLoadStatusEvents(meta, outf, rowsFound, DataGroupPart.State.COMPLETED);
             }
         }
     }
@@ -187,6 +186,7 @@ public void run() {
                     } catch (Exception e) {
                         LOG.error(e, "Unable to parse row:" + line);
                     } finally {
+                        IpacTableUtil.sendLoadStatusEvents(meta, outf, rowsFound, DataGroupPart.State.COMPLETED);
                         doclose = true;
                         close();
                     }

src/firefly/java/edu/caltech/ipac/util/IpacTableUtil.java

@@ -389,9 +389,10 @@ public static TableDef getMetaInfo(BufferedReader reader, File src) throws IOExc
      * @param state
      */
     public static void sendLoadStatusEvents(Map<String,String> meta, File outf, int crows, DataGroupPart.State state) {
+        if (meta == null) return;
 
-        String source = meta.get("source") == null ? ServerContext.replaceWithPrefix(outf) : String.valueOf( meta.get("source") );
-        String tblId = meta.get("tbl_id") == null ? source : String.valueOf( meta.get("tbl_id") );
+        String source = ServerContext.replaceWithPrefix(outf);
+        String tblId = String.valueOf( meta.get("tbl_id") );
 
         FluxAction action = new FluxAction("table_space.tableLoadStatus");
         action.setValue(tblId, "tbl_id");

src/firefly/js/core/AppDataCntlr.js

@@ -1,20 +1,18 @@
 /*
  * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
  */
-import {pickBy, isUndefined} from 'lodash';
 
 import {flux} from '../Firefly.js';
 import BrowserCache from '../util/BrowserCache.js';
 import history from './History.js';
-import layoutReducer from './reducers/LayoutReducer.js';
 import menuRenderer from './reducers/MenuReducer.js';
 import strLeft from 'underscore.string/strLeft';
 import strRight from 'underscore.string/strRight';
 import {fetchUrl} from '../util/WebUtil.js';
 import Point, {isValidPoint} from '../visualize/Point.js';
 import {getModuleName} from '../util/WebUtil.js';
 
-const APP_DATA_PATH = 'app-data';
+export const APP_DATA_PATH = 'app_data';
 const SEARCH_TYPE = 'search';
 const TASK= 'task-';
 const APP_PREFERENCES= 'APP_PREFERENCES';
@@ -31,31 +29,12 @@ const REMOVE_TASK_COUNT = `${APP_DATA_PATH}.removeTaskCount`;
 const HIDE_ALL_DIALOGS = `${APP_DATA_PATH}.hideAllDialogs`;
 const ACTIVE_TARGET = `${APP_DATA_PATH}.activeTarget`;
 
-
-const SHOW_SEARCH       = `${APP_DATA_PATH}.searchShow`;
-const UPDATE_LAYOUT     = `${APP_DATA_PATH}.updateLayout`;
-
-const DISPLAY_MODE_CHANGE   = `${APP_DATA_PATH}.displayModeChange`;
-
 const ADD_PREF = `${APP_DATA_PATH}.addPreference`;
 const REMOVE_PREF = `${APP_DATA_PATH}.removePreference`;
 
 //const HELP_LOAD = `${APP_DATA_PATH}.helpLoad`;
 const HELP_LOAD = `overviewHelp`;    //note: consistent with AppMenu.prop
 
-export const LO_STD_MODE = {
-                        triview: {mode: {standard: 'tri-view'}},
-                        image_xyplot: {mode: {standard: 'image-xyplot'}},
-                        image_table: {mode: {standard: 'image-table'}},
-                        xyplot_table: {mode: {standard: 'xyplot-table'}}
-                    };
-export const LO_XPD_MODE = {
-                        tables: {mode: {expanded: 'tables'}},
-                        images: {mode: {expanded: 'images'}},
-                        xy_plots: {mode: {expanded: 'xyPlots'}},
-                        none: {mode: {expanded: undefined}}
-                    };
-
 /*---------------------------- CREATORS ----------------------------*/
 
 const showDialog= function(dialogId,ownerId=undefined) {
@@ -266,9 +245,8 @@ function reducer(state=getInitState(), action={}) {
     var newState = appDataReducer(state, action);
 
     var menu = menuRenderer.reducer(newState.menu, action);
-    var layoutInfo = layoutReducer.reducer(newState.layoutInfo, action);
 
-    return mergeAll(state, newState, {menu, layoutInfo});
+    return mergeAll(state, newState, {menu});
 }
 
 function mergeAll(orig, newval, updates) {
@@ -350,21 +328,6 @@ function dispatchRemovePreference(name) {
     flux.process({type: REMOVE_PREF, payload: {name}});
 }
 
-/**
- * Updates the app-data layoutInfo.  This data is responsible for the layout of the top level components
- * i.e. search panel, results panel...
- * @param search    boolean. show the search panel.  defaults to false.
- * @param results   boolean. show the results panel. defaults to true.
- * @param mode      see constant LO_STD_MODE and LO_XPD_MODE declaration from above
- * @param hasTables boolean.  Table data available.
- * @param hasImages boolean. Image data available.
- * @param hasXyPlots boolean. XY Plot data available.
- */
-export function dispatchUpdateLayout({search, results, mode, hasTables, hasImages, hasXyPlots}) {
-    flux.process({type: UPDATE_LAYOUT, payload: pickBy({search, results, mode, hasTables, hasImages, hasXyPlots}, (v)=>(!isUndefined(v)))});
-}
-
-
 /*---------------------------- EXPORTS -----------------------------*/
 
 export default {
@@ -373,10 +336,7 @@ export default {
     SHOW_DIALOG,
     HIDE_DIALOG,
     APP_DATA_PATH,
-    SHOW_SEARCH,
-    UPDATE_LAYOUT,
     SEARCH_TYPE,
-    DISPLAY_MODE_CHANGE,
     HELP_LOAD,
     reducer,
     loadAppData,
@@ -392,15 +352,14 @@ export default {
     dispatchRemoveTaskCount,
     dispatchAddPreference,
     dispatchRemovePreference,
-    dispatchUpdateLayout,
     makeTaskId,
     getCommandState
 };
 
 /*---------------------------- PRIVATE -----------------------------*/
 
 /**
- * fetches all of the necessary data to construct app-data.
+ * fetches all of the necessary data to construct app_data.
  * set isReady to true once done.
  * @param dispatch
  */

src/firefly/js/core/LayoutCntlr.js

@@ -0,0 +1,90 @@
+/*
+ * License information at https://github.com/Caltech-IPAC/firefly/blob/master/License.txt
+ */
+
+import update from 'react-addons-update';
+import {get, set, has, pickBy, isUndefined} from 'lodash';
+
+import {smartMerge} from '../tables/TableUtil.js';
+import {flux} from '../Firefly.js';
+
+export const LAYOUT_PATH = 'layout';
+
+export const LO_EXPANDED = {
+    mode: 'expanded',
+    tables: {mode: 'expanded', view: 'tables'},
+    images: {mode: 'expanded', view: 'images'},
+    xyPlots: {mode: 'expanded', view: 'xyPlots'},
+    none: {mode: 'expanded', view: undefined}
+};
+
+export const LO_STANDARD = {
+    mode: 'standard',
+    tri_view: { mode: 'standard', view: 'tri_view'},
+    image_xyplot: { mode: 'standard', view: 'image_xyplot'},
+    image_table: { mode: 'standard', view: 'image_table'},
+    xyplot_table: { mode: 'standard', view: 'xyplot_table'}
+};
+
+/*---------------------------- Actions ----------------------------*/
+
+export const UPDATE_LAYOUT     = 'layout.updateLayout';
+export const SET_LAYOUT_MODE   = 'layout.setLayoutMode';
+
+
+/*---------------------------- Reducers ----------------------------*/
+
+export function reducer(state={}, action={}) {
+
+    switch (action.type) {
+        case UPDATE_LAYOUT :
+            return smartMerge(state, action.payload);
+
+        case SET_LAYOUT_MODE :
+            const {mode, view} = action.payload;
+            if (!has(state, ['mode', mode])) {
+                set(state, ['mode', mode], undefined);
+            }
+            return update(state, {mode: {[mode]: {$set: view}}});
+
+        default:
+            return state;
+    }
+
+}
+
+
+
+/*---------------------------- DISPATCHERS -----------------------------*/
+/**
+ * Updates the app_data layoutInfo.  This data is responsible for the layout of the top level components
+ * i.e. search panel, results panel...
+ * @param search    boolean. show the search panel.  defaults to false.
+ * @param results   boolean. show the results panel. defaults to true.
+ * @param hasTables boolean.  Table data available.
+ * @param hasImages boolean. Image data available.
+ * @param hasXyPlots boolean. XY Plot data available.
+ */
+export function dispatchUpdateLayout({search, results, hasTables, hasImages, hasXyPlots}) {
+    flux.process({type: UPDATE_LAYOUT, payload: pickBy({search, results, hasTables, hasImages, hasXyPlots}, (v)=>(!isUndefined(v)))});
+}
+
+/**
+ * see AppDataUtil.LO_MODE for available options.
+ * @param mode standard or expanded
+ * @param view available values from the selected mode.
+ */
+export function dispatchSetLayoutMode({mode=LO_STANDARD.mode, view}) {
+    flux.process({type: SET_LAYOUT_MODE, payload: {mode, view}});
+}
+
+
+
+/*------------------------- Util functions -------------------------*/
+export function getExpandedMode() {
+    return get(flux.getState(), ['layout','mode','expanded']);
+}
+
+export function getStandardMode() {
+    return get(flux.getState(), ['layout','mode','standard']);
+}

src/firefly/js/core/ReduxFlux.js

@@ -10,6 +10,7 @@ import { createStore, applyMiddleware, combineReducers } from 'redux';
 import { connect, Provider } from 'react-redux';
 import { actionSideEffectMiddleware } from '../side-effects';
 import AppDataCntlr  from './AppDataCntlr.js';
+import {LAYOUT_PATH, reducer as layoutReducer}  from './LayoutCntlr.js';
 import FieldGroupCntlr from '../fieldGroup/FieldGroupCntlr.js';
 import ImagePlotCntlr, {IMAGE_PLOT_KEY,
                         plotImageActionCreator, zoomActionCreator,
@@ -54,6 +55,7 @@ const drawLayerFactory= DrawLayerFactory.makeFactory(ActiveTarget,SelectArea,Dis
  */
 const reducers = {
     [AppDataCntlr.APP_DATA_PATH]: AppDataCntlr.reducer,
+    [LAYOUT_PATH]: layoutReducer,
     [VisMouseCntlr.VIS_MOUSE_KEY]: VisMouseCntlr.reducer,
     [FieldGroupCntlr.FIELD_GROUP_KEY]: FieldGroupCntlr.reducer,
     [IMAGE_PLOT_KEY]: ImagePlotCntlr.reducer,