poi-plugin-remodel-assistant 0.1.19-beta

package/views/new-interface/chain/overview/equipment-chain-overview.js

@@ -0,0 +1,775 @@
+"use strict";
+
+exports.__esModule = true;
+exports.EquipmentChainOverview = exports.buildOverviewConnectionPath = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _pluginMeta = require("../../../shared/plugin-meta");
+
+var _upgradeChainLayout = require("../layout/upgrade-chain-layout");
+
+var _visualFlow = require("../components/visual-flow");
+
+var _poiImage = require("../../shared/components/poi-image");
+
+var _upgradeDirectionPolicy = require("../model/upgrade-direction-policy");
+
+var _upgradeRouteModel = require("../model/upgrade-route-model");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const {
+  __: translate
+} = window.i18n[_pluginMeta.PLUGIN_ID];
+
+const __ = (key, ...args) => translate(`chain.${key}`, ...args);
+
+const NODE_WIDTH = 236;
+const NODE_HEIGHT = 148;
+const MIN_NODE_WIDTH = 148;
+const MAX_NODE_WIDTH = 280;
+const DRAG_THRESHOLD = 4;
+const POI_HOST_DEBUG_KEY = '__ITEM_IMPROVEMENT_POI_HOST_DEBUG__';
+const DRAG_TRACE_LIMIT = 80;
+let chainMarkerSequence = 0;
+
+const localizedName = name => window.i18n.resources.__(name || '');
+
+const masterEntry = (map, id) => (map || {})[id] || (map || {})[String(id)] || {};
+
+const overviewEquipmentName = (masterEquips, id) => {
+  const entry = masterEntry(masterEquips, Number(id));
+  return entry.api_name ? localizedName(entry.api_name) : `#${id}`;
+};
+
+const approximateTextWidth = text => String(text || '').split('').reduce((sum, char) => sum + (char.charCodeAt(0) > 255 ? 14 : 8), 0);
+
+const clamp = (value, min, max) => Math.max(min, Math.min(max, value));
+
+const estimateOverviewNodeSize = ({
+  id,
+  masterEquips,
+  compact
+}) => {
+  const artwork = compact ? Math.round(_poiImage.EQUIPMENT_CARD_IMAGE_SIZE * 0.84) : _poiImage.EQUIPMENT_CARD_IMAGE_SIZE;
+  const labelWidth = approximateTextWidth(overviewEquipmentName(masterEquips, id));
+  const textWidth = clamp(labelWidth, compact ? 74 : 92, compact ? 112 : 136);
+  const horizontalPadding = compact ? 20 : 24;
+  const artworkGap = compact ? 10 : 12;
+  const verticalPadding = compact ? 16 : 18;
+  const textBlockHeight = compact ? 54 : 60;
+  const minWidth = Math.max(compact ? 148 : MIN_NODE_WIDTH, artwork + horizontalPadding);
+  const maxWidth = compact ? 210 : MAX_NODE_WIDTH;
+  const width = clamp(Math.max(artwork, textWidth) + horizontalPadding, minWidth, maxWidth);
+  return {
+    width,
+    height: artwork + artworkGap + textBlockHeight + verticalPadding
+  };
+};
+
+const connectionKey = (sourceId, targetId) => `${Number(sourceId)}:${Number(targetId)}`;
+
+const ownerDocumentOf = element => element && element.ownerDocument ? element.ownerDocument : document;
+
+const ownerWindowOf = element => {
+  const doc = ownerDocumentOf(element);
+  return doc && doc.defaultView ? doc.defaultView : window;
+};
+
+const projectOverviewEdge = edge => _extends({}, edge, {
+  fromKey: String(Number(edge.sourceId)),
+  toKey: String(Number(edge.targetId))
+});
+
+const layoutFamily = family => ({
+  focusKey: String(Number(family.currentId) || Number((family.componentIds || [])[0]) || 0),
+  columns: (family.columns || []).map(column => ({
+    depth: column.depth,
+    keys: (column.ids || []).map(id => String(Number(id)))
+  })),
+  edges: (0, _upgradeRouteModel.collapseUpgradeDisplayEdges)(family.edges || []).map(projectOverviewEdge),
+  layoutEdges: (0, _upgradeRouteModel.collapseUpgradeDisplayEdges)(family.layoutEdges || family.edges || []).map(projectOverviewEdge)
+});
+
+const buildOverviewConnectionPath = ({
+  edge,
+  from,
+  to,
+  reverseIndex = 0
+}) => {
+  const reverse = edge.directionRole === _upgradeDirectionPolicy.UPGRADE_DIRECTION_ROLE.REVERSE;
+  const horizontalDirection = to.left >= from.left ? 1 : -1;
+  const x1 = horizontalDirection > 0 ? from.left + from.width + 6 : from.left - 6;
+  const y1 = from.top + from.height / 2;
+  const x2 = horizontalDirection > 0 ? to.left - 12 : to.left + to.width + 12;
+  const y2 = to.top + to.height / 2;
+
+  if (reverse) {
+    const laneY = Math.max(8, Math.min(from.top, to.top) - 18 - Math.max(reverseIndex, 0) * 14);
+    const lead = horizontalDirection * 24;
+    const midpoint = (x1 + x2) / 2;
+    return `M ${x1} ${y1} C ${x1 + lead} ${y1}, ${x1 + lead} ${laneY}, ${midpoint} ${laneY} C ${x2 - lead} ${laneY}, ${x2 - lead} ${y2}, ${x2} ${y2}`;
+  }
+
+  const bend = Math.max(34, Math.abs(x2 - x1) / 2);
+  return `M ${x1} ${y1} C ${x1 + horizontalDirection * bend} ${y1}, ${x2 - horizontalDirection * bend} ${y2}, ${x2} ${y2}`;
+};
+
+exports.buildOverviewConnectionPath = buildOverviewConnectionPath;
+
+const overviewFocusSignature = ({
+  family,
+  currentId
+}) => [Number(currentId || family && family.currentId) || 0, (family && family.componentIds || []).map(Number).join(','), (family && family.edges || []).map(edge => `${Number(edge.sourceId) || 0}>${Number(edge.targetId) || 0}`).join(',')].join('|');
+
+class EquipmentChainOverview extends _react.Component {
+  constructor(props) {
+    super(props);
+    Object.defineProperty(this, "attachViewportListeners", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        if (!this.viewport || !this.viewport.addEventListener) return;
+        const hostWindow = ownerWindowOf(this.viewport);
+
+        if (typeof hostWindow.PointerEvent === 'function') {
+          this.viewport.addEventListener('pointerdown', this.handlePointerDown, true);
+          this.viewport.addEventListener('pointermove', this.handlePointerMove, true);
+          this.viewport.addEventListener('pointerup', this.handlePointerEnd, true);
+          this.viewport.addEventListener('pointercancel', this.handlePointerEnd, true);
+          this.viewport.addEventListener('lostpointercapture', this.handlePointerEnd, true);
+        } else {
+          this.viewport.addEventListener('mousedown', this.handleMouseDown, true);
+        }
+
+        this.viewport.addEventListener('dragstart', this.handleNativeDragStart, true);
+        this.viewport.addEventListener('click', this.handleClick, true);
+      }
+    });
+    Object.defineProperty(this, "detachViewportListeners", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        if (!this.viewport || !this.viewport.removeEventListener) return;
+        this.viewport.removeEventListener('pointerdown', this.handlePointerDown, true);
+        this.viewport.removeEventListener('pointermove', this.handlePointerMove, true);
+        this.viewport.removeEventListener('pointerup', this.handlePointerEnd, true);
+        this.viewport.removeEventListener('pointercancel', this.handlePointerEnd, true);
+        this.viewport.removeEventListener('lostpointercapture', this.handlePointerEnd, true);
+        this.viewport.removeEventListener('mousedown', this.handleMouseDown, true);
+        this.viewport.removeEventListener('dragstart', this.handleNativeDragStart, true);
+        this.viewport.removeEventListener('click', this.handleClick, true);
+      }
+    });
+    Object.defineProperty(this, "setViewportRef", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: node => {
+        if (this.viewport === node) return;
+        this.finishDrag();
+        this.detachViewportListeners();
+        if (this.viewportResizeObserver) this.viewportResizeObserver.disconnect();
+        this.viewport = node;
+        this.attachViewportListeners();
+        const hostWindow = ownerWindowOf(this.viewport);
+
+        if (this.viewport && typeof hostWindow.ResizeObserver === 'function') {
+          this.viewportResizeObserver = new hostWindow.ResizeObserver(() => {
+            if (this.pendingVisualFocus) this.scheduleVisualFocus();
+          });
+          this.viewportResizeObserver.observe(this.viewport);
+        }
+
+        this.scheduleVisualFocus();
+      }
+    });
+    Object.defineProperty(this, "scheduleVisualFocus", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        if (this.unmounting) return;
+        this.pendingVisualFocus = true;
+        const hostWindow = ownerWindowOf(this.viewport);
+
+        if (!hostWindow || typeof hostWindow.requestAnimationFrame !== 'function') {
+          this.focusVisualCurrent();
+          return;
+        }
+
+        if (this.visualFocusFrame && hostWindow.cancelAnimationFrame) {
+          hostWindow.cancelAnimationFrame(this.visualFocusFrame);
+        }
+
+        this.visualFocusFrame = hostWindow.requestAnimationFrame(() => {
+          this.visualFocusFrame = hostWindow.requestAnimationFrame(() => {
+            this.visualFocusFrame = null;
+            this.focusVisualCurrent();
+          });
+        });
+      }
+    });
+    Object.defineProperty(this, "focusVisualCurrent", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const {
+          viewport
+        } = this;
+        const layout = this.latestLayout;
+        const focusKey = this.latestFocusKey;
+        const position = layout && layout.positions && layout.positions[focusKey];
+        if (!viewport || !position || viewport.clientWidth <= 0 || viewport.clientHeight <= 0) return;
+        const width = Number(position.width) || NODE_WIDTH;
+        const height = Number(position.height) || NODE_HEIGHT;
+        viewport.scrollLeft = Math.max(0, position.left + width / 2 - viewport.clientWidth / 2);
+        viewport.scrollTop = Math.max(0, position.top + height / 2 - viewport.clientHeight / 2);
+        this.pendingVisualFocus = false;
+      }
+    });
+    Object.defineProperty(this, "attachMouseListeners", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const hostWindow = ownerWindowOf(this.viewport);
+        hostWindow.addEventListener('mousemove', this.handleMouseMove, true);
+        hostWindow.addEventListener('mouseup', this.handleMouseEnd, true);
+        hostWindow.addEventListener('blur', this.finishDrag);
+      }
+    });
+    Object.defineProperty(this, "detachWindowListeners", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const hostWindow = ownerWindowOf(this.viewport);
+        hostWindow.removeEventListener('mousemove', this.handleMouseMove, true);
+        hostWindow.removeEventListener('mouseup', this.handleMouseEnd, true);
+        hostWindow.removeEventListener('blur', this.finishDrag);
+      }
+    });
+    Object.defineProperty(this, "isPrimaryPointer", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (event.isPrimary === false) return false;
+        if (event.pointerType && event.pointerType !== 'mouse') return true;
+        if (Number.isFinite(event.button)) return event.button === 0;
+        if (Number.isFinite(event.which)) return event.which === 1;
+        return true;
+      }
+    });
+    Object.defineProperty(this, "isPrimaryMouse", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (Number.isFinite(event.button)) return event.button === 0;
+        if (Number.isFinite(event.which)) return event.which === 1;
+        return true;
+      }
+    });
+    Object.defineProperty(this, "isBlockedDragTarget", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: target => Boolean(target && target.closest && target.closest('button, a, input, select, textarea, [contenteditable="true"], .decision-modal-resize-handle'))
+    });
+    Object.defineProperty(this, "pointerPoint", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => ({
+        x: Number.isFinite(event.clientX) ? event.clientX : event.pageX,
+        y: Number.isFinite(event.clientY) ? event.clientY : event.pageY
+      })
+    });
+    Object.defineProperty(this, "handleNativeDragStart", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (event.preventDefault) event.preventDefault();
+      }
+    });
+    Object.defineProperty(this, "registerPoiHostDebug", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const hostWindow = ownerWindowOf(this.viewport);
+        if (!hostWindow) return null;
+        const existing = hostWindow[POI_HOST_DEBUG_KEY] && typeof hostWindow[POI_HOST_DEBUG_KEY] === 'object' ? hostWindow[POI_HOST_DEBUG_KEY] : window[POI_HOST_DEBUG_KEY] && typeof window[POI_HOST_DEBUG_KEY] === 'object' ? window[POI_HOST_DEBUG_KEY] : {};
+
+        const debug = _extends({}, existing, {
+          overviewDragTrace: Array.isArray(existing.overviewDragTrace) ? existing.overviewDragTrace : [],
+          clearOverviewDragTrace: () => {
+            debug.overviewDragTrace = [];
+            return debug.overviewDragTrace;
+          }
+        });
+
+        hostWindow[POI_HOST_DEBUG_KEY] = debug;
+        window[POI_HOST_DEBUG_KEY] = debug;
+        return debug;
+      }
+    });
+    Object.defineProperty(this, "traceDrag", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: (phase, event, extra = {}) => {
+        const debug = this.registerPoiHostDebug();
+        if (!debug) return;
+
+        const entry = _extends({
+          phase,
+          at: Date.now(),
+          event: event ? {
+            type: event.type,
+            button: event.button,
+            buttons: event.buttons,
+            pointerId: event.pointerId,
+            pointerType: event.pointerType,
+            clientX: event.clientX,
+            clientY: event.clientY,
+            targetClass: event.target && event.target.className
+          } : null,
+          viewport: this.viewport ? {
+            clientWidth: Number(this.viewport.clientWidth) || 0,
+            clientHeight: Number(this.viewport.clientHeight) || 0,
+            scrollWidth: Number(this.viewport.scrollWidth) || 0,
+            scrollHeight: Number(this.viewport.scrollHeight) || 0,
+            scrollLeft: Number(this.viewport.scrollLeft) || 0,
+            scrollTop: Number(this.viewport.scrollTop) || 0
+          } : null
+        }, extra);
+
+        debug.overviewDragTrace.push(entry);
+
+        if (debug.overviewDragTrace.length > DRAG_TRACE_LIMIT) {
+          debug.overviewDragTrace.splice(0, debug.overviewDragTrace.length - DRAG_TRACE_LIMIT);
+        }
+      }
+    });
+    Object.defineProperty(this, "beginDrag", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: (event, source) => {
+        if (!this.viewport || this.drag) return false;
+
+        if (this.isBlockedDragTarget(event.target)) {
+          this.traceDrag('overview-blocked-down', event);
+          return false;
+        }
+
+        const point = this.pointerPoint(event);
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return false;
+        this.drag = {
+          pointerId: Number.isFinite(event.pointerId) ? event.pointerId : null,
+          source,
+          startX: point.x,
+          startY: point.y,
+          scrollLeft: this.viewport.scrollLeft,
+          scrollTop: this.viewport.scrollTop,
+          moved: false
+        };
+        this.traceDrag('overview-begin', event, {
+          source
+        });
+        return true;
+      }
+    });
+    Object.defineProperty(this, "handlePointerDown", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.isPrimaryPointer(event)) return;
+        if (!this.beginDrag(event, 'pointer')) return;
+
+        if (this.drag.pointerId !== null && typeof this.viewport.setPointerCapture === 'function') {
+          try {
+            this.viewport.setPointerCapture(this.drag.pointerId);
+          } catch (error) {// The gesture remains usable while the pointer stays over the viewport.
+          }
+        }
+      }
+    });
+    Object.defineProperty(this, "handleMouseDown", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.isPrimaryMouse(event)) return;
+        if (!this.beginDrag(event, 'mouse')) return;
+        if (event.cancelable !== false && event.preventDefault) event.preventDefault();
+        this.attachMouseListeners();
+      }
+    });
+    Object.defineProperty(this, "moveDrag", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.drag || !this.viewport) return;
+        if (this.drag.pointerId !== null && Number.isFinite(event.pointerId) && event.pointerId !== this.drag.pointerId) return;
+        const point = this.pointerPoint(event);
+        if (!Number.isFinite(point.x) || !Number.isFinite(point.y)) return;
+        const deltaX = point.x - this.drag.startX;
+        const deltaY = point.y - this.drag.startY;
+        if (!this.drag.moved && Math.hypot(deltaX, deltaY) < DRAG_THRESHOLD) return;
+
+        if (!this.drag.moved) {
+          this.drag.moved = true;
+          if (!this.unmounting) this.setState({
+            dragging: true
+          });
+        }
+
+        if (event.cancelable !== false && event.preventDefault) event.preventDefault();
+        const beforeScrollLeft = this.viewport.scrollLeft;
+        const beforeScrollTop = this.viewport.scrollTop;
+        this.viewport.scrollLeft = this.drag.scrollLeft - deltaX;
+        this.viewport.scrollTop = this.drag.scrollTop - deltaY;
+        this.traceDrag('overview-drag-frame', event, {
+          deltaX,
+          deltaY,
+          beforeScrollLeft,
+          beforeScrollTop,
+          requestedScrollLeft: this.drag.scrollLeft - deltaX,
+          requestedScrollTop: this.drag.scrollTop - deltaY,
+          nextScrollLeft: this.viewport.scrollLeft,
+          nextScrollTop: this.viewport.scrollTop,
+          scrollChanged: beforeScrollLeft !== this.viewport.scrollLeft || beforeScrollTop !== this.viewport.scrollTop
+        });
+      }
+    });
+    Object.defineProperty(this, "handlePointerMove", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.drag || this.drag.source !== 'pointer') return;
+        this.moveDrag(event);
+      }
+    });
+    Object.defineProperty(this, "handleMouseMove", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.drag || this.drag.source !== 'mouse') return;
+        this.moveDrag(event);
+      }
+    });
+    Object.defineProperty(this, "releasePointer", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: drag => {
+        if (!drag || drag.pointerId === null || !this.viewport) return;
+        if (typeof this.viewport.releasePointerCapture !== 'function') return;
+
+        try {
+          if (typeof this.viewport.hasPointerCapture !== 'function' || this.viewport.hasPointerCapture(drag.pointerId)) {
+            this.viewport.releasePointerCapture(drag.pointerId);
+          }
+        } catch (error) {// Pointer capture may already be released by the host.
+        }
+      }
+    });
+    Object.defineProperty(this, "finishDrag", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        const {
+          drag
+        } = this;
+        const {
+          dragging
+        } = this.state;
+        if (drag && drag.pointerId !== null && event && Number.isFinite(event.pointerId) && event.pointerId !== drag.pointerId) return;
+        const moved = Boolean(drag && drag.moved);
+        this.drag = null;
+        this.releasePointer(drag);
+        this.detachWindowListeners();
+
+        if (moved) {
+          const releasePoint = event ? this.pointerPoint(event) : null;
+          this.suppressClickUntil = Date.now() + 1000;
+          this.suppressClickPoint = releasePoint && Number.isFinite(releasePoint.x) && Number.isFinite(releasePoint.y) ? releasePoint : null;
+        }
+
+        if (moved && event && event.cancelable !== false && event.preventDefault) {
+          event.preventDefault();
+        }
+
+        if (moved) this.traceDrag('overview-finish', event);
+        if (dragging && !this.unmounting) this.setState({
+          dragging: false
+        });
+      }
+    });
+    Object.defineProperty(this, "handlePointerEnd", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => this.finishDrag(event)
+    });
+    Object.defineProperty(this, "handleMouseEnd", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.drag || this.drag.source !== 'mouse') return;
+        this.finishDrag(event);
+      }
+    });
+    Object.defineProperty(this, "handleClick", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        if (!this.suppressClickUntil) return;
+        const withinDeadline = Date.now() <= this.suppressClickUntil;
+        const clickPoint = this.pointerPoint(event);
+        const releasePoint = this.suppressClickPoint;
+        const sameGesturePoint = !releasePoint || !Number.isFinite(clickPoint.x) || !Number.isFinite(clickPoint.y) || Math.hypot(clickPoint.x - releasePoint.x, clickPoint.y - releasePoint.y) <= DRAG_THRESHOLD * 2;
+        this.suppressClickUntil = 0;
+        this.suppressClickPoint = null;
+        if (!withinDeadline || !sameGesturePoint) return;
+        if (event.preventDefault) event.preventDefault();
+        if (event.stopPropagation) event.stopPropagation();
+        if (event.stopImmediatePropagation) event.stopImmediatePropagation();
+      }
+    });
+    this.state = {
+      dragging: false
+    };
+    chainMarkerSequence += 1;
+    this.markerPrefix = `decision-equipment-chain-${chainMarkerSequence}`;
+    this.drag = null;
+    this.suppressClickUntil = 0;
+    this.suppressClickPoint = null;
+    this.pendingVisualFocus = true;
+    this.visualFocusFrame = null;
+  }
+
+  componentDidMount() {
+    this.scheduleVisualFocus();
+  }
+
+  componentDidUpdate(previousProps) {
+    if (overviewFocusSignature(previousProps) !== overviewFocusSignature(this.props)) {
+      this.scheduleVisualFocus();
+    }
+  }
+
+  componentWillUnmount() {
+    this.unmounting = true;
+    this.finishDrag();
+    this.detachViewportListeners();
+    if (this.viewportResizeObserver) this.viewportResizeObserver.disconnect();
+    const hostWindow = ownerWindowOf(this.viewport);
+
+    if (this.visualFocusFrame && hostWindow && hostWindow.cancelAnimationFrame) {
+      hostWindow.cancelAnimationFrame(this.visualFocusFrame);
+    }
+  }
+
+  render() {
+    const {
+      dragging
+    } = this.state;
+    const {
+      family,
+      masterEquips,
+      currentId,
+      selectedEquipmentIds,
+      selectedConnections,
+      compact
+    } = this.props;
+    const highlighted = new Set((selectedEquipmentIds || []).map(Number));
+    const selectedEdges = new Set((selectedConnections || []).map(connection => connectionKey(connection.sourceId, connection.targetId)));
+    const requestedFocusId = Number(currentId || family.currentId) || 0;
+    const baseProjected = layoutFamily(family);
+    const baseNodeKeys = (baseProjected.columns || []).reduce((result, column) => result.concat(column.keys || []), []);
+    const fallbackFocusId = Number(family.currentId) || Number(baseNodeKeys[0]) || 0;
+    const focusId = baseNodeKeys.includes(String(requestedFocusId)) ? requestedFocusId : fallbackFocusId;
+    const projected = layoutFamily(_extends({}, family, {
+      currentId: focusId
+    }));
+    const overviewNodeKeys = (projected.columns || []).reduce((result, column) => result.concat(column.keys || []), []);
+    const nodeSizes = overviewNodeKeys.reduce((result, key) => _extends({}, result, {
+      [key]: estimateOverviewNodeSize({
+        id: Number(key),
+        masterEquips,
+        compact
+      })
+    }), {});
+    const nodeWidths = Object.keys(nodeSizes).reduce((result, key) => _extends({}, result, {
+      [key]: nodeSizes[key].width
+    }), {});
+    const nodeHeights = Object.keys(nodeSizes).reduce((result, key) => _extends({}, result, {
+      [key]: nodeSizes[key].height
+    }), {});
+    const layout = (0, _upgradeChainLayout.buildStaggeredChainLayout)(projected, {
+      nodeWidth: compact ? 166 : NODE_WIDTH,
+      nodeHeight: compact ? 118 : NODE_HEIGHT,
+      nodeWidths,
+      nodeHeights,
+      columnGap: compact ? 56 : 76,
+      rowGap: compact ? 18 : 26,
+      paddingX: compact ? 18 : 28,
+      paddingY: (compact ? 20 : 30) + Math.min((projected.edges || []).filter(edge => edge.directionRole === _upgradeDirectionPolicy.UPGRADE_DIRECTION_ROLE.REVERSE).length, 5) * (compact ? 16 : 20)
+    });
+    const hasNodes = Object.keys(layout.positions).length > 0;
+    this.latestLayout = layout;
+    this.latestFocusKey = String(focusId);
+    return _react.default.createElement("div", {
+      className: `decision-equipment-chain-overview${compact ? ' is-compact' : ''}${dragging ? ' is-dragging' : ''}`,
+      ref: this.setViewportRef,
+      onDragStart: event => event.preventDefault()
+    }, hasNodes ? _react.default.createElement("div", {
+      className: "decision-equipment-chain-world",
+      style: {
+        width: layout.width,
+        minHeight: layout.height
+      }
+    }, _react.default.createElement("svg", {
+      className: "decision-equipment-chain-edges",
+      width: layout.width,
+      height: layout.height,
+      "aria-hidden": "true"
+    }, _react.default.createElement("defs", null, _react.default.createElement("marker", {
+      id: `${this.markerPrefix}-arrow`,
+      markerWidth: "14",
+      markerHeight: "14",
+      refX: "12",
+      refY: "7",
+      orient: "auto",
+      markerUnits: "userSpaceOnUse"
+    }, _react.default.createElement("path", {
+      className: "decision-equipment-chain-arrow is-default",
+      d: "M1,1 L13,7 L1,13 z"
+    })), _react.default.createElement("marker", {
+      id: `${this.markerPrefix}-arrow-selected`,
+      markerWidth: "14",
+      markerHeight: "14",
+      refX: "12",
+      refY: "7",
+      orient: "auto",
+      markerUnits: "userSpaceOnUse"
+    }, _react.default.createElement("path", {
+      className: "decision-equipment-chain-arrow is-selected",
+      d: "M1,1 L13,7 L1,13 z"
+    })), _react.default.createElement("marker", {
+      id: `${this.markerPrefix}-arrow-reverse`,
+      markerWidth: "14",
+      markerHeight: "14",
+      refX: "12",
+      refY: "7",
+      orient: "auto",
+      markerUnits: "userSpaceOnUse"
+    }, _react.default.createElement("path", {
+      className: "decision-equipment-chain-arrow is-reverse",
+      d: "M1,1 L13,7 L1,13 z"
+    }))), (projected.edges || []).map(edge => {
+      const from = layout.positions[edge.fromKey];
+      const to = layout.positions[edge.toKey];
+      if (!from || !to) return null;
+      const selected = selectedEdges.has(connectionKey(edge.sourceId, edge.targetId));
+      const reverse = edge.directionRole === _upgradeDirectionPolicy.UPGRADE_DIRECTION_ROLE.REVERSE;
+      const reverseEdges = (projected.edges || []).filter(candidate => candidate.directionRole === _upgradeDirectionPolicy.UPGRADE_DIRECTION_ROLE.REVERSE);
+      const reverseIndex = reverseEdges.findIndex(candidate => candidate.key === edge.key);
+      const pathData = buildOverviewConnectionPath({
+        edge,
+        from,
+        to,
+        reverseIndex
+      });
+      const markerId = selected ? `${this.markerPrefix}-arrow-selected` : reverse ? `${this.markerPrefix}-arrow-reverse` : `${this.markerPrefix}-arrow`;
+      return _react.default.createElement("g", {
+        key: edge.key || connectionKey(edge.sourceId, edge.targetId),
+        className: `decision-equipment-chain-connection${reverse ? ' is-reverse' : ''}${selected ? ' is-selected-route' : ''}`
+      }, _react.default.createElement("path", {
+        className: "decision-equipment-chain-edge-underlay",
+        d: pathData
+      }), _react.default.createElement("path", {
+        className: `decision-equipment-chain-edge${reverse ? ' is-reverse' : ''}${selected ? ' is-selected-route' : ''}`,
+        d: pathData,
+        markerEnd: `url(#${markerId})`
+      }));
+    })), Object.keys(layout.positions).map(key => {
+      const numericId = Number(key);
+      const position = layout.positions[key];
+      const current = numericId === focusId;
+      const selected = highlighted.has(numericId);
+      return _react.default.createElement("div", {
+        className: `decision-equipment-chain-node${current ? ' is-current' : ''}${selected ? ' is-selected-route' : ''}`,
+        key: numericId,
+        style: {
+          left: position.left,
+          top: position.top,
+          width: position.width,
+          height: position.height
+        }
+      }, _react.default.createElement(_visualFlow.EquipmentVisualNode, {
+        id: numericId,
+        label: current ? __('Current position') : selected ? __('Selected route') : '',
+        masterEquips: masterEquips,
+        current: current,
+        compact: true,
+        artworkType: "equipment"
+      }));
+    })) : _react.default.createElement("div", {
+      className: "decision-workbench-empty-value"
+    }, __('No known upgrade chain')));
+  }
+
+}
+
+exports.EquipmentChainOverview = EquipmentChainOverview;
+Object.defineProperty(EquipmentChainOverview, "propTypes", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: {
+    family: _propTypes.default.object.isRequired,
+    masterEquips: _propTypes.default.object.isRequired,
+    currentId: _propTypes.default.number,
+    selectedEquipmentIds: _propTypes.default.arrayOf(_propTypes.default.number),
+    selectedConnections: _propTypes.default.arrayOf(_propTypes.default.shape({
+      sourceId: _propTypes.default.number.isRequired,
+      targetId: _propTypes.default.number.isRequired
+    })),
+    compact: _propTypes.default.bool
+  }
+});
+Object.defineProperty(EquipmentChainOverview, "defaultProps", {
+  configurable: true,
+  enumerable: true,
+  writable: true,
+  value: {
+    currentId: null,
+    selectedEquipmentIds: [],
+    selectedConnections: [],
+    compact: false
+  }
+});