@crystaldesign/diva-web-planner-react 26.3.0-beta.2 → 26.3.0-beta.21

package/build/esm/index-5f62c915.js

@@ -0,0 +1,543 @@
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
+import _objectDestructuringEmpty from '@babel/runtime/helpers/objectDestructuringEmpty';
+import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _regeneratorRuntime from '@babel/runtime/regenerator';
+import { u as useViewHandler } from './index-beea7e3b.js';
+import { useMemo, useState, useEffect, useRef } from 'react';
+import { n as notExpanded } from './index.module-9ec3692b.js';
+import { s as scrollable, h as header, o as opvStatusVisible, a as opvStatusHidden, d as decisionLink, b as opvStatusNewValue, t as tableDescription, c as optionsTable, e as optionsTableColumn, f as decisionsGridContainer, g as decisionCell, i as gridContainer, j as optionValuesTable, k as optionValuesGridContainer, l as decision, D as DecisionVisualization, m as optionsTableSelected, n as optionValueSelected } from './DecisionVizualizer-56a1d888.js';
+import { observer } from 'mobx-react-lite';
+import classnames from 'classnames';
+import { DivaUtils } from '@crystaldesign/diva-core';
+import './react-json-viewer-cd9bc7d1.js';
+import { ModuleRegistry, AllCommunityModule, themeQuartz, colorSchemeDarkBlue } from 'ag-grid-community';
+import { AgGridReact } from 'ag-grid-react';
+import ArticleSelector from './index-1eeac6f3.js';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import 'react-dynamic-multi-render';
+import '@babel/runtime/helpers/objectWithoutProperties';
+import '@babel/runtime/helpers/classCallCheck';
+import '@babel/runtime/helpers/createClass';
+import '@crystaldesign/diva-utils';
+import 'mobx';
+import '@crystaldesign/web-planner-logic';
+import 'qrcode.react';
+import '@babel/runtime/helpers/typeof';
+import 'flat';
+import 'react-json-view-lite';
+import 'react-select';
+
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+ModuleRegistry.registerModules([AllCommunityModule]);
+function flattenArticleOptionValues(ops) {
+  var _ops$option$articleOp;
+  var result = [];
+  var _iterator = _createForOfIteratorHelper((_ops$option$articleOp = ops.option.articleOptionValues) !== null && _ops$option$articleOp !== void 0 ? _ops$option$articleOp : new Map()),
+    _step;
+  try {
+    for (_iterator.s(); !(_step = _iterator.n()).done;) {
+      var _step$value = _slicedToArray(_step.value, 2),
+        value = _step$value[1];
+      if (value.isOPVG && value.articleOptionValues) {
+        var _iterator2 = _createForOfIteratorHelper(value.articleOptionValues),
+          _step2;
+        try {
+          for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
+            var _step2$value = _slicedToArray(_step2.value, 2),
+              opv = _step2$value[1];
+            result.push({
+              codex: opv.codex,
+              name: opv.name
+            });
+          }
+        } catch (err) {
+          _iterator2.e(err);
+        } finally {
+          _iterator2.f();
+        }
+      } else {
+        result.push({
+          codex: value.codex,
+          name: value.name
+        });
+      }
+    }
+  } catch (err) {
+    _iterator.e(err);
+  } finally {
+    _iterator.f();
+  }
+  return result;
+}
+function decisionAffectsOption(decision, optionCodex, isIDM) {
+  var _d$DOC, _d$Options;
+  if (isIDM) {
+    var _featureRefs$includes, _featureRefs;
+    return (_featureRefs$includes = (_featureRefs = decision.featureRefs) === null || _featureRefs === void 0 ? void 0 : _featureRefs.includes(optionCodex)) !== null && _featureRefs$includes !== void 0 ? _featureRefs$includes : false;
+  }
+  var d = decision;
+  var optNum = optionCodex === null || optionCodex === void 0 ? void 0 : optionCodex.replace(/^OPT/, '');
+  var matches = function matches(s) {
+    return s === optionCodex || s === optNum || s && 'OPT' + s === optionCodex;
+  };
+  return !!((_d$DOC = d.DOC) !== null && _d$DOC !== void 0 && _d$DOC.find(function (doc) {
+    var _doc$DA, _doc$JsFormula;
+    return ((_doc$DA = doc.DA) === null || _doc$DA === void 0 ? void 0 : _doc$DA.find(function (da) {
+      return matches(da.OptionCodex) || da.DecisionNr === optionCodex;
+    })) || ((_doc$JsFormula = doc.JsFormula) === null || _doc$JsFormula === void 0 ? void 0 : _doc$JsFormula.includes("'OPT" + optNum + "'"));
+  })) || !!((_d$Options = d.Options) !== null && _d$Options !== void 0 && _d$Options.includes(optionCodex !== null && optionCodex !== void 0 && optionCodex.startsWith('OPT') ? optionCodex : 'OPT' + optionCodex));
+}
+function getSnapshotOpt(shot, optionCodex) {
+  var _shot$optionCodex;
+  var key = optionCodex !== null && optionCodex !== void 0 && optionCodex.startsWith('OPT') ? optionCodex : 'OPT' + (optionCodex !== null && optionCodex !== void 0 ? optionCodex : '');
+  return (_shot$optionCodex = shot[optionCodex]) !== null && _shot$optionCodex !== void 0 ? _shot$optionCodex : shot[key];
+}
+function getOpvStatus(stack, optionCodex, opvCodex) {
+  var _getSnapshotOpt$visib, _getSnapshotOpt, _getSnapshotOpt$selOP, _getSnapshotOpt2;
+  var result = {
+    visible: true
+  };
+  if (!stack.length) return result;
+  var lastVisible = (_getSnapshotOpt$visib = (_getSnapshotOpt = getSnapshotOpt(stack[0].snapshots.before, optionCodex)) === null || _getSnapshotOpt === void 0 || (_getSnapshotOpt = _getSnapshotOpt.visibleOPVs) === null || _getSnapshotOpt === void 0 ? void 0 : _getSnapshotOpt.includes(opvCodex)) !== null && _getSnapshotOpt$visib !== void 0 ? _getSnapshotOpt$visib : false;
+  var lastSel = (_getSnapshotOpt$selOP = (_getSnapshotOpt2 = getSnapshotOpt(stack[0].snapshots.before, optionCodex)) === null || _getSnapshotOpt2 === void 0 ? void 0 : _getSnapshotOpt2.selOPV) !== null && _getSnapshotOpt$selOP !== void 0 ? _getSnapshotOpt$selOP : '';
+  for (var i = 0; i < stack.length; i++) {
+    var _before$visibleOPVs$i, _before$visibleOPVs, _after$visibleOPVs$in, _after$visibleOPVs, _after$selOPV;
+    var entry = stack[i];
+    var before = getSnapshotOpt(entry.snapshots.before, optionCodex);
+    var after = getSnapshotOpt(entry.snapshots.after, optionCodex);
+    var wasVisible = (_before$visibleOPVs$i = before === null || before === void 0 || (_before$visibleOPVs = before.visibleOPVs) === null || _before$visibleOPVs === void 0 ? void 0 : _before$visibleOPVs.includes(opvCodex)) !== null && _before$visibleOPVs$i !== void 0 ? _before$visibleOPVs$i : lastVisible;
+    var isVisible = (_after$visibleOPVs$in = after === null || after === void 0 || (_after$visibleOPVs = after.visibleOPVs) === null || _after$visibleOPVs === void 0 ? void 0 : _after$visibleOPVs.includes(opvCodex)) !== null && _after$visibleOPVs$in !== void 0 ? _after$visibleOPVs$in : false;
+    var newSel = (_after$selOPV = after === null || after === void 0 ? void 0 : after.selOPV) !== null && _after$selOPV !== void 0 ? _after$selOPV : lastSel;
+    if (wasVisible && !isVisible && !result.hiddenSince) {
+      result.hiddenSince = entry;
+    }
+    if (newSel === opvCodex && lastSel !== opvCodex && !result.newValueSince) {
+      result.newValueSince = entry;
+    }
+    lastVisible = isVisible;
+    lastSel = newSel;
+  }
+  result.visible = lastVisible;
+  return result;
+}
+var DecisionAnalyzer = function DecisionAnalyzer(_ref) {
+  var _article$articleOptio, _article$CatalogData$, _article$CatalogData, _article$decisionDebu, _article$decisionDebu2, _article$decisionDebu4, _article$decisionDebu5;
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  var viewHandler = useViewHandler();
+  var articles = viewHandler.divaWebPlanner.getDivaArticles();
+  var darkMode = typeof document !== 'undefined' && document.body.classList.contains('darkmode');
+  var gridTheme = useMemo(function () {
+    return darkMode ? themeQuartz.withPart(colorSchemeDarkBlue) : themeQuartz;
+  }, [darkMode]);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    rerender = _useState2[0],
+    setRerender = _useState2[1];
+  useEffect(function () {
+    var asyncFunct = /*#__PURE__*/function () {
+      var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+        return _regeneratorRuntime.wrap(function _callee$(_context) {
+          while (1) switch (_context.prev = _context.next) {
+            case 0:
+              _context.next = 2;
+              return DivaUtils.Sleep(1000);
+            case 2:
+              setRerender(!rerender);
+            case 3:
+            case "end":
+              return _context.stop();
+          }
+        }, _callee);
+      }));
+      return function asyncFunct() {
+        return _ref2.apply(this, arguments);
+      };
+    }();
+    asyncFunct();
+  }, [viewHandler.tabGroupState.allTabGroups]);
+  useEffect(function () {
+    var set = viewHandler.divaWebPlanner.actSet();
+    if (set && !set.logDecisions) set.logDecisions = true;
+    return function () {
+      var set = viewHandler.divaWebPlanner.actSet();
+      if (set) set.logDecisions = false;
+    };
+  }, [viewHandler.uiState.isLoading]);
+  var _useState3 = useState(Object.values(articles !== null && articles !== void 0 ? articles : {}).find(function (a) {
+      return a.posNr == 1;
+    })),
+    _useState4 = _slicedToArray(_useState3, 2),
+    article = _useState4[0],
+    setArticle = _useState4[1];
+  var optionStates = _toConsumableArray((_article$articleOptio = article === null || article === void 0 ? void 0 : article.articleOptionStates.values()) !== null && _article$articleOptio !== void 0 ? _article$articleOptio : []);
+  var _useState5 = useState(),
+    _useState6 = _slicedToArray(_useState5, 2),
+    selectedRow = _useState6[0],
+    setSelectedRow = _useState6[1];
+  var _useState7 = useState(),
+    _useState8 = _slicedToArray(_useState7, 2),
+    selectedOptionCodex = _useState8[0],
+    setSelectedOptionCodex = _useState8[1];
+  var _useState9 = useState(),
+    _useState10 = _slicedToArray(_useState9, 2),
+    selectedOptionValueCodex = _useState10[0],
+    setSelectedOptionValueCodex = _useState10[1];
+  var decisionsGridRef = useRef(null);
+  var optionsGridRef = useRef(null);
+  var optionValuesGridRef = useRef(null);
+  var isIDMFormat = (_article$CatalogData$ = article === null || article === void 0 || (_article$CatalogData = article.CatalogData) === null || _article$CatalogData === void 0 ? void 0 : _article$CatalogData.isIDMFormat) !== null && _article$CatalogData$ !== void 0 ? _article$CatalogData$ : false;
+  var longestStack = (_article$decisionDebu = article === null || article === void 0 || (_article$decisionDebu2 = article.decisionDebugStacks) === null || _article$decisionDebu2 === void 0 || (_article$decisionDebu2 = _article$decisionDebu2[0]) === null || _article$decisionDebu2 === void 0 || (_article$decisionDebu2 = _article$decisionDebu2.stack) === null || _article$decisionDebu2 === void 0 ? void 0 : _article$decisionDebu2.length) !== null && _article$decisionDebu !== void 0 ? _article$decisionDebu : 0;
+  var entries = longestStack > 0 ? _toConsumableArray(Array(longestStack).keys()) : [];
+  var activeFilter = selectedOptionCodex;
+  var visibleRowIndices = useMemo(function () {
+    var _article$decisionDebu3;
+    var optFilter = activeFilter;
+    var stack = article === null || article === void 0 || (_article$decisionDebu3 = article.decisionDebugStacks) === null || _article$decisionDebu3 === void 0 || (_article$decisionDebu3 = _article$decisionDebu3[0]) === null || _article$decisionDebu3 === void 0 ? void 0 : _article$decisionDebu3.stack;
+    if (!stack) return [];
+    return entries.map(function (_, i) {
+      return i;
+    }).filter(function (i) {
+      var entry = stack === null || stack === void 0 ? void 0 : stack[i];
+      if (!entry) return false;
+      return !optFilter || decisionAffectsOption(entry.decision, optFilter, isIDMFormat);
+    });
+  }, [activeFilter, entries, article === null || article === void 0 ? void 0 : article.decisionDebugStacks, isIDMFormat]);
+  if (!article) return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "Decision analyzer - plann article"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle],
+      rerender: rerender
+    })]
+  }));
+  if (!longestStack) return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "Decision analyzer - change config"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle],
+      rerender: rerender
+    })]
+  }));
+  var onClick = function onClick(nr, row) {
+    var _selectedRow$decision, _selectedRow$decision2;
+    if (nr == ((selectedRow === null || selectedRow === void 0 || (_selectedRow$decision = selectedRow.decision) === null || _selectedRow$decision === void 0 ? void 0 : _selectedRow$decision.Number) || (selectedRow === null || selectedRow === void 0 || (_selectedRow$decision2 = selectedRow.decision) === null || _selectedRow$decision2 === void 0 ? void 0 : _selectedRow$decision2.decisionNo))) {
+      setSelectedRow(undefined);
+    } else setSelectedRow(row);
+  };
+  var filteredDecisions = [];
+  if (isIDMFormat) {
+    filteredDecisions = article.decisionDebugStacks.map(function (stack) {
+      return stack.stack.map(function (d) {
+        var _featureRefs2;
+        var affectsOption = activeFilter && ((_featureRefs2 = d.decision.featureRefs) === null || _featureRefs2 === void 0 ? void 0 : _featureRefs2.includes(activeFilter));
+        return _objectSpread(_objectSpread({}, d), {}, {
+          bold: !!(activeFilter && affectsOption)
+        });
+      });
+    });
+  } else {
+    var optPrefix = function optPrefix(s) {
+      return s !== null && s !== void 0 && s.startsWith('OPT') ? s : 'OPT' + s;
+    };
+    filteredDecisions = article.decisionDebugStacks.map(function (stack) {
+      return stack.stack.map(function (d) {
+        var _DOC, _Options;
+        var affectsOption = activeFilter && (!!((_DOC = d.decision.DOC) !== null && _DOC !== void 0 && _DOC.find(function (doc) {
+          var _doc$DA2, _doc$JsFormula2;
+          return ((_doc$DA2 = doc.DA) === null || _doc$DA2 === void 0 ? void 0 : _doc$DA2.find(function (da) {
+            return da.OptionCodex === activeFilter || da.OptionCodex === optPrefix(activeFilter) || da.DecisionNr == activeFilter;
+          })) || ((_doc$JsFormula2 = doc.JsFormula) === null || _doc$JsFormula2 === void 0 ? void 0 : _doc$JsFormula2.includes("'OPT" + activeFilter.replace(/^OPT/, '') + "'"));
+        })) || !!((_Options = d.decision.Options) !== null && _Options !== void 0 && _Options.includes(optPrefix(activeFilter))));
+        return _objectSpread(_objectSpread({}, d), {}, {
+          bold: !!(activeFilter && affectsOption)
+        });
+      });
+    });
+  }
+  var selectedOptionState = selectedOptionCodex ? optionStates.find(function (o) {
+    var _o$option$ocd;
+    return o.optionCodex === selectedOptionCodex || ((_o$option$ocd = o.option.ocd) !== null && _o$option$ocd !== void 0 ? _o$option$ocd : o.option.codex) === selectedOptionCodex;
+  }) : undefined;
+  var allOptionValues = selectedOptionState ? flattenArticleOptionValues(selectedOptionState) : [];
+  var stack = (_article$decisionDebu4 = article === null || article === void 0 || (_article$decisionDebu5 = article.decisionDebugStacks) === null || _article$decisionDebu5 === void 0 || (_article$decisionDebu5 = _article$decisionDebu5[0]) === null || _article$decisionDebu5 === void 0 ? void 0 : _article$decisionDebu5.stack) !== null && _article$decisionDebu4 !== void 0 ? _article$decisionDebu4 : [];
+  var decisionMatrixRowData = useMemo(function () {
+    return visibleRowIndices.map(function (i) {
+      var row = {
+        _rowIdx: i
+      };
+      filteredDecisions.forEach(function (col, j) {
+        row["col_".concat(j)] = col[i];
+      });
+      return row;
+    });
+  }, [visibleRowIndices, filteredDecisions]);
+  var decisionMatrixColDefs = useMemo(function () {
+    return [{
+      field: '_rowIdx',
+      headerName: '#',
+      width: 50,
+      flex: 0
+    }].concat(_toConsumableArray(filteredDecisions.map(function (_, j) {
+      return {
+        field: "col_".concat(j),
+        headerName: String(j),
+        flex: 1,
+        minWidth: 80,
+        cellRenderer: function cellRenderer(params) {
+          var _params$data, _params$context;
+          var cell = (_params$data = params.data) === null || _params$data === void 0 ? void 0 : _params$data["col_".concat(j)];
+          if (!cell) return null;
+          var onCellClick = function onCellClick() {
+            return onClick(cell.nr, cell);
+          };
+          return /*#__PURE__*/jsx("div", {
+            role: "button",
+            tabIndex: 0,
+            onKeyDown: function onKeyDown(e) {
+              return e.key === 'Enter' && onCellClick();
+            },
+            onClick: onCellClick,
+            className: (_params$context = params.context) === null || _params$context === void 0 ? void 0 : _params$context.decisionCellClass,
+            style: {
+              cursor: 'pointer',
+              width: '100%',
+              height: '100%',
+              padding: '10px 14px'
+            },
+            children: cell.bold ? /*#__PURE__*/jsx("strong", {
+              children: cell.text
+            }) : cell.text
+          });
+        }
+      };
+    })));
+  }, [filteredDecisions, onClick]);
+  var optionsRowData = useMemo(function () {
+    return optionStates.map(function (ops) {
+      var _ref3, _ref4, _ops$optionCodex, _ops$option$name;
+      return {
+        codex: (_ref3 = (_ref4 = (_ops$optionCodex = ops.optionCodex) !== null && _ops$optionCodex !== void 0 ? _ops$optionCodex : ops.option.ocd) !== null && _ref4 !== void 0 ? _ref4 : ops.option.codex) !== null && _ref3 !== void 0 ? _ref3 : '',
+        name: (_ops$option$name = ops.option.name) !== null && _ops$option$name !== void 0 ? _ops$option$name : ''
+      };
+    });
+  }, [optionStates]);
+  var optionValuesRowData = useMemo(function () {
+    var decisionNr = function decisionNr(d) {
+      var _ref5, _Number, _d$decision, _d$decision2;
+      return (_ref5 = (_Number = (_d$decision = d.decision) === null || _d$decision === void 0 ? void 0 : _d$decision.Number) !== null && _Number !== void 0 ? _Number : (_d$decision2 = d.decision) === null || _d$decision2 === void 0 ? void 0 : _d$decision2.decisionNo) !== null && _ref5 !== void 0 ? _ref5 : d.nr;
+    };
+    var toRow = function toRow(e) {
+      var _e$text;
+      return _objectSpread(_objectSpread({}, e), {}, {
+        bold: undefined,
+        text: (_e$text = e.text) !== null && _e$text !== void 0 ? _e$text : String(e.nr)
+      });
+    };
+    return allOptionValues.map(function (opv) {
+      var status = getOpvStatus(stack, selectedOptionCodex, opv.codex);
+      return {
+        codex: opv.codex,
+        name: opv.name,
+        status: /*#__PURE__*/jsxs(Fragment, {
+          children: [status.visible ? /*#__PURE__*/jsx("span", {
+            className: opvStatusVisible,
+            children: "visible"
+          }) : /*#__PURE__*/jsxs("span", {
+            className: opvStatusHidden,
+            children: ["hidden since", ' ', status.hiddenSince ? /*#__PURE__*/jsx("button", {
+              type: "button",
+              className: decisionLink,
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                setSelectedRow(toRow(status.hiddenSince));
+              },
+              children: decisionNr(status.hiddenSince)
+            }) : '?']
+          }), status.newValueSince && /*#__PURE__*/jsxs("span", {
+            className: opvStatusNewValue,
+            children: [' ', "newValue since", ' ', /*#__PURE__*/jsx("button", {
+              type: "button",
+              className: decisionLink,
+              onClick: function onClick(e) {
+                e.stopPropagation();
+                setSelectedRow(toRow(status.newValueSince));
+              },
+              children: decisionNr(status.newValueSince)
+            })]
+          })]
+        })
+      };
+    });
+  }, [allOptionValues, stack, selectedOptionCodex]);
+  var optionsColDefs = useMemo(function () {
+    return [{
+      field: 'codex',
+      headerName: 'Option',
+      flex: 1,
+      minWidth: 80
+    }, {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 100
+    }];
+  }, []);
+  var optionValuesColDefs = useMemo(function () {
+    return [{
+      field: 'codex',
+      headerName: 'Codex',
+      flex: 1,
+      minWidth: 80
+    }, {
+      field: 'name',
+      headerName: 'Name',
+      flex: 1,
+      minWidth: 100
+    }, {
+      field: 'status',
+      headerName: 'Status',
+      flex: 1,
+      minWidth: 150,
+      cellRenderer: function cellRenderer(params) {
+        var _params$data$status, _params$data2;
+        return (_params$data$status = (_params$data2 = params.data) === null || _params$data2 === void 0 ? void 0 : _params$data2.status) !== null && _params$data$status !== void 0 ? _params$data$status : null;
+      }
+    }];
+  }, []);
+  var getOptionsRowClass = function getOptionsRowClass(params) {
+    var _params$data3;
+    return ((_params$data3 = params.data) === null || _params$data3 === void 0 ? void 0 : _params$data3.codex) === selectedOptionCodex ? optionsTableSelected : undefined;
+  };
+  var getOptionValuesRowClass = function getOptionValuesRowClass(params) {
+    var _params$data4;
+    return ((_params$data4 = params.data) === null || _params$data4 === void 0 ? void 0 : _params$data4.codex) === selectedOptionValueCodex ? optionValueSelected : undefined;
+  };
+  var onOptionsRowClicked = function onOptionsRowClicked(e) {
+    if (!e.data) return;
+    var codex = e.data.codex;
+    setSelectedOptionCodex(selectedOptionCodex === codex ? undefined : codex);
+  };
+  var onOptionValuesRowClicked = function onOptionValuesRowClicked(e) {
+    if (!e.data) return;
+    setSelectedOptionValueCodex(selectedOptionValueCodex === e.data.codex ? undefined : e.data.codex);
+  };
+  useEffect(function () {
+    var id = setTimeout(function () {
+      var _optionsGridRef$curre, _optionValuesGridRef$;
+      (_optionsGridRef$curre = optionsGridRef.current) === null || _optionsGridRef$curre === void 0 || (_optionsGridRef$curre = _optionsGridRef$curre.api) === null || _optionsGridRef$curre === void 0 || _optionsGridRef$curre.redrawRows();
+      (_optionValuesGridRef$ = optionValuesGridRef.current) === null || _optionValuesGridRef$ === void 0 || (_optionValuesGridRef$ = _optionValuesGridRef$.api) === null || _optionValuesGridRef$ === void 0 || _optionValuesGridRef$.redrawRows();
+    }, 0);
+    return function () {
+      return clearTimeout(id);
+    };
+  }, [selectedOptionCodex, selectedOptionValueCodex]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread({}, props), {}, {
+    className: classnames(props.className, scrollable, viewHandler.uiState.configSettingsIsExpanded ? notExpanded : undefined),
+    style: {
+      zIndex: 800
+    },
+    children: [/*#__PURE__*/jsx("a", {
+      className: header,
+      children: "Decision history"
+    }), /*#__PURE__*/jsx(ArticleSelector, {
+      articleState: [article, setArticle],
+      rerender: rerender
+    }), /*#__PURE__*/jsx("p", {
+      className: tableDescription,
+      children: "These tables show how configuration decisions affect product options and their visibility. Select an option to see which values are visible or hidden per decision."
+    }), /*#__PURE__*/jsxs("div", {
+      className: optionsTable,
+      children: [/*#__PURE__*/jsx("div", {
+        className: optionsTableColumn,
+        children: /*#__PURE__*/jsx("div", {
+          className: decisionsGridContainer,
+          children: /*#__PURE__*/jsx(AgGridReact, {
+            ref: decisionsGridRef,
+            rowData: decisionMatrixRowData,
+            columnDefs: decisionMatrixColDefs,
+            theme: gridTheme,
+            getRowId: function getRowId(p) {
+              var _p$data$_rowIdx, _p$data;
+              return String((_p$data$_rowIdx = (_p$data = p.data) === null || _p$data === void 0 ? void 0 : _p$data._rowIdx) !== null && _p$data$_rowIdx !== void 0 ? _p$data$_rowIdx : '');
+            },
+            suppressCellFocus: true,
+            domLayout: "normal",
+            context: {
+              decisionCellClass: decisionCell
+            }
+          })
+        })
+      }), /*#__PURE__*/jsx("div", {
+        className: optionsTableColumn,
+        children: /*#__PURE__*/jsx("div", {
+          className: gridContainer,
+          children: /*#__PURE__*/jsx(AgGridReact, {
+            ref: optionsGridRef,
+            rowData: optionsRowData,
+            columnDefs: optionsColDefs,
+            theme: gridTheme,
+            getRowId: function getRowId(p) {
+              var _p$data$codex, _p$data2;
+              return (_p$data$codex = (_p$data2 = p.data) === null || _p$data2 === void 0 ? void 0 : _p$data2.codex) !== null && _p$data$codex !== void 0 ? _p$data$codex : '';
+            },
+            getRowClass: getOptionsRowClass,
+            onRowClicked: onOptionsRowClicked,
+            suppressCellFocus: true,
+            suppressRowClickSelection: true,
+            domLayout: "normal"
+          })
+        })
+      }), selectedOptionCodex && allOptionValues.length > 0 && /*#__PURE__*/jsxs("div", {
+        className: optionValuesTable,
+        children: [/*#__PURE__*/jsxs("h4", {
+          children: ["Option values (", selectedOptionState === null || selectedOptionState === void 0 ? void 0 : selectedOptionState.option.name, ")"]
+        }), /*#__PURE__*/jsx("div", {
+          className: optionValuesGridContainer,
+          children: /*#__PURE__*/jsx(AgGridReact, {
+            ref: optionValuesGridRef,
+            rowData: optionValuesRowData,
+            columnDefs: optionValuesColDefs,
+            theme: gridTheme,
+            getRowId: function getRowId(p) {
+              var _p$data$codex2, _p$data3;
+              return (_p$data$codex2 = (_p$data3 = p.data) === null || _p$data3 === void 0 ? void 0 : _p$data3.codex) !== null && _p$data$codex2 !== void 0 ? _p$data$codex2 : '';
+            },
+            getRowClass: getOptionValuesRowClass,
+            onRowClicked: onOptionValuesRowClicked,
+            suppressCellFocus: true,
+            suppressRowClickSelection: true,
+            domLayout: "autoHeight"
+          })
+        })]
+      })]
+    }), selectedRow && /*#__PURE__*/jsx("div", {
+      className: decision,
+      children: /*#__PURE__*/jsx(DecisionVisualization, {
+        decision: selectedRow.decision,
+        snapshots: selectedRow.snapshots,
+        onClose: function onClose() {
+          return setSelectedRow(undefined);
+        }
+      })
+    })]
+  }));
+};
+var DecisionAnalyzer$1 = observer(DecisionAnalyzer);
+
+export { DecisionAnalyzer$1 as default };

package/build/esm/{index-387d57db.js → index-5f69fd68.js}

@@ -1,19 +1,19 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
-import { w as wcSize, d as wcSizeSmall, e as wcImagePlaceHolder, b as wcImage, t as textContainer, f as big, c as wcConfiguratorSettingsTitle, m as metaData, g as ccConstructionWarning, p as paletteItem, s as sel } from './index.module-ad53ab73.js';
-import { w as wcFavoriteSel, a as wcFavorite } from './index.module-8a415dfc.js';
+import { w as wcSize, d as wcSizeSmall, e as wcImagePlaceHolder, b as wcImage, t as textContainer, f as big, c as wcConfiguratorSettingsTitle, m as metaData, g as ccConstructionWarning, p as paletteItem, s as sel } from './index.module-10ef8efd.js';
+import { w as wcFavoriteSel, a as wcFavorite } from './index.module-997fb0a0.js';
 import { useTranslation, useDivaCore } from '@crystaldesign/diva-core';
-import IsActive from './index-27d7bff3.js';
+import IsActive from './index-bd409924.js';
 import { useHover, useLayer } from 'react-laag';
-import MetaData from './index-b5dc4d78.js';
-import GenericToolTip from './index-00169904.js';
-import InfoIcon from './index-b77ed4ff.js';
-import PricePreview from './index-3c75a86f.js';
-import ReverseCheck from './index-ac2c2cc6.js';
+import MetaData from './index-5ab582bc.js';
+import GenericToolTip from './index-3405d0c1.js';
+import InfoIcon from './index-dd16f37b.js';
+import PricePreview from './index-74593187.js';
+import ReverseCheck from './index-7b963616.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import 'react-dynamic-multi-render';
 import '@babel/runtime/helpers/objectWithoutProperties';
@@ -28,7 +28,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index-922eb980.js';
+import './index-c702e8f6.js';
 import 'react-countup';
 import '@mui/icons-material/Block';
 import '@mui/icons-material/Warning';

package/build/esm/{index-6e85d210.js → index-60452194.js}

@@ -1,10 +1,10 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { s as styleInject, u as useViewHandler } from './index-46e88edd.js';
+import { s as styleInject, u as useViewHandler } from './index-beea7e3b.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { observer } from 'mobx-react-lite';
 import classnames from 'classnames';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { i as loadingIcon, j as generateIcon } from './index.module-5df4dc22.js';
+import { i as loadingIcon, j as generateIcon } from './index.module-214b139d.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/defineProperty';
 import 'react-dynamic-multi-render';

package/build/esm/{index-99383c3e.js → index-605254d4.js}

@@ -1,10 +1,10 @@
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import classnames from 'classnames';
 import { observer } from 'mobx-react-lite';
 import 'react';
 import { useTranslation } from '@crystaldesign/diva-core';
-import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-ad53ab73.js';
-import IsActive from './index-27d7bff3.js';
+import { p as paletteItem, w as wcSize, a as wcSizeNormal, b as wcImage, t as textContainer, c as wcConfiguratorSettingsTitle } from './index.module-10ef8efd.js';
+import IsActive from './index-bd409924.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
 import '@babel/runtime/helpers/defineProperty';

package/build/esm/{index-72534942.js → index-60730f2d.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { u as useViewHandler } from './index-46e88edd.js';
+import { u as useViewHandler } from './index-beea7e3b.js';
 import 'react';
 import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
-import ShelfDeleteButton from './index-b098395c.js';
+import ShelfDeleteButton from './index-d1684dfc.js';
 import { observer } from 'mobx-react-lite';
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';

package/build/esm/{index-f42c2092.js → index-610955de.js}

@@ -1,8 +1,8 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { s as styleInject } from './index-46e88edd.js';
+import { s as styleInject } from './index-beea7e3b.js';
 import { observer } from 'mobx-react-lite';
 import 'react';
-import ActionNavigation from './index-737aebaa.js';
+import ActionNavigation from './index-f0ceadd8.js';
 import classnames from 'classnames';
 import { jsx } from 'react/jsx-runtime';
 import '@babel/runtime/helpers/slicedToArray';
@@ -20,7 +20,7 @@ import '@crystaldesign/web-planner-logic';
 import 'qrcode.react';
 import '@babel/runtime/helpers/typeof';
 import 'flat';
-import './index.module-d26583d8.js';
+import './index.module-4a7ecdbc.js';
 
 var container = "container-LaFKa";
 var back = "back-A14G4";