Merge pull request #1216 from complexdatacollective/fix/help-references

update help references

Author: jthrilly

SECURITY.md

@@ -8,4 +8,4 @@ Security updates will only be issued for the most recent version(s) of the softw
 
 ## Reporting a Vulnerability
 
-To report a security issue to us, please contact info@networkcanvas.com. We will work with you to resolve the issue.
+To report a security issue to us, please help us to troubleshoot it by creating a topic on our [community page](https://community.networkcanvas.com). We will work with you to resolve the issue.

src/config.js

@@ -1,7 +1,7 @@
 const PROTOCOL_EXTENSION = '.netcanvas';
 
 // Target protocol schema version. Used to determine compatibility & migration
-const APP_SCHEMA_VERSION = 8;
+const APP_SCHEMA_VERSION = 7;
 
 const DEVICE_API_VERSION = '2'; // X-Device-API-Version
 

src/containers/Interfaces/DyadCensus/DyadCensus.js

@@ -26,12 +26,12 @@ const fadeVariants = {
 };
 
 const optionsVariants = {
-  show: { opacity: 1, transition: { delay: 0.35, duration: 0.25 } },
-  hide: { opacity: 0, transition: { delay: 0.35, duration: 0.25 } },
+  show: { opacity: 1, transition: { delay: 0.15, duration: 0.25 } },
+  hide: { opacity: 0, transition: { delay: 0.15, duration: 0.25 } },
 };
 
 const choiceVariants = {
-  show: { opacity: 1, translateY: '0%', transition: { delay: 0.25, type: 'spring' } },
+  show: { opacity: 1, translateY: '0%', transition: { delay: 0.15, type: 'spring' } },
   hide: { opacity: 0, translateY: '120%' },
 };
 

src/containers/Interfaces/DyadCensus/Pair.js

@@ -8,7 +8,7 @@ const animationTarget = -50;
 
 const pairTransition = {
   duration: 0.5,
-  delay: 0.35,
+  delay: 0.15,
   when: 'afterChildren',
 };
 

src/containers/Interfaces/Narrative.js

@@ -13,6 +13,7 @@ import { getNetworkEdges, getNetworkNodes } from '../../selectors/network';
 import { edgesToCoords } from '../../selectors/canvas';
 import { entityAttributesProperty } from '../../utils/network-exporters/src/utils/reservedAttributes';
 import { get } from '../../utils/lodash-replacements';
+import { LayoutProvider } from '../../contexts/LayoutContext';
 
 /**
   * Narrative Interface
@@ -150,59 +151,65 @@ class Narrative extends Component {
     return (
       <div className="narrative-interface">
         <div className="narrative-interface__canvas" id="narrative-interface__canvas">
-          <Canvas
-            className="narrative-concentric-circles"
-            id="concentric-circles"
-            key={`circles-${currentPreset.id}`}
+          <LayoutProvider
+            layout={layoutVariable}
+            nodes={nodesWithLayout}
+            edges={edgesWithCoords}
           >
-            <Background
-              concentricCircles={concentricCircles}
-              skewedTowardCenter={skewedTowardCenter}
-              image={backgroundImage}
-            />
-            <ConvexHulls
-              nodes={nodesWithLayout}
-              groupVariable={convexHullVariable}
-              layoutVariable={layoutVariable}
-            />
-            <EdgeLayout
-              edges={edgesWithCoords}
-            />
-            {
-              freeDraw && (
-                <Annotations
-                  ref={this.annotationLayer}
-                  isFrozen={isFrozen}
-                  onChangeActiveAnnotations={this.handleChangeActiveAnnotations}
-                />
-              )
-            }
-            <NodeLayout
-              nodes={nodesWithLayout}
-              id="NODE_LAYOUT"
-              highlightAttribute={
-                (showHighlightedNodes ? highlight[highlightIndex] : null)
+            <Canvas
+              className="narrative-concentric-circles"
+              id="concentric-circles"
+              key={`circles-${currentPreset.id}`}
+            >
+              <Background
+                concentricCircles={concentricCircles}
+                skewedTowardCenter={skewedTowardCenter}
+                image={backgroundImage}
+              />
+              <ConvexHulls
+                nodes={nodesWithLayout}
+                groupVariable={convexHullVariable}
+                layoutVariable={layoutVariable}
+              />
+              <EdgeLayout
+                edges={edgesWithCoords}
+              />
+              {
+                freeDraw && (
+                  <Annotations
+                    ref={this.annotationLayer}
+                    isFrozen={isFrozen}
+                    onChangeActiveAnnotations={this.handleChangeActiveAnnotations}
+                  />
+                )
               }
-              layoutVariable={layoutVariable}
-              allowPositioning={allowRepositioning}
+              <NodeLayout
+                nodes={nodesWithLayout}
+                id="NODE_LAYOUT"
+                highlightAttribute={
+                  (showHighlightedNodes ? highlight[highlightIndex] : null)
+                }
+                layoutVariable={layoutVariable}
+                allowPositioning={allowRepositioning}
+              />
+            </Canvas>
+            <PresetSwitcher
+              id="drop-obstacle"
+              presets={presets}
+              activePreset={presetIndex}
+              highlightIndex={highlightIndex}
+              isFrozen={isFrozen}
+              shouldShowResetButton={shouldShowResetButton}
+              shouldShowFreezeButton={freeDraw}
+              onResetInteractions={this.handleResetInteractions}
+              onChangePreset={this.handleChangePreset}
+              onToggleFreeze={this.handleToggleFreeze}
+              onToggleHulls={this.handleToggleHulls}
+              onToggleEdges={this.handleToggleEdges}
+              onChangeHighlightIndex={this.handleChangeHighlightIndex}
+              onToggleHighlighting={this.handleToggleHighlighting}
             />
-          </Canvas>
-          <PresetSwitcher
-            id="drop-obstacle"
-            presets={presets}
-            activePreset={presetIndex}
-            highlightIndex={highlightIndex}
-            isFrozen={isFrozen}
-            shouldShowResetButton={shouldShowResetButton}
-            shouldShowFreezeButton={freeDraw}
-            onResetInteractions={this.handleResetInteractions}
-            onChangePreset={this.handleChangePreset}
-            onToggleFreeze={this.handleToggleFreeze}
-            onToggleHulls={this.handleToggleHulls}
-            onToggleEdges={this.handleToggleEdges}
-            onChangeHighlightIndex={this.handleChangeHighlightIndex}
-            onToggleHighlighting={this.handleToggleHighlighting}
-          />
+          </LayoutProvider>
         </div>
       </div>
     );

src/containers/StartScreen/HeaderSection.js

@@ -71,14 +71,10 @@ const HeaderSection = () => {
               <h2>Welcome to Interviewer!</h2>
             </header>
             <div className="welcome-description">
-              <p>
-                If this is your first time using Network Canvas Interviewer, please consider taking
-                a moment to watch our overview video. It will introduce you to the key
-                concepts of the Network Canvas project.
-              </p>
               <p>
                 For further detailed information, tutorials, videos, and information about
-                collaboration, please visit our documentation website.
+                collaboration, please visit our documentation website. For help and support,
+                visit our community website.
               </p>
               <p>
                 To get started right away, install one or more interview protocols
@@ -88,11 +84,11 @@ const HeaderSection = () => {
             </div>
             <div className="welcome-actions">
               <Button
-                color="primary"
-                onClick={() => openExternalLink('https://www.youtube.com/watch?v=XzfE6j-LnII')}
-                disabled={!onlineStatus}
+                className="button button--cerulean-blue button--with-new"
+                color="cerulean-blue"
+                onClick={() => openExternalLink('https://community.networkcanvas.com')}
               >
-                Watch overview video
+                Community Website
               </Button>
               <Button
                 color="sea-serpent"
@@ -104,7 +100,7 @@ const HeaderSection = () => {
               <Button
                 color="mustard"
                 disabled={!onlineStatus}
-                onClick={() => importProtocolFromURI('https://documentation.networkcanvas.com/protocols/Sample%20Protocol%20v3.netcanvas')}
+                onClick={() => importProtocolFromURI('https://documentation.networkcanvas.com/protocols/Sample%20Protocol%20v4.netcanvas')}
               >
                 Install sample protocol
               </Button>

src/ducks/modules/reset.js

@@ -2,6 +2,7 @@ import { entityPrimaryKeyProperty } from '@codaco/shared-consts';
 import { actionCreators as sessionsActions } from './sessions';
 import { actionCreators as deviceActions } from './deviceSettings';
 import resetProtocolFiles from '../../utils/protocol/resetProtocolFiles';
+import { get } from '../../utils/lodash-replacements';
 
 const RESET_STATE = 'RESET_STATE';
 const RESET_EDGES_OF_TYPE = 'RESET/EDGES_OF_TYPE';
@@ -26,7 +27,8 @@ const resetPropertyForAllNodes = (property) => (dispatch, getState) => {
   } = getState();
 
   nodes.forEach((node) => {
-    const registryForType = nodeRegistry[node.type].variables;
+    // Node definition may not have any variables
+    const registryForType = get(nodeRegistry, [node.type, 'variables'], {});
 
     if (registryForType[property]) {
       const variableType = registryForType[property].type;

src/selectors/canvas.js

@@ -22,6 +22,8 @@ const getDisplayEdges = (_, props) => get(props, 'prompt.edges.display', []);
  *
  * requires:
  * { layout, subject, sortOrder, stage } props
+ *
+ * Must *ALWAYS* return a node, or null.
  */
 export const getNextUnplacedNode = createDeepEqualSelector(
   getNetworkNodes,
@@ -30,7 +32,8 @@ export const getNextUnplacedNode = createDeepEqualSelector(
   getSortOptions,
   getAllVariableUUIDsByEntity,
   (nodes, subject, layoutVariable, sortOptions, codebookVariables) => {
-    if (nodes && nodes.length === 0) { return undefined; }
+    if (nodes && nodes.length === 0) { return null; }
+    if (!subject) { return null; }
 
     // Stage subject is either a single object or a collection of objects
     const types = isArray(subject) ? subject.map((s) => s.type) : [subject.type];
@@ -66,13 +69,16 @@ export const getNextUnplacedNode = createDeepEqualSelector(
  *
  * requires:
  * { layout, subject } props
+ *
+ * Must *ALWAYS* return an array, even if empty.
  */
 export const getPlacedNodes = createDeepEqualSelector(
   getNetworkNodes,
   getStageSubject(),
   getLayout,
   (nodes, subject, layoutVariable) => {
-    if (nodes && nodes.length === 0) { return undefined; }
+    if (nodes && nodes.length === 0) { return []; }
+    if (!subject) { return []; }
 
     // Stage subject is either a single object or a collecton of objects
     const types = isArray(subject) ? subject.map((s) => s.type) : [subject.type];

src/styles/components/_information-interface.scss

@@ -1,7 +1,7 @@
 $asset-size-large: 64vh;
 $asset-size-medium: 32vh;
-$asset-size-small: 16vh;
-$asset-size-default: 16vh;
+$asset-size-small: 17vh;
+$asset-size-default: 17vh;
 
 .information-interface {
   @include interface-centering;
@@ -12,8 +12,7 @@ $asset-size-default: 16vh;
   align-items: center;
 
   &__frame {
-    width: 80%;
-    max-width: 50rem;
+    max-width: 55rem;
   }
 
   &__title {
@@ -22,7 +21,7 @@ $asset-size-default: 16vh;
 
   &__items {
     margin-top: spacing('large');
-    max-height: calc($asset-size-large + #{spacing('medium') * 4});
+    max-height: calc(#{$asset-size-large} + #{spacing('medium') * 4});
     overflow: hidden;
   }
 
@@ -63,6 +62,7 @@ $asset-size-default: 16vh;
         overflow-y: auto;
         height: auto;
         max-height: $asset-size-small;
+        margin-top: 0; // Text paragraphs have their own margin
 
         &.information-interface__item--size-SMALL {
           max-height: $asset-size-small;

src/styles/components/_node-form.scss

@@ -10,7 +10,7 @@
 
       .overlay__content {
         .scrollable {
-          padding: unit(2) unit(4);
+          padding: 0 unit(4);
         }
       }
     }