Merge branch 'dev' into 'master'

Version 1.3.0

See merge request inq-seeds/boilerplate!104

.gitignore

@@ -56,3 +56,4 @@ Thumbs.db
 # Ignore JetBrains' IDEs
 .idea
 data
+src/system/datasets

package.json

@@ -1,6 +1,6 @@
 {
   "name": "meme-boilerplate",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "title": "MEME",
   "description": "Model and Evidence Mapping Environment",
   "repository": {
@@ -62,6 +62,7 @@
     "react-router-dom": "^5.1.1",
     "react-router-prop-types": "^1.0.4",
     "reactstrap": "^6.5.0",
+    "rfdc": "^1.1.4",
     "stacktrace-js": "^2.0.1",
     "superagent": "^5.1.0",
     "tracer": "^0.9.9",

src/app-web/components/EvidenceList.jsx

@@ -26,7 +26,7 @@ class EvidenceList extends React.Component {
     UR.Subscribe('DATA_UPDATED', this.HandleDataUpdate);
   }
 
-  componentDidMount() { }
+  componentDidMount() {}
 
   componentWillUnmount() {
     UR.Unsubscribe('DATA_UPDATED', this.HandleDataUpdate);

src/app-web/components/HelpView.jsx

@@ -145,7 +145,7 @@ Moreland, Vickery, Murphy, Stiso.
           <Typography variant="h6">HELP</Typography>
           <Divider style={{ marginBottom: '0.5em' }} />
           <div style={{ overflowY: 'scroll', paddingRight: '5px' }}>
-            <h6>Criteria</h6>
+            <h6>Criteria for a Good Model</h6>
             <CriteriaList Criteria={criteria} IsInEditMode={false} />
             <MDReactComponent className={classes.helpViewText} text={helptext} />
             <MDReactComponent className={classes.helpViewText} text={credittext} />

src/app-web/components/InfoDialog.jsx

@@ -0,0 +1,113 @@
+/*///////////////////////////////// ABOUT \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\*\
+
+Info Dialog
+
+Display a general information dialog.
+You can use markdown in the dialog text.
+
+
+\*\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ * /////////////////////////////////////*/
+
+/// LIBRARIES /////////////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+import React from 'react';
+import PropTypes from 'prop-types';
+import MDReactComponent from 'markdown-react-js';
+// Material UI Components
+import Button from '@material-ui/core/Button';
+import Dialog from '@material-ui/core/Dialog';
+import DialogContent from '@material-ui/core/DialogContent';
+import DialogContentText from '@material-ui/core/DialogContentText';
+import DialogActions from '@material-ui/core/DialogActions';
+// Material UI Icons
+import CloseIcon from '@material-ui/icons/Close';
+// Material UI Theming
+import { withStyles } from '@material-ui/core/styles';
+
+/// COMPONENTS ////////////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+import MEMEStyles from './MEMEStyles';
+import UR from '../../system/ursys';
+import ADM from '../modules/data';
+import DEFAULTS from '../modules/defaults';
+import UTILS from '../modules/utils';
+import CriteriaList from '../views/ViewAdmin/components/AdmCriteriaList';
+import DATAMAP from '../../system/common-datamap';
+
+/// CONSTANTS /////////////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+const DBG = false;
+const PKG = 'HelpView:';
+
+/// CLASS DECLARATION /////////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+
+class InfoDialog extends React.Component {
+  constructor(props) {
+    super();
+    this.DoOpen = this.DoOpen.bind(this);
+    this.DoClose = this.DoClose.bind(this);
+
+    const component = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.COMPONENT.label);
+    const mechanism = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.MECHANISM.label);
+    const outcome = UTILS.InitialCaps(DATAMAP.PMC_MODELTYPES.OUTCOME.label);
+
+    this.state = {
+      isOpen: false,
+      infoText: ``
+    };
+
+    UR.Subscribe('DIALOG_OPEN', this.DoOpen);
+  }
+
+  componentDidMount() {}
+
+  componentWillUnmount() {
+    UR.Unsubscribe('DIALOG_OPEN', this.DoOpen);
+  }
+
+  DoOpen(data) {
+    this.setState({
+      isOpen: true,
+      infoText: data.text
+    });
+  }
+
+  DoClose() {
+    this.setState({ isOpen: false });
+  }
+
+  render() {
+    const { isOpen, infoText } = this.state;
+    const { classes } = this.props;
+    return (
+      <>
+        {isOpen && (
+          <Dialog className={classes.infoDialog} open>
+            <DialogContent>
+              <MDReactComponent text={infoText} />
+            </DialogContent>
+            <DialogActions>
+              <Button color="primary" variant="contained" onClick={this.DoClose}>
+                Close
+              </Button>
+            </DialogActions>
+          </Dialog>
+        )}
+      </>
+    );
+  }
+}
+
+InfoDialog.propTypes = {
+  // eslint-disable-next-line react/forbid-prop-types
+  classes: PropTypes.object
+};
+
+InfoDialog.defaultProps = {
+  classes: {}
+};
+
+/// EXPORT REACT COMPONENT ////////////////////////////////////////////////////
+/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
+export default withStyles(MEMEStyles)(InfoDialog);

src/app-web/components/MEMEStyles.jsx

@@ -160,15 +160,13 @@ const styles = theme => {
       filter: 'brightness(90%) saturate(200%)'
     },
     edgeDialogWindowLabel: {
-      fontSize: '0.8em',
-      color: m_systemTextColor,
-      marginBottom: '-10px',
-      marginTop: '-1em'
+      fontSize: '1em',
+      color: m_systemTextColor
     },
     edgeDialogTextField: {
       color: orange[500],
       width: '150px',
-      margin: '0 25px'
+      margin: '0'
     },
     edgeDialogDescriptionField: {
       color: orange[500],

src/app-web/components/MechArrow.jsx

@@ -0,0 +1,74 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import DEFAULTS from '../modules/defaults';
+
+const { COLOR } = DEFAULTS;
+
+const SVG = ({
+  orientation = 'right',
+  disabled = false,
+  style = {},
+  stroke = '',
+  fill = COLOR.MECH,
+  width = '',
+  className = '',
+  viewBox = '-1 0 6 4'
+}) => {
+  const strokeWidth = '0.5';
+  // disabled
+  const pathFill = disabled ? 'none' : fill;
+  const pathStroke = disabled ? '#000' : stroke;
+  const strokeOpacity = disabled ? '0.1' : '0';
+  // orientation
+  let transform = 'rotate(180 2 2)';
+  if (orientation === 'right') {
+    transform = '';
+  }
+  return (
+    <svg
+      width={width}
+      style={style}
+      height={width}
+      viewBox={viewBox}
+      xmlns="http://www.w3.org/2000/svg"
+      className={`svg-icon ${className || ''}`}
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+    >
+      <path
+        stroke={pathStroke}
+        strokeWidth={strokeWidth}
+        strokeOpacity={strokeOpacity}
+        strokeLinejoin="miter"
+        strokeMiterlimit="8"
+        fill={pathFill}
+        transform={transform}
+        d="M0,0 L0,4 L4,2 Z"
+      />
+    </svg>
+  );
+};
+
+SVG.defaultProps = {
+  orientation: 'right',
+  disabled: false,
+  style: {},
+  stroke: '',
+  fill: COLOR.MECH,
+  width: '40px',
+  className: '',
+  viewBox: '-1 0 6 4' // hack to get around outer stroke and miter limits, should be '0 0 4 4'
+};
+
+SVG.propTypes = {
+  orientation: PropTypes.string,
+  disabled: PropTypes.bool,
+  // eslint-disable-next-line react/forbid-prop-types
+  style: PropTypes.object,
+  stroke: PropTypes.string,
+  fill: PropTypes.string,
+  width: PropTypes.string,
+  className: PropTypes.string,
+  viewBox: PropTypes.string
+};
+
+export default SVG;