update more NC colors and fix external data loading on name generator…

… side panels
complexdatacollective · Dec 11, 2023 · 14fb145 · 14fb145
1 parent f691cdf
commit 14fb145
Show file tree

Hide file tree

Showing 28 changed files with 305 additions and 256 deletions.
diff --git a/lib/interviewer/containers/CategoricalList/CategoricalList.js b/lib/interviewer/containers/CategoricalList/CategoricalList.js
@@ -39,16 +39,16 @@ class CategoricalList extends Component {
   // eslint-disable-next-line camelcase
   UNSAFE_componentWillMount() {
     this.colorPresets = [
-      getCSSVariableAsString('--cat-color-seq-1'),
-      getCSSVariableAsString('--cat-color-seq-2'),
-      getCSSVariableAsString('--cat-color-seq-3'),
-      getCSSVariableAsString('--cat-color-seq-4'),
-      getCSSVariableAsString('--cat-color-seq-5'),
-      getCSSVariableAsString('--cat-color-seq-6'),
-      getCSSVariableAsString('--cat-color-seq-7'),
-      getCSSVariableAsString('--cat-color-seq-8'),
-      getCSSVariableAsString('--cat-color-seq-9'),
-      getCSSVariableAsString('--cat-color-seq-10'),
+      getCSSVariableAsString('--nc-cat-color-seq-1'),
+      getCSSVariableAsString('--nc-cat-color-seq-2'),
+      getCSSVariableAsString('--nc-cat-color-seq-3'),
+      getCSSVariableAsString('--nc-cat-color-seq-4'),
+      getCSSVariableAsString('--nc-cat-color-seq-5'),
+      getCSSVariableAsString('--nc-cat-color-seq-6'),
+      getCSSVariableAsString('--nc-cat-color-seq-7'),
+      getCSSVariableAsString('--nc-cat-color-seq-8'),
+      getCSSVariableAsString('--nc-cat-color-seq-9'),
+      getCSSVariableAsString('--nc-cat-color-seq-10'),
     ];
   }
 

diff --git a/lib/interviewer/containers/NodePanel.js b/lib/interviewer/containers/NodePanel.js
@@ -5,6 +5,8 @@ import { entityPrimaryKeyProperty } from '@codaco/shared-consts';
 import {
   makeNetworkNodesForPrompt as makeGetNodesForPrompt,
   makeNetworkNodesForOtherPrompts as makeGetNodesForOtherPrompts,
+  getNetworkNodesForPrompt,
+  getNetworkNodesForOtherPrompts,
 } from '../selectors/interface';
 import { getNetworkEdges, getNetworkEgo } from '../selectors/network';
 import Panel from '~/lib/interviewer/components/Panel';
@@ -76,6 +78,8 @@ class NodePanel extends PureComponent {
       ...nodeListProps
     } = this.props;
 
+    console.log('NodePanel', this.props);
+
     return (
       <Panel
         title={title}
@@ -97,64 +101,55 @@ class NodePanel extends PureComponent {
 
 const getNodeId = (node) => node[entityPrimaryKeyProperty];
 
-const makeGetNodes = () => {
-  const getNodesForPrompt = makeGetNodesForPrompt();
-  const getNodesForOtherPrompts = makeGetNodesForOtherPrompts();
-
-  return (state, props) => {
-    const nodesForPrompt = getNodesForPrompt(state, props);
-    const nodesForOtherPrompts = getNodesForOtherPrompts(state, props);
-    const nodeIds = {
-      prompt: nodesForPrompt.map(getNodeId),
-      other: nodesForOtherPrompts.map(getNodeId),
-    };
-
-    const notInSet = (set) => (node) => !set.has(node[entityPrimaryKeyProperty]);
-
-    if (props.dataSource === 'existing') {
-      const nodes = nodesForOtherPrompts
-        .filter(notInSet(new Set(nodeIds.prompt)));
+const getNodes = (state, props) => {
+  const nodesForPrompt = getNetworkNodesForPrompt(state, props);
+  const nodesForOtherPrompts = getNetworkNodesForOtherPrompts(state, props);
+  const nodeIds = {
+    prompt: nodesForPrompt.map(getNodeId),
+    other: nodesForOtherPrompts.map(getNodeId),
+  };
 
-      return nodes;
-    }
+  const notInSet = (set) => (node) => !set.has(node[entityPrimaryKeyProperty]);
 
-    if (!props.externalData) { return []; }
+  if (props.dataSource === 'existing') {
+    const nodes = nodesForOtherPrompts
+      .filter(notInSet(new Set(nodeIds.prompt)));
 
-    const nodes = get(
-      props.externalData,
-      'nodes',
-      [],
-    )
-      .filter(notInSet(new Set([...nodeIds.prompt, ...nodeIds.other])));
     return nodes;
-  };
-};
+  }
 
-const makeMapStateToProps = () => {
-  const getNodes = makeGetNodes();
+  if (!props.externalData) { return []; }
 
-  return (state, props) => {
-    const nodes = getNodes(state, props);
+  const nodes = get(
+    props.externalData,
+    'nodes',
+    [],
+  )
+    .filter(notInSet(new Set([...nodeIds.prompt, ...nodeIds.other])));
+  return nodes;
+};
 
-    const nodeFilter = props.filter;
-    if (nodeFilter && typeof nodeFilter !== 'function') {
-      const filterFunction = customFilter(nodeFilter);
-      return filterFunction({
-        nodes,
-        edges: getNetworkEdges(state, props),
-        ego: getNetworkEgo(state, props),
-      });
-    }
+const mapStateToProps = (state, props) => {
+  const nodes = getNodes(state, props);
 
-    return {
+  const nodeFilter = props.filter;
+  if (nodeFilter && typeof nodeFilter !== 'function') {
+    const filterFunction = customFilter(nodeFilter);
+    return filterFunction({
       nodes,
-    };
+      edges: getNetworkEdges(state, props),
+      ego: getNetworkEgo(state, props),
+    });
+  }
+
+  return {
+    nodes,
   };
 };
 
 export { NodePanel };
 
 export default compose(
   withExternalData('externalDataSource', 'externalData'),
-  connect(makeMapStateToProps),
+  connect(mapStateToProps),
 )(NodePanel);
diff --git a/lib/interviewer/containers/OrdinalBins.js b/lib/interviewer/containers/OrdinalBins.js
@@ -19,7 +19,7 @@ class OrdinalBins extends PureComponent {
 
     return prompt.color
       ? color(getCSSVariableAsString(`--${prompt.color}`))
-      : color(getCSSVariableAsString('--ord-color-seq-1'));
+      : color(getCSSVariableAsString('--nc-ord-color-seq-1'));
   };
 
   backgroundColor = () => color(getCSSVariableAsString('--background'));

diff --git a/lib/interviewer/containers/withExternalData.js b/lib/interviewer/containers/withExternalData.js
@@ -13,34 +13,34 @@ import {
   includes,
   isNil,
   mapValues,
-  mapKeys,
   toNumber,
   reduce,
 } from 'lodash';
-import { entityAttributesProperty, entityPrimaryKeyProperty } from '@codaco/shared-consts';
+import { entityAttributesProperty } from '@codaco/shared-consts';
 import loadExternalData from '../utils/loadExternalData';
-import getParentKeyByNameValue from '../utils/getParentKeyByNameValue';
 import ProtocolConsts from '../protocol-consts';
+import { getSessionMeta, makeVariableUUIDReplacer } from '../hooks/useExternalData';
 
 const mapStateToProps = (state) => {
-  const session = state.sessions[state.activeSessionId];
-  const { protocolUID } = session;
-  const protocolCodebook = state.installedProtocols[protocolUID].codebook;
-  const { assetManifest } = state.installedProtocols[protocolUID];
-  const assetFiles = mapValues(
+  const {
+    protocolUID,
     assetManifest,
-    (asset) => asset.source,
-  );
+    protocolCodebook,
+  } = getSessionMeta(state);
+
+  console.log({
+    protocolUID,
+    assetManifest,
+    protocolCodebook,
+  });
 
   return {
     protocolUID,
     assetManifest,
-    assetFiles,
     protocolCodebook,
   };
 };
 
-const withUUID = (node) => objectHash(node);
 
 const getCodebookDefinition = (protocolCodebook, stageSubject) => {
   const stageNodeType = stageSubject.type;
@@ -51,29 +51,6 @@ const getCodebookDefinition = (protocolCodebook, stageSubject) => {
   return protocolCodebook[entityType][stageNodeType] || {};
 };
 
-// Replace string keys with UUIDs in codebook, according to stage subject.
-const withVariableUUIDReplacement = (nodeList, protocolCodebook, stageSubject) => nodeList.map(
-  (node) => {
-    const codebookDefinition = getCodebookDefinition(protocolCodebook, stageSubject);
-
-    const uuid = withUUID(node);
-
-    const attributes = mapKeys(
-      node.attributes,
-      (attributeValue, attributeKey) => getParentKeyByNameValue(
-        codebookDefinition.variables,
-        attributeKey,
-      ),
-    );
-
-    return {
-      type: stageSubject.type,
-      [entityPrimaryKeyProperty]: uuid,
-      [entityAttributesProperty]: attributes,
-    };
-  },
-);
-
 // compile list of attributes from a nodelist that aren't already in the codebook
 const getUniqueAttributeKeys = (nodeList, protocolCodebook, stageSubject) => (
   nodeList.reduce((attributeKeys, node) => {
@@ -281,8 +258,6 @@ const withExternalData = (sourceProperty, dataProperty) => compose(
     loadExternalData: ({
       setExternalData,
       setExternalDataIsLoading,
-      protocolUID,
-      assetFiles,
       assetManifest,
       protocolCodebook,
     }) => (sourceId, stageSubject) => {
@@ -291,15 +266,15 @@ const withExternalData = (sourceProperty, dataProperty) => compose(
       setExternalData(null);
       setExternalDataIsLoading(true);
 
-      const sourceFile = assetFiles[sourceId];
-      const { type } = assetManifest[sourceId];
+      const { name, url } = assetManifest[sourceId];
 
-      loadExternalData(protocolUID, sourceFile, type)
-        .then((externalData) => (
-          withVariableUUIDReplacement(externalData.nodes, protocolCodebook, stageSubject)
-        ))
+      loadExternalData(name, url)
+        .then((externalData) => {
+          const variableUUIDReplacer = makeVariableUUIDReplacer(protocolCodebook, stageSubject.type);
+          return externalData.nodes.map(variableUUIDReplacer);
+        })
         .then((uuidData) => getVariableTypeReplacements(
-          sourceFile, uuidData, protocolCodebook, stageSubject,
+          name, uuidData, protocolCodebook, stageSubject,
         ))
         .then((nodes) => {
           setExternalDataIsLoading(false);

diff --git a/lib/interviewer/hooks/useExternalData.js b/lib/interviewer/hooks/useExternalData.js
@@ -12,7 +12,7 @@ import { createSelector } from '@reduxjs/toolkit';
 import { getActiveSession } from '../selectors/session';
 import { getAssetManifest, getProtocolCodebook } from '../selectors/protocol';
 
-const getSessionMeta = createSelector(
+export const getSessionMeta = createSelector(
   getActiveSession,
   getProtocolCodebook,
   getAssetManifest,
@@ -29,7 +29,7 @@ const getSessionMeta = createSelector(
 const withUUID = (node) => objectHash(node);
 
 // Replace string keys with UUIDs in codebook, according to stage subject.
-const makeVariableUUIDReplacer = (
+export const makeVariableUUIDReplacer = (
   protocolCodebook,
   subjectType,
 ) => (node) => {

diff --git a/lib/interviewer/selectors/interface.js b/lib/interviewer/selectors/interface.js
@@ -132,7 +132,9 @@ export const makeNetworkNodesForPrompt = () => getNetworkNodesForPrompt;
  * prompt's promptId.
 */
 
-export const makeNetworkNodesForOtherPrompts = () => createSelector(
+export const getNetworkNodesForOtherPrompts = createSelector(
   getNetworkNodesForType, getPropPromptId,
   (nodes, promptId) => filter(nodes, (node) => !includes(node.promptIDs, promptId)),
 );
+
+export const makeNetworkNodesForOtherPrompts = () => getNetworkNodesForOtherPrompts;
diff --git a/lib/interviewer/styles/components/_accordion.scss b/lib/interviewer/styles/components/_accordion.scss
@@ -19,7 +19,7 @@
     }
 
     h4 {
-      letter-spacing: .15rem;
+      letter-spacing: 0.15rem;
       text-transform: uppercase;
       margin: 0;
     }
@@ -46,36 +46,39 @@
   align-items: center;
 
   .icon {
-    margin: .5rem;
+    margin: 0.5rem;
   }
 
   &__radio {
-    border: solid .1rem;
-    border-color: var(--input-border);
+    border: solid 0.1rem;
+    border-color: var(--nc-input-border);
     border-radius: 50%;
     height: 2rem;
-    margin: .5rem;
+    margin: 0.5rem;
     width: 2rem;
-    transition: border-color var(--animation-easing) var(--animation-duration-standard);
+    transition: border-color var(--animation-easing)
+      var(--animation-duration-standard);
 
     &::before {
-      background-color: var(--input-accent);
+      background-color: var(--nc-input-accent);
       border-radius: 50%;
       content: '';
       height: 1.3rem;
-      margin: .25rem;
+      margin: 0.25rem;
       opacity: 0;
       position: absolute;
       width: 1.3rem;
-      transition: opacity var(--animation-easing) var(--animation-duration-standard);
+      transition: opacity var(--animation-easing)
+        var(--animation-duration-standard);
     }
 
     &--selected {
       border-color: var(--nc-input-accent);
 
       &::before {
         opacity: 1;
-        transition: opacity var(--animation-easing) var(--animation-duration-standard);
+        transition: opacity var(--animation-easing)
+          var(--animation-duration-standard);
       }
     }
   }

diff --git a/lib/interviewer/styles/components/_convex-hull.scss b/lib/interviewer/styles/components/_convex-hull.scss
@@ -18,8 +18,8 @@
 @for $i from 1 through 10 {
   .convex-hull__cat-color-seq-#{$i} {
     polygon {
-      stroke: var(--cat-color-seq-#{$i});
-      fill: var(--cat-color-seq-#{$i});
+      stroke: var(--nc-cat-color-seq-#{$i});
+      fill: var(--nc-cat-color-seq-#{$i});
     }
   }
 }
diff --git a/lib/interviewer/styles/components/_list.scss b/lib/interviewer/styles/components/_list.scss
@@ -9,6 +9,6 @@
 
   &--hover,
   &--drag {
-    background-color: var(--node-list-action-bg);
+    background-color: var(--nc-node-list-action-bg);
   }
 }
diff --git a/lib/interviewer/styles/components/_node-bucket.scss b/lib/interviewer/styles/components/_node-bucket.scss
@@ -2,12 +2,12 @@
 
 .node-bucket {
   // sass-lint:disable-block no-color-literals
-  --node-bucket-bg: rgb(255 255 255 / 40%);
+  --nc-node-bucket-bg: rgb(255 255 255 / 40%);
 
   position: absolute;
   bottom: 0;
   left: calc(50% - #{units.unit(7.5)});
-  background: var(--node-bucket-bg);
+  background: var(--nc-node-bucket-bg);
   border-radius: 100%;
   display: flex;
   flex-direction: column;

diff --git a/lib/interviewer/styles/components/_node-list.scss b/lib/interviewer/styles/components/_node-list.scss
@@ -13,7 +13,7 @@ $node-inset: 1rem;  // approximate scaled margin + 'outer-trim' of a node
 
   &--hover,
   &--drag {
-    background-color: var(--node-list-action-bg);
+    background-color: var(--nc-node-list-action-bg);
   }
 
   &--transition {