refactor: add description for flowchart

content/docs/2021-04-07-LearningPath-Statistical-Modeling-4/index.mdx

@@ -38,7 +38,7 @@ Performing a test usually consists the following steps:
 
 In part 4 we will be looking at common hypothesis test method and their application in linear models. You can download the R script file [here](./script.R).  
 
-We have also prepared a flow chart helps you to choose a statistical test for comparing two variables. Please click the button below to start.  
+We have also prepared a flowchart helps you to choose a statistical test for comparing two variables. Please click the button below to start.  
 
 <ReactFlowProvider>
   <FlowChart />

content/visualisation/2021-08-04-Which-Statistical-Test-To-Use-For-Two-Variables/flowChart/flowChart.jsx

@@ -11,7 +11,7 @@ import { MdHelp } from "react-icons/md"
 
 
 /***********************************
- * Flow chart Data and settings
+ * Flowchart Data and settings
  **********************************/
 const nodeTypes = {
   start: TriangleNodeComponent,
@@ -36,7 +36,7 @@ let groupedData = [...chartNodeData, ...chartEdgeData]
 
 
 /**************************
- * Return flow chart
+ * Return flowchart
  * @returns 
  *************************/
 const flowChart = () => {
@@ -55,7 +55,7 @@ const flowChart = () => {
 
 
   /****************************************
-   * Utility functions for the flow chart
+   * Utility functions for the flowchart
    ***************************************/
 
   const onLoad = useCallback(
@@ -277,7 +277,7 @@ const flowChart = () => {
 
   return (
     <div>
-      <button className="px-5 py-3 rounded-md bg-shefPurple text-white my-10" onClick={() => setDisplayChart(!displayChart)}>Click here to open the flow chart</button>
+      <button className="px-5 py-3 rounded-md bg-shefPurple text-white my-10" onClick={() => setDisplayChart(!displayChart)}>Click here to open the flowchart</button>
       <div 
         className={`${displayChart ? 'block' : 'hidden'} w-full hideScrollBar min-h-100 fixed flex flex-wrap top-0 left-0`} 
         style={{zIndex: '100', height: '100vh', overflowY: 'scroll'}}
@@ -354,12 +354,12 @@ const flowChart = () => {
         <div id="sidebar" className="w-full md:w-4/12 2xl:w-3/12 bg-white p-3 overflow-y-auto hideScrollBar" style={{height: '100vh'}}>
           <div className="w-full flex flex-wrap pb-5 space-x-2 space-y-2 border-b-1 border-gray-100">
             <button 
-              title="Centre the flow chart" 
+              title="Centre the flowchart" 
               className="mt-2 ml-2 px-2 py-1 rounded-md bg-pink-600 hover:bg-pink-500 text-white font-semibold" 
               onClick={() => reactflowInstance.fitView()}
             >Fit view</button>
             <button 
-              title="Reset the flow chart" 
+              title="Reset the flowchart" 
               className="px-2 py-1 rounded-md bg-pink-600 hover:bg-pink-500 text-white font-semibold" 
               onClick={() => {setElements(groupedData); setClickedNodes([]); reactflowInstance.fitView()}}
             >Restart</button>
@@ -370,11 +370,18 @@ const flowChart = () => {
           </div>
           {/* Path tracking */}
           <div className="mt-5">
-            <h1 className="font-bold text-xl text-black">
+            <h1 className="font-semibold text-xl text-black">
               {
                 clickedNodes.length >= 2 
                 ? 'Your paths:' 
-                : '< Please click on the first two shapes to start. Click on questions to see more options.'
+                : <span className="font-light text-lg">
+                    &#10140; Please click the first two shapes to start. <br/><br/>
+                    &#10140; Click on questions (diamond shape) to see more options. <br/><br/>
+                    &#10140; This flowchart is draggable and zoomable. <br/><br/>
+                    &#10140; The screen will follow the clicked shapes by default. You can use the button on the bottom left to turn this off.<br/><br/>
+                    &#10140; FAQ on the bottom right.
+                  </span>
+
               }
             </h1>
             <div className="py-3">

content/visualisation/2021-08-04-Which-Statistical-Test-To-Use-For-Two-Variables/flowChart/textData.js

@@ -1,7 +1,7 @@
 export const textForHelp = [
   {
     question: 'Introduction',
-    answer: 'This flow chart is a simple tool that help you to choose what statistical test to use for two variables. This was prepared for the Statistical Modelling learning path at dataviz.shef.ac.uk.'
+    answer: 'This flowchart is a simple tool that help you to choose what statistical test to use for two variables. This was prepared for the Statistical Modelling learning path at dataviz.shef.ac.uk.'
   },
   {
     question: 'How do I get started?',
@@ -21,6 +21,6 @@ export const textForHelp = [
   },
   {
     question: 'License',
-    answer: 'This flow chart and its content are covered by a Creative Commons license CC BY-SA 4.0.'
+    answer: 'This flowchart and its content are covered by a Creative Commons license CC BY-SA 4.0.'
   }
 ]

content/visualisation/2021-08-04-Which-Statistical-Test-To-Use-For-Two-Variables/flowChart/utils.js

@@ -5,7 +5,7 @@
  * OR
  * -> If children are visible, recursively find visible children (of children) by setting "deepLevel" to true.
  *  If "deepLevel" is true, it will skip hidden children.
- * @param {array} data current flow chart data
+ * @param {array} data current flowchart data
  * @param {object} element element that user clicked 
  * @param {boolean} deepLevel whether to get data more than one level deep
  * @returns {array} array of element ids.

content/visualisation/2021-08-04-Which-Statistical-Test-To-Use-For-Two-Variables/index.mdx

@@ -4,7 +4,7 @@ author: [Yu Liang Weng]
 title: Which statistical test to use for two variables?
 thumbnail: thumbnail/thumbnail.png
 description: >
-  An interative tool based on the flow chart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of the statistical modelling learning path.
+  An interative tool based on the flowchart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of the statistical modelling learning path.
 date: "2021-08-04"
 category: [Research & Innovation IT]
 tag: [Statistics, Interative]
@@ -18,11 +18,11 @@ import Thumb from "./thumbnail/flowChartInside.png"
 export const data = [
   {
     "title": "Source",
-    "content": `This flow chart was prepared by <a href="https://scholar.google.co.uk/citations?user=UesDIkYAAAAJ&hl=en">Jean Russell</a> for the <a href="https://dataviz.shef.ac.uk/docs/18/03/2021/LearningPath-Statistical-Modeling">statistical modelling learning path</a>.`
+    "content": `This flowchart was prepared by <a href="https://scholar.google.co.uk/citations?user=UesDIkYAAAAJ&hl=en">Jean Russell</a> for the <a href="https://dataviz.shef.ac.uk/docs/18/03/2021/LearningPath-Statistical-Modeling">statistical modelling learning path</a>.`
   },
   {
     "title": "Detail",
-    "content": `This chart was created using React and <a href="https://reactflow.dev/">React Flow</a> with customised components. Unfortunately, you can not embed the flow chart at the moment.`
+    "content": `This chart was created using React and <a href="https://reactflow.dev/">React Flow</a> with customised components. Unfortunately, you can not embed the flowchart at the moment.`
   },
   {
     "title": "Code",

content/visualisation/2021-08-04-Which-Statistical-Test-To-Use-For-Two-Variables/thumbnail/thumb.jsx

@@ -13,7 +13,7 @@ const thumbnail = () => {
         id="visualisation"
         style={{background: `url(${flowChartImg})`, maxWidth: '550px', maxHeight: '550px', minHeight: '550px', backgroundSize: 'cover', backgroundPosition: 'center', position: 'relative', padding: '1.25rem'}}
       >
-        <h1 className="mt-0 font-bold" style={{fontSize: '2.2rem', lineHeight: '1.2', color: 'white', textShadow: '0px 1px 10px #2f2f2f'}}>An interactive flow chart helps you choose a <span style={{background: 'linear-gradient(45deg, rgba(0, 171, 255, 0.64) 10%, rgba(56, 255, 0, 0.6) 100%)', padding: '0 .1rem', textShadow: 'none', fontWeight: '800'}}>statistical test</span> for two variables</h1>
+        <h1 className="mt-0 font-bold" style={{fontSize: '2.2rem', lineHeight: '1.2', color: 'white', textShadow: '0px 1px 10px #2f2f2f'}}>An interactive flowchart helps you choose a <span style={{background: 'linear-gradient(45deg, rgba(0, 171, 255, 0.64) 10%, rgba(56, 255, 0, 0.6) 100%)', padding: '0 .1rem', textShadow: 'none', fontWeight: '800'}}>statistical test</span> for two variables</h1>
         <div className="absolute right-0 m-5 text-xs text-right" style={{bottom: '25%', color: '#686868'}}>
           <p>ANOVA</p> 
           <p>T-Test</p>

package.json

@@ -31,7 +31,7 @@
   },
   "husky": {
     "hooks": {
-      "pre-commit": "lint-staged"
+      "pre-commit": "lint-staged && npm run test"
     }
   },
   "dependencies": {

src/components/shared/__tests__/__snapshots__/search.test.js.snap

@@ -350,7 +350,7 @@ exports[`Search component return search result without error 1`] = `
                       <span
                         class=""
                       >
-                        An interative tool based on the flow chart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of ...
+                        An interative tool based on the flowchart made by Jean Russell to help you determine which statistical test to use for two variables. This tool is a part of ...
                       </span>
                     </span>
                   </h1>