@deephaven/dashboard-core-plugins 0.22.3-beta.18 → 0.22.3-beta.21

package/dist/linker/Linker.js

@@ -1,9 +1,6 @@
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import shortid from 'shortid';
@@ -13,6 +10,7 @@ import { ThemeExport } from '@deephaven/components';
 import { LayoutUtils, PanelEvent } from '@deephaven/dashboard';
 import { DateTimeColumnFormatter, DateUtils, TableUtils } from '@deephaven/jsapi-utils';
 import Log from '@deephaven/log';
+import { Type as FilterType } from '@deephaven/filters';
 import { getActiveTool, getTimeZone, setActiveTool as setActiveToolAction } from '@deephaven/redux';
 import { getIsolatedLinkerPanelIdForDashboard, getLinksForDashboard, setDashboardLinks as setDashboardLinksAction, addDashboardLinks as addDashboardLinksAction, deleteDashboardLinks as deleteDashboardLinksAction, setDashboardIsolatedLinkerPanelId as setDashboardIsolatedLinkerPanelIdAction, setDashboardColumnSelectionValidator as setDashboardColumnSelectionValidatorAction } from "../redux/index.js";
 import ToolType from "./ToolType.js";
@@ -20,14 +18,12 @@ import { ChartEvent, IrisGridEvent, InputFilterEvent } from "../events/index.js"
 import LinkerOverlayContent from "./LinkerOverlayContent.js";
 import LinkerUtils, { isLinkablePanel } from "./LinkerUtils.js";
 var log = Log.module('Linker');
-
 var mapState = (state, ownProps) => ({
   activeTool: getActiveTool(state),
   isolatedLinkerPanelId: getIsolatedLinkerPanelIdForDashboard(state, ownProps.localDashboardId),
   links: getLinksForDashboard(state, ownProps.localDashboardId),
   timeZone: getTimeZone(state)
 });
-
 var connector = connect(mapState, {
   setActiveTool: setActiveToolAction,
   setDashboardLinks: setDashboardLinksAction,
@@ -39,26 +35,20 @@ var connector = connect(mapState, {
 export class Linker extends Component {
   constructor(props) {
     super(props);
-
     _defineProperty(this, "getCachedLinks", memoize((links, linkInProgress, isolateForPanelId) => {
       var combinedLinks = [...links];
-
       if (linkInProgress != null && linkInProgress.start != null) {
         combinedLinks.push(linkInProgress);
       }
-
       if (isolateForPanelId !== undefined) {
         return combinedLinks.filter(link => {
           var _link$start, _link$end;
-
           return (link === null || link === void 0 ? void 0 : (_link$start = link.start) === null || _link$start === void 0 ? void 0 : _link$start.panelId) === isolateForPanelId || (link === null || link === void 0 ? void 0 : (_link$end = link.end) === null || _link$end === void 0 ? void 0 : _link$end.panelId) === isolateForPanelId || (link === null || link === void 0 ? void 0 : link.end) == null;
         });
-      } // Show all links in regular linker mode -- both isolated and not
-
-
+      }
+      // Show all links in regular linker mode -- both isolated and not
       return combinedLinks;
     }));
-
     this.handleCancel = this.handleCancel.bind(this);
     this.handleDone = this.handleDone.bind(this);
     this.handlePanelCloned = this.handlePanelCloned.bind(this);
@@ -68,17 +58,19 @@ export class Linker extends Component {
     this.handleLayoutStateChanged = this.handleLayoutStateChanged.bind(this);
     this.handleAllLinksDeleted = this.handleAllLinksDeleted.bind(this);
     this.handleLinkDeleted = this.handleLinkDeleted.bind(this);
+    this.handleLinksUpdated = this.handleLinksUpdated.bind(this);
     this.handleChartColumnSelect = this.handleChartColumnSelect.bind(this);
     this.handleGridColumnSelect = this.handleGridColumnSelect.bind(this);
     this.handleUpdateValues = this.handleUpdateValues.bind(this);
     this.handleStateChange = this.handleStateChange.bind(this);
     this.handleExited = this.handleExited.bind(this);
+    this.handleLinkSelected = this.handleLinkSelected.bind(this);
     this.isColumnSelectionValid = this.isColumnSelectionValid.bind(this);
     this.state = {
-      linkInProgress: undefined
+      linkInProgress: undefined,
+      selectedIds: new Set()
     };
   }
-
   componentDidMount() {
     var {
       layout
@@ -86,34 +78,28 @@ export class Linker extends Component {
     this.startListening(layout);
     this.updateSelectionValidators();
   }
-
   componentDidUpdate(prevProps) {
     var {
       activeTool,
       layout
     } = this.props;
-
     if (layout !== prevProps.layout) {
       this.stopListening(prevProps.layout);
       this.startListening(layout);
     }
-
     if (activeTool !== prevProps.activeTool) {
       this.updateSelectionValidators();
     }
   }
-
   componentDidCatch(error, info) {
     log.error('componentDidCatch', error, info);
   }
-
   componentWillUnmount() {
     var {
       layout
     } = this.props;
     this.stopListening(layout);
   }
-
   startListening(layout) {
     layout.on('stateChanged', this.handleLayoutStateChanged);
     var {
@@ -128,7 +114,6 @@ export class Linker extends Component {
     eventHub.on(InputFilterEvent.COLUMNS_CHANGED, this.handleColumnsChanged);
     eventHub.on(PanelEvent.CLOSED, this.handlePanelClosed);
   }
-
   stopListening(layout) {
     layout.off('stateChanged', this.handleLayoutStateChanged);
     var {
@@ -143,38 +128,33 @@ export class Linker extends Component {
     eventHub.off(InputFilterEvent.COLUMNS_CHANGED, this.handleColumnsChanged);
     eventHub.off(PanelEvent.CLOSED, this.handlePanelClosed);
   }
-
   handleCancel() {
     var {
       linkInProgress
     } = this.state;
-
     if (linkInProgress == null) {
       var {
         setActiveTool
       } = this.props;
       setActiveTool(ToolType.DEFAULT);
     }
-
     this.setState({
       linkInProgress: undefined
     });
   }
-
   handleDone() {
     var {
       setActiveTool
     } = this.props;
     setActiveTool(ToolType.DEFAULT);
     this.setState({
-      linkInProgress: undefined
+      linkInProgress: undefined,
+      selectedIds: new Set()
     });
   }
-
   handleChartColumnSelect(panel, column) {
     this.columnSelected(panel, column, true);
   }
-
   handleFilterColumnSelect(panel, column) {
     log.debug('handleFilterColumnSelect', this.isOverlayShown());
     var {
@@ -186,43 +166,36 @@ export class Linker extends Component {
     var panelId = LayoutUtils.getIdFromPanel(panel);
     var panelLinks = links.filter(link => {
       var _link$start2, _link$end2;
-
       return ((_link$start2 = link.start) === null || _link$start2 === void 0 ? void 0 : _link$start2.panelId) === panelId || ((_link$end2 = link.end) === null || _link$end2 === void 0 ? void 0 : _link$end2.panelId) === panelId;
     });
-
     if (!this.isOverlayShown() && panelId != null) {
       // Initial click on the filter source button with linker inactive
       // Show linker in isolated mode for panel
       setActiveTool(ToolType.LINKER);
       setDashboardIsolatedLinkerPanelId(localDashboardId, panelId);
-
       if (panelLinks.length === 0) {
         // Source not linked - start new link in isolated linker mode
         // Need to pass panelId for overrideIsolatedLinkerPanelId
         // as redux prop update at this point not yet propagated
         this.columnSelected(panel, column, true, panelId);
       }
-
       return;
-    } // Filter source clicked with linker active
-
+    }
 
+    // Filter source clicked with linker active
     this.columnSelected(panel, column, true);
   }
-
   handleColumnsChanged(panel, columns) {
     log.debug('handleColumnsChanged', panel, columns);
     var {
       links
     } = this.props;
     var panelId = LayoutUtils.getIdFromPanel(panel);
-
     if (panelId == null) {
       log.error('Invalid panelId', panel);
       return;
-    } // Delete links that start or end on non-existent column in the updated panel
-
-
+    }
+    // Delete links that start or end on non-existent column in the updated panel
     var linksToDelete = links.filter(_ref => {
       var {
         start,
@@ -232,10 +205,10 @@ export class Linker extends Component {
     });
     this.deleteLinks(linksToDelete);
   }
-
   handleGridColumnSelect(panel, column) {
     this.columnSelected(panel, column);
   }
+
   /**
    * Track a column selection and build the link from it.
    * @param panel The panel component that is the source for the column selection
@@ -243,16 +216,12 @@ export class Linker extends Component {
    * @param isAlwaysEndPoint True if the selection is always the end point, even if it's the first column selected. Defaults to false.
    * @param overrideIsolatedLinkerPanelId isolatedLinkerPanelId to use when method is called before prop changes propagate
    */
-
-
   columnSelected(panel, column) {
     var isAlwaysEndPoint = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
     var overrideIsolatedLinkerPanelId = arguments.length > 3 ? arguments[3] : undefined;
-
     if (overrideIsolatedLinkerPanelId === undefined && !this.isOverlayShown()) {
       return;
     }
-
     var {
       isolatedLinkerPanelId
     } = this.props;
@@ -260,17 +229,14 @@ export class Linker extends Component {
       linkInProgress
     } = this.state;
     var panelId = LayoutUtils.getIdFromPanel(panel);
-
     if (panelId == null) {
       return;
     }
-
     var panelComponent = LayoutUtils.getComponentNameFromPanel(panel);
     var {
       name: columnName,
       type: columnType
     } = column;
-
     if (linkInProgress == null || linkInProgress.start == null) {
       var newLink = {
         id: shortid.generate(),
@@ -289,6 +255,9 @@ export class Linker extends Component {
         linkInProgress: newLink
       });
     } else {
+      var {
+        links
+      } = this.props;
       var {
         start,
         id,
@@ -301,22 +270,17 @@ export class Linker extends Component {
         columnType
       };
       var type = LinkerUtils.getLinkType(isReversed !== undefined && isReversed ? end : start, isReversed !== undefined && isReversed ? start : end, overrideIsolatedLinkerPanelId !== null && overrideIsolatedLinkerPanelId !== void 0 ? overrideIsolatedLinkerPanelId : isolatedLinkerPanelId);
-
       switch (type) {
         case 'invalid':
           log.debug('Ignore invalid link connection', linkInProgress, end);
           return;
-
         case 'filterSource':
           {
             // filterSource links have a limit of 1 link per target
             // New link validation passed, delete existing links before adding the new one
-            var {
-              links
-            } = this.props;
-            var existingLinkPanelId = isReversed !== undefined && isReversed ? start.panelId : end.panelId; // In cases with multiple targets per panel (i.e. chart filters)
+            var existingLinkPanelId = isReversed !== undefined && isReversed ? start.panelId : end.panelId;
+            // In cases with multiple targets per panel (i.e. chart filters)
             // links would have to be filtered by panelId and columnName and columnType
-
             var linksToDelete = links.filter(_ref2 => {
               var {
                 end: panelLinkEnd
@@ -326,22 +290,23 @@ export class Linker extends Component {
             this.deleteLinks(linksToDelete);
             break;
           }
-
         case 'tableLink':
           // No-op
           break;
-      } // Create a completed link from link in progress
-
+      }
 
+      // Create a completed link from link in progress
       var _newLink = {
         start: isReversed !== undefined && isReversed ? end : start,
         end: isReversed !== undefined && isReversed ? start : end,
         id,
-        type
+        type,
+        operator: FilterType.eq
       };
       log.info('creating link', _newLink);
       this.setState({
-        linkInProgress: undefined
+        linkInProgress: undefined,
+        selectedIds: new Set([id])
       }, () => {
         // Adding link after updating state
         // otherwise both new link and linkInProgress could be rendered at the same time
@@ -350,12 +315,10 @@ export class Linker extends Component {
       });
     }
   }
-
   unsetFilterValueForLink(link) {
     var {
       panelManager
     } = this.props;
-
     if (link.end) {
       var {
         end
@@ -366,7 +329,6 @@ export class Linker extends Component {
         columnType
       } = end;
       var endPanel = panelManager.getOpenedPanelById(panelId);
-
       if (!endPanel) {
         log.debug('endPanel no longer exists, ignoring unsetFilterValue', panelId);
       } else if (isLinkablePanel(endPanel)) {
@@ -376,20 +338,18 @@ export class Linker extends Component {
       }
     }
   }
+
   /**
    * Set filters for a given panel ID
    * @param panelId ID of panel to set filters on
    * @param filterMap Map of column name to column type, text, and value
    */
-
-
   setPanelFilterMap(panelId, filterMap) {
     log.debug('Set filter data for panel:', panelId, filterMap);
     var {
       panelManager
     } = this.props;
     var panel = panelManager.getOpenedPanelById(panelId);
-
     if (!panel) {
       log.debug('panel no longer exists, ignoring setFilterMap', panelId);
     } else if (isLinkablePanel(panel)) {
@@ -398,7 +358,6 @@ export class Linker extends Component {
       log.debug('panel.setFilterMap not implemented', panelId, panel);
     }
   }
-
   addLinks(links) {
     var {
       addDashboardLinks,
@@ -406,14 +365,12 @@ export class Linker extends Component {
     } = this.props;
     addDashboardLinks(localDashboardId, links);
   }
-
   deleteLinks(links) {
     var clearAll = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
     var {
       localDashboardId
     } = this.props;
     links.forEach(link => this.unsetFilterValueForLink(link));
-
     if (clearAll) {
       var {
         setDashboardLinks
@@ -431,67 +388,62 @@ export class Linker extends Component {
       }));
     }
   }
-
   handleAllLinksDeleted() {
     var {
       links,
       isolatedLinkerPanelId
     } = this.props;
-
     if (isolatedLinkerPanelId === undefined) {
       this.deleteLinks(links, true);
     } else {
       var isolatedLinks = links.filter(link => {
         var _link$start3, _link$end3;
-
         return (link === null || link === void 0 ? void 0 : (_link$start3 = link.start) === null || _link$start3 === void 0 ? void 0 : _link$start3.panelId) === isolatedLinkerPanelId || (link === null || link === void 0 ? void 0 : (_link$end3 = link.end) === null || _link$end3 === void 0 ? void 0 : _link$end3.panelId) === isolatedLinkerPanelId;
       });
       this.deleteLinks(isolatedLinks);
     }
-
     this.setState({
       linkInProgress: undefined
     });
   }
-
   handleLinkDeleted(linkId) {
     var {
       links
     } = this.props;
     var link = links.find(l => l.id === linkId);
-
     if (link) {
       this.deleteLinks([link]);
     } else {
       log.error('Unable to find link to delete', linkId);
     }
   }
-
   handleUpdateValues(panel, dataMap) {
     var panelId = LayoutUtils.getIdFromPanel(panel);
     var {
       links,
       timeZone
-    } = this.props; // Map of panel ID to filterMap
-
-    var panelFilterMap = new Map(); // Instead of setting filters one by one for each link,
+    } = this.props;
+    // Map of panel ID to filterMap
+    var panelFilterMap = new Map();
+    // Instead of setting filters one by one for each link,
     // combine them so they could be set in a single call per target panel
-
     for (var i = 0; i < links.length; i += 1) {
       var {
         start,
-        end
+        end,
+        operator
       } = links[i];
-
       if (start.panelId === panelId && end != null) {
         var {
           panelId: endPanelId,
           columnName,
           columnType
-        } = end; // Map of column name to column type and filter value
-
+        } = end;
+        // Map of column name to column type and filter value
         var filterMap = panelFilterMap.has(endPanelId) ? panelFilterMap.get(endPanelId) : new Map();
+        var filterList = filterMap.has(columnName) === true ? filterMap.get(columnName).filterList : [];
         var {
+          visibleIndex: startColumnIndex,
           isExpandable,
           isGrouped
         } = dataMap[start.columnName];
@@ -499,66 +451,75 @@ export class Linker extends Component {
           value
         } = dataMap[start.columnName];
         var text = "".concat(value);
-
         if (value === null && isExpandable && isGrouped) {
           // Clear filter on empty rollup grouping columns
           value = undefined;
         }
-
         if (columnType != null && TableUtils.isDateType(columnType)) {
           var dateFilterFormatter = new DateTimeColumnFormatter({
             timeZone,
             showTimeZone: false,
             showTSeparator: true,
             defaultDateTimeFormatString: DateUtils.FULL_DATE_FORMAT
-          }); // The values are Dates for dateType values, not string like everything else
-
+          });
+          // The values are Dates for dateType values, not string like everything else
           text = dateFilterFormatter.format(value);
         }
-
+        var filter = {
+          operator,
+          text,
+          value,
+          startColumnIndex
+        };
+        filterList.push(filter);
         filterMap.set(columnName, {
           columnType,
-          text,
-          value
+          filterList
         });
         panelFilterMap.set(endPanelId, filterMap);
       }
-    } // Apply combined filters to all target panels
-
+    }
 
+    // Apply combined filters to all target panels
     panelFilterMap.forEach((filterMap, endPanelId) => {
       this.setPanelFilterMap(endPanelId, filterMap);
     });
   }
-
   handlePanelCloned(panel, cloneConfig) {
     var {
       links
     } = this.props;
     var panelId = LayoutUtils.getIdFromPanel(panel);
     var cloneId = cloneConfig.id;
-
     if (panelId != null) {
       var linksToAdd = LinkerUtils.cloneLinksForPanel(links, panelId, cloneId);
       this.addLinks(linksToAdd);
     }
   }
-
   handlePanelClosed(panelId) {
     // Delete links on PanelEvent.CLOSED instead of UNMOUNT
     // because the panels can get unmounted on errors and we want to keep the links if that happens
     log.debug("Panel ".concat(panelId, " closed, deleting links."));
     this.deleteLinksForPanelId(panelId);
   }
-
+  handleLinkSelected(linkId) {
+    this.setState({
+      selectedIds: new Set([linkId])
+    });
+  }
+  handleLinksUpdated(newLinks) {
+    var {
+      localDashboardId,
+      setDashboardLinks
+    } = this.props;
+    setDashboardLinks(localDashboardId, newLinks);
+  }
   handleLayoutStateChanged() {
     this.forceUpdate();
   }
-
   handleStateChange() {
     this.forceUpdate();
   }
-
   handleExited() {
     // Has to be done after linker exit animation to avoid flashing non-isolated links
     var {
@@ -567,17 +528,15 @@ export class Linker extends Component {
     } = this.props;
     setDashboardIsolatedLinkerPanelId(localDashboardId, undefined);
   }
+
   /**
    * Delete all links for a provided panel ID. Needs to be done whenever a panel is closed or unmounted.
    * @param panelId The panel ID to delete links for
    */
-
-
   deleteLinksForPanelId(panelId) {
     var {
       links
     } = this.props;
-
     for (var i = 0; i < links.length; i += 1) {
       var link = links[i];
       var {
@@ -585,38 +544,32 @@ export class Linker extends Component {
         end,
         id
       } = link;
-
       if (start.panelId === panelId || (end === null || end === void 0 ? void 0 : end.panelId) === panelId) {
         this.handleLinkDeleted(id);
       }
     }
   }
-
   isOverlayShown() {
     var {
       activeTool
     } = this.props;
     return activeTool === ToolType.LINKER;
   }
-
   updateSelectionValidators() {
     var {
       activeTool,
       setDashboardColumnSelectionValidator,
       localDashboardId
     } = this.props;
-
     switch (activeTool) {
       case ToolType.LINKER:
         setDashboardColumnSelectionValidator(localDashboardId, this.isColumnSelectionValid);
         break;
-
       default:
         setDashboardColumnSelectionValidator(localDashboardId, undefined);
         break;
     }
   }
-
   updateLinkInProgressType(linkInProgress) {
     var type = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'invalid';
     this.setState({
@@ -625,35 +578,31 @@ export class Linker extends Component {
       })
     });
   }
-
   isColumnSelectionValid(panel, tableColumn) {
     var {
       linkInProgress
     } = this.state;
     var {
       isolatedLinkerPanelId
-    } = this.props; // Link not started yet - no need to update type
+    } = this.props;
 
+    // Link not started yet - no need to update type
     if ((linkInProgress === null || linkInProgress === void 0 ? void 0 : linkInProgress.start) == null) {
       return true;
     }
-
     if (tableColumn == null) {
       // Link started, end point is not a valid target
       this.updateLinkInProgressType(linkInProgress);
       return false;
     }
-
     var {
       isReversed,
       start
     } = linkInProgress;
     var panelId = LayoutUtils.getIdFromPanel(panel);
-
     if (panelId == null) {
       return false;
     }
-
     var end = {
       panelId,
       panelComponent: LayoutUtils.getComponentNameFromPanel(panel),
@@ -664,7 +613,6 @@ export class Linker extends Component {
     this.updateLinkInProgressType(linkInProgress, type);
     return type !== 'invalid';
   }
-
   render() {
     var {
       links,
@@ -672,12 +620,13 @@ export class Linker extends Component {
       panelManager
     } = this.props;
     var {
-      linkInProgress
+      linkInProgress,
+      selectedIds
     } = this.state;
     var isLinkOverlayShown = this.isOverlayShown();
     var disabled = linkInProgress != null && linkInProgress.start != null;
     var linkerOverlayMessage = isolatedLinkerPanelId === undefined ? 'Click a column source, then click a column target to create a filter link. Remove a filter link by clicking again to erase. Click done when finished.' : 'Create a link between the source column button and a table column by clicking on one, then the other. Remove the link by clicking it directly. Click done when finished.';
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(CSSTransition, {
+    return /*#__PURE__*/React.createElement(CSSTransition, {
       in: isLinkOverlayShown,
       timeout: ThemeExport.transitionMs,
       classNames: "fade",
@@ -688,14 +637,16 @@ export class Linker extends Component {
       disabled: disabled,
       panelManager: panelManager,
       links: this.getCachedLinks(links, linkInProgress, isolatedLinkerPanelId),
+      selectedIds: selectedIds,
       messageText: linkerOverlayMessage,
+      onLinkSelected: this.handleLinkSelected,
       onLinkDeleted: this.handleLinkDeleted,
       onAllLinksDeleted: this.handleAllLinksDeleted,
+      onLinksUpdated: this.handleLinksUpdated,
       onDone: this.handleDone,
       onCancel: this.handleCancel
-    })));
+    }));
   }
-
 }
 export default connector(Linker);
 //# sourceMappingURL=Linker.js.map