strategy-panel 1.0.0 → 1.0.1

package/.fatherrc.ts

@@ -1,26 +1,26 @@
-export default {
-  esm: 'babel',
-  // cjs: 'babel',
-  // lessInBabelMode: true,
-  // cssModules: true,
-  extraBabelPlugins: [
-    [
-      'babel-plugin-module-resolver',
-      {
-        root: ['./'],
-        extensions: ['.d.ts', '.ts'],
-        alias: {
-          '@': './src',
-        },
-      },
-    ],
-    [
-      'babel-plugin-import',
-      {
-        libraryName: 'antd',
-        libraryDirectory: 'es',
-        style: true,
-      },
-    ],
-  ],
-};
+export default {
+  esm: 'babel',
+  // cjs: 'babel',
+  // lessInBabelMode: true,
+  // cssModules: true,
+  extraBabelPlugins: [
+    [
+      'babel-plugin-module-resolver',
+      {
+        root: ['./'],
+        extensions: ['.d.ts', '.ts'],
+        alias: {
+          '@': './src',
+        },
+      },
+    ],
+    [
+      'babel-plugin-import',
+      {
+        libraryName: 'antd',
+        libraryDirectory: 'es',
+        style: true,
+      },
+    ],
+  ],
+};

package/.umirc.ts

@@ -1,29 +1,29 @@
-import { defineConfig } from 'dumi';
-const { NODE_ENV } = process.env;
-
-const basicBabelPlugin = [
-  [
-    'babel-plugin-import',
-    {
-      libraryName: 'antd',
-      libraryDirectory: 'es',
-      style: true,
-    },
-  ],
-];
-
-const extraBabelPlugins =
-  NODE_ENV === 'development'
-    ? [...basicBabelPlugin]
-    : ['babel-plugin-transform-remove-console', ...basicBabelPlugin];
-
-export default defineConfig({
-  title: 'strategy-panel',
-  outputPath: 'docs-dist',
-  logo: '/logo.svg',
-  locales: [
-    ['zh-CN', '中文'],
-    ['en-US', 'English'],
-  ],
-  extraBabelPlugins,
-});
+import { defineConfig } from 'dumi';
+const { NODE_ENV } = process.env;
+
+const basicBabelPlugin = [
+  [
+    'babel-plugin-import',
+    {
+      libraryName: 'antd',
+      libraryDirectory: 'es',
+      style: true,
+    },
+  ],
+];
+
+const extraBabelPlugins =
+  NODE_ENV === 'development'
+    ? [...basicBabelPlugin]
+    : ['babel-plugin-transform-remove-console', ...basicBabelPlugin];
+
+export default defineConfig({
+  title: 'strategy-panel',
+  outputPath: 'docs-dist',
+  logo: '/logo.svg',
+  locales: [
+    ['zh-CN', '中文'],
+    ['en-US', 'English'],
+  ],
+  extraBabelPlugins,
+});

package/README.md

@@ -1,33 +1,33 @@
-# strategy-panel
-
-## Getting Started
-
-Install dependencies,
-
-```bash
-$ npm i
-```
-
-Start the dev server,
-
-```bash
-$ npm start
-```
-
-Build documentation,
-
-```bash
-$ npm run docs:build
-```
-
-Run test,
-
-```bash
-$ npm test
-```
-
-Build library via `father-build`,
-
-```bash
-$ npm run build
-```
+# strategy-panel
+
+## Getting Started
+
+Install dependencies,
+
+```bash
+$ npm i
+```
+
+Start the dev server,
+
+```bash
+$ npm start
+```
+
+Build documentation,
+
+```bash
+$ npm run docs:build
+```
+
+Run test,
+
+```bash
+$ npm test
+```
+
+Build library via `father-build`,
+
+```bash
+$ npm run build
+```

package/es/assets/rhombus.svg

@@ -1,3 +1,3 @@
-<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" stroke="#FFB200" stroke-width="1"/>
-</svg>
+<svg width="100%" height="100%" preserveAspectRatio="none" viewBox="0 0 167 90" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path vector-effect="non-scaling-stroke" d="M2.10786 45L83.5 1.13597L164.892 45L83.5 88.864L2.10786 45Z" fill="#FFECC7" stroke="#FFB200" stroke-width="1"/>
+</svg>

package/es/common/graph-common/node-element/common-element.less

@@ -1,117 +1,117 @@
-@node-element-primary-color: #00A6FF;
-
-.x6-node [magnet='true'] {
-  cursor: crosshair;
-  transition: none;
-}
-
-.x6-node [magnet='true']:hover {
-  opacity: 1;
-}
-
-.x6-node [magnet='true'][port-group='in'] {
-  cursor: move;
-  stroke: none;
-}
-
-.x6-port-body > span {
-  display: block;
-}
-
-.ais-port {
-  width: 100%;
-  height: 100%;
-  border: 1px solid #00A6FF;
-  border-radius: 100%;
-  background: #fff;
-  display: block;
-}
-
-.ais-port.connected {
-  width: 0;
-  height: 0;
-  margin-top: 3px;
-  margin-left: -1px;
-  border-width: 5px 4px 0;
-  border-style: solid;
-  border-color: #00A6FF transparent transparent;
-  border-radius: 0;
-  background-color: transparent;
-}
-
-.x6-port-body.available {
-  overflow: visible;
-}
-
-.x6-port-body.available body {
-  overflow: visible;
-}
-.x6-port-body.available span {
-  overflow: visible;
-  display: block;
-}
-
-.x6-port-body.available body > span::before {
-  content: ' ';
-  float: left;
-  width: 20px;
-  height: 20px;
-  margin-top: -6px;
-  margin-left: -6px;
-  border-radius: 50%;
-  background-color: fade(@node-element-primary-color, 60%);
-  box-sizing: border-box;
-}
-
-.x6-port-body.available body > span::after {
-  content: ' ';
-  float: left;
-  clear: both;
-  width: 10px;
-  height: 10px;
-  margin-top: -15px;
-  margin-left: -1px;
-  border-radius: 50%;
-  background-color: #fff;
-  border: 1px solid @node-element-primary-color;
-  // position: relative;
-  z-index: 10;
-  box-sizing: border-box;
-  // transform: translateZ(0);
-  // position: relative
-}
-
-.x6-port-body.adsorbed {
-  overflow: visible;
-}
-
-.x6-port-body.adsorbed body {
-  overflow: visible;
-}
-
-.x6-port-body.adsorbed body > span::before {
-  content: ' ';
-  float: left;
-  width: 28px;
-  height: 28px;
-  margin-top: -9px;
-  margin-left: -10px;
-  border-radius: 50%;
-  background-color: fade(@node-element-primary-color, 60%);
-  box-sizing: border-box;
-}
-
-.x6-port-body.adsorbed body > span::after {
-  content: ' ';
-  float: left;
-  clear: both;
-  width: 10px;
-  height: 10px;
-  margin-top: -19px;
-  border-radius: 50%;
-  background-color: #fff;
-  border: 1px solid @node-element-primary-color;
-  // position: relative;
-  z-index: 10;
-  box-sizing: border-box;
-}
+@node-element-primary-color: #00A6FF;
+
+.x6-node [magnet='true'] {
+  cursor: crosshair;
+  transition: none;
+}
+
+.x6-node [magnet='true']:hover {
+  opacity: 1;
+}
+
+.x6-node [magnet='true'][port-group='in'] {
+  cursor: move;
+  stroke: none;
+}
+
+.x6-port-body > span {
+  display: block;
+}
+
+.ais-port {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #00A6FF;
+  border-radius: 100%;
+  background: #fff;
+  display: block;
+}
+
+.ais-port.connected {
+  width: 0;
+  height: 0;
+  margin-top: 3px;
+  margin-left: -1px;
+  border-width: 5px 4px 0;
+  border-style: solid;
+  border-color: #00A6FF transparent transparent;
+  border-radius: 0;
+  background-color: transparent;
+}
+
+.x6-port-body.available {
+  overflow: visible;
+}
+
+.x6-port-body.available body {
+  overflow: visible;
+}
+.x6-port-body.available span {
+  overflow: visible;
+  display: block;
+}
+
+.x6-port-body.available body > span::before {
+  content: ' ';
+  float: left;
+  width: 20px;
+  height: 20px;
+  margin-top: -6px;
+  margin-left: -6px;
+  border-radius: 50%;
+  background-color: fade(@node-element-primary-color, 60%);
+  box-sizing: border-box;
+}
+
+.x6-port-body.available body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -15px;
+  margin-left: -1px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid @node-element-primary-color;
+  // position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+  // transform: translateZ(0);
+  // position: relative
+}
+
+.x6-port-body.adsorbed {
+  overflow: visible;
+}
+
+.x6-port-body.adsorbed body {
+  overflow: visible;
+}
+
+.x6-port-body.adsorbed body > span::before {
+  content: ' ';
+  float: left;
+  width: 28px;
+  height: 28px;
+  margin-top: -9px;
+  margin-left: -10px;
+  border-radius: 50%;
+  background-color: fade(@node-element-primary-color, 60%);
+  box-sizing: border-box;
+}
+
+.x6-port-body.adsorbed body > span::after {
+  content: ' ';
+  float: left;
+  clear: both;
+  width: 10px;
+  height: 10px;
+  margin-top: -19px;
+  border-radius: 50%;
+  background-color: #fff;
+  border: 1px solid @node-element-primary-color;
+  // position: relative;
+  z-index: 10;
+  box-sizing: border-box;
+}

package/es/common/graph-common/node-element/condition-element.d.ts

@@ -3,6 +3,7 @@ import type { Node } from '@antv/x6';
 import './condition-element.less';
 interface Props {
     node?: Node;
+    experimentId: string;
 }
 declare const ConditionElement: React.FC<Props>;
 export default ConditionElement;

package/es/common/graph-common/node-element/condition-element.js

@@ -1,23 +1,48 @@
 import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React from 'react';
 import classNames from 'classnames';
 import { ANT_PREFIX } from "../../constants/global";
 import { NodePopover } from "../node-popover";
 import { ReactSVG } from 'react-svg';
 import "./condition-element.less";
+import { useExperimentGraph } from "../../../pages/rx-models/experiment-graph";
+import { useObservableState } from "../../../hooks/useObservableState";
 
 var ConditionElement = function ConditionElement(props) {
-  var node = props.node;
+  var node = props.node,
+      experimentId = props.experimentId;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
   var name = data.name,
-      selected = data.selected,
+      id = data.id,
       imgUrl = data.imgUrl;
+  var expGraph = useExperimentGraph(experimentId);
+
+  var _useObservableState = useObservableState(function () {
+    return expGraph.activeNodeInstance$;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      activeNodeInstance = _useObservableState2[0];
+
+  var nodeId = activeNodeInstance && activeNodeInstance.id;
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: ANT_PREFIX
   }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     className: classNames('node-rhombus-element', {
-      selected: !!selected
+      selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: require("../../../assets/rhombus.svg"),

package/es/common/graph-common/node-element/condition-element.less

@@ -5,8 +5,6 @@
 @condition-element-height: 107px;
 @condition-element-name-max-width: 144px;
 
-
-
 .node-rhombus-element {
   display: flex;
   flex-direction: row;
@@ -57,6 +55,7 @@
       color: #ffffff;
     }
   }
+
   .icon {
     width: 20px;
     height: 20px;

package/es/common/graph-common/node-element/logical-element.d.ts

@@ -3,6 +3,7 @@ import type { Node } from '@antv/x6';
 import './logical-element.less';
 interface Props {
     node?: Node;
+    experimentId: string;
 }
 declare const ConditionElement: React.FC<Props>;
 export default ConditionElement;

package/es/common/graph-common/node-element/logical-element.js

@@ -1,11 +1,26 @@
 import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React from 'react';
 import classNames from 'classnames';
 import { ANT_PREFIX } from "../../constants/global";
 import { NodePopover } from "../node-popover";
 import { ReactSVG } from 'react-svg';
 import "./logical-element.less";
+import { useExperimentGraph } from "../../../pages/rx-models/experiment-graph";
+import { useObservableState } from "../../../hooks/useObservableState";
 var operatorUrl = {
   '|': require("../../../assets/OR.svg"),
   '&': require("../../../assets/AND.svg"),
@@ -13,17 +28,27 @@ var operatorUrl = {
 };
 
 var ConditionElement = function ConditionElement(props) {
-  var node = props.node;
+  var node = props.node,
+      experimentId = props.experimentId;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
-  var selected = data.selected,
+  var id = data.id,
       imgUrl = data.imgUrl,
       nodeData = data.nodeData;
   var operator = nodeData === null || nodeData === void 0 ? void 0 : nodeData.operator;
+  var expGraph = useExperimentGraph(experimentId);
+
+  var _useObservableState = useObservableState(function () {
+    return expGraph.activeNodeInstance$;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      activeNodeInstance = _useObservableState2[0];
+
+  var nodeId = activeNodeInstance && activeNodeInstance.id;
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: ANT_PREFIX
   }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('logical-element', {
-      selected: !!selected
+      selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: operator ? (operatorUrl === null || operatorUrl === void 0 ? void 0 : operatorUrl[operator]) || imgUrl : imgUrl,

package/es/common/graph-common/node-element/node-element.d.ts

@@ -3,6 +3,7 @@ import type { Node } from '@antv/x6';
 import './node-element.less';
 interface Props {
     node?: Node;
+    experimentId: string;
 }
 export declare const NodeElement: React.FC<Props>;
 export {};

package/es/common/graph-common/node-element/node-element.js

@@ -1,22 +1,47 @@
 import "antd/es/config-provider/style";
 import _ConfigProvider from "antd/es/config-provider";
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React from 'react';
 import classNames from 'classnames';
 import { ANT_PREFIX } from "../../constants/global";
 import { NodePopover } from "../node-popover";
 import { ReactSVG } from 'react-svg';
 import "./node-element.less";
+import { useExperimentGraph } from "../../../pages/rx-models/experiment-graph";
+import { useObservableState } from "../../../hooks/useObservableState";
 export var NodeElement = function NodeElement(props) {
-  var node = props.node;
+  var node = props.node,
+      experimentId = props.experimentId;
   var data = (node === null || node === void 0 ? void 0 : node.getData()) || {};
   var name = data.name,
-      selected = data.selected,
-      imgUrl = data.imgUrl;
+      imgUrl = data.imgUrl,
+      id = data.id;
+  var expGraph = useExperimentGraph(experimentId);
+
+  var _useObservableState = useObservableState(function () {
+    return expGraph.activeNodeInstance$;
+  }),
+      _useObservableState2 = _slicedToArray(_useObservableState, 1),
+      activeNodeInstance = _useObservableState2[0];
+
+  var nodeId = activeNodeInstance && activeNodeInstance.id;
   return /*#__PURE__*/React.createElement(_ConfigProvider, {
     prefixCls: ANT_PREFIX
   }, /*#__PURE__*/React.createElement(NodePopover, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('node-element', {
-      selected: !!selected
+      selected: !!nodeId && nodeId === id
     })
   }, /*#__PURE__*/React.createElement(ReactSVG, {
     src: imgUrl,

package/es/hooks/withMode.d.ts

@@ -0,0 +1 @@
+export declare function withMode(WrappedComponent: any, mode: Types.ModeType): JSX.Element;

package/es/hooks/withMode.js

@@ -0,0 +1,16 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+import React from 'react';
+export function withMode(WrappedComponent, mode) {
+  var WithModeComponent = function WithModeComponent(props) {
+    return /*#__PURE__*/React.createElement(WrappedComponent.type, _objectSpread({}, props));
+  };
+
+  return /*#__PURE__*/React.createElement(WithModeComponent, _objectSpread(_objectSpread({}, (WrappedComponent === null || WrappedComponent === void 0 ? void 0 : WrappedComponent.props) || {}), {}, {
+    mode: mode
+  }));
+}