Feature/display label defaults

public/protocols/development.netcanvas/protocol.json

@@ -79,6 +79,7 @@
       },
       "venue": {
         "label": "Venue",
+        "displayVariable": "Abbreviated Name",
         "color": "kiwi",
         "iconVariant": "add-a-place",
         "variables": {

src/containers/ConcentricCircles/LayoutNode.js

@@ -1,13 +1,13 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
+import { connect } from 'react-redux';
 import { compose } from 'recompose';
 import { Node } from 'network-canvas-ui';
+import { getNodeLabelFunction } from '../../selectors/interface';
 import { selectable } from '../../behaviours';
 import { DragSource } from '../../behaviours/DragAndDrop';
 import { NO_SCROLL } from '../../behaviours/DragAndDrop/DragManager';
 
-const label = node => node.nickname;
-
 const EnhancedNode = compose(
   DragSource,
   selectable,
@@ -16,12 +16,13 @@ const EnhancedNode = compose(
 class LayoutNode extends PureComponent {
   render() {
     const {
-      node,
-      selected,
-      linking,
       allowPositioning,
       allowSelect,
+      getLabel,
       layoutVariable,
+      linking,
+      node,
+      selected,
     } = this.props;
 
     const { x, y } = node[layoutVariable];
@@ -38,7 +39,7 @@ class LayoutNode extends PureComponent {
         style={styles}
       >
         <EnhancedNode
-          label={label(node)}
+          label={getLabel(node)}
           onSelected={this.props.onSelected}
           selected={selected}
           linking={linking}
@@ -55,27 +56,36 @@ class LayoutNode extends PureComponent {
 }
 
 LayoutNode.propTypes = {
-  onSelected: PropTypes.func.isRequired,
-  layoutVariable: PropTypes.string.isRequired,
-  node: PropTypes.object.isRequired,
   allowPositioning: PropTypes.bool,
   allowSelect: PropTypes.bool,
-  selected: PropTypes.bool,
-  linking: PropTypes.bool,
-  areaWidth: PropTypes.number,
   areaHeight: PropTypes.number,
+  areaWidth: PropTypes.number,
+  getLabel: PropTypes.func.isRequired,
+  layoutVariable: PropTypes.string.isRequired,
+  linking: PropTypes.bool,
+  node: PropTypes.object.isRequired,
+  onSelected: PropTypes.func.isRequired,
+  selected: PropTypes.bool,
 };
 
 LayoutNode.defaultProps = {
   allowPositioning: false,
   allowSelect: false,
-  selected: false,
-  linking: false,
-  areaWidth: 0,
   areaHeight: 0,
+  areaWidth: 0,
+  linking: false,
   onSelected: () => {},
+  selected: false,
 };
 
+function mapStateToProps(state) {
+  return {
+    getLabel: getNodeLabelFunction(state),
+  };
+}
+
 export { LayoutNode };
 
-export default LayoutNode;
+export default compose(
+  connect(mapStateToProps),
+)(LayoutNode);

src/containers/ConcentricCircles/__tests__/LayoutNode.test.js

@@ -11,10 +11,11 @@ const mockProps = {
   updateNode: () => {},
   onSelected: () => {},
   layoutVariable: layout,
-  node: { [layout]: { x: 0.77, y: 0.2 } },
+  node: { [layout]: { x: 0.77, y: 0.2 }, label: 'some content' },
   areaWidth: 100,
   areaHeight: 40,
   draggableType: 'bar',
+  getLabel: node => node.label,
 };
 
 describe('<LayoutNode />', () => {

src/containers/ConcentricCircles/__tests__/__snapshots__/LayoutNode.test.js.snap

@@ -10,6 +10,7 @@ ShallowWrapper {
     areaHeight={40}
     areaWidth={100}
     draggableType="bar"
+    getLabel={[Function]}
     layoutVariable="foo"
     linking={false}
     node={
@@ -18,6 +19,7 @@ ShallowWrapper {
               "x": 0.77,
               "y": 0.2,
             },
+            "label": "some content",
           }
     }
     onDropped={[Function]}
@@ -47,7 +49,7 @@ ShallowWrapper {
                         "y": 0.2,
                       }
         }
-        label={undefined}
+        label="some content"
         linking={false}
         meta={[Function]}
         onSelected={[Function]}
@@ -74,7 +76,7 @@ ShallowWrapper {
           "x": 0.77,
           "y": 0.2,
         },
-        "label": undefined,
+        "label": "some content",
         "linking": false,
         "meta": [Function],
         "onSelected": [Function],
@@ -103,7 +105,7 @@ ShallowWrapper {
                               "y": 0.2,
                             }
           }
-          label={undefined}
+          label="some content"
           linking={false}
           meta={[Function]}
           onSelected={[Function]}
@@ -130,7 +132,7 @@ ShallowWrapper {
             "x": 0.77,
             "y": 0.2,
           },
-          "label": undefined,
+          "label": "some content",
           "linking": false,
           "meta": [Function],
           "onSelected": [Function],

src/containers/ConcentricCircles/__tests__/__snapshots__/NodeLayout.test.js.snap

@@ -49,7 +49,7 @@ ShallowWrapper {
     "nodeType": "host",
     "props": Object {
       "children": Array [
-        <LayoutNode
+        <Connect(LayoutNode)
           allowPositioning={false}
           allowSelect={true}
           areaHeight={456}
@@ -110,7 +110,7 @@ ShallowWrapper {
       "nodeType": "host",
       "props": Object {
         "children": Array [
-          <LayoutNode
+          <Connect(LayoutNode)
             allowPositioning={false}
             allowSelect={true}
             areaHeight={456}

src/containers/Interfaces/NameGenerator.js

@@ -6,15 +6,12 @@ import { get, has } from 'lodash';
 import withPrompt from '../../behaviours/withPrompt';
 import { actionCreators as networkActions } from '../../ducks/modules/network';
 import { actionCreators as modalActions } from '../../ducks/modules/modals';
-import { makeNetworkNodesForPrompt } from '../../selectors/interface';
+import { getNodeLabelFunction, makeNetworkNodesForPrompt } from '../../selectors/interface';
 import { makeGetPromptNodeAttributes } from '../../selectors/name-generator';
 import { PromptSwiper, NodePanels, NodeForm } from '../../containers/';
 import { NodeList, NodeBin } from '../../components/';
 import { makeRehydrateForm } from '../../selectors/forms';
 
-// Render method for the node labels
-const label = node => `${node.nickname}`;
-
 /**
   * Name Generator Interface
   * @extends Component
@@ -82,13 +79,14 @@ class NameGenerator extends Component {
 
   render() {
     const {
+      form,
+      getLabel,
+      nodesForPrompt,
       openModal,
-      promptForward,
-      promptBackward,
       prompt,
-      nodesForPrompt,
+      promptBackward,
+      promptForward,
       stage,
-      form,
     } = this.props;
 
     const {
@@ -140,7 +138,7 @@ class NameGenerator extends Component {
           <div className="name-generator-interface__nodes">
             <NodeList
               nodes={nodesForPrompt}
-              label={label}
+              label={getLabel}
               listId={`${stage.id}_${prompt.id}_MAIN_NODE_LIST`}
               id={'MAIN_NODE_LIST'}
               accepts={({ meta }) => get(meta, 'itemType', null) === 'NEW_NODE'}
@@ -162,17 +160,18 @@ class NameGenerator extends Component {
 }
 
 NameGenerator.propTypes = {
-  nodesForPrompt: PropTypes.array.isRequired,
-  stage: PropTypes.object.isRequired,
-  prompt: PropTypes.object.isRequired,
-  addNodes: PropTypes.func.isRequired,
-  updateNode: PropTypes.func.isRequired,
-  openModal: PropTypes.func.isRequired,
   activePromptAttributes: PropTypes.object.isRequired,
+  addNodes: PropTypes.func.isRequired,
+  form: PropTypes.object.isRequired,
+  getLabel: PropTypes.func.isRequired,
   newNodeAttributes: PropTypes.object.isRequired,
-  promptForward: PropTypes.func.isRequired,
+  nodesForPrompt: PropTypes.array.isRequired,
+  openModal: PropTypes.func.isRequired,
+  prompt: PropTypes.object.isRequired,
   promptBackward: PropTypes.func.isRequired,
-  form: PropTypes.object.isRequired,
+  promptForward: PropTypes.func.isRequired,
+  stage: PropTypes.object.isRequired,
+  updateNode: PropTypes.func.isRequired,
 };
 
 function makeMapStateToProps() {
@@ -183,19 +182,20 @@ function makeMapStateToProps() {
   return function mapStateToProps(state, props) {
     return {
       activePromptAttributes: props.prompt.additionalAttributes,
+      form: rehydrateForm(state, props),
+      getLabel: getNodeLabelFunction(state),
       newNodeAttributes: getPromptNodeAttributes(state, props),
       nodesForPrompt: networkNodesForPrompt(state, props),
-      form: rehydrateForm(state, props),
     };
   };
 }
 
 function mapDispatchToProps(dispatch) {
   return {
     addNodes: bindActionCreators(networkActions.addNodes, dispatch),
-    updateNode: bindActionCreators(networkActions.updateNode, dispatch),
     closeModal: bindActionCreators(modalActions.closeModal, dispatch),
     openModal: bindActionCreators(modalActions.openModal, dispatch),
+    updateNode: bindActionCreators(networkActions.updateNode, dispatch),
   };
 }
 

src/containers/Interfaces/NameGeneratorAutoComplete.js

@@ -9,7 +9,7 @@ import withPrompt from '../../behaviours/withPrompt';
 import Search from '../../containers/Search';
 import { actionCreators as networkActions } from '../../ducks/modules/network';
 import { actionCreators as searchActions } from '../../ducks/modules/search';
-import { makeGetNodeType, makeNetworkNodesForPrompt, networkNodes } from '../../selectors/interface';
+import { getNodeLabelFunction, makeGetNodeType, makeNetworkNodesForPrompt, networkNodes } from '../../selectors/interface';
 import { getCardDisplayLabel, getCardAdditionalProperties, makeGetNodeIconName, makeGetPromptNodeAttributes } from '../../selectors/name-generator';
 import { PromptSwiper } from '../';
 import { NodeBin, NodeList } from '../../components/';
@@ -47,13 +47,14 @@ class NameGeneratorAutoComplete extends Component {
     const {
       closeSearch,
       excludedNodes,
+      getLabel,
       labelKey,
-      nodesForPrompt,
       nodeIconName,
+      nodesForPrompt,
       nodeType,
       prompt,
-      promptForward,
       promptBackward,
+      promptForward,
       searchIsOpen,
       stage,
       toggleSearch,
@@ -71,9 +72,6 @@ class NameGeneratorAutoComplete extends Component {
 
     const ListId = 'AUTOCOMPLETE_NODE_LIST';
 
-    // TODO: Remove this workaround for the label formatter depending on prompt vars. See #305.
-    const labeledNodes = nodesForPrompt.map(n => ({ ...n, label: n[labelKey] }));
-
     return (
       <div className={baseClass}>
         <div className={`${baseClass}__prompt`}>
@@ -88,8 +86,9 @@ class NameGeneratorAutoComplete extends Component {
         <div className={`${baseClass}__nodes`}>
           <NodeList
             id={ListId}
+            label={getLabel}
             listId={`${stage.id}_${prompt.id}_${ListId}`}
-            nodes={labeledNodes}
+            nodes={nodesForPrompt}
             itemType="EXISTING_NODE"
           />
         </div>
@@ -126,17 +125,18 @@ NameGeneratorAutoComplete.propTypes = {
   addNodes: PropTypes.func.isRequired,
   closeSearch: PropTypes.func.isRequired,
   excludedNodes: PropTypes.array.isRequired,
+  getLabel: PropTypes.func.isRequired,
   labelKey: PropTypes.string.isRequired,
   newNodeAttributes: PropTypes.object.isRequired,
   nodesForPrompt: PropTypes.array.isRequired,
   nodeIconName: PropTypes.string.isRequired,
   nodeType: PropTypes.string.isRequired,
-  toggleSearch: PropTypes.func.isRequired,
   prompt: PropTypes.object.isRequired,
-  promptForward: PropTypes.func.isRequired,
   promptBackward: PropTypes.func.isRequired,
+  promptForward: PropTypes.func.isRequired,
   searchIsOpen: PropTypes.bool.isRequired,
   stage: PropTypes.object.isRequired,
+  toggleSearch: PropTypes.func.isRequired,
   visibleSupplementaryFields: PropTypes.array.isRequired,
 };
 
@@ -151,10 +151,11 @@ function mapDispatchToProps(dispatch) {
 function makeMapStateToProps() {
   return function mapStateToProps(state, props) {
     return {
+      excludedNodes: networkNodes(state, props),
+      getLabel: getNodeLabelFunction(state),
       labelKey: getCardDisplayLabel(state, props),
       newNodeAttributes: getPromptNodeAttributes(state, props),
       nodeIconName: getNodeIconName(state, props),
-      excludedNodes: networkNodes(state, props),
       nodesForPrompt: networkNodesForPrompt(state, props),
       nodeType: getNodeType(state, props),
       searchIsOpen: !state.search.collapsed,

src/containers/NodeBucket.js

@@ -4,14 +4,15 @@ import { connect } from 'react-redux';
 import { compose } from 'recompose';
 import { Node } from 'network-canvas-ui';
 import { makeGetNextUnplacedNode, makeGetSociogramOptions } from '../selectors/sociogram';
+import { getNodeLabelFunction } from '../selectors/interface';
 import { DragSource } from '../behaviours/DragAndDrop';
 import { NO_SCROLL } from '../behaviours/DragAndDrop/DragManager';
 
 const EnhancedNode = DragSource(Node);
-const label = node => node.nickname;
 
 class NodeBucket extends Component {
   static propTypes = {
+    getLabel: PropTypes.func.isRequired,
     node: PropTypes.object,
   };
 
@@ -21,6 +22,7 @@ class NodeBucket extends Component {
 
   render() {
     const {
+      getLabel,
       node,
     } = this.props;
 
@@ -30,7 +32,7 @@ class NodeBucket extends Component {
       <div className="node-bucket">
         { node &&
           <EnhancedNode
-            label={label(node)}
+            label={getLabel(node)}
             meta={() => ({ ...node, itemType: 'POSITIONED_NODE' })}
             scrollDirection={NO_SCROLL}
             {...node}
@@ -47,6 +49,7 @@ function makeMapStateToProps() {
 
   return function mapStateToProps(state, props) {
     return {
+      getLabel: getNodeLabelFunction(state),
       node: getNextUnplacedNode(state, props),
       ...getSociogramOptions(state, props),
     };