chem-generic-ui 0.1.43 → 0.1.46

package/src/components/fields/GenPropertiesFields.js

@@ -5,8 +5,8 @@
 /* eslint-disable no-restricted-globals */
 
 import React from 'react';
-import { Button, FormGroup, FormControl,
-  InputGroup, ListGroup, ListGroupItem, OverlayTrigger, Tooltip } from 'react-bootstrap';
+import { Button, Checkbox, FormGroup, FormControl,
+  InputGroup, ListGroup, ListGroupItem, OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
 import Select from 'react-select';
 import Dropzone from 'react-dropzone';
 import { v4 as uuid } from 'uuid';
@@ -51,12 +51,53 @@ const GenPropertiesCalculate = (opt) => {
 
   const fieldHeader = opt.label === '' ? null : (<FieldLabel label={opt.label} desc={opt.description} />);
   return (
-    <div>GenPropertiesCalculate</div>
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup>
+        <FormControl
+          type="text"
+          value={showTxt}
+          onChange={opt.onChange}
+          className="readonly"
+          readOnly="readonly"
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+        <InputGroup.Button>
+          <OverlayTrigger
+            placement="bottom"
+            overlay={<Tooltip id="update_calculation_field">adjust</Tooltip>}
+          >
+            <Button active className="clipboardBtn" onClick={() => opt.onChange(showTxt)}>
+              <i className="fa fa-arrow-right" aria-hidden="true" />
+            </Button>
+          </OverlayTrigger>
+        </InputGroup.Button>
+        <FormControl
+          type="text"
+          value={opt.value}
+          onChange={opt.onChange}
+          required={false}
+          placeholder={opt.placeholder}
+          min={0}
+        />
+      </InputGroup>
+    </FormGroup>
   );
 };
 
 const GenPropertiesCheckbox = opt => (
-  <div>GenPropertiesCheckbox</div>
+  <FormGroup>
+    <Checkbox
+      name={opt.field}
+      checked={opt.value}
+      onChange={opt.onChange}
+      disabled={opt.readOnly}
+    >
+      <FormControl.Static>{opt.label}</FormControl.Static>
+    </Checkbox>
+  </FormGroup>
 );
 
 const GenPropertiesDrop = (opt) => {
@@ -67,13 +108,13 @@ const GenPropertiesDrop = (opt) => {
     createOpt = (
       <div className="sample_radios">
         <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>associate with this sample</Tooltip>}>
-          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</InputGroup.Radio>
+          <Radio name={`dropS_${opt.value.el_id}`} disabled={opt.value.isAssoc === true} checked={opt.value.cr_opt === 0} onChange={() => opt.onChange({ ...opt.value, cr_opt: 0 })} inline>Current</Radio>
         </OverlayTrigger>
         <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
-          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</InputGroup.Radio>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 1} onChange={() => opt.onChange({ ...opt.value, cr_opt: 1 })} inline>Split</Radio>
         </OverlayTrigger>
         <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
-          <InputGroup.Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</InputGroup.Radio>
+          <Radio name={`dropS_${opt.value.el_id}`} checked={opt.value.cr_opt === 2} onChange={() => opt.onChange({ ...opt.value, cr_opt: 2 })} inline>Copy</Radio>
         </OverlayTrigger>
       </div>
     );
@@ -83,7 +124,20 @@ const GenPropertiesDrop = (opt) => {
   const dragTarget = opt.isPreview === true ? <div className="target">{defaultIcon}</div> : <GenericElDropTarget opt={opt} onDrop={opt.onChange} />;
 
   return (
-    <div>GenPropertiesDrop</div>
+    <FormGroup>
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <div className={className}>
+          {dragTarget}
+          {createOpt}
+          <div>
+            <OverlayTrigger placement="top" overlay={<Tooltip id={uuid()}>remove</Tooltip>}>
+              <Button className="btn_del" bsStyle="danger" bsSize="xsmall" onClick={() => opt.onChange({})} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+            </OverlayTrigger>
+          </div>
+        </div>
+      </FormControl.Static>
+    </FormGroup>
   );
 };
 
@@ -101,7 +155,7 @@ const GenPropertiesInputGroup = (opt) => {
     <span key={`${e.id}_GenPropertiesInputGroup`} className="input-group" style={{ width: '100%' }}>
       <FormControl key={e.id} type="number" name={e.id} value={e.value} onChange={o => opt.onSubChange(o, e.id, opt.f_obj)} min={1} />
       <InputGroup.Button>
-        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} variant="success">
+        <Button active onClick={() => opt.onSubChange(e, e.id, opt.f_obj)} bsStyle="success">
           {genUnitSup(genUnit(e.option_layers, e.value_system).label) || ''}
         </Button>
       </InputGroup.Button>
@@ -111,7 +165,12 @@ const GenPropertiesInputGroup = (opt) => {
     if (e.type === 'label') { return fLab(e); } if (e.type === 'system-defined') { return fUnit(e); } return fTxt(e);
   });
   return (
-    <div>GenPropertiesInputGroup</div>
+    <FormGroup>
+      {fieldHeader}
+      <InputGroup style={{ display: 'flex' }}>
+        {subs}
+      </InputGroup>
+    </FormGroup>
   );
 };
 
@@ -179,9 +238,11 @@ const GenPropertiesSystemDefined = (opt) => {
           placeholder={opt.placeholder}
           min={1}
         />
-          <Button disabled={opt.readOnly} active onClick={opt.onClick} variant="success">
+        <InputGroup.Button>
+          <Button disabled={opt.readOnly} active onClick={opt.onClick} bsStyle="success">
             {genUnitSup(genUnit(opt.option_layers, opt.value_system).label) || ''}
           </Button>
+        </InputGroup.Button>
       </InputGroup>
     </FormGroup>
   );
@@ -190,7 +251,10 @@ const GenPropertiesSystemDefined = (opt) => {
 const GenPropertiesTable = (opt) => {
   const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
   return (
-    <div>GenPropertiesTable</div>
+    <FormGroup>
+      {fieldHeader}
+      <TableRecord key={`grid_${opt.f_obj.field}`} opt={opt} />
+    </FormGroup>
   );
 };
 
@@ -219,7 +283,18 @@ const GenPropertiesTextArea = (opt) => {
   className = opt.isRequired && opt.isEditable ? 'required' : className;
   const fieldHeader = opt.label === '' ? null : <FieldLabel label={opt.label} desc={opt.description} />;
   return (
-    <div>GenPropertiesTextArea</div>
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        componentClass="textarea"
+        value={opt.value}
+        onChange={opt.onChange}
+        className={className}
+        readOnly={opt.readOnly}
+        required={opt.isRequired}
+        placeholder={opt.placeholder}
+      />
+    </FormGroup>
   );
 };
 
@@ -246,20 +321,45 @@ const GenTextFormula = (opt) => {
     return true;
   });
   return (
-    <div>GenTextFormula</div>
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl
+        type="text"
+        value={subs.join('')}
+        className="readonly"
+        readOnly
+        required={false}
+      />
+    </FormGroup>
   );
 };
 
 const renderListGroupItem = (opt, attachment) => {
   const delBtn = (
-    <Button size="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
+    <Button bsSize="xsmall" id={attachment.uid} className="button-right" onClick={() => opt.onChange({ ...opt.value, action: 'd', uid: attachment.uid })}>
       <i className="fa fa-times" aria-hidden="true" />
     </Button>
   );
   const filename = attachment.aid ?
     (<a onClick={() => downloadFile({ contents: `/api/v1/attachments/${attachment.aid}`, name: attachment.filename })} style={{ cursor: 'pointer' }}>{attachment.filename}</a>) : attachment.filename;
   return (
-    <div>renderListGroupItem</div>
+    <div className="generic_grid">
+      <div>
+        <div>{delBtn}</div>
+        <div className="generic_grid_row">{filename}</div>
+        <div className="generic_grid_row">
+          <FormGroup bsSize="small">
+            <FormControl
+              type="text"
+              value={attachment.label || ''}
+              onChange={e => opt.onChange({
+                ...opt.value, action: 'l', uid: attachment.uid, val: e
+              })}
+            />
+          </FormGroup>
+        </div>
+      </div>
+    </div>
   );
 };
 
@@ -269,7 +369,29 @@ const GenPropertiesUpload = (opt) => {
   if (opt.isSearchCriteria) return (<div>(This is an upload)</div>);
 
   return (
-    <div>GenPropertiesUpload</div>
+    <FormGroup className="text_generic_properties">
+      {fieldHeader}
+      <FormControl.Static style={{ paddingBottom: '0px' }}>
+        <Dropzone
+          id="dropzone"
+          onDrop={e => opt.onChange({
+            ...opt.value, action: 'f', val: e
+          })}
+          style={{ height: 30, width: '100%', border: '3px dashed lightgray' }}
+        >
+          <div style={{ textAlign: 'center', paddingTop: 6, color: 'gray' }}>
+            Drop File, or Click to Select.
+          </div>
+        </Dropzone>
+      </FormControl.Static>
+      <ListGroup>
+        {attachments.map(attachment => (
+          <ListGroupItem key={attachment.id} className="generic_files">
+            {renderListGroupItem(opt, attachment)}
+          </ListGroupItem>
+          ))}
+      </ListGroup>
+    </FormGroup>
   );
 };
 

package/src/components/layers/GenPropertiesLayer.js

@@ -3,7 +3,7 @@
 /* eslint-disable react/forbid-prop-types */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Card, Col, CardGroup, Row } from 'react-bootstrap';
+import { Panel, Col, PanelGroup, Row } from 'react-bootstrap';
 import GenProperties from '../fields/GenProperties';
 import { genUnits, showProperties, unitConversion } from '../tools/utils';
 import PanelDnD from '../dnd/PanelDnD';
@@ -138,19 +138,21 @@ export default class GenPropertiesLayer extends Component {
       bs={bs}
     />);
     const panelHeader = label === '' ? (<span />) : (
-      <Card.Heading className={cl}>
-        <Card.Title toggle>{label}</Card.Title>
-      </Card.Heading>
+      <Panel.Heading className={cl}>
+        <Panel.Title toggle>{label}</Panel.Title>
+      </Panel.Heading>
     );
     const noneKlass = bs === 'none' ? 'generic_panel_none' : '';
     if (bs === 'none') bs = 'default';
     return (
-      <CardGroup id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
-        <Card bg={bs} className={`panel_generic_properties ${noneKlass}`}>
-
-          <Card.Body className="panel_generic_properties_body">{this.views()}</Card.Body>
-        </Card>
-      </CardGroup>
+      <PanelGroup accordion id="accordion_generic_layer" defaultActiveKey="1" style={{ marginBottom: '0px' }}>
+        <Panel bsStyle={bs} className={`panel_generic_properties ${noneKlass}`} eventKey="1">
+          {activeWF ? panelDnD : panelHeader}
+          <Panel.Collapse>
+            <Panel.Body className="panel_generic_properties_body">{this.views()}</Panel.Body>
+          </Panel.Collapse>
+        </Panel>
+      </PanelGroup>
     );
   }
 }

package/src/components/layers/LayerModal.js

@@ -10,7 +10,7 @@ const block = (layer, fnAdd) => (
     <div>
       <div><b>{layer.label}</b><br />({layer.key})</div>
       <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id="_tooltip_layers">click to add layer</Tooltip>}>
-        <Button variant="primary" onClick={event => fnAdd(event, layer)}><FontAwesomeIcon icon="fas fa-plus" /></Button>
+        <Button bsStyle="primary" onClick={event => fnAdd(event, layer)}><FontAwesomeIcon icon="fas fa-plus" /></Button>
       </OverlayTrigger>
     </div>
   </div>

package/src/components/table/GenericElTableDropTarget.js

@@ -23,7 +23,7 @@ const base = (opt, iconClass, onDrop = () => {}, params = {}) => {
         </OverlayTrigger>
         <div className="del_btn">
           <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>remove this molecule</Tooltip>}>
-            <Button className="btn_del" size="xsmall" onClick={() => onDrop({}, params)} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
+            <Button className="btn_del" bsSize="xsmall" onClick={() => onDrop({}, params)} ><i className="fa fa-trash-o" aria-hidden="true" /></Button>
           </OverlayTrigger>
         </div>
       </div>

package/src/components/table/GridBtn.js

@@ -7,7 +7,7 @@ import GridDnD from '../dnd/GridDnD';
 
 const AddRowBtn = ({ addRow }) => (
   <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>add entry</Tooltip>}>
-    <Button onClick={() => addRow()} size="sm" variant="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
+    <Button onClick={() => addRow()} bsSize="xsmall" bsStyle="primary"><i className="fa fa-plus" aria-hidden="true" /></Button>
   </OverlayTrigger>
 );
 
@@ -17,7 +17,7 @@ const DelRowBtn = ({ delRow, node }) => {
   const { data } = node;
   return (
     <OverlayTrigger delayShow={1000} placement="top" overlay={<Tooltip id={uuid()}>remove</Tooltip>}>
-      <Button onClick={() => delRow(data)} size="sm"><i className="fa fa-times" aria-hidden="true" /></Button>
+      <Button onClick={() => delRow(data)} bsSize="xsmall"><i className="fa fa-times" aria-hidden="true" /></Button>
     </OverlayTrigger>);
 };
 

package/src/components/table/SamOption.js

@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { v4 as uuid } from 'uuid';
-import { OverlayTrigger, InputGroup, Tooltip } from 'react-bootstrap';
+import { OverlayTrigger, Radio, Tooltip } from 'react-bootstrap';
 
 const SamOption = (props) => {
   const { sField, node, onChange } = props;
@@ -13,32 +13,32 @@ const SamOption = (props) => {
   return (
     <div className="generic_sam_options">
       <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>associate with this sample</Tooltip>}>
-        <InputGroup.Radio
+        <Radio
           name={`dropS_${rUUID}`}
           disabled={fValue.isAssoc}
           checked={fValue.cr_opt === 0}
           onChange={() => onChange({ node, subField: sField, crOpt: 0 })}
         >
           Current
-        </InputGroup.Radio>
+        </Radio>
       </OverlayTrigger>
       <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>split from the sample first and then associate with it</Tooltip>}>
-        <InputGroup.Radio
+        <Radio
           name={`dropS_${rUUID}`}
           checked={fValue.cr_opt === 1}
           onChange={() => onChange({ node, subField: sField, crOpt: 1 })}
         >
           Split
-        </InputGroup.Radio>
+        </Radio>
       </OverlayTrigger>
       <OverlayTrigger delayShow={1000} placement="right" overlay={<Tooltip id={uuid()}>duplicate the sample first and then associate with it</Tooltip>}>
-        <InputGroup.Radio
+        <Radio
           name={`dropS_${rUUID}`}
           checked={fValue.cr_opt === 2}
           onChange={() => onChange({ node, subField: sField, crOpt: 2 })}
         >
           Copy
-        </InputGroup.Radio>
+        </Radio>
       </OverlayTrigger>
     </div>
   );

package/src/components/table/UConverterRenderer.js

@@ -9,7 +9,7 @@ const UConverterRenderer = (props) => {
   if (sField.type !== 'system-defined') return null;
   const { data } = node;
   return (
-    <Button key={`ucr_${data.id}`} active onClick={() => onChange(sField, node)} variant="success">
+    <Button key={`ucr_${data.id}`} active onClick={() => onChange(sField, node)} bsStyle="success">
       {genUnitSup(genUnit(sField.option_layers, data[sField.id].value_system).label) || ''}
     </Button>
   );

package/src/index.html

@@ -1 +1 @@
-<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/> <meta name="theme-color" content="#000000"/> <title>React with Webpack and Babel</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"> </div> </body> </html>
+<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"/> <meta name="theme-color" content="#000000"/> <title>React with Webpack and Babel</title> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="generic"> </div> </body> </html>

package/src/index.js

@@ -4,7 +4,7 @@ import ReactDOM from 'react-dom';
 // import 'bootstrap/dist/css/bootstrap.min.css';
 import './index.css';
 //import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/css/bootstrap.css';
+// import 'bootstrap/dist/css/bootstrap.css'; Paggy
 
 
 // import 'bootstrap/dist/css/bootstrap.css';
@@ -29,7 +29,7 @@ ReactDOM.render(
     <SimuSG />
   </div>
   ,
-  document.getElementById('root')
+  document.getElementById('generic')
 );
 
 module.hot.accept();

package/src/simulations/SimuDS.js

@@ -11,9 +11,9 @@ class SimuDS extends Component {
   }
 
   componentDidMount() {
-    fetch('public/ds_details.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
+    fetch('ds_details.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
       .then(response => response.json()).then((json) => {
-        fetch('public/ds_klass.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
+        fetch('ds_klass.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
           .then(response => response.json()).then((kjson) => {
             this.setState({ genericDS: json, klass: kjson });
           })

package/src/simulations/SimuSG.js

@@ -13,10 +13,10 @@ class SimuSG extends Component {
   }
 
   componentDidMount() {
-    fetch('public/sg_details.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
+    fetch('sg_details.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
       .then(response => response.json()).then((json) => {
         console.log(json);
-        fetch('public/sg_klass.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
+        fetch('sg_klass.json', { headers: { 'Content-Type': 'application/json', Accept: 'application/json' } })
           .then(response => response.json()).then((kjson) => {
             this.setState({ segment: json, klass: kjson });
           })

package/webpack.config.js

@@ -5,8 +5,9 @@ module.exports = {
   mode: 'production',
   entry: {
     index: [
-      './src/index.js',
-      'bootstrap/dist/css/bootstrap.css'
+      './src/app.js',
+      // './asserts/bootstrap.min.css',
+      // './asserts/bootstrap-theme.min.css'
     ]
   },
   module: {