fix: reference dependency functions in module

Add scroll to bottom feature for flowchart's sidebar.

.github/workflows/ci-without-cache.yml

@@ -18,17 +18,12 @@ jobs:
         uses: styfle/cancel-workflow-action@0.9.0
 
       - uses: actions/checkout@v2
-      # Retrieve cache
-      - name: Gatsby Cache
-        id: gatsby-ci-cache
-        uses: actions/cache@v2
-        with:
-          path: |
-            public
-            .cache
-          key: ${{ runner.os }}-gatsby-ci-${{ github.run_id }}
-          # Not restore cache
-          # restore-keys: ${{ runner.os }}-gatsby-ci-
+
+      - name: Run unit tests
+        run: npm run test:ci
+        with: 
+          path: .jest-cache
+          key: ${{ runner.os }}-jestCache-${{ github.run_id }}
 
       - name: Install dependencies
         run: npm ci

.github/workflows/ci.yml

@@ -33,6 +33,12 @@ jobs:
             .cache
           key: ${{ runner.os }}-gatsby-ci-${{ github.run_id }}
           restore-keys: ${{ runner.os }}-gatsby-ci-
+
+      - name: Run unit tests
+        run: npm run test:update
+        with: 
+          path: .jest-cache
+          key: ${{ runner.os }}-jestCache-${{ github.run_id }}
 
       - name: Install dependencies
         run: npm ci

.github/workflows/deploy.yml

@@ -25,6 +25,12 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: master
+
+      - name: Run unit tests
+        run: npm run test:ci
+        with: 
+          path: .jest-cache
+          key: ${{ runner.os }}-jestCache-${{ github.run_id }}
 
       - name: Gatsby Cache
         id: gatsby-deploy-cache

.gitignore

@@ -80,3 +80,6 @@ yarn-error.log
 # R project
 *.Rproj
 *.Rproj.*
+
+# Jest
+.jest-cache

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

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useState, useCallback } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import ReactFlow, { Controls, useZoomPanHelper } from 'react-flow-renderer';
 import { TriangleNodeComponent, DecisionNodeComponent, GreenNodeComponent, InfoNodeComponent, RedNodeComponent } from "./nodeComponents"
 import { getEdge, getNode, getNodesAndEdges } from "./utils"
@@ -259,6 +259,18 @@ const flowChart = () => {
 
     setElements(newElements)
   })
+
+
+  useEffect(() => {
+    if (clickedNodes.length < 7) { return; }
+
+    setTimeout(() => {
+      let sidebar = document.getElementById('sidebar');
+      sidebar.scrollTop = sidebar.scrollHeight;
+    }, 100)
+
+  }, [elements])
+
   /****************************************
    * End of Utility functions
    ***************************************/
@@ -339,7 +351,7 @@ const flowChart = () => {
         </div>
 
         {/* sidebar */}
-        <div className="w-full md:w-4/12 2xl:w-3/12 bg-white p-3" style={{height: '100vh'}}>
+        <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" 
@@ -365,7 +377,7 @@ const flowChart = () => {
                 : '< Please click on the first two shapes to start. Click on questions to see more options.'
               }
             </h1>
-            <div className="py-3 hideScrollBar" style={{height: '85vh', overflowY: 'scroll'}}>
+            <div className="py-3">
               {clickedNodes.length >= 2 && clickedNodes.map((node, index) => {
                 if (index == 0) { return false; }
                 if (index >= 2 && !getEdge(elements, clickedNodes[index - 1], clickedNodes[index - 2])) {
@@ -392,7 +404,7 @@ const flowChart = () => {
                     <div className="w-3/12 p-2 text-base text-center bg-blue-100 text-blue-700 border-1 border-blue-200 rounded-md">{edge.label}</div>
                     {
                       pathNotification &&
-                      <div className="mt-2 rounded-md w-full border-1 border-yellow-200 bg-yellow-100 text-yellow-700 p-2">
+                      <div className="mt-2 text-base rounded-md w-full border-1 border-yellow-200 bg-yellow-100 text-yellow-700 p-2">
                         {pathNotification}
                       </div>
                     }

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  cacheDirectory: ".jest-cache",
   // transform js/jsx files using jest-preprocess.js file
   transform: {
     "^.+\\.jsx?$": `<rootDir>/tests/jest-preprocess.js`,