strategy-panel 1.0.0 → 1.0.1

package/es/pages/config-panel/components/time-trigger/index.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import '../../style.less';
-interface Props {
+interface Props extends Types.PanelComponentProps {
     value?: any;
     onChange?: (value: any) => void;
 }

package/es/pages/config-panel/components/time-trigger/index.js

@@ -26,14 +26,14 @@ import "../../style.less";
 var TimeTrigger = function TimeTrigger(props) {
   var value = props.value,
       onChange = props.onChange;
+  var modeType = props.mode || 'platform';
+  var modeDisabled = modeType === 'view';
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
       isFirst = _useState2[0],
       setIsFirst = _useState2[1];
 
-  console.log('TimeTrigger', value);
-
   var handleModeChange = function handleModeChange(mode) {
     if (isFirst) setIsFirst(false);
     onChange === null || onChange === void 0 ? void 0 : onChange({
@@ -42,19 +42,23 @@ var TimeTrigger = function TimeTrigger(props) {
   };
 
   var modeComponent = {
-    '1': /*#__PURE__*/React.createElement(DelayTime, {
+    delay: /*#__PURE__*/React.createElement(DelayTime, {
+      disabled: modeDisabled,
       value: value,
       onChange: onChange
     }),
-    '2': /*#__PURE__*/React.createElement(PersistentTime, {
+    duration: /*#__PURE__*/React.createElement(PersistentTime, {
+      disabled: modeDisabled,
       value: value,
       onChange: onChange
     }),
-    '3': /*#__PURE__*/React.createElement(IntervalTime, {
+    interval: /*#__PURE__*/React.createElement(IntervalTime, {
+      disabled: modeDisabled,
       value: value,
       onChange: onChange
     }),
-    '4': /*#__PURE__*/React.createElement(TimingTime, {
+    timing: /*#__PURE__*/React.createElement(TimingTime, {
+      disabled: modeDisabled,
       value: value,
       onChange: onChange
     })
@@ -67,17 +71,18 @@ var TimeTrigger = function TimeTrigger(props) {
     className: "no-margin-bottom",
     validateStatus: (value === null || value === void 0 ? void 0 : value.mode) || isFirst ? 'success' : 'error'
   }, /*#__PURE__*/React.createElement(_Select, {
+    disabled: modeDisabled,
     allowClear: true,
     onChange: handleModeChange,
     value: value === null || value === void 0 ? void 0 : value.mode
   }, /*#__PURE__*/React.createElement(_Select.Option, {
-    value: "1"
+    value: "delay"
   }, "\u5EF6\u8FDF"), /*#__PURE__*/React.createElement(_Select.Option, {
-    value: "2"
+    value: "duration"
   }, "\u6301\u7EED"), /*#__PURE__*/React.createElement(_Select.Option, {
-    value: "3"
+    value: "interval"
   }, "\u95F4\u9694"), /*#__PURE__*/React.createElement(_Select.Option, {
-    value: "4"
+    value: "timing"
   }, "\u5B9A\u65F6")))), (value === null || value === void 0 ? void 0 : value.mode) && modeComponent[value.mode]);
 };
 

package/es/pages/config-panel/components/time-trigger/interval-time.d.ts

@@ -3,6 +3,7 @@ import '../../style.less';
 interface Props {
     value?: any;
     onChange?: (value: any) => void;
+    disabled: boolean;
 }
 declare const IntervalTime: React.FC<Props>;
 export default IntervalTime;

package/es/pages/config-panel/components/time-trigger/interval-time.js

@@ -16,7 +16,8 @@ import "../../style.less";
 
 var IntervalTime = function IntervalTime(props) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disabled = props.disabled;
 
   var intervalTimesChange = function intervalTimesChange(intervalTimes) {
     onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, value), {}, {
@@ -27,6 +28,7 @@ var IntervalTime = function IntervalTime(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: classNames('border-bottom', 'inner-bottom-box')
   }, /*#__PURE__*/React.createElement(TimeHorizon, {
+    disabled: disabled,
     title: "\u95F4\u9694\u65F6\u95F4",
     value: value,
     onChange: onChange
@@ -43,7 +45,8 @@ var IntervalTime = function IntervalTime(props) {
     },
     addonAfter: "\u6B21",
     value: value === null || value === void 0 ? void 0 : value.intervalTimes,
-    onChange: intervalTimesChange
+    onChange: intervalTimesChange,
+    disabled: disabled
   }))));
 };
 

package/es/pages/config-panel/components/time-trigger/persistent-time.d.ts

@@ -3,6 +3,7 @@ import '../../style.less';
 interface Props {
     value?: any;
     onChange?: (value: any) => void;
+    disabled?: boolean;
 }
 declare const PersistentTime: React.FC<Props>;
 export default PersistentTime;

package/es/pages/config-panel/components/time-trigger/persistent-time.js

@@ -5,10 +5,12 @@ import "../../style.less";
 
 var PersistentTime = function PersistentTime(props) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disabled = props.disabled;
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('border-bottom', 'inner-bottom-box')
   }, /*#__PURE__*/React.createElement(TimeHorizon, {
+    disabled: disabled,
     title: "\u6301\u7EED\u65F6\u95F4",
     value: value,
     onChange: onChange

package/es/pages/config-panel/components/time-trigger/timing-time.d.ts

@@ -3,6 +3,7 @@ import '../../style.less';
 interface Props {
     value?: any;
     onChange?: (value: any) => void;
+    disabled?: boolean;
 }
 declare const TimingTime: React.FC<Props>;
 export default TimingTime;

package/es/pages/config-panel/components/time-trigger/timing-time.js

@@ -16,7 +16,8 @@ import "../../style.less";
 
 var TimingTime = function TimingTime(props) {
   var value = props.value,
-      onChange = props.onChange;
+      onChange = props.onChange,
+      disabled = props.disabled;
 
   var cycleChange = function cycleChange(cycle) {
     onChange === null || onChange === void 0 ? void 0 : onChange(_objectSpread(_objectSpread({}, value), {}, {
@@ -34,6 +35,7 @@ var TimingTime = function TimingTime(props) {
     className: "no-margin-bottom",
     validateStatus: (value === null || value === void 0 ? void 0 : value.cycle) ? 'success' : 'error'
   }, /*#__PURE__*/React.createElement(_Select, {
+    disabled: disabled,
     allowClear: true,
     value: value === null || value === void 0 ? void 0 : value.cycle,
     onChange: cycleChange
@@ -44,6 +46,7 @@ var TimingTime = function TimingTime(props) {
   }, "\u5468"), /*#__PURE__*/React.createElement(_Select.Option, {
     value: "month"
   }, "\u6708")))), (value === null || value === void 0 ? void 0 : value.cycle) && /*#__PURE__*/React.createElement(CycleTime, {
+    disabled: disabled,
     value: value,
     onChange: onChange
   }));

package/es/pages/config-panel/config-common.d.ts

@@ -34,4 +34,4 @@ export declare const getComponentConfig: (experimentId: string) => {
         }[];
     })[];
 };
-export declare const getFormatComponent: (data: any) => JSX.Element | undefined;
+export declare const getFormatComponent: (data: any, mode: Types.ModeType) => JSX.Element | undefined;

package/es/pages/config-panel/config-common.js

@@ -8,6 +8,7 @@ import _Select from "antd/es/select";
 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';
+import { withMode } from "../../hooks/withMode";
 import { MOTION_OPERATION, // COMPONENTS_TYPE,
 // COMMONLY_USED,
 SCENE_DISPLAY, SIGN_OPERATION // MOTION_OPERATION,
@@ -69,7 +70,7 @@ export var getComponentConfig = function getComponentConfig(experimentId) {
     }]
   }]), _ref;
 };
-export var getFormatComponent = function getFormatComponent(data) {
+export var getFormatComponent = function getFormatComponent(data, mode) {
   var type = data.type,
       name = data.name,
       label = data.label,
@@ -81,7 +82,10 @@ export var getFormatComponent = function getFormatComponent(data) {
   var rules = [{
     required: required,
     message: "\u8BF7\u8F93\u5165/\u9009\u62E9".concat(label)
-  }];
+  }]; //
+
+  var withModeComponent = withMode(component, mode); // console.log('withMode(component, mode)', withModeComponent.type)
+  // console.log('component', component.type)
 
   switch (type) {
     case 'input':
@@ -94,7 +98,7 @@ export var getFormatComponent = function getFormatComponent(data) {
         rules: rules,
         className: "no-margin-bottom"
       }, /*#__PURE__*/React.createElement(_Input, {
-        disabled: disabled
+        disabled: mode === 'view' ? true : disabled
       })));
       break;
 
@@ -108,7 +112,7 @@ export var getFormatComponent = function getFormatComponent(data) {
         rules: rules,
         className: "no-margin-bottom"
       }, /*#__PURE__*/React.createElement(_Select, {
-        disabled: disabled
+        disabled: mode === 'view' ? true : disabled
       }, selectData === null || selectData === void 0 ? void 0 : selectData.map(function (item) {
         return /*#__PURE__*/React.createElement(Option, {
           key: item.value,
@@ -127,7 +131,7 @@ export var getFormatComponent = function getFormatComponent(data) {
         name: name,
         rules: rules,
         className: "no-margin-bottom"
-      }, component));
+      }, withModeComponent));
       break;
   }
 

package/es/pages/config-panel/index.d.ts

@@ -6,6 +6,7 @@ interface Props {
     className?: string;
     extraConfigData?: configDataItem;
     activeNodeId?: string;
+    mode?: Types.ModeType;
 }
 declare const ConfigPanel: React.FC<Props>;
 export default ConfigPanel;

package/es/pages/config-panel/index.js

@@ -21,7 +21,9 @@ var ConfigPanel = function ConfigPanel(props) {
   var experimentId = props.experimentId,
       className = props.className,
       activeNodeId = props.activeNodeId,
-      extraConfigData = props.extraConfigData;
+      extraConfigData = props.extraConfigData,
+      _props$mode = props.mode,
+      mode = _props$mode === void 0 ? 'platform' : _props$mode;
   var expGraph = useExperimentGraph(experimentId);
 
   var _useObservableState = useObservableState(function () {
@@ -41,6 +43,7 @@ var ConfigPanel = function ConfigPanel(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "form"
   }, nodeId && /*#__PURE__*/React.createElement(NodeForm, {
+    mode: mode,
     nodeId: nodeId,
     experimentId: experimentId,
     extraConfigData: extraConfigData

package/es/pages/config-panel/node-form.d.ts

@@ -16,6 +16,7 @@ export interface Props {
     experimentId: string;
     nodeId: string;
     extraConfigData?: configDataItem;
+    mode: Types.ModeType;
 }
 declare const NodeForm: React.FC<Props>;
 export default NodeForm;

package/es/pages/config-panel/node-form.js

@@ -3,10 +3,6 @@ import _Input from "antd/es/input";
 import "antd/es/form/style";
 import _Form from "antd/es/form";
 
-function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
-
-function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
-
 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."); }
@@ -32,7 +28,8 @@ var NodeForm = function NodeForm(_ref) {
   var nodeId = _ref.nodeId,
       experimentId = _ref.experimentId,
       _ref$extraConfigData = _ref.extraConfigData,
-      extraConfigData = _ref$extraConfigData === void 0 ? {} : _ref$extraConfigData;
+      extraConfigData = _ref$extraConfigData === void 0 ? {} : _ref$extraConfigData,
+      mode = _ref.mode;
 
   var _Form$useForm = _Form.useForm(),
       _Form$useForm2 = _slicedToArray(_Form$useForm, 1),
@@ -48,39 +45,24 @@ var NodeForm = function NodeForm(_ref) {
 
   var componentConfig = getComponentConfig(experimentId);
 
-  var onValuesChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(value, allValues) {
-      return regeneratorRuntime.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              console.log('onValuesChange', allValues);
-              _context.next = 3;
-              return expGraph.updateNodeData(nodeId, allValues);
-
-            case 3:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function onValuesChange(_x, _x2) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
+  var onValuesChange = function onValuesChange(value, allValues) {
+    console.log('onValuesChange', allValues);
+    expGraph.updateNodeData(nodeId, allValues);
+  };
 
   var nodeType = nodeId === null || nodeId === void 0 ? void 0 : (_nodeId$split = nodeId.split('-')) === null || _nodeId$split === void 0 ? void 0 : _nodeId$split[0];
   var allConfigData = Object.assign({}, componentConfig, extraConfigData);
   var configData = allConfigData === null || allConfigData === void 0 ? void 0 : allConfigData[nodeType];
   useEffect(function () {
     if (node === null || node === void 0 ? void 0 : node.nodeData) {
-      form.setFieldsValue(node === null || node === void 0 ? void 0 : node.nodeData);
+      var nodeData = typeof node.nodeData === 'string' ? JSON.parse(node === null || node === void 0 ? void 0 : node.nodeData) : node.nodeData;
+      console.log('NodeForm useEffect', node.nodeData);
+      form.setFieldsValue(nodeData);
     }
   }, [node === null || node === void 0 ? void 0 : node.nodeData]);
   return /*#__PURE__*/React.createElement(_Form, {
     form: form,
+    className: "config-panel-form",
     layout: "vertical",
     onValuesChange: onValuesChange
   }, /*#__PURE__*/React.createElement("div", {
@@ -91,7 +73,9 @@ var NodeForm = function NodeForm(_ref) {
   }, /*#__PURE__*/React.createElement(_Input, {
     disabled: true,
     value: node === null || node === void 0 ? void 0 : node.name
-  }))), configData === null || configData === void 0 ? void 0 : configData.map(getFormatComponent));
+  }))), configData === null || configData === void 0 ? void 0 : configData.map(function (item) {
+    return getFormatComponent(item, mode);
+  }));
 };
 
 export default NodeForm;

package/es/pages/config-panel/style.less

@@ -30,6 +30,12 @@
   margin-bottom: 0 !important;
 }
 
+.config-panel-form{
+  & > .border-bottom:last-child{
+    margin-bottom: 50px;
+  }
+}
+
 .border-bottom {
   margin-bottom: 6px;
   padding: 0 10px 12px;
@@ -47,16 +53,29 @@
   .ant-input,
   .ant-input-number,
   .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number,
-  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover,
+  .ant-input-number-status-error:not(.ant-input-number-disabled):not(.ant-input-number-borderless).ant-input-number:hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
   .ant-picker,
   .ant-picker:not([disabled]):hover,
-  .ant-picker-status-error.ant-picker, .ant-picker-status-error.ant-picker:not([disabled]):hover,
-  .ant-select:not(.ant-select-customize-input) .ant-select-selector,
-  .ant-form-item-has-error .ant-input-number:not([disabled]):hover, .ant-form-item-has-error .ant-picker:not([disabled]):hover,
+  .ant-picker-status-error.ant-picker, .ant-picker-status-error.ant-picker:not([disabled]):hover{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
+  .ant-form-item-has-error .ant-input-number:not([disabled]):hover,
+  .ant-form-item-has-error .ant-picker:not([disabled]):hover,
   .ant-form-item-has-error .ant-select:not(.ant-select-disabled):not(.ant-select-customize-input) .ant-select-selector{
     border-radius: 4px;
     color: @black-color !important;
     background: @f2-color !important;
   }
+  .ant-select:not(.ant-select-customize-input) .ant-select-selector{
+    border-radius: 4px;
+    color: @black-color !important;
+    background: @f2-color !important;
+  }
 }
 

package/es/pages/dag-canvas/canvas-content.d.ts

@@ -4,6 +4,7 @@ import './canvas-content.less';
 interface Props {
     experimentId: string;
     className?: string;
+    viewData?: any;
 }
 export declare const CanvasContent: React.FC<Props>;
 export {};

package/es/pages/dag-canvas/canvas-content.js

@@ -22,7 +22,8 @@ import { useExperimentGraph } from "../rx-models/experiment-graph";
 import "./canvas-content.less";
 export var CanvasContent = function CanvasContent(props) {
   var experimentId = props.experimentId,
-      className = props.className;
+      className = props.className,
+      viewData = props.viewData;
   var containerRef = useRef(null);
   var canvasRef = useRef(null);
   var expGraph = useExperimentGraph(experimentId); // 渲染画布
@@ -30,6 +31,7 @@ export var CanvasContent = function CanvasContent(props) {
   useEffect(function () {
     window.requestIdleCallback(function () {
       expGraph.renderGraph(containerRef.current, canvasRef.current);
+      if (viewData) expGraph.initPreviewData(viewData).then();
     });
   }, [expGraph]);
 

package/es/pages/dag-canvas/index.d.ts

@@ -8,6 +8,11 @@ interface Props {
      */
     experimentId: string;
     className?: string;
+    /**
+     * @description       viewData
+     * @description.zh-CN 策略初始化数据
+     */
+    viewData?: any;
 }
 declare const DAGCanvas: React.FC<Props>;
 export default DAGCanvas;

package/es/pages/dag-canvas/index.js

@@ -6,7 +6,8 @@ import "./index.less";
 
 var DAGCanvas = function DAGCanvas(props) {
   var experimentId = props.experimentId,
-      className = props.className;
+      className = props.className,
+      viewData = props.viewData;
   var expGraph = useExperimentGraph(experimentId); // 处理画布卸载
 
   useUnmountExperimentGraph(experimentId); // 自定义算法组件的渲染控制
@@ -20,6 +21,7 @@ var DAGCanvas = function DAGCanvas(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: classNames('dag-container', className)
   }, /*#__PURE__*/React.createElement(CanvasContent, {
+    viewData: viewData,
     experimentId: experimentId,
     className: "canvas-content"
   }));

package/es/pages/dag-canvas/preview.d.ts

@@ -4,6 +4,7 @@ import './canvas-content.less';
 interface Props {
     experimentId: string;
     className?: string;
+    viewData?: any;
 }
 declare const CanvasContent: React.FC<Props>;
 export default CanvasContent;

package/es/pages/dag-canvas/preview.js

@@ -6,7 +6,8 @@ import "./canvas-content.less";
 
 var CanvasContent = function CanvasContent(props) {
   var experimentId = props.experimentId,
-      className = props.className; // 处理画布卸载
+      className = props.className,
+      viewData = props.viewData; // 处理画布卸载
 
   useUnmountExperimentGraph(experimentId);
   var containerRef = useRef(null);
@@ -14,6 +15,7 @@ var CanvasContent = function CanvasContent(props) {
   var expGraph = useExperimentGraph(experimentId); // 渲染画布
 
   useEffect(function () {
+    window.renderForm = expGraph.setActiveAlgoData;
     window.requestIdleCallback(function () {
       var _expGraph$graph;
 
@@ -21,7 +23,13 @@ var CanvasContent = function CanvasContent(props) {
         interacting: false
       });
       expGraph === null || expGraph === void 0 ? void 0 : (_expGraph$graph = expGraph.graph) === null || _expGraph$graph === void 0 ? void 0 : _expGraph$graph.hideGrid();
+      expGraph.onClearSelectNodes();
+      console.log('initPreviewData', viewData);
+      expGraph.initPreviewData(viewData).then();
     });
+    return function () {
+      delete window.renderForm;
+    };
   }, [expGraph]);
   return /*#__PURE__*/React.createElement("div", {
     ref: containerRef,

package/es/pages/index.d.ts

@@ -31,7 +31,12 @@ interface Props extends Omit<HeaderProps, 'experimentId'> {
      * @description.zh-CN 组件展示模式： 搭建平台、展示
      * @default           platform
      */
-    mode?: 'platform' | 'view';
+    mode?: Types.ModeType;
+    /**
+     * @description       viewData
+     * @description.zh-CN 预览模式数据源
+     */
+    viewData?: any;
 }
 declare const StrategyCanvas: React.FC<Props>;
 export default StrategyCanvas;

package/es/pages/index.js

@@ -1,4 +1,4 @@
-var _excluded = ["experimentId", "headerVisible", "panelData", "configData", "mode"];
+var _excluded = ["experimentId", "headerVisible", "panelData", "configData", "mode", "viewData"];
 
 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; }
 
@@ -30,6 +30,7 @@ var StrategyCanvas = function StrategyCanvas(props) {
       configData = props.configData,
       _props$mode = props.mode,
       mode = _props$mode === void 0 ? 'platform' : _props$mode,
+      viewData = props.viewData,
       rest = _objectWithoutProperties(props, _excluded);
 
   return mode === 'view' ? /*#__PURE__*/React.createElement("div", {
@@ -41,9 +42,11 @@ var StrategyCanvas = function StrategyCanvas(props) {
   }, /*#__PURE__*/React.createElement("div", {
     className: "experiment-edit-panel"
   }, /*#__PURE__*/React.createElement(CanvasPreview, {
+    viewData: viewData,
     experimentId: "".concat(experimentId),
     className: "panel-dag-canvas"
   })), /*#__PURE__*/React.createElement(ConfigPanel, {
+    mode: mode,
     experimentId: "".concat(experimentId),
     extraConfigData: configData
   })))) : /*#__PURE__*/React.createElement("div", {
@@ -62,9 +65,11 @@ var StrategyCanvas = function StrategyCanvas(props) {
   }), /*#__PURE__*/React.createElement("div", {
     className: "experiment-edit-panel"
   }, /*#__PURE__*/React.createElement(DAGCanvas, {
+    viewData: viewData,
     experimentId: "".concat(experimentId),
     className: "panel-dag-canvas"
   })), /*#__PURE__*/React.createElement(ConfigPanel, {
+    mode: mode,
     experimentId: "".concat(experimentId),
     extraConfigData: configData
   })))));

package/es/pages/index.less

@@ -1,50 +1,50 @@
-@import "../style/default";
-@black-color: #000;
-
-.flex {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.strategy-panel-layout {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  user-select: none;
-
-  .strategy-panel-content {
-    display: flex;
-    align-items: stretch;
-    justify-content: space-between;
-    height: 100%;
-    margin-top: 1px;
-    font-size: 12px;
-  }
-
-  .experiment {
-    .flex();
-
-    .experiment-node-source-tree {
-      flex-basis: 290px;
-      width: 290px;
-      max-height: 100vh;
-      border-right: 1px solid fade(@black-color, 0.08);
-    }
-
-    .experiment-edit-panel {
-      display: flex;
-      flex: 1;
-      max-height: 100vh;
-      overflow: hidden;
-
-      .panel-dag-canvas {
-        flex-grow: 1;
-        //border-right: @border;
-      }
-    }
-  }
-}
-
-
+@import "../style/default";
+@black-color: #000;
+
+.flex {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.strategy-panel-layout {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  user-select: none;
+
+  .strategy-panel-content {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    height: 100%;
+    margin-top: 1px;
+    font-size: 12px;
+  }
+
+  .experiment {
+    .flex();
+
+    .experiment-node-source-tree {
+      flex-basis: 290px;
+      width: 290px;
+      max-height: 100vh;
+      border-right: 1px solid fade(@black-color, 0.08);
+    }
+
+    .experiment-edit-panel {
+      display: flex;
+      flex: 1;
+      max-height: 100vh;
+      overflow: hidden;
+
+      .panel-dag-canvas {
+        flex-grow: 1;
+        //border-right: @border;
+      }
+    }
+  }
+}
+
+