Merge pull request #763 from complexdatacollective/fix/protocol-summary-variables

protocol summary variable pills and behaviors

Author: rebeccamadsen

src/lib/ProtocolSummary/components/Rule.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { compose } from 'recompose';
+import RuleText from '@components/Query/Rules/PreviewText';
+import withDisplayOptions from '@components/Query/Rules/withDisplayOptions';
+
+const Rule = ({
+  type, options,
+}) => (
+  <RuleText type={type} options={options} />
+);
+
+Rule.propTypes = {
+  type: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/forbid-prop-types
+  options: PropTypes.object.isRequired,
+};
+
+export default compose(
+  withDisplayOptions,
+)(Rule);

src/lib/ProtocolSummary/components/Rules.js

@@ -1,49 +1,31 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import RuleText, { Join } from '@components/Query/Rules/PreviewText';
+import { Join } from '@components/Query/Rules/PreviewText';
 import SummaryContext from './SummaryContext';
-import { getVariableName, getEntityName } from './helpers';
-
-const labelRules = (codebook, index, rules) => rules
-  .map(({ type, options }) => {
-    const labeledOptions = {
-      ...options,
-    };
-
-    if (options.attribute) {
-      labeledOptions.attribute = getVariableName(index, options.attribute);
-    }
-
-    if (options.type) {
-      const entity = type === 'alter' ? 'node' : 'edge';
-      labeledOptions.type = getEntityName(codebook, entity, options.type);
-    }
-
-    return { type, options: labeledOptions };
-  });
+import Rule from './Rule';
 
 const Rules = ({ filter }) => {
   const {
     protocol,
-    index,
   } = useContext(SummaryContext);
 
   if (!filter) { return null; }
 
   const {
     join,
+    rules,
   } = filter;
 
-  const rules = labelRules(protocol.codebook, index, filter.rules);
-
   return (
     <div className="protocol-summary-rules">
       { rules.map(({ type, options }, n) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <div className="protocol-summary-rules__rule" key={n}>
-          <RuleText type={type} options={options} />
+        <>
+          {/* eslint-disable-next-line react/no-array-index-key */}
+          <div className="protocol-summary-rules__rule" key={n}>
+            <Rule type={type} options={options} codebook={protocol.codebook} />
+          </div>
           { n !== rules.length - 1 && join && <Join value={join} /> }
-        </div>
+        </>
       ))}
     </div>
   );

src/lib/ProtocolSummary/components/Stage/Behaviours.js

@@ -1,8 +1,34 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { map } from 'lodash';
 import MiniTable from '../MiniTable';
 import { renderValue } from '../helpers';
 
+const behaviorLabel = (behaviourValue, behaviourKey) => {
+  switch (behaviourKey) {
+    case 'allowRepositioning':
+      return { label: 'Repositioning enabled', value: behaviourValue };
+    case 'automaticLayout':
+      return { label: 'Automatic layout enabled', value: behaviourValue.enabled };
+    case 'minNodes':
+      return { label: 'Minimum nodes on stage', value: behaviourValue };
+    case 'maxNodes':
+      return { label: 'Maximum nodes on stage', value: behaviourValue };
+    case 'freeDraw':
+      return { label: 'Freedraw enabled', value: behaviourValue };
+    default:
+      return { label: behaviourKey, value: behaviourValue };
+  }
+};
+
+const behaviourRows = (behaviours) => map(behaviours, (behaviourValue, behaviourKey) => {
+  const labelValue = behaviorLabel(behaviourValue, behaviourKey);
+  return [
+    labelValue.label,
+    renderValue(labelValue.value),
+  ];
+});
+
 const Behaviours = ({ behaviours }) => {
   if (!behaviours) { return null; }
 
@@ -12,16 +38,7 @@ const Behaviours = ({ behaviours }) => {
         <h2 className="section-heading">Behaviours</h2>
         <MiniTable
           rotated
-          rows={[
-            [
-              'Repositioning enabled',
-              renderValue(behaviours.allowRepositioning),
-            ],
-            [
-              'Freedraw enabled',
-              renderValue(behaviours.freeDraw),
-            ],
-          ]}
+          rows={behaviourRows(behaviours)}
         />
       </div>
     </div>

src/lib/ProtocolSummary/components/Stage/Form.js

@@ -4,10 +4,7 @@ import Markdown from '@codaco/ui/lib/components/Fields/Markdown';
 import SummaryContext from '../SummaryContext';
 import MiniTable from '../MiniTable';
 import Variable from '../Variable';
-
-const getVariableMeta = (index, variable) => (
-  index.find(({ id }) => id === variable) || {}
-);
+import { getVariableMeta } from '../helpers';
 
 const Form = ({ form }) => {
   const {

src/lib/ProtocolSummary/components/Stage/Presets.js

@@ -40,7 +40,7 @@ const Presets = ({ presets }) => {
                       'Highlight attributes',
                       <ul>
                         {
-                          get(preset, 'preset.highlight', []).map((id) => (
+                          get(preset, 'highlight', []).map((id) => (
                             <li key={id}>
                               <Variable id={id} link />
                               <br />

src/lib/ProtocolSummary/components/Stage/Prompt.js

@@ -13,10 +13,12 @@ const directionLabel = (direction) => (
 );
 
 const SortOrder = ({ rules }) => {
+  if (!rules) return null;
+
   const result = rules
     .map(({ property, direction }) => (
       <li key={property}>
-        <Variable id={property} />
+        {(property === '*') ? '*' : <Variable id={property} />}
         {' '}
         <small>
           (
@@ -41,7 +43,7 @@ const attributes = [
   ['highlight.allowHighlighting', 'Allow highlighting', (allow) => renderValue(allow)],
   ['highlight.variable', 'Highlight variable', (id) => <Variable id={id} />],
   ['negativeLabel', 'Negative Option Label', (text) => text],
-  ['sortOrder.property', 'Sort by property', (rules) => <SortOrder rules={rules} />],
+  ['sortOrder', 'Sort by property', (rules) => <SortOrder rules={rules} />],
   ['binSortOrder', 'Bin sort order', (rules) => <SortOrder rules={rules} />],
   ['bucketSortOrder', 'Bucket sort order', (rules) => <SortOrder rules={rules} />],
   ['otherVariable', 'Other variable', (id) => <Variable id={id} />],

src/lib/ProtocolSummary/components/Stage/SkipLogic.js

@@ -16,6 +16,7 @@ const SkipLogic = ({ skipLogic }) => {
     <div className="protocol-summary-stage__skip-logic">
       <MiniTable
         rotated
+        wide
         rows={[
           ['Action', action],
           ['Rules', <Rules filter={filter} />],

src/lib/ProtocolSummary/components/Stage/Stage.js

@@ -101,6 +101,7 @@ const Stage = ({
               <h2 className="section-heading">Network Filtering</h2>
               <MiniTable
                 rotated
+                wide
                 rows={[
                   ['Rules', <Filter filter={configuration.filter} />],
                 ]}

src/lib/ProtocolSummary/components/Variable.js

@@ -1,22 +1,26 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { SimpleVariablePill } from '@components/Form/Fields/VariablePicker/VariablePill';
 import SummaryContext from './SummaryContext';
 import DualLink from './DualLink';
-import { getVariableName } from './helpers';
+import { getVariableName, getVariableMeta } from './helpers';
 
 const Variable = ({
   id,
 }) => {
+  if (!id) return null;
+
   const {
     index,
   } = useContext(SummaryContext);
+  const meta = getVariableMeta(index, id);
 
   return (
     <DualLink
       to={`#variable-${id}`}
       className="protocol-summary-variable"
     >
-      {getVariableName(index, id)}
+      <SimpleVariablePill label={getVariableName(index, id)} type={meta.type} />
     </DualLink>
   );
 };

src/lib/ProtocolSummary/components/Variables.js

@@ -6,6 +6,7 @@ import {
   toPairs, get, find, isEmpty, sortBy,
 } from 'lodash';
 import Markdown from '@codaco/ui/lib/components/Fields/Markdown';
+import { SimpleVariablePill } from '@components/Form/Fields/VariablePicker/VariablePill';
 import SummaryContext from './SummaryContext';
 import DualLink from './DualLink';
 import MiniTable from './MiniTable';
@@ -73,7 +74,7 @@ const Variables = ({ variables }) => {
 
             return (
               <tr key={variableId} id={`variable-${variableId}`}>
-                <td>{name}</td>
+                <td><SimpleVariablePill label={name} type={type} /></td>
                 <td>
                   {type}
                   <br />

src/lib/ProtocolSummary/components/helpers.js

@@ -16,6 +16,10 @@ export const getVariableName = (index, variableId) => {
   return entry && entry.name;
 };
 
+export const getVariableMeta = (index, variable) => (
+  index.find(({ id }) => id === variable) || {}
+);
+
 export const getEntityName = (codebook, entity, type) => (
   get(codebook, [entity, type, 'name'])
 );

src/lib/ProtocolSummary/styles/_protocol-summary.scss

@@ -42,6 +42,14 @@
 }
 
 .protocol-summary-rules {
+  .protocol-summary-rules__rule {
+    --base-node-size: 5.6rem;
+    display: flex;
+    align-items: center;
+    width: 100%;
+    flex-grow: 1;
+  }
+
   &__rule:not(:last-child) {
     margin-bottom: unit(1);
   }
@@ -118,6 +126,12 @@
     font-family: -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
     font-size: 10pt;
   }
+
+  .variable-pill {
+    zoom: .8;
+    max-width: 24rem;
+    margin: .5rem;
+  }
 }
 
 .protocol-summary-controls {