From ce6e675c241549147e50a94444a49d0549237d0c Mon Sep 17 00:00:00 2001 From: Muhammad Saad <13bscsmusaad@seecs.edu.pk> Date: Tue, 23 Feb 2021 11:22:48 +0100 Subject: [PATCH 1/2] scrol changed to auto, buttons overlapping issue fixed --- js/attributes.css | 2 +- js/attributes.js | 25 ++++++++++++++----------- static/bundle.js | 4 ++-- 3 files changed, 17 insertions(+), 14 deletions(-) diff --git a/js/attributes.css b/js/attributes.css index 7ef6006..b96ec4a 100644 --- a/js/attributes.css +++ b/js/attributes.css @@ -2,7 +2,7 @@ list-style: none; padding-left: 10px; max-height: 120px; - overflow: scroll; + overflow: auto; } .attributes-radio-label { diff --git a/js/attributes.js b/js/attributes.js index db6c89d..fcdce78 100755 --- a/js/attributes.js +++ b/js/attributes.js @@ -122,19 +122,22 @@ class PlottedAttributes extends React.Component { - - {' '} - - + + }>
diff --git a/static/bundle.js b/static/bundle.js index 0b946b7..2220ab3 100644 --- a/static/bundle.js +++ b/static/bundle.js @@ -140,7 +140,7 @@ eval("\nvar content = __webpack_require__(/*! !../node_modules/css-loader!./attr /***/ (function(module, exports, __webpack_require__) { "use strict"; -eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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; };\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/react.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/lib/index.js\");\n\nvar _redux = __webpack_require__(/*! redux */ \"./node_modules/redux/es/index.js\");\n\nvar _reactBootstrap = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/es/index.js\");\n\nvar _actions = __webpack_require__(/*! ./actions */ \"./js/actions.js\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./js/utils.js\");\n\nvar _colorpicker = __webpack_require__(/*! ./colorpicker */ \"./js/colorpicker.js\");\n\nvar _colorpicker2 = _interopRequireDefault(_colorpicker);\n\n__webpack_require__(/*! ./attributes.css */ \"./js/attributes.css\");\n\nvar _d2 = __webpack_require__(/*! d3 */ \"d3\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar PlottedAttributes = function (_React$Component) {\n _inherits(PlottedAttributes, _React$Component);\n\n function PlottedAttributes() {\n _classCallCheck(this, PlottedAttributes);\n\n var _this = _possibleConstructorReturn(this, (PlottedAttributes.__proto__ || Object.getPrototypeOf(PlottedAttributes)).call(this));\n\n _this.state = {\n selected: []\n };\n return _this;\n }\n\n _createClass(PlottedAttributes, [{\n key: \"getAttributesOnYAxis\",\n value: function getAttributesOnYAxis(axis) {\n var _this2 = this;\n\n return this.props.attributes\n //.map(k => this.props.config[k])\n .filter(function (a) {\n return _this2.props.config[a].axis == axis;\n });\n }\n }, {\n key: \"onAttributeClick\",\n value: function onAttributeClick(attribute) {\n var selected = void 0;\n if (this.state.selected.indexOf(attribute) == -1) {\n selected = [].concat(_toConsumableArray(this.state.selected), [attribute]);\n } else {\n selected = [].concat(_toConsumableArray(this.state.selected));\n selected.splice(selected.indexOf(attribute), 1);\n }\n this.setState({ selected: selected });\n }\n }, {\n key: \"onYAxisClick\",\n value: function onYAxisClick(axis) {\n var attributes = this.getAttributesOnYAxis(axis);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n this.props.removeAttributes(this.state.selected);\n this.setState({ selected: [] });\n }\n }, {\n key: \"onRemoveAll\",\n value: function onRemoveAll() {\n this.props.removeAttributes(this.props.attributes);\n this.setState({ selected: [] });\n }\n }, {\n key: \"makeAttributePopover\",\n value: function makeAttributePopover(attr, cs, name) {\n var config = this.props.config[attr] || {};\n var desc = this.props.desc[attr] || {};\n return _react2.default.createElement(\n _reactBootstrap.Popover,\n { className: \"attribute-info\", id: \"attribute-\" + name },\n _react2.default.createElement(\n \"table\",\n null,\n _react2.default.createElement(\n \"tbody\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Name:\"\n ),\n _react2.default.createElement(\n \"td\",\n { colSpan: \"5\" },\n name\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"CS:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n { colSpan: \"5\" },\n cs\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Axis:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.axis\n ),\n _react2.default.createElement(\n \"th\",\n null,\n \"Color:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.color\n ),\n _react2.default.createElement(\n \"th\",\n null,\n \"Points:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n desc.total_points\n )\n )\n )\n )\n );\n }\n }, {\n key: \"onAxisScaleChange\",\n value: function onAxisScaleChange(axis, event) {\n var isLog = event.target.checked;\n console.log(\"axisScale change\", axis, isLog);\n this.props.setAxisScale(axis, isLog ? \"log\" : \"linear\");\n }\n\n // makeAxisPopover (axis) {\n // const config = this.props.axes[axis];\n // return (\n //
Scale: {config.scale || \"linear\"}
\n // );\n // }\n\n }, {\n key: \"makeAttribute\",\n value: function makeAttribute(a) {\n var _parseAttribute = (0, _utils.parseAttribute)(a),\n _parseAttribute2 = _slicedToArray(_parseAttribute, 2),\n cs = _parseAttribute2[0],\n name = _parseAttribute2[1];\n\n return _react2.default.createElement(\n \"li\",\n { key: a, onClick: this.onAttributeClick.bind(this, a),\n style: {\n background: this.state.selected.indexOf(a) != -1 ? \"lightgrey\" : null\n } },\n _react2.default.createElement(\n _reactBootstrap.OverlayTrigger,\n { trigger: [\"hover\", \"focus\"], placement: \"right\",\n overlay: this.makeAttributePopover(a, cs, name) },\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"span\",\n { style: { color: this.props.config[a].color } },\n \"\\u25A0\"\n ),\n \"\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n name\n )\n )\n )\n );\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this3 = this;\n\n var leftYAxis = this.getAttributesOnYAxis(0).map(function (a) {\n return _this3.makeAttribute(a);\n }),\n rightYAxis = this.getAttributesOnYAxis(1).map(function (a) {\n return _this3.makeAttribute(a);\n });\n\n return _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(\n _reactBootstrap.Panel,\n { footer: _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n _reactBootstrap.Button,\n { style: { width: \"49%\" }, bsStyle: \"danger\", onClick: this.onRemove.bind(this),\n disabled: this.state.selected.length == 0,\n title: \"Remove the currently selected attribute(s) from the plot\" },\n \"Remove Selected\"\n ),\n ' ',\n _react2.default.createElement(\n _reactBootstrap.Button,\n { style: { width: \"49%\" }, bsStyle: \"danger\", onClick: this.onRemoveAll.bind(this),\n disabled: this.props.attributes.length == 0,\n title: \"Remove all attribute(s) from the plot\" },\n \"Remove All\"\n )\n ) },\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"strong\",\n { onClick: this.onYAxisClick.bind(this, 0) },\n \"Left Y axis\"\n ),\n _react2.default.createElement(\n _reactBootstrap.Checkbox,\n { checked: this.props.axes[0] && this.props.axes[0].scale == \"log\",\n onChange: this.onAxisScaleChange.bind(this, 0),\n inline: true, style: { \"float\": \"right\" } },\n \"Log\"\n )\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"y-axis-attributes attributes-axis\",\n style: { listStyle: \"none\", paddingLeft: \"10px\" } },\n leftYAxis\n ),\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"strong\",\n { onClick: this.onYAxisClick.bind(this, 1) },\n \"Right Y axis\"\n ),\n _react2.default.createElement(\n _reactBootstrap.Checkbox,\n { checked: this.props.axes[1] && this.props.axes[1].scale == \"log\",\n onChange: this.onAxisScaleChange.bind(this, 1),\n inline: true, style: { \"float\": \"right\" } },\n \"Log\"\n )\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"y-axis-attributes attributes-axis\",\n style: { listStyle: \"none\", paddingLeft: \"10px\" } },\n rightYAxis\n )\n )\n );\n }\n }]);\n\n return PlottedAttributes;\n}(_react2.default.Component);\n\nvar Attributes = function (_React$Component2) {\n _inherits(Attributes, _React$Component2);\n\n function Attributes(props) {\n _classCallCheck(this, Attributes);\n\n var _this4 = _possibleConstructorReturn(this, (Attributes.__proto__ || Object.getPrototypeOf(Attributes)).call(this));\n\n _this4.state = {\n pattern: '',\n selectedSuggestions: [],\n selectedAttributes: [],\n selectedColor: '',\n showSuggestions: false\n };\n return _this4;\n }\n\n // the user has typed something in the search field\n\n\n _createClass(Attributes, [{\n key: \"onPatternChange\",\n value: function onPatternChange(event) {\n var pattern = event.target.value;\n var cs = this.state.controlsystem;\n this.props.getSuggestions(cs, pattern);\n this.setState({ pattern: pattern });\n }\n\n // the user has changed the selection of search results\n\n }, {\n key: \"onSelectSuggestions\",\n value: function onSelectSuggestions(event) {\n var selected = getSelectedOptions(event.target);\n this.setState({ selectedSuggestions: selected });\n }\n\n //the user has selected the color\n\n }, {\n key: \"onSelectColor\",\n value: function onSelectColor(color) {\n this.setState({ selectedColor: color.hex });\n }\n\n // the user has marked/unmarked some of the plotted attributes\n\n }, {\n key: \"onSelectAttributes\",\n value: function onSelectAttributes(event) {\n var selected = getSelectedOptions(event.target);\n this.setState({ selectedAttributes: selected });\n }\n\n // the user is adding attributes to the plot\n\n }, {\n key: \"onAddAttributes\",\n value: function onAddAttributes(axis, event) {\n var cs = this.props.controlsystem;\n var color = this.state.selectedColor;\n var attributes = this.state.selectedSuggestions.map(function (attr) {\n return [cs + \"/\" + attr, color];\n });\n this.setState({ selectedColor: '' });\n this.props.addAttributes(attributes, axis);\n }\n\n // the user is removing attributes from the plot\n\n }, {\n key: \"onRemoveAttributes\",\n value: function onRemoveAttributes(attributes) {\n this.props.removeAttributes(attributes);\n }\n }, {\n key: \"onSelectControlsystem\",\n value: function onSelectControlsystem(event) {\n var controlsystem = event.target.value;\n /* this.setState({controlsystem, selectedAttributes: []});*/\n this.props.setControlsystem(controlsystem);\n this.props.getSuggestions(controlsystem, this.state.pattern);\n }\n }, {\n key: \"renderAttributeInfo\",\n value: function renderAttributeInfo() {\n if (this.state.selectedAttributes.length > 0) {\n var attr = this.state.selectedAttributes[0];\n var config = this.props.config[attr];\n var desc = this.props.desc[attr];\n return _react2.default.createElement(\n _reactBootstrap.Table,\n { condensed: true, className: \"attribute-info\" },\n _react2.default.createElement(\n \"thead\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Name:\"\n ),\n \" \",\n _react2.default.createElement(\n \"th\",\n null,\n attr\n )\n )\n ),\n _react2.default.createElement(\n \"tbody\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Axis:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.axis\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Color:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.color\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Points:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n desc.total_points\n )\n )\n )\n );\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this5 = this;\n\n // the list of available control systems\n var controlsystemOptions = [_react2.default.createElement(\n \"option\",\n { key: -1, selected: true, disabled: true, hidden: true, style: { 'display': 'none' }, value: null },\n \"Pick a controlsystem\"\n )].concat(this.props.controlsystems.map(function (cs, i) {\n return _react2.default.createElement(\n \"option\",\n { key: i, value: cs },\n cs\n );\n }));\n\n // the list of attribute matches\n var suggestOptions = this.props.suggestions.map(function (sugg) {\n return _react2.default.createElement(\n \"option\",\n { key: sugg, value: sugg, title: sugg,\n disabled: _this5.props.attributes.indexOf(_this5.props.controlsystem + \"/\" + sugg) != -1 },\n sugg\n );\n });\n\n // the list of plotted attributes\n var plottedAttributes = _react2.default.createElement(PlottedAttributes, _extends({}, this.props, {\n removeAttributes: this.onRemoveAttributes.bind(this) }));\n\n var addButton = _react2.default.createElement(\n _reactBootstrap.DropdownButton,\n { id: \"add-attribute\", bsStyle: \"success\", title: \"Add\", disabled: this.state.selectedSuggestions.length == 0 },\n _react2.default.createElement(\n _reactBootstrap.MenuItem,\n { eventKey: 0,\n onSelect: this.onAddAttributes.bind(this) },\n \"Left Y\"\n ),\n _react2.default.createElement(\n _reactBootstrap.MenuItem,\n { eventKey: 1,\n onSelect: this.onAddAttributes.bind(this) },\n \"Right Y\"\n )\n );\n\n return _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n _reactBootstrap.Panel,\n { className: \"left-top-panel\", footer: addButton },\n _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(\n _reactBootstrap.FormControl,\n { componentClass: \"select\", ref: \"cs\",\n title: \"Pick your control system\",\n value: this.props.controlsystem,\n onChange: this.onSelectControlsystem.bind(this) },\n controlsystemOptions\n )\n ),\n _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(_reactBootstrap.FormControl, { type: \"search\", ref: \"search\",\n title: \"Search for some attribute(s)\",\n value: this.state.pattern,\n onChange: this.onPatternChange.bind(this),\n placeholder: \"e.g */vac/*/pressure\" })\n ),\n _react2.default.createElement(\n _reactBootstrap.FormControl,\n { componentClass: \"select\", ref: \"attributes\",\n title: \"Select the interesting ones from the matching list of attributes\",\n multiple: true, value: this.state.selectedSuggestions,\n style: { width: \"100%\" }, size: \"10\",\n onChange: this.onSelectSuggestions.bind(this) },\n suggestOptions\n ),\n _react2.default.createElement(_colorpicker2.default, {\n color: this.state.selectedColor,\n onSelectColor: this.onSelectColor.bind(this)\n })\n ),\n plottedAttributes\n );\n }\n }]);\n\n return Attributes;\n}(_react2.default.Component);\n\nfunction mapStateToProps(state) {\n return {\n controlsystems: state.controlsystems,\n controlsystem: state.controlsystem,\n attributes: state.attributes,\n config: state.attributeConfig,\n desc: state.descriptions,\n suggestions: state.attributeSuggestions,\n axes: state.axisConfiguration\n };\n}\n\nfunction mapDispatchToProps(dispatch) {\n return {\n getControlsystems: function getControlsystems() {\n return dispatch((0, _actions.getControlsystems)());\n },\n setControlsystem: function setControlsystem(controlsystem) {\n return dispatch((0, _actions.setControlsystem)(controlsystem));\n },\n getSuggestions: function getSuggestions(controlsystem, pattern) {\n return dispatch((0, _actions.getSuggestions)(controlsystem, pattern));\n },\n addAttributes: function addAttributes(attributes, axis) {\n return dispatch((0, _actions.addAttributes)(attributes, axis));\n },\n removeAttributes: function removeAttributes(attributes) {\n return dispatch((0, _actions.removeAttributes)(attributes));\n },\n setAxisScale: function setAxisScale(axis, scale) {\n return dispatch((0, _actions.setAxisScale)(axis, scale));\n }\n };\n}\n\nexports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Attributes);\n\n// helper\n\nfunction getSelectedOptions(select) {\n return [].filter.call(select.options, function (o) {\n return o.selected;\n }).map(function (o) {\n return o.value;\n });\n}\n\n//# sourceURL=webpack:///./js/attributes.js?"); +eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\n\nvar _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; };\n\nvar _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_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\"]) _i[\"return\"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError(\"Invalid attempt to destructure non-iterable instance\"); } }; }();\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/react.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _reactDom = __webpack_require__(/*! react-dom */ \"./node_modules/react-dom/index.js\");\n\nvar _reactRedux = __webpack_require__(/*! react-redux */ \"./node_modules/react-redux/lib/index.js\");\n\nvar _redux = __webpack_require__(/*! redux */ \"./node_modules/redux/es/index.js\");\n\nvar _reactBootstrap = __webpack_require__(/*! react-bootstrap */ \"./node_modules/react-bootstrap/es/index.js\");\n\nvar _actions = __webpack_require__(/*! ./actions */ \"./js/actions.js\");\n\nvar _utils = __webpack_require__(/*! ./utils */ \"./js/utils.js\");\n\nvar _colorpicker = __webpack_require__(/*! ./colorpicker */ \"./js/colorpicker.js\");\n\nvar _colorpicker2 = _interopRequireDefault(_colorpicker);\n\n__webpack_require__(/*! ./attributes.css */ \"./js/attributes.css\");\n\nvar _d2 = __webpack_require__(/*! d3 */ \"d3\");\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }\n\nvar PlottedAttributes = function (_React$Component) {\n _inherits(PlottedAttributes, _React$Component);\n\n function PlottedAttributes() {\n _classCallCheck(this, PlottedAttributes);\n\n var _this = _possibleConstructorReturn(this, (PlottedAttributes.__proto__ || Object.getPrototypeOf(PlottedAttributes)).call(this));\n\n _this.state = {\n selected: []\n };\n return _this;\n }\n\n _createClass(PlottedAttributes, [{\n key: \"getAttributesOnYAxis\",\n value: function getAttributesOnYAxis(axis) {\n var _this2 = this;\n\n return this.props.attributes\n //.map(k => this.props.config[k])\n .filter(function (a) {\n return _this2.props.config[a].axis == axis;\n });\n }\n }, {\n key: \"onAttributeClick\",\n value: function onAttributeClick(attribute) {\n var selected = void 0;\n if (this.state.selected.indexOf(attribute) == -1) {\n selected = [].concat(_toConsumableArray(this.state.selected), [attribute]);\n } else {\n selected = [].concat(_toConsumableArray(this.state.selected));\n selected.splice(selected.indexOf(attribute), 1);\n }\n this.setState({ selected: selected });\n }\n }, {\n key: \"onYAxisClick\",\n value: function onYAxisClick(axis) {\n var attributes = this.getAttributesOnYAxis(axis);\n }\n }, {\n key: \"onRemove\",\n value: function onRemove() {\n this.props.removeAttributes(this.state.selected);\n this.setState({ selected: [] });\n }\n }, {\n key: \"onRemoveAll\",\n value: function onRemoveAll() {\n this.props.removeAttributes(this.props.attributes);\n this.setState({ selected: [] });\n }\n }, {\n key: \"makeAttributePopover\",\n value: function makeAttributePopover(attr, cs, name) {\n var config = this.props.config[attr] || {};\n var desc = this.props.desc[attr] || {};\n return _react2.default.createElement(\n _reactBootstrap.Popover,\n { className: \"attribute-info\", id: \"attribute-\" + name },\n _react2.default.createElement(\n \"table\",\n null,\n _react2.default.createElement(\n \"tbody\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Name:\"\n ),\n _react2.default.createElement(\n \"td\",\n { colSpan: \"5\" },\n name\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"CS:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n { colSpan: \"5\" },\n cs\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Axis:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.axis\n ),\n _react2.default.createElement(\n \"th\",\n null,\n \"Color:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.color\n ),\n _react2.default.createElement(\n \"th\",\n null,\n \"Points:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n desc.total_points\n )\n )\n )\n )\n );\n }\n }, {\n key: \"onAxisScaleChange\",\n value: function onAxisScaleChange(axis, event) {\n var isLog = event.target.checked;\n console.log(\"axisScale change\", axis, isLog);\n this.props.setAxisScale(axis, isLog ? \"log\" : \"linear\");\n }\n\n // makeAxisPopover (axis) {\n // const config = this.props.axes[axis];\n // return (\n //
Scale: {config.scale || \"linear\"}
\n // );\n // }\n\n }, {\n key: \"makeAttribute\",\n value: function makeAttribute(a) {\n var _parseAttribute = (0, _utils.parseAttribute)(a),\n _parseAttribute2 = _slicedToArray(_parseAttribute, 2),\n cs = _parseAttribute2[0],\n name = _parseAttribute2[1];\n\n return _react2.default.createElement(\n \"li\",\n { key: a, onClick: this.onAttributeClick.bind(this, a),\n style: {\n background: this.state.selected.indexOf(a) != -1 ? \"lightgrey\" : null\n } },\n _react2.default.createElement(\n _reactBootstrap.OverlayTrigger,\n { trigger: [\"hover\", \"focus\"], placement: \"right\",\n overlay: this.makeAttributePopover(a, cs, name) },\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"span\",\n { style: { color: this.props.config[a].color } },\n \"\\u25A0\"\n ),\n \"\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n name\n )\n )\n )\n );\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this3 = this;\n\n var leftYAxis = this.getAttributesOnYAxis(0).map(function (a) {\n return _this3.makeAttribute(a);\n }),\n rightYAxis = this.getAttributesOnYAxis(1).map(function (a) {\n return _this3.makeAttribute(a);\n });\n\n return _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(\n _reactBootstrap.Panel,\n { footer: _react2.default.createElement(\n _reactBootstrap.Row,\n null,\n _react2.default.createElement(\n _reactBootstrap.Col,\n { lg: 6 },\n _react2.default.createElement(\n _reactBootstrap.Button,\n { style: { width: \"100%\" }, bsStyle: \"danger\", onClick: this.onRemove.bind(this),\n disabled: this.state.selected.length == 0,\n title: \"Remove the currently selected attribute(s) from the plot\" },\n \"Remove Selected\"\n )\n ),\n _react2.default.createElement(\n _reactBootstrap.Col,\n { lg: 6 },\n _react2.default.createElement(\n _reactBootstrap.Button,\n { style: { width: \"100%\" }, bsStyle: \"danger\", onClick: this.onRemoveAll.bind(this),\n disabled: this.props.attributes.length == 0,\n title: \"Remove all attribute(s) from the plot\" },\n \"Remove All\"\n )\n )\n ) },\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"strong\",\n { onClick: this.onYAxisClick.bind(this, 0) },\n \"Left Y axis\"\n ),\n _react2.default.createElement(\n _reactBootstrap.Checkbox,\n { checked: this.props.axes[0] && this.props.axes[0].scale == \"log\",\n onChange: this.onAxisScaleChange.bind(this, 0),\n inline: true, style: { \"float\": \"right\" } },\n \"Log\"\n )\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"y-axis-attributes attributes-axis\",\n style: { listStyle: \"none\", paddingLeft: \"10px\" } },\n leftYAxis\n ),\n _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"strong\",\n { onClick: this.onYAxisClick.bind(this, 1) },\n \"Right Y axis\"\n ),\n _react2.default.createElement(\n _reactBootstrap.Checkbox,\n { checked: this.props.axes[1] && this.props.axes[1].scale == \"log\",\n onChange: this.onAxisScaleChange.bind(this, 1),\n inline: true, style: { \"float\": \"right\" } },\n \"Log\"\n )\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"y-axis-attributes attributes-axis\",\n style: { listStyle: \"none\", paddingLeft: \"10px\" } },\n rightYAxis\n )\n )\n );\n }\n }]);\n\n return PlottedAttributes;\n}(_react2.default.Component);\n\nvar Attributes = function (_React$Component2) {\n _inherits(Attributes, _React$Component2);\n\n function Attributes(props) {\n _classCallCheck(this, Attributes);\n\n var _this4 = _possibleConstructorReturn(this, (Attributes.__proto__ || Object.getPrototypeOf(Attributes)).call(this));\n\n _this4.state = {\n pattern: '',\n selectedSuggestions: [],\n selectedAttributes: [],\n selectedColor: '',\n showSuggestions: false\n };\n return _this4;\n }\n\n // the user has typed something in the search field\n\n\n _createClass(Attributes, [{\n key: \"onPatternChange\",\n value: function onPatternChange(event) {\n var pattern = event.target.value;\n var cs = this.state.controlsystem;\n this.props.getSuggestions(cs, pattern);\n this.setState({ pattern: pattern });\n }\n\n // the user has changed the selection of search results\n\n }, {\n key: \"onSelectSuggestions\",\n value: function onSelectSuggestions(event) {\n var selected = getSelectedOptions(event.target);\n this.setState({ selectedSuggestions: selected });\n }\n\n //the user has selected the color\n\n }, {\n key: \"onSelectColor\",\n value: function onSelectColor(color) {\n this.setState({ selectedColor: color.hex });\n }\n\n // the user has marked/unmarked some of the plotted attributes\n\n }, {\n key: \"onSelectAttributes\",\n value: function onSelectAttributes(event) {\n var selected = getSelectedOptions(event.target);\n this.setState({ selectedAttributes: selected });\n }\n\n // the user is adding attributes to the plot\n\n }, {\n key: \"onAddAttributes\",\n value: function onAddAttributes(axis, event) {\n var cs = this.props.controlsystem;\n var color = this.state.selectedColor;\n var attributes = this.state.selectedSuggestions.map(function (attr) {\n return [cs + \"/\" + attr, color];\n });\n this.setState({ selectedColor: '' });\n this.props.addAttributes(attributes, axis);\n }\n\n // the user is removing attributes from the plot\n\n }, {\n key: \"onRemoveAttributes\",\n value: function onRemoveAttributes(attributes) {\n this.props.removeAttributes(attributes);\n }\n }, {\n key: \"onSelectControlsystem\",\n value: function onSelectControlsystem(event) {\n var controlsystem = event.target.value;\n /* this.setState({controlsystem, selectedAttributes: []});*/\n this.props.setControlsystem(controlsystem);\n this.props.getSuggestions(controlsystem, this.state.pattern);\n }\n }, {\n key: \"renderAttributeInfo\",\n value: function renderAttributeInfo() {\n if (this.state.selectedAttributes.length > 0) {\n var attr = this.state.selectedAttributes[0];\n var config = this.props.config[attr];\n var desc = this.props.desc[attr];\n return _react2.default.createElement(\n _reactBootstrap.Table,\n { condensed: true, className: \"attribute-info\" },\n _react2.default.createElement(\n \"thead\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"th\",\n null,\n \"Name:\"\n ),\n \" \",\n _react2.default.createElement(\n \"th\",\n null,\n attr\n )\n )\n ),\n _react2.default.createElement(\n \"tbody\",\n null,\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Axis:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.axis\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Color:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n config.color\n )\n ),\n _react2.default.createElement(\n \"tr\",\n null,\n _react2.default.createElement(\n \"td\",\n null,\n \"Points:\"\n ),\n \" \",\n _react2.default.createElement(\n \"td\",\n null,\n desc.total_points\n )\n )\n )\n );\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var _this5 = this;\n\n // the list of available control systems\n var controlsystemOptions = [_react2.default.createElement(\n \"option\",\n { key: -1, selected: true, disabled: true, hidden: true, style: { 'display': 'none' }, value: null },\n \"Pick a controlsystem\"\n )].concat(this.props.controlsystems.map(function (cs, i) {\n return _react2.default.createElement(\n \"option\",\n { key: i, value: cs },\n cs\n );\n }));\n\n // the list of attribute matches\n var suggestOptions = this.props.suggestions.map(function (sugg) {\n return _react2.default.createElement(\n \"option\",\n { key: sugg, value: sugg, title: sugg,\n disabled: _this5.props.attributes.indexOf(_this5.props.controlsystem + \"/\" + sugg) != -1 },\n sugg\n );\n });\n\n // the list of plotted attributes\n var plottedAttributes = _react2.default.createElement(PlottedAttributes, _extends({}, this.props, {\n removeAttributes: this.onRemoveAttributes.bind(this) }));\n\n var addButton = _react2.default.createElement(\n _reactBootstrap.DropdownButton,\n { id: \"add-attribute\", bsStyle: \"success\", title: \"Add\", disabled: this.state.selectedSuggestions.length == 0 },\n _react2.default.createElement(\n _reactBootstrap.MenuItem,\n { eventKey: 0,\n onSelect: this.onAddAttributes.bind(this) },\n \"Left Y\"\n ),\n _react2.default.createElement(\n _reactBootstrap.MenuItem,\n { eventKey: 1,\n onSelect: this.onAddAttributes.bind(this) },\n \"Right Y\"\n )\n );\n\n return _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n _reactBootstrap.Panel,\n { className: \"left-top-panel\", footer: addButton },\n _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(\n _reactBootstrap.FormControl,\n { componentClass: \"select\", ref: \"cs\",\n title: \"Pick your control system\",\n value: this.props.controlsystem,\n onChange: this.onSelectControlsystem.bind(this) },\n controlsystemOptions\n )\n ),\n _react2.default.createElement(\n _reactBootstrap.FormGroup,\n null,\n _react2.default.createElement(_reactBootstrap.FormControl, { type: \"search\", ref: \"search\",\n title: \"Search for some attribute(s)\",\n value: this.state.pattern,\n onChange: this.onPatternChange.bind(this),\n placeholder: \"e.g */vac/*/pressure\" })\n ),\n _react2.default.createElement(\n _reactBootstrap.FormControl,\n { componentClass: \"select\", ref: \"attributes\",\n title: \"Select the interesting ones from the matching list of attributes\",\n multiple: true, value: this.state.selectedSuggestions,\n style: { width: \"100%\" }, size: \"10\",\n onChange: this.onSelectSuggestions.bind(this) },\n suggestOptions\n ),\n _react2.default.createElement(_colorpicker2.default, {\n color: this.state.selectedColor,\n onSelectColor: this.onSelectColor.bind(this)\n })\n ),\n plottedAttributes\n );\n }\n }]);\n\n return Attributes;\n}(_react2.default.Component);\n\nfunction mapStateToProps(state) {\n return {\n controlsystems: state.controlsystems,\n controlsystem: state.controlsystem,\n attributes: state.attributes,\n config: state.attributeConfig,\n desc: state.descriptions,\n suggestions: state.attributeSuggestions,\n axes: state.axisConfiguration\n };\n}\n\nfunction mapDispatchToProps(dispatch) {\n return {\n getControlsystems: function getControlsystems() {\n return dispatch((0, _actions.getControlsystems)());\n },\n setControlsystem: function setControlsystem(controlsystem) {\n return dispatch((0, _actions.setControlsystem)(controlsystem));\n },\n getSuggestions: function getSuggestions(controlsystem, pattern) {\n return dispatch((0, _actions.getSuggestions)(controlsystem, pattern));\n },\n addAttributes: function addAttributes(attributes, axis) {\n return dispatch((0, _actions.addAttributes)(attributes, axis));\n },\n removeAttributes: function removeAttributes(attributes) {\n return dispatch((0, _actions.removeAttributes)(attributes));\n },\n setAxisScale: function setAxisScale(axis, scale) {\n return dispatch((0, _actions.setAxisScale)(axis, scale));\n }\n };\n}\n\nexports.default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(Attributes);\n\n// helper\n\nfunction getSelectedOptions(select) {\n return [].filter.call(select.options, function (o) {\n return o.selected;\n }).map(function (o) {\n return o.value;\n });\n}\n\n//# sourceURL=webpack:///./js/attributes.js?"); /***/ }), @@ -1418,7 +1418,7 @@ eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loa /*! no static exports found */ /***/ (function(module, exports, __webpack_require__) { -eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \".attributes-axis {\\n list-style: none;\\n padding-left: 10px;\\n max-height: 120px;\\n overflow: scroll;\\n}\\n\\n.attributes-radio-label {\\n padding-top: 0.5rem;\\n}\\n\\n.attributes-radio-label font {\\n vertical-align: inherit;\\n padding-left: 1rem;\\n}\\n\\n.full-width {\\n width: 100%;\\n}\\n\\n.dropdown {\\n width: 100%;\\n}\\n\\n.dropdown > #add-attribute {\\n width: 50%;\\n}\\n\\n.left-top-panel .panel-body {\\n padding-bottom: 5px;\\n}\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./js/attributes.css?./node_modules/css-loader"); +eval("exports = module.exports = __webpack_require__(/*! ../node_modules/css-loader/lib/css-base.js */ \"./node_modules/css-loader/lib/css-base.js\")(false);\n// imports\n\n\n// module\nexports.push([module.i, \".attributes-axis {\\n list-style: none;\\n padding-left: 10px;\\n max-height: 120px;\\n overflow: auto;\\n}\\n\\n.attributes-radio-label {\\n padding-top: 0.5rem;\\n}\\n\\n.attributes-radio-label font {\\n vertical-align: inherit;\\n padding-left: 1rem;\\n}\\n\\n.full-width {\\n width: 100%;\\n}\\n\\n.dropdown {\\n width: 100%;\\n}\\n\\n.dropdown > #add-attribute {\\n width: 50%;\\n}\\n\\n.left-top-panel .panel-body {\\n padding-bottom: 5px;\\n}\\n\", \"\"]);\n\n// exports\n\n\n//# sourceURL=webpack:///./js/attributes.css?./node_modules/css-loader"); /***/ }), From 47de8cd4cb48229ae67e976a851e444721f7ca47 Mon Sep 17 00:00:00 2001 From: Muhammad Saad <13bscsmusaad@seecs.edu.pk> Date: Tue, 23 Feb 2021 11:26:05 +0100 Subject: [PATCH 2/2] delete buttons are now not stacked on XS screens --- js/attributes.js | 4 ++-- static/bundle.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/js/attributes.js b/js/attributes.js index fcdce78..3fcc30b 100755 --- a/js/attributes.js +++ b/js/attributes.js @@ -123,14 +123,14 @@ class PlottedAttributes extends React.Component { - + - +