@deephaven/dashboard-core-plugins 0.43.0 → 0.44.0

package/dist/panels/ChartPanel.js

@@ -0,0 +1,971 @@
+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) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+import React, { Component } from 'react';
+import classNames from 'classnames';
+import memoize from 'memoize-one';
+import { connect } from 'react-redux';
+import { CSSTransition } from 'react-transition-group';
+import debounce from 'lodash.debounce';
+import { Chart, ChartUtils, isFigureChartModel } from '@deephaven/chart';
+import { getOpenedPanelMapForDashboard, LayoutUtils } from '@deephaven/dashboard';
+import { IrisGridUtils } from '@deephaven/iris-grid';
+import { ThemeExport } from '@deephaven/components';
+import Log from '@deephaven/log';
+import { getActiveTool, getSettings, setActiveTool as setActiveToolAction } from '@deephaven/redux';
+import { assertNotNull, Pending, PromiseUtils, TextUtils } from '@deephaven/utils';
+import WidgetPanel from "./WidgetPanel.js";
+import ToolType from "../linker/ToolType.js";
+import { InputFilterEvent, ChartEvent } from "../events/index.js";
+import { getColumnSelectionValidatorForDashboard, getInputFiltersForDashboard, getIsolatedLinkerPanelIdForDashboard, getLinksForDashboard, getTableMapForDashboard, setDashboardIsolatedLinkerPanelId as setDashboardIsolatedLinkerPanelIdAction } from "../redux/index.js";
+import ChartFilterOverlay from "./ChartFilterOverlay.js";
+import ChartColumnSelectorOverlay from "./ChartColumnSelectorOverlay.js";
+import "./ChartPanel.css";
+import { isChartPanelTableMetadata } from "./ChartPanelUtils.js";
+var log = Log.module('ChartPanel');
+var UPDATE_MODEL_DEBOUNCE = 150;
+function hasInputFilter(panel) {
+  return panel.inputFilters != null;
+}
+function hasPanelState(panel) {
+  return panel.panelState != null;
+}
+export class ChartPanel extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "panelContainer", void 0);
+    _defineProperty(this, "chart", void 0);
+    _defineProperty(this, "pending", void 0);
+    _defineProperty(this, "getWaitingInputMap", memoize((isFilterRequired, columnMap, filterMap) => {
+      if (!isFilterRequired) {
+        return new Map();
+      }
+      var waitingInputMap = new Map(columnMap);
+      filterMap.forEach((filter, name) => {
+        waitingInputMap.delete(name);
+      });
+      return waitingInputMap;
+    }));
+    _defineProperty(this, "getWaitingFilterMap", memoize((isFilterRequired, columnMap, filterMap, linkedColumnMap, inputFilterMap) => {
+      if (!isFilterRequired) {
+        return new Map();
+      }
+      var waitingFilterMap = new Map(columnMap);
+      filterMap.forEach((filter, name) => {
+        waitingFilterMap.delete(name);
+      });
+      inputFilterMap.forEach((value, name) => {
+        waitingFilterMap.delete(name);
+      });
+      linkedColumnMap.forEach((column, name) => {
+        waitingFilterMap.delete(name);
+      });
+      return waitingFilterMap;
+    }));
+    _defineProperty(this, "getInputFilterColumnMap", memoize((columnMap, inputFilters) => {
+      var inputFilterMap = new Map();
+      for (var i = 0; i < inputFilters.length; i += 1) {
+        var inputFilter = inputFilters[i];
+        var {
+          name,
+          type
+        } = inputFilter;
+        var column = columnMap.get(name);
+        if (column != null && column.type === type) {
+          inputFilterMap.set(name, inputFilter);
+        }
+      }
+      return inputFilterMap;
+    }));
+    _defineProperty(this, "getLinkedColumnMap", memoize((columnMap, links) => {
+      var linkedColumnMap = new Map();
+      var panelId = LayoutUtils.getIdFromPanel(this);
+      for (var i = 0; i < links.length; i += 1) {
+        var link = links[i];
+        var columnName = null;
+        if (link.start != null && link.start.panelId === panelId && columnMap.has(link.start.columnName)) {
+          columnName = link.start.columnName;
+        } else if (link.end && link.end.panelId === panelId && columnMap.has(link.end.columnName)) {
+          columnName = link.end.columnName;
+        }
+        if (columnName != null && columnMap.has(columnName)) {
+          var column = columnMap.get(columnName);
+          assertNotNull(column);
+          linkedColumnMap.set(columnName, column);
+        }
+      }
+      return linkedColumnMap;
+    }));
+    _defineProperty(this, "getSelectorColumns", memoize((columnMap, linkedColumnMap, columnSelectionValidator) => Array.from(columnMap.values()).map(column => ({
+      name: column.name,
+      type: column.type,
+      isValid: columnSelectionValidator ? columnSelectionValidator(this, column) : false,
+      isActive: linkedColumnMap.has(column.name)
+    }))));
+    this.handleColumnSelected = this.handleColumnSelected.bind(this);
+    this.handleColumnMouseEnter = this.handleColumnMouseEnter.bind(this);
+    this.handleColumnMouseLeave = this.handleColumnMouseLeave.bind(this);
+    this.handleDisconnect = this.handleDisconnect.bind(this);
+    this.handleReconnect = this.handleReconnect.bind(this);
+    this.handleFilterAdd = this.handleFilterAdd.bind(this);
+    this.handleHide = this.handleHide.bind(this);
+    this.handleError = this.handleError.bind(this);
+    this.handleLoadError = this.handleLoadError.bind(this);
+    this.handleLoadSuccess = this.handleLoadSuccess.bind(this);
+    this.handleResize = this.handleResize.bind(this);
+    this.handleSettingsChanged = this.handleSettingsChanged.bind(this);
+    this.handleOpenLinker = this.handleOpenLinker.bind(this);
+    this.handleShow = this.handleShow.bind(this);
+    this.handleSourceColumnChange = this.handleSourceColumnChange.bind(this);
+    this.handleSourceFilterChange = this.handleSourceFilterChange.bind(this);
+    this.handleSourceSortChange = this.handleSourceSortChange.bind(this);
+    this.handleTabBlur = this.handleTabBlur.bind(this);
+    this.handleTabFocus = this.handleTabFocus.bind(this);
+    this.handleUpdate = this.handleUpdate.bind(this);
+    this.updateModelFromSource = debounce(this.updateModelFromSource.bind(this), UPDATE_MODEL_DEBOUNCE);
+    this.handleClearAllFilters = this.handleClearAllFilters.bind(this);
+    this.panelContainer = /*#__PURE__*/React.createRef();
+    this.chart = /*#__PURE__*/React.createRef();
+    this.pending = new Pending();
+    var {
+      metadata,
+      panelState
+    } = props;
+    var {
+      filterValueMap = [],
+      settings = {}
+    } = panelState !== null && panelState !== void 0 ? panelState : {};
+    this.state = {
+      settings,
+      error: undefined,
+      isActive: false,
+      isDisconnected: false,
+      isLoading: false,
+      isLoaded: false,
+      isLinked: metadata != null && isChartPanelTableMetadata(metadata) && metadata.settings.isLinked,
+      // Map of all non-empty filters applied to the chart.
+      // Initialize the filter map to the previously stored values; input filters will be applied after load.
+      filterMap: new Map(filterValueMap),
+      // Map of filter values set from links, stored in panelState.
+      // Combined with inputFilters to get applied filters (filterMap).
+      filterValueMap: new Map(filterValueMap),
+      model: undefined,
+      columnMap: new Map(),
+      // eslint-disable-next-line react/no-unused-state
+      panelState
+    };
+  }
+  componentDidMount() {
+    if (!this.isHidden()) {
+      this.setState({
+        isActive: true
+      });
+      this.initModel();
+    }
+  }
+  componentDidUpdate(prevProps, prevState) {
+    var {
+      inputFilters,
+      source
+    } = this.props;
+    var {
+      columnMap,
+      model,
+      filterMap,
+      filterValueMap,
+      isLinked,
+      settings
+    } = this.state;
+    if (!model) {
+      return;
+    }
+    if (columnMap !== prevState.columnMap) {
+      this.pruneFilterMaps();
+    }
+    if (inputFilters !== prevProps.inputFilters) {
+      this.updateChangedInputFilters(inputFilters, prevProps.inputFilters);
+    }
+    if (filterMap !== prevState.filterMap) {
+      this.updateFilters();
+    } else if (filterValueMap !== prevState.filterValueMap) {
+      this.updatePanelState();
+    }
+    if (settings !== prevState.settings && isFigureChartModel(model)) {
+      model.updateSettings(settings);
+      this.updatePanelState();
+    }
+    if (isLinked !== prevState.isLinked) {
+      if (source) {
+        if (isLinked) {
+          this.startListeningToSource(source);
+          this.updateModelFromSource();
+        } else {
+          this.stopListeningToSource(source);
+        }
+      }
+    } else if (isLinked && source !== prevProps.source) {
+      if (prevProps.source) {
+        this.stopListeningToSource(prevProps.source);
+      }
+      if (source) {
+        this.startListeningToSource(source);
+        this.updateModelFromSource();
+      }
+    }
+  }
+  componentWillUnmount() {
+    this.pending.cancel();
+    var {
+      model
+    } = this.state;
+    var {
+      source
+    } = this.props;
+    if (model != null && source) {
+      this.stopListeningToSource(source);
+    }
+  }
+  initModel() {
+    this.setState({
+      isLoading: true,
+      isLoaded: false,
+      error: undefined
+    });
+    var {
+      makeModel
+    } = this.props;
+    this.pending.add(makeModel(), resolved => {
+      resolved.close();
+    }).then(this.handleLoadSuccess, this.handleLoadError);
+  }
+  startListeningToSource(table) {
+    log.debug('startListeningToSource', table);
+    var {
+      model
+    } = this.state;
+    assertNotNull(model);
+    var {
+      dh
+    } = model;
+    table.addEventListener(dh.Table.EVENT_CUSTOMCOLUMNSCHANGED, this.handleSourceColumnChange);
+    table.addEventListener(dh.Table.EVENT_FILTERCHANGED, this.handleSourceFilterChange);
+    table.addEventListener(dh.Table.EVENT_SORTCHANGED, this.handleSourceSortChange);
+  }
+  stopListeningToSource(table) {
+    log.debug('stopListeningToSource', table);
+    var {
+      model
+    } = this.state;
+    assertNotNull(model);
+    var {
+      dh
+    } = model;
+    table.removeEventListener(dh.Table.EVENT_CUSTOMCOLUMNSCHANGED, this.handleSourceColumnChange);
+    table.removeEventListener(dh.Table.EVENT_FILTERCHANGED, this.handleSourceFilterChange);
+    table.removeEventListener(dh.Table.EVENT_SORTCHANGED, this.handleSourceSortChange);
+  }
+  loadModelIfNecessary() {
+    var {
+      isActive,
+      isLoaded,
+      isLoading
+    } = this.state;
+    if (isActive && !isLoaded && !isLoading) {
+      this.initModel();
+    }
+  }
+  isHidden() {
+    var {
+      glContainer
+    } = this.props;
+    var {
+      isHidden
+    } = glContainer;
+    return isHidden;
+  }
+  handleColumnSelected(columnName) {
+    var {
+      glEventHub
+    } = this.props;
+    var {
+      columnMap
+    } = this.state;
+    glEventHub.emit(ChartEvent.COLUMN_SELECTED, this, columnMap.get(columnName));
+  }
+  handleColumnMouseEnter(_ref) {
+    var {
+      type,
+      name
+    } = _ref;
+    var {
+      columnSelectionValidator
+    } = this.props;
+    log.debug('handleColumnMouseEnter', columnSelectionValidator, type, name);
+    if (!columnSelectionValidator) {
+      return;
+    }
+    columnSelectionValidator(this, {
+      type,
+      name
+    });
+  }
+  handleColumnMouseLeave() {
+    var {
+      columnSelectionValidator
+    } = this.props;
+    log.debug('handleColumnMouseLeave', columnSelectionValidator);
+    if (!columnSelectionValidator) {
+      return;
+    }
+    columnSelectionValidator(this, undefined);
+  }
+  handleDisconnect() {
+    this.setState({
+      error: new Error('Figure disconnected'),
+      isDisconnected: true
+    });
+  }
+  handleFilterAdd(columns) {
+    for (var i = 0; i < columns.length; i += 1) {
+      this.openInputFilter(columns[i]);
+    }
+  }
+  handleOpenLinker() {
+    var {
+      localDashboardId,
+      setActiveTool,
+      setDashboardIsolatedLinkerPanelId
+    } = this.props;
+    setDashboardIsolatedLinkerPanelId(localDashboardId, undefined);
+    setActiveTool(ToolType.LINKER);
+  }
+  handleReconnect() {
+    this.setState({
+      isDisconnected: false,
+      error: undefined
+    });
+    this.sendColumnChange();
+    this.updateColumnFilters();
+  }
+  handleLoadSuccess(model) {
+    log.debug('handleLoadSuccess');
+    var {
+      model: prevModel
+    } = this.state;
+    this.setState({
+      model,
+      isLoaded: true
+    }, () => {
+      var {
+        inputFilters,
+        source
+      } = this.props;
+      var {
+        filterMap,
+        isLinked
+      } = this.state;
+      if (model !== prevModel) {
+        this.sendColumnChange();
+        this.updateColumnFilters();
+        this.updateInputFilters(inputFilters, filterMap.size > 0 || model.isFilterRequired());
+        if (source && isLinked) {
+          this.startListeningToSource(source);
+          this.updateModelFromSource();
+        }
+      }
+    });
+  }
+  handleLoadError(error) {
+    if (PromiseUtils.isCanceled(error)) {
+      return;
+    }
+    log.error('handleLoadError', error);
+    this.setState({
+      error,
+      isLoading: false
+    });
+  }
+  handleSourceColumnChange() {
+    this.updateModelFromSource();
+  }
+  handleSourceFilterChange() {
+    this.updateModelFromSource();
+  }
+  handleSourceSortChange() {
+    this.updateModelFromSource();
+  }
+  updateModelFromSource() {
+    var {
+      metadata,
+      source
+    } = this.props;
+    var {
+      isLinked,
+      model
+    } = this.state;
+    if (!isLinked || !model || !source) {
+      log.debug2('updateModelFromSource ignoring', isLinked, model, source);
+      return;
+    }
+    var {
+      dh
+    } = model;
+    // By now the model has already been loaded, which is the only other cancelable thing in pending
+    this.pending.cancel();
+    if (isChartPanelTableMetadata(metadata)) {
+      var {
+        settings
+      } = metadata;
+      this.pending.add(dh.plot.Figure.create(new ChartUtils(dh).makeFigureSettings(settings, source))).then(figure => {
+        if (isFigureChartModel(model)) {
+          model.setFigure(figure);
+        }
+      }).catch(this.handleLoadError);
+    }
+    this.updatePanelState();
+  }
+  updatePanelState() {
+    var {
+      sourcePanel
+    } = this.props;
+    var {
+      panelState,
+      filterValueMap,
+      settings
+    } = this.state;
+    var {
+      tableSettings
+    } = panelState !== null && panelState !== void 0 ? panelState : {};
+    if (sourcePanel) {
+      // Right now just update the panel state from the source
+      // If the source isn't available, just keep the state that's already saved
+      if (hasInputFilter(sourcePanel.props) && hasPanelState(sourcePanel.state)) {
+        var {
+          inputFilters
+        } = sourcePanel.props;
+        var {
+          panelState: sourcePanelState
+        } = sourcePanel.state;
+        if (sourcePanelState != null) {
+          tableSettings = IrisGridUtils.extractTableSettings(sourcePanelState, inputFilters);
+        }
+      }
+    }
+
+    // eslint-disable-next-line react/no-unused-state
+    this.setState({
+      panelState: {
+        settings,
+        tableSettings,
+        filterValueMap: Array.from(filterValueMap)
+      }
+    });
+  }
+  handleError() {
+    // Don't want to set an error state, because the user can fix a chart error within the chart itself.
+    // We're not loading anymore either so stop showing the spinner so the user can actually click those buttons.
+    this.setState({
+      isLoading: false
+    });
+  }
+  handleResize() {
+    this.updateChart();
+  }
+  handleSettingsChanged(update) {
+    this.setState(_ref2 => {
+      var {
+        settings: prevSettings
+      } = _ref2;
+      var settings = _objectSpread(_objectSpread({}, prevSettings), update);
+      log.debug('Updated settings', settings);
+      return {
+        settings
+      };
+    });
+  }
+  handleHide() {
+    this.setActive(false);
+  }
+  handleShow() {
+    this.setActive(true);
+  }
+  handleTabBlur() {
+    this.setActive(false);
+  }
+  handleTabFocus() {
+    var isHidden = this.isHidden();
+    this.setActive(!isHidden);
+  }
+  handleUpdate() {
+    this.setState({
+      isLoading: false
+    });
+  }
+  handleClearAllFilters() {
+    // nuke link filter and input filter map
+    // input filters only clear themselves if they are not yet empty
+    this.setState({
+      filterValueMap: new Map(),
+      filterMap: new Map()
+    });
+    this.updatePanelState();
+  }
+
+  /**
+   * Create an input filter panel for the provided column
+   * @param column The column to create the input filter for
+   */
+  openInputFilter(column) {
+    var {
+      glEventHub
+    } = this.props;
+    var {
+      name,
+      type
+    } = column;
+    glEventHub.emit(InputFilterEvent.OPEN_INPUT, {
+      title: "".concat(name, " Filter"),
+      panelState: {
+        name,
+        type,
+        isValueShown: true
+      },
+      createNewStack: true,
+      focusElement: 'input'
+    });
+  }
+  setActive(isActive) {
+    this.setState({
+      isActive
+    }, () => {
+      if (isActive) {
+        this.loadModelIfNecessary();
+        this.updateChart();
+      }
+    });
+  }
+  sendColumnChange() {
+    var {
+      model
+    } = this.state;
+    if (!model) {
+      return;
+    }
+    var {
+      glEventHub
+    } = this.props;
+    glEventHub.emit(InputFilterEvent.COLUMNS_CHANGED, this, Array.from(model.getFilterColumnMap().values()));
+  }
+  getCoordinateForColumn(columnName) {
+    var _element$getBoundingC;
+    var className = ChartColumnSelectorOverlay.makeButtonClassName(columnName);
+    if (!this.panelContainer.current) {
+      return null;
+    }
+    var element = this.panelContainer.current.querySelector(".".concat(className));
+    var rect = (_element$getBoundingC = element === null || element === void 0 ? void 0 : element.getBoundingClientRect()) !== null && _element$getBoundingC !== void 0 ? _element$getBoundingC : null;
+    if (rect == null || rect.width <= 0 || rect.height <= 0) {
+      return null;
+    }
+    var x = rect.left + rect.width / 2;
+    var y = rect.bottom;
+    return [x, y];
+  }
+
+  /**
+   * Set chart filters based on the filter map
+   * @param filterMapParam Filter map
+   */
+  setFilterMap(filterMapParam) {
+    log.debug('setFilterMap', filterMapParam);
+    this.setState(state => {
+      var _updatedFilterMap;
+      var {
+        columnMap,
+        filterMap
+      } = state;
+      var updatedFilterMap = null;
+      var filterValueMap = new Map(state.filterValueMap);
+      filterMapParam.forEach((_ref3, columnName) => {
+        var {
+          columnType,
+          filterList
+        } = _ref3;
+        var column = columnMap.get(columnName);
+        if (column == null || column.type !== columnType) {
+          return;
+        }
+        if (filterList.length < 1) {
+          log.debug('Ignoring empty filterList for column', columnName);
+          return;
+        }
+        var {
+          value
+        } = filterList[0];
+        filterValueMap.set(columnName, value);
+        if (filterMap.get(columnName) !== value) {
+          if (updatedFilterMap === null) {
+            updatedFilterMap = new Map(filterMap);
+          }
+          updatedFilterMap.set(columnName, value);
+        }
+      });
+
+      // Don't update filterMap unless the filters actually changed.
+      // Otherwise the chart gets stuck on a spinner
+      // because it never gets an update event for unchanged filters.
+      return {
+        filterValueMap,
+        filterMap: (_updatedFilterMap = updatedFilterMap) !== null && _updatedFilterMap !== void 0 ? _updatedFilterMap : filterMap
+      };
+    });
+  }
+  unsetFilterValue(columnName) {
+    this.setState(state => {
+      // We want to unset a value unless there's an input filter for it
+      // If there's an input filter, then we want to just set it to that value
+      // This way if the user has an input filter and a link, when they delete the link the input filter value takes effect
+      var {
+        inputFilters
+      } = this.props;
+      var {
+        columnMap
+      } = state;
+      var {
+        filterMap,
+        filterValueMap
+      } = state;
+      if (!filterValueMap.has(columnName)) {
+        return null;
+      }
+      filterValueMap = new Map(state.filterValueMap);
+      filterValueMap.delete(columnName);
+      var inputFilterMap = this.getInputFilterColumnMap(columnMap, inputFilters);
+      if (inputFilterMap.has(columnName)) {
+        var _inputFilterMap$get;
+        var filterValue = filterMap.get(columnName);
+        var inputFilterValue = (_inputFilterMap$get = inputFilterMap.get(columnName)) === null || _inputFilterMap$get === void 0 ? void 0 : _inputFilterMap$get.value;
+        if (inputFilterValue != null && filterValue !== inputFilterValue) {
+          filterMap = new Map(state.filterMap);
+          if (inputFilterValue.length > 0) {
+            filterMap.set(columnName, inputFilterValue);
+          } else {
+            filterMap.delete(columnName);
+          }
+        }
+      } else {
+        filterMap = new Map(state.filterMap);
+        filterMap.delete(columnName);
+      }
+      return {
+        filterMap,
+        filterValueMap
+      };
+    });
+  }
+  updateChangedInputFilters(inputFilters, prevInputFilters) {
+    var deletedInputFilters = prevInputFilters.filter(prevInputFilter => inputFilters.find(inputFilter => inputFilter.name === prevInputFilter.name && inputFilter.type === prevInputFilter.type) === undefined);
+    if (deletedInputFilters.length > 0) {
+      this.deleteInputFilters(deletedInputFilters);
+    }
+    var changedInputFilters = inputFilters.filter(inputFilter => !prevInputFilters.includes(inputFilter));
+    if (changedInputFilters.length > 0) {
+      this.updateInputFilters(changedInputFilters);
+    }
+  }
+  updateInputFilters(inputFilters) {
+    var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    this.setState(state => {
+      var {
+        columnMap
+      } = state;
+      var filterValueMap = new Map(state.filterValueMap);
+      var filterMap = new Map(state.filterMap);
+      var update = forceUpdate ? {
+        filterMap,
+        filterValueMap
+      } : {};
+      for (var i = 0; i < inputFilters.length; i += 1) {
+        var {
+          name,
+          type,
+          value
+        } = inputFilters[i];
+        var column = columnMap.get(name);
+        if (column != null && column.type === type) {
+          if (value != null && filterMap.get(name) !== value) {
+            if (value === '') {
+              filterMap.delete(name);
+            } else {
+              filterMap.set(name, value);
+            }
+            update.filterMap = filterMap;
+          }
+          if (filterValueMap.has(name)) {
+            // Need to unset whatever the linked value was - if they want that value again, they need to double click the link again
+            filterValueMap.delete(name);
+            update.filterValueMap = filterValueMap;
+          }
+        }
+      }
+      log.debug('updateInputFilters', update);
+      return update;
+    });
+  }
+  deleteInputFilters(inputFilters) {
+    var forceUpdate = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    this.setState(state => {
+      var {
+        columnMap,
+        filterValueMap
+      } = state;
+      var filterMap = new Map(state.filterMap);
+      var needsUpdate = forceUpdate;
+      for (var i = 0; i < inputFilters.length; i += 1) {
+        var {
+          name,
+          type
+        } = inputFilters[i];
+        var column = columnMap.get(name);
+        if (column != null && column.type === type) {
+          if (filterMap.has(name)) {
+            var filterValue = filterMap.get(name);
+            if (filterValueMap.has(name)) {
+              var linkValue = filterValueMap.get(name);
+              if (linkValue !== filterValue && linkValue != null) {
+                needsUpdate = true;
+                filterMap.set(name, linkValue);
+              }
+            } else {
+              needsUpdate = true;
+              filterMap.delete(name);
+            }
+          }
+        }
+      }
+      log.debug('deleteInputFilters', needsUpdate);
+      return needsUpdate ? {
+        filterMap
+      } : null;
+    });
+  }
+  updateColumnFilters() {
+    this.setState(_ref4 => {
+      var {
+        model
+      } = _ref4;
+      if (!model) {
+        return null;
+      }
+      return {
+        columnMap: model.getFilterColumnMap()
+      };
+    });
+  }
+  updateFilters() {
+    var {
+      columnMap,
+      filterMap,
+      model
+    } = this.state;
+    assertNotNull(model);
+    var waitingInputMap = this.getWaitingInputMap(model.isFilterRequired(), columnMap, filterMap);
+    model.setFilter(filterMap);
+    if (filterMap.size > 0 && waitingInputMap.size === 0) {
+      var defaultTitle = model.getDefaultTitle();
+      var filterTitle = TextUtils.join(Array.from(filterMap.entries()).map(_ref5 => {
+        var [name, value] = _ref5;
+        return "".concat(name, ": ").concat(value);
+      }));
+      if (defaultTitle) {
+        model.setTitle("".concat(defaultTitle, "<br><span style=\"font-size: smaller\">").concat(filterTitle, "</span>"));
+      } else {
+        model.setTitle(filterTitle);
+      }
+      log.debug2('updateFilters filters set', filterMap);
+      this.setState({
+        isLoading: true
+      });
+    } else {
+      log.debug2('updateFilters waiting on inputs', waitingInputMap);
+      model.setTitle(model.getDefaultTitle());
+      this.setState({
+        isLoading: false
+      });
+    }
+    this.updatePanelState();
+  }
+
+  /**
+   * Removes any set filter values that are no longer part of the model
+   */
+  pruneFilterMaps() {
+    this.setState(state => {
+      var {
+        columnMap
+      } = state;
+      var filterMap = new Map(state.filterMap);
+      var filterValueMap = new Map(state.filterValueMap);
+      var newState = {};
+      state.filterValueMap.forEach((value, name) => {
+        if (!columnMap.has(name)) {
+          filterValueMap.delete(name);
+          newState.filterValueMap = filterValueMap;
+        }
+      });
+      state.filterMap.forEach((value, name) => {
+        if (!columnMap.has(name)) {
+          filterMap.delete(name);
+          newState.filterMap = filterMap;
+        }
+      });
+      return newState;
+    });
+  }
+  updateChart() {
+    if (this.chart.current) {
+      this.chart.current.updateDimensions();
+    }
+  }
+  render() {
+    var {
+      columnSelectionValidator,
+      glContainer,
+      glEventHub,
+      inputFilters,
+      isLinkerActive,
+      links,
+      metadata,
+      settings,
+      Plotly
+    } = this.props;
+    var {
+      columnMap,
+      filterMap,
+      error,
+      model,
+      isActive,
+      isDisconnected,
+      isLoaded,
+      isLoading
+    } = this.state;
+    var name;
+    if (isChartPanelTableMetadata(metadata)) {
+      name = metadata.table;
+    } else {
+      name = metadata.figure;
+    }
+    var inputFilterMap = this.getInputFilterColumnMap(columnMap, inputFilters);
+    var linkedColumnMap = this.getLinkedColumnMap(columnMap, links);
+    var waitingInputMap = model != null ? this.getWaitingInputMap(model.isFilterRequired(), columnMap, filterMap) : new Map();
+    var waitingFilterMap = model != null ? this.getWaitingFilterMap(model.isFilterRequired(), columnMap, filterMap, linkedColumnMap, inputFilterMap) : new Map();
+    var errorMessage = error != null ? "Unable to open chart. ".concat(error) : undefined;
+    var isWaitingForFilter = waitingInputMap.size > 0;
+    var isSelectingColumn = columnMap.size > 0 && isLinkerActive;
+    return /*#__PURE__*/React.createElement(WidgetPanel, {
+      className: classNames('iris-chart-panel', {
+        'input-required': isWaitingForFilter
+      }),
+      componentPanel: this,
+      glContainer: glContainer,
+      glEventHub: glEventHub,
+      onHide: this.handleHide,
+      onClearAllFilters: this.handleClearAllFilters,
+      onResize: this.handleResize,
+      onShow: this.handleShow,
+      onTabBlur: this.handleTabBlur,
+      onTabFocus: this.handleTabFocus,
+      errorMessage: errorMessage,
+      isDisconnected: isDisconnected,
+      isLoading: isLoading,
+      isLoaded: isLoaded,
+      widgetName: name,
+      widgetType: "Chart"
+    }, /*#__PURE__*/React.createElement("div", {
+      ref: this.panelContainer,
+      className: "chart-panel-container h-100 w-100"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "chart-container h-100 w-100"
+    }, isLoaded && model && /*#__PURE__*/React.createElement(Chart, {
+      isActive: isActive,
+      model: model,
+      settings: settings,
+      ref: this.chart,
+      onDisconnect: this.handleDisconnect,
+      onReconnect: this.handleReconnect,
+      onUpdate: this.handleUpdate,
+      onError: this.handleError,
+      onSettingsChanged: this.handleSettingsChanged,
+      Plotly: Plotly
+    })), /*#__PURE__*/React.createElement(CSSTransition, {
+      in: isWaitingForFilter && !isSelectingColumn && !isLoading,
+      timeout: ThemeExport.transitionMs,
+      classNames: "fade",
+      mountOnEnter: true,
+      unmountOnExit: true
+    }, /*#__PURE__*/React.createElement(ChartFilterOverlay, {
+      inputFilterMap: inputFilterMap,
+      linkedColumnMap: linkedColumnMap,
+      onAdd: this.handleFilterAdd,
+      onOpenLinker: this.handleOpenLinker,
+      columnMap: columnMap,
+      waitingFilterMap: waitingFilterMap,
+      waitingInputMap: waitingInputMap
+    })), /*#__PURE__*/React.createElement(CSSTransition, {
+      in: isSelectingColumn,
+      timeout: ThemeExport.transitionMs,
+      classNames: "fade",
+      mountOnEnter: true,
+      unmountOnExit: true
+    }, /*#__PURE__*/React.createElement(ChartColumnSelectorOverlay, {
+      columns: this.getSelectorColumns(columnMap, linkedColumnMap, columnSelectionValidator),
+      onColumnSelected: this.handleColumnSelected,
+      onMouseEnter: this.handleColumnMouseEnter,
+      onMouseLeave: this.handleColumnMouseLeave
+    }))));
+  }
+}
+_defineProperty(ChartPanel, "defaultProps", {
+  columnSelectionValidator: null,
+  isLinkerActive: false,
+  source: null,
+  sourcePanel: null,
+  panelState: null,
+  settings: {}
+});
+_defineProperty(ChartPanel, "displayName", 'ChartPanel');
+_defineProperty(ChartPanel, "COMPONENT", 'ChartPanel');
+var mapStateToProps = (state, ownProps) => {
+  var {
+    localDashboardId,
+    metadata
+  } = ownProps;
+  var sourcePanelId;
+  if (metadata != null) {
+    sourcePanelId = metadata.sourcePanelId;
+  }
+  var panelTableMap = getTableMapForDashboard(state, localDashboardId);
+  var openedPanelMap = getOpenedPanelMapForDashboard(state, localDashboardId);
+  var activeTool = getActiveTool(state);
+  var isolatedLinkerPanelId = getIsolatedLinkerPanelIdForDashboard(state, localDashboardId);
+  var isLinkerActive = activeTool === ToolType.LINKER && isolatedLinkerPanelId === undefined;
+  return {
+    columnSelectionValidator: getColumnSelectionValidatorForDashboard(state, localDashboardId),
+    isLinkerActive,
+    inputFilters: getInputFiltersForDashboard(state, localDashboardId),
+    links: getLinksForDashboard(state, localDashboardId),
+    source: sourcePanelId != null ? panelTableMap.get(sourcePanelId) : undefined,
+    sourcePanel: sourcePanelId != null ? openedPanelMap.get(sourcePanelId) : undefined,
+    settings: getSettings(state)
+  };
+};
+var ConnectedChartPanel = connect(mapStateToProps, {
+  setActiveTool: setActiveToolAction,
+  setDashboardIsolatedLinkerPanelId: setDashboardIsolatedLinkerPanelIdAction
+}, null, {
+  forwardRef: true
+})(ChartPanel);
+export default ConnectedChartPanel;
+//# sourceMappingURL=ChartPanel.js.map