updated the parse.js for faster parsing of data.

components/DatePicker.js

@@ -3,7 +3,7 @@ import styled from 'styled-components'
 import DayPicker from 'react-day-picker'
 
 import { connect } from 'react-redux'
-import { updateGraph, selectFilter } from './Redux/actions'
+import { updateGraph, selectFilter, updateIsLoading } from './Redux/actions'
 import { rowsToGraph } from '../util/parse'
 import { isBrowser } from 'react-device-detect'
 
@@ -26,13 +26,14 @@ const DatePickerButton = styled.button`
   border: 1px solid #e7e7e7;
 `
 
-function DatePicker({ updateGraph, selectFilter }) {
+function DatePicker({ updateGraph, selectFilter, updateIsLoading }) {
   const [selectedDay, changeSelectedDay] = useState(new Date());
   const [isDayPickerVisible, changeDayPickerVisibility] = useState(false);
 
   const toggleDayPickerVisibility = () => changeDayPickerVisibility(!isDayPickerVisible);
 
   function handleDayClick(date, modifiers) {
+    updateIsLoading(true)
 
     // Do not proceed with click action if the date is disabled
     if(modifiers.disabled){
@@ -109,4 +110,4 @@ function DatePicker({ updateGraph, selectFilter }) {
   )
 }
 
-export default connect(null, { updateGraph, selectFilter })(DatePicker)
+export default connect(null, { updateGraph, selectFilter, updateIsLoading })(DatePicker)

components/NetworkMap/index.js

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useRef, useMemo } from 'react'
 import Graph from 'react-graph-vis'
 import { Tooltip, TooltipArrow, TooltipInner } from 'styled-tooltip-component'
 import { connect, useSelector } from 'react-redux'
-import { updateGraph, updatePatients, updateLastRefreshed, selectPatient, updateStates, updateRawPatients } from '../Redux/actions'
+import { updateGraph, updatePatients, updateLastRefreshed, selectPatient, updateStates, updateRawPatients, updateIsLoading } from '../Redux/actions'
 import { rowsToGraph, letterToCode } from '../../util/parse'
 import normalize from '../../util/normalize'
 import DatePicker from '../DatePicker'
@@ -19,7 +19,8 @@ const NetworkMap = ({
   height,
   width,
   states,
-  updateRawPatients
+  updateRawPatients,
+  isLoading: isGraphLoading,
 }) => {
   const graphRef = useRef()
   const [isLoading, setIsLoading] = useState(true)
@@ -32,7 +33,7 @@ const NetworkMap = ({
     searchTerm: state.searchTerm,
     selected: state.patient,
   }))
- 
+
   useEffect(() => {
     if(!states){
       fetch('https://api.covid19india.org/state_district_wise.json', {
@@ -157,12 +158,14 @@ const NetworkMap = ({
       {isLoading ? null : (
         <>
           <NetworkMapLegend currentFilter={filter} />
-          <Graph
+          {!isGraphLoading && (
+            <Graph
             ref={graphRef}
             graph={graph}
             options={options}
             events={events}
           />
+          )}
           <DatePicker />
           {toolTipVisible && (
             <Tooltip
@@ -183,8 +186,8 @@ const NetworkMap = ({
 }
 
 const mapStateToProps = state => {
-  let { graph, searchTerm, filter, states, rawPatientData } = state
-  return { graph, searchTerm, filter, states, rawPatientData}
+  let { graph, searchTerm, filter, states, rawPatientData, isLoading } = state
+  return { graph, searchTerm, filter, states, rawPatientData, isLoading}
 }
 
 export default connect(mapStateToProps, {

components/Redux/actionTypes.js

@@ -16,4 +16,5 @@ export default {
   SEARCH: 'SEARCH',
   UPDATE_STATES: 'UPDATE_STATES',
   UPDATE_RAW_PATIENTS: 'UPDATE_RAW_PATIENTS',
+  UPDATE_IS_LOADING: 'UPDATE_IS_LOADING',
 }

components/Redux/actions.js

@@ -82,5 +82,12 @@ const updateStates = states => (dispatch, getState) => {
   })
 }
 
+const updateIsLoading = (isLoading) => (dispatch) => {
+  dispatch({
+    type: actionTypes.UPDATE_IS_LOADING,
+    payload: isLoading,
+  })
+}
+
 // Export the actions.
-export { updateGraph, updatePatients, updateRawPatients, updateLastRefreshed, selectPatient, selectFilter, setSearchTerm, updateStates}
+export { updateGraph, updatePatients, updateRawPatients, updateLastRefreshed, selectPatient, selectFilter, setSearchTerm, updateStates, updateIsLoading}

components/Redux/reducers.js

@@ -16,7 +16,8 @@ const initialState = {
   patients: null,
   searchTerm: '',
   states: null,
-  rawPatients: null
+  rawPatients: null,
+  isLoading: true,
 }
 
 // Export the Device Reducer.
@@ -32,7 +33,7 @@ export default (state = initialState, action) => {
     }
     case actionTypes.UPDATE_GRAPH: {
       const { graph } = action.payload
-      return { ...state, graph: graph }
+      return { ...state, graph: graph, isLoading: false }
     }
     case actionTypes.UPDATE_PATIENTS: {
       const { patients } = action.payload
@@ -63,6 +64,9 @@ export default (state = initialState, action) => {
       },{});
       return {...state, states: states}
     }
+    case actionTypes.UPDATE_IS_LOADING: {
+      return {...state, isLoading: action.payload}
+    }
     default:
       return state
   }

components/SidePanel/header.js

@@ -4,7 +4,7 @@ import { connect } from 'react-redux'
 
 import {getIcon, rowsToGraph} from '../../util/parse'
 import { SearchInput } from '../UI/search-input'
-import {selectFilter, setSearchTerm, updateGraph} from '../Redux/actions'
+import {selectFilter, setSearchTerm, updateGraph, updateIsLoading} from '../Redux/actions'
 
 const Container = styled.div`
   font-family: 'Lato', sans-serif;
@@ -45,7 +45,8 @@ const Name = styled.div`
   font-size: 40px;
 `
 
-function Header({ patient, lastRefreshed, setSearchTerm, selectFilter, updateGraph }) {
+function Header({ patient, lastRefreshed, setSearchTerm, selectFilter, updateGraph, updateIsLoading }) {
+  const [isMounting, toggleIsMounting] = useState(true)
   const [removeLeafNode, toggleRemoveLeafNode] = useState(false)
   const onSearch = (term) => {
   let _serchTerm = term.toUpperCase().replace(/P/g, "").trim();
@@ -65,8 +66,11 @@ function Header({ patient, lastRefreshed, setSearchTerm, selectFilter, updateGra
   }
 
   useEffect(() => {
-    if(removeLeafNode)
-    {
+    if (isMounting) {
+      toggleIsMounting(false)
+      return
+    }
+    updateIsLoading(true)
     fetch('https://api.rootnet.in/covid19-in/unofficial/covid19india.org', {
         cors: 'no-cors',
         method: 'GET',
@@ -78,7 +82,6 @@ function Header({ patient, lastRefreshed, setSearchTerm, selectFilter, updateGra
           selectFilter('P2P')
       })
       .catch(err => console.log('error', err))
-    }
   }, [removeLeafNode])
 
   const onChecked = (isEdgeNodeFilterChecked) => {
@@ -102,5 +105,5 @@ function Header({ patient, lastRefreshed, setSearchTerm, selectFilter, updateGra
 }
 
 export default connect(null, {
-  setSearchTerm, updateGraph, selectFilter
+  setSearchTerm, updateGraph, selectFilter, updateIsLoading,
 })(Header)

util/parse.js

@@ -66,36 +66,22 @@ import {
   cluster_node,
 } from '../images/index'
 import hash from 'object-hash'
-import dotProp from 'dot-prop-immutable'
 
 export function letterToCode(str) {
   const letterPos = parseInt(str[0], 36)
   return parseInt(letterPos.toString() + str.substring(1))
 }
 
 export function getIcon(patient) {
-  if (patient.gender === 'male') {
-    if (patient.status === 'Recovered') {
-      return male_cured
-    } else if (patient.status === 'Hospitalized') {
-      return male_hosp
-    } else if (patient.status === 'Deceased') {
-      return male_dead
-    } else {
-      return male_hosp
-    }
-  } else if (patient.gender === 'female') {
-    if (patient.status === 'Recovered') {
-      return female_cured
-    } else if (patient.status === 'Hospitalized') {
-      return female_hosp
-    } else if (patient.status === 'Deceased') {
-      return female_dead
-    } else {
-      return female_hosp
-    }
-  } else {
-    return female_hosp
+  switch (patient.status) {
+    case 'Recovered':
+      return patient.gender === 'male' ? male_cured : female_cured
+    case 'Hospitalized':
+      return patient.gender === 'male' ? male_hosp : female_hosp
+    case 'Deceased':
+      return patient.gender === 'male' ? male_dead : female_dead
+    default:
+      return patient.gender === 'male' ? male_hosp : female_hosp
   }
 }
 
@@ -110,7 +96,7 @@ export const codeToLetter = code => {
 
 const extractEvents = rows => {}
 
-function addPatientNode(patientCode, row, graph) {
+function getPatientNode(patientCode, row) {
     let node = {
         id: patientCode,
         label: 'P' + row.patientId,
@@ -119,27 +105,7 @@ function addPatientNode(patientCode, row, graph) {
         group: 'patient'
     }
 
-    graph = dotProp.set(graph, 'nodes', list => [...list, node])
-    return graph;
-}
-
-function addClusterNode(row, clusters, graph) {
-    if (row.contractedFrom) {
-        if (!clusters[hash(row.contractedFrom)] && row.contractedFrom[0] === 'E') {
-            const patientCode = letterToCode(row.contractedFrom)
-            clusters[hash(row.contractedFrom)] = row.contractedFrom
-
-            let clusterNode = {
-                id: patientCode,
-                label: 'Event ' + row.contractedFrom[1],
-                shape: 'image',
-                size: 60,
-                image: cluster_node,
-            }
-            graph = dotProp.set(graph, 'nodes', list => [...list, clusterNode])
-        }
-    }
-    return graph;
+    return node
 }
 
 export const rowsToGraph = (rows, removeLeafNode, addPInPatientId) => {
@@ -167,26 +133,42 @@ export const rowsToGraph = (rows, removeLeafNode, addPInPatientId) => {
       patientCode = letterToCode('P' + row.patientId)
     }
     if (row.contractedFrom) {
+      const CONTRACTED_FROM = row.contractedFrom
+      const PATIENT_CODE_CONTRACTED_FROM = letterToCode(CONTRACTED_FROM)
       let edge = {}
-      if (row.contractedFrom[0] === 'E') {
+      if (CONTRACTED_FROM[0] === 'E') {
         edge = {
-           from: letterToCode(row.contractedFrom),
+           from: PATIENT_CODE_CONTRACTED_FROM,
            to: patientCode,
            length: 500,
            dashes: true,
-        }} else {
+        }
+        const CONTRACTED_FROM_HASH = hash(CONTRACTED_FROM)
+        // adding the cluster node
+        if (!clusters[CONTRACTED_FROM_HASH]) {
+          clusters[CONTRACTED_FROM_HASH] = CONTRACTED_FROM
+
+          let clusterNode = {
+              id: PATIENT_CODE_CONTRACTED_FROM,
+              label: 'Event ' + CONTRACTED_FROM[1],
+              shape: 'image',
+              size: 60,
+              image: cluster_node,
+          }
+          graph.nodes.push(clusterNode)
+        }
+      } else {
            edge = {
-             from: letterToCode(row.contractedFrom),
+             from: PATIENT_CODE_CONTRACTED_FROM,
              to: patientCode,
            }
         }
-        graph = dotProp.set(graph, 'edges', list => [...list, edge])
+        graph.edges.push(edge)
       }
-      graph = addClusterNode(row, clusters, graph);
-      if(removeLeafNode && listOfConnectedCases.has(patientCode) ) {
-          graph = addPatientNode(patientCode, row, graph);
-      }else if(!removeLeafNode){
-          graph = addPatientNode(patientCode, row, graph);
+      if (!removeLeafNode) {
+        graph.nodes.push(getPatientNode(patientCode, row))
+      } else if (listOfConnectedCases.has(patientCode)) {
+        graph.nodes.push(getPatientNode(patientCode, row))
       }
   })
   return graph