chem-generic-ui 0.1.34 → 0.1.37

package/public/test/ds_props.json

@@ -0,0 +1,54 @@
+{
+  "eln": {
+    "version": "0.9.1",
+    "base_revision": "413824bce4a7adeb74bb3258f94ab9e3fc87dc09",
+    "current_revision": "75f3702e77b841f44fc1d1b8e2650bba35329f59\n"
+  },
+  "uuid": "27f2d3b7-57bd-4eea-bb49-bd718d68077f",
+  "klass": "Dataset",
+  "layers": {
+    "params": {
+      "wf": false,
+      "key": "params",
+      "cols": 3,
+      "label": "Parameter",
+      "layer": "params",
+      "fields": [
+        {
+          "type": "system-defined",
+          "field": "temp",
+          "label": "Temperature",
+          "value": "18",
+          "default": "",
+          "position": 1,
+          "description": "measurement temperature",
+          "value_system": "C",
+          "option_layers": "temperature"
+        }
+      ],
+      "position": 100,
+      "condition": ""
+    },
+    "system": {
+      "wf": false,
+      "key": "system",
+      "cols": 3,
+      "label": "Settings",
+      "layer": "system",
+      "fields": [
+        {
+          "type": "integer",
+          "field": "scan",
+          "label": "Number of Scans",
+          "value": 2,
+          "default": "",
+          "position": 1
+        }
+      ],
+      "position": 100,
+      "condition": ""
+    }
+  },
+  "klass_uuid": "3475e057-60ae-4f7c-9ec1-516b29082d64",
+  "select_options": {}
+}

package/src/app.js

@@ -0,0 +1,50 @@
+// import React, { useState, useEffect } from 'react';
+// import logo from './logo.svg';
+// import 'bootstrap/dist/css/bootstrap.min.css';
+// import { ElementManager, GenPropertiesText } from './components/admin/ElementManager';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fas } from '@fortawesome/free-solid-svg-icons';
+import { far } from '@fortawesome/free-regular-svg-icons';
+import './asserts/main.css';
+
+library.add(fas, far);
+
+export { default as ElementManager } from './components/admin/ElementManager';
+export { default as GenDSMisType } from './components/fields/GenDSMisType';
+export { default as GenericDSDetails } from './components/details/GenDSDetails';
+export { default as SegmentDetails } from './components/details/GenSgDetails';
+export { GenPropertiesNumber, GenPropertiesText } from './components/fields/GenPropertiesFields';
+// export { GenPropertiesNumber, GenPropertiesText };
+// function App() {
+//   return (
+//     <div className="App">
+//       <header className="App-header">
+//         <img src={logo} className="App-logo" alt="logo" />
+//         <p>
+//           Edit <code>src/App.js</code> and save to reload.
+//         </p>
+//         <a
+//           className="App-link"
+//           href="https://reactjs.org"
+//           target="_blank"
+//           rel="noopener noreferrer"
+//         >
+//           Learn React
+//         </a>
+//       </header>
+//     </div>
+//   );
+// }
+
+// export { ElementManager, GenPropertiesText };
+
+// function App() {
+//   return (
+//     <div>
+//       Project A
+//       <ElementManager />
+//     </div>
+//   );
+// }
+
+// export default App;

package/{dist → src}/asserts/main.css

@@ -1,10 +1,3 @@
-.gu_button_right {
-  float: right;
-  right: 0px;
-  z-index: 1;
-  margin-left: 2px;
-}
-
 .bg-bs-primary {
   background-color: #337ab7 !important;
 }

package/{dist → src}/asserts/main.scss

@@ -1,3 +1,4 @@
+
 $color-editable: #fff;
 $color-readonly: #ddd;
 $color-required: lightyellow;
@@ -10,13 +11,6 @@ $colo-selected-border: #0dcaf0;
 $color-default: #777;
 $color-bs-info: #5bc0de;
 
-.gu_button_right {
-  float: right;
-  right: 0px;
-  z-index: 1;
-  margin-left: 2px;
-}
-
 .bg-bs-primary {
   background-color: $colo-bs-primary !important;
 }

package/src/components/admin/ElementManager.js

@@ -0,0 +1,28 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { useState } from 'react';
+import { Button } from 'react-bootstrap';
+
+const ElementManager = () => {
+  const [count, setCount] = useState(0);
+
+  // return (
+  //   <Panel bsStyle="primary">
+  //     <Panel.Heading>
+  //       <Panel.Title componentClass="h3">Panel heading</Panel.Title>
+  //     </Panel.Heading>
+  //     <Panel.Body>Panel content</Panel.Body>
+  //   </Panel>
+  // );
+  return (
+    <div>
+      <p>You clicked {count} times</p>
+      <Button bsStyle="primary" onClick={() => setCount(count + 1)}>
+        Click me
+      </Button>
+    </div>
+  );
+};
+
+
+// export { GenPropertiesText, ElementManager };
+export default ElementManager;

package/src/components/details/GenDSDetails.js

@@ -0,0 +1,164 @@
+/* eslint-disable react/forbid-prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { findIndex, cloneDeep } from 'lodash';
+import { Card, Button, ButtonToolbar, OverlayTrigger, Tooltip } from 'react-bootstrap';
+// import { DragDropContext } from 'react-dnd';
+// import HTML5Backend from 'react-dnd-html5-backend';
+import LayersLayout from '../layers/LayersLayout';
+import { genUnits, toBool, toNum, unitConversion, absOlsTermLabel } from '../tools/utils';
+
+class GenericDSDetails extends Component {
+  constructor(props) {
+    super(props);
+    this.handleInputChange = this.handleInputChange.bind(this);
+    this.handleUnitClick = this.handleUnitClick.bind(this);
+    this.handleReload = this.handleReload.bind(this);
+  }
+
+  handleInputChange(event, field, layer, type = 'text') {
+    const { genericDS } = this.props;
+    const { properties } = genericDS;
+    let value = '';
+    switch (type) {
+      case 'checkbox':
+        value = event.target.checked;
+        break;
+      case 'select':
+        value = event ? event.value : null;
+        break;
+      case 'formula-field':
+        if (event.target) {
+          ({ value } = event.target);
+        } else {
+          value = event;
+        }
+        break;
+      case 'integer':
+        ({ value } = event.target);
+        value = Math.trunc(value);
+        break;
+      default:
+        ({ value } = event.target);
+    }
+    properties.layers[`${layer}`].fields.find(e => e.field === field).value = value;
+    if (type === 'system-defined' && (!properties.layers[`${layer}`].fields.find(e => e.field === field).value_system || properties.layers[`${layer}`].fields.find(e => e.field === field).value_system === '')) {
+      const opt = properties.layers[`${layer}`].fields.find(e => e.field === field).option_layers;
+      properties.layers[`${layer}`].fields.find(e => e.field === field).value_system = genUnits(opt)[0].key;
+    }
+    genericDS.properties = properties;
+    genericDS.changed = true;
+    // this.props.onChange('dataset', { target: { value: genericDS } });
+    this.props.onChange(genericDS);
+  }
+
+  handleUnitClick(layer, obj) {
+    const { genericDS } = this.props;
+    const { properties } = genericDS;
+    const newVal = unitConversion(obj.option_layers, obj.value_system, obj.value);
+    properties.layers[`${layer}`].fields.find(e => e.field === obj.field).value_system = obj.value_system;
+    properties.layers[`${layer}`].fields.find(e => e.field === obj.field).value = newVal;
+    genericDS.properties = properties;
+    genericDS.changed = true;
+    // this.props.onChange('dataset', { target: { value: genericDS } });
+    this.props.onChange(genericDS);
+  }
+
+  handleReload() {
+    const { klass, genericDS } = this.props;
+    if (klass.properties_release) {
+      const newProps = cloneDeep(klass.properties_release);
+      newProps.klass_uuid = klass.uuid;
+      Object.keys(newProps.layers).forEach((key) => {
+        const newLayer = newProps.layers[key] || {};
+        const curFields =
+        (genericDS.properties.layers[key] && genericDS.properties.layers[key].fields) || [];
+        (newLayer.fields || []).forEach((f, idx) => {
+          const curIdx = findIndex(curFields, o => o.field === f.field);
+          if (curIdx >= 0) {
+            const curVal = genericDS.properties.layers[key].fields[curIdx].value;
+            const curType = typeof curVal;
+            if (['select', 'text', 'textarea', 'formula-field'].includes(newProps.layers[key].fields[idx].type)) {
+              newProps.layers[key].fields[idx].value = curType !== 'undefined' ? curVal.toString() : '';
+            }
+            if (newProps.layers[key].fields[idx].type === 'integer') {
+              newProps.layers[key].fields[idx].value =
+              // eslint-disable-next-line no-restricted-globals
+              (curType === 'undefined' || curType === 'boolean' || isNaN(curVal)) ? 0 : parseInt(curVal, 10);
+            }
+            if (newProps.layers[key].fields[idx].type === 'checkbox') {
+              newProps.layers[key].fields[idx].value = curType !== 'undefined' ? toBool(curVal) : false;
+            }
+            if (newProps.layers[key].fields[idx].type === 'system-defined') {
+              const units = genUnits(newProps.layers[key].fields[idx].option_layers);
+              const vs = units.find(u =>
+                u.key === genericDS.properties.layers[key].fields[curIdx].value_system);
+              newProps.layers[key].fields[idx].value_system = (vs && vs.key) || units[0].key;
+              newProps.layers[key].fields[idx].value = toNum(curVal);
+            }
+          }
+        });
+      });
+      genericDS.properties = newProps;
+      genericDS.dataset_klass_id = klass.id;
+      genericDS.klass_ols = klass.ols_term_id;
+      genericDS.klass_label = klass.label;
+      genericDS.changed = true;
+      // this.props.onChange('dataset', { target: { value: genericDS } });
+      this.props.onChange(genericDS);
+    } else {
+      // this.props.onChange('dataset', { target: { value: undefined } });
+      this.props.onChange(undefined);
+    }
+  }
+
+  elementalPropertiesItem(genericDS, klass) {
+    const layersLayout = LayersLayout(
+      genericDS.properties.layers,
+      (klass.properties_release && klass.properties_release.select_options) || {},
+      this.handleInputChange,
+      () => {},
+      this.handleUnitClick
+    );
+    return (<div style={{ margin: '5px' }}>{layersLayout}</div>);
+  }
+
+  render() {
+    const {
+      // eslint-disable-next-line no-unused-vars
+      uiCtrl, genericDS, klass, kind
+    } = this.props;
+    if (uiCtrl && Object.keys(genericDS).length !== 0 && kind && kind !== '') {
+      return (
+        <Card className="panel-detail">
+          <Card.Body style={{ position: 'relative', minHeight: 260, overflowY: 'unset' }}>
+            {this.elementalPropertiesItem(genericDS, klass)}
+            <span className="g-ds-note label">
+              <span className="g-ds-title">Note</span><br />
+              Selected analysis type: {absOlsTermLabel(kind)}<br />
+              Content is designed for: {genericDS.klass_label}
+            </span>
+            <ButtonToolbar className="pull-right">
+              <OverlayTrigger placement="top" overlay={<Tooltip id="_tooltip_reload">click to reload the content template</Tooltip>}>
+                <Button size="sm" variant="danger" onClick={() => this.handleReload()}>Reload</Button>
+              </OverlayTrigger>
+            </ButtonToolbar>
+          </Card.Body>
+        </Card>
+      );
+    }
+    return null;
+  }
+}
+
+GenericDSDetails.propTypes = {
+  uiCtrl: PropTypes.bool.isRequired, // MatrixCheck(currentUser.matrix, 'genericDataset')
+  kind: PropTypes.string, // selected analysis type
+  genericDS: PropTypes.object,
+  klass: PropTypes.object, // dataset_klass
+  onChange: PropTypes.func.isRequired // change callback
+};
+GenericDSDetails.defaultProps = { kind: '', genericDS: {}, klass: {} };
+
+// export default DragDropContext(HTML5Backend)(GenericDSDetails);
+export default GenericDSDetails;