Add a filter for all deceased/recovered/hospitalized

components/NetworkMap/index.js

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react'
 import Graph from 'react-graph-vis'
 import { connect, useSelector } from 'react-redux'
-import { updateGraph, updatePatients, updateLastRefreshed, selectPatient, updateStates } from '../Redux/actions'
+import { updateGraph, updatePatients, updateLastRefreshed, selectPatient,
+   updateStates,setSelectedLegend ,updateRawData
+  } from '../Redux/actions'
 
 import { rowsToGraph, letterToCode } from '../../util/parse'
 import normalize from '../../util/normalize'
@@ -10,23 +12,27 @@ import NetworkMapLegend from '../NetworkMapLegend'
 
 const NetworkMap = ({
   filter,
-  graph,
   updateGraph,
   updatePatients,
   updateLastRefreshed,
   updateStates,
   selectPatient,
+  setSelectedLegend,
+  updateRawData,
   height,
   width,
   states
 }) => {
 
   const graphRef = useRef()
   const [isLoading, setIsLoading] = useState(true)
-  const { selected, searchTerm } = useSelector(state => ({
+  const { selected, searchTerm , graph } = useSelector(state => {
+    const updatedGraph = rowsToGraph(state.rawData,state.legendType)
+    return {
     searchTerm: state.searchTerm,
-    selected: state.patient
-  }))
+    selected: state.patient,
+    graph : updatedGraph
+  }})
 
   useEffect(() => {
     if(!states){
@@ -53,7 +59,8 @@ const NetworkMap = ({
     })
       .then(resp => resp.json())
       .then(res => {
-        updateGraph(rowsToGraph(res.data.rawPatientData))
+        updateRawData(res.data.rawPatientData)
+        // updateGraph(rowsToGraph(res.data.rawPatientData))
         updatePatients(normalize(res.data.rawPatientData))
         updateLastRefreshed(res.data.lastRefreshed)
         setIsLoading(false)
@@ -134,7 +141,7 @@ const NetworkMap = ({
     <div style={{ height: '100vh', width: '100vw' }}>
       {isLoading ? null : (
         <>
-          <NetworkMapLegend currentFilter={filter}/>
+          <NetworkMapLegend currentFilter={filter} filterGraph={ (id)=>setSelectedLegend(id)}/>
           <Graph ref={graphRef} graph={graph} options={options} events={events} />
           <DatePicker />
         </>
@@ -144,14 +151,16 @@ const NetworkMap = ({
 }
 
 const mapStateToProps = state => {
-  let { graph, searchTerm, filter, states } = state
-  return { graph, searchTerm, filter, states}
+  let {  searchTerm, filter, states  } = state
+  return { searchTerm, filter, states}
 }
 
 export default connect(mapStateToProps, {
   updateGraph,
   updatePatients,
+  updateRawData,
   updateStates,
   updateLastRefreshed,
   selectPatient,
+  setSelectedLegend
 })(NetworkMap)

components/NetworkMapLegend/index.js

@@ -43,6 +43,7 @@ const Image = styled.img`
 
 const ImageContainer = styled.div`
     display: flex;
+    cursor: pointer;
     align-items: center;
     margin-bottom: 0.5rem;
 
@@ -62,48 +63,58 @@ const Label = styled.span`
     }
 `
 
-const NetworkMapLegend = ({ currentFilter }) => {
+const NetworkMapLegend = ({ currentFilter,filterGraph }) => {
+    const legendTypes = [{
+        id:'Recovered',
+        displayName: 'Recovered',
+        imgSrc: male_cured
+    },{
+        id:'Hospitalized',
+        displayName: 'Hospitalized',
+        imgSrc: male_hosp
+    },{
+        id:'Deceased',
+        displayName: 'Deceased',
+        imgSrc: male_dead
+    }]
+    if(currentFilter === 'State' || currentFilter === 'City'){
+        legendTypes.push({
+            id:'State',
+            displayName: 'State',
+            imgSrc: state_node
+        })
+    }
+    if(currentFilter === 'City'){
+        legendTypes.push({
+            id:'City',
+            displayName: 'City',
+            imgSrc: city_node
+        })
+    }
+    if(currentFilter === 'Travel'){
+        legendTypes.push({
+            id:'Domestic',
+            displayName: 'Domestic',
+            imgSrc: plane_local_node
+        })
+        legendTypes.push({
+            id:'International',
+            displayName: 'International',
+            imgSrc: plane_abroad_node
+        })
+    }
+
+    const legends = []
+    legendTypes.map(legend => {
+        legends.push(<ImageContainer onClick={()=>filterGraph(legend.id)}>
+        <Image src={legend.imgSrc} />
+        <Label>{legend.displayName}</Label>
+        </ImageContainer>)
+    })
+
     return (
         <LegendContainer>
-            <ImageContainer>
-                <Image src={male_cured} />
-                <Label>Recovered</Label>
-            </ImageContainer>
-            <ImageContainer>
-                <Image src={male_hosp} />
-                <Label>Hospitalized</Label>
-            </ImageContainer>
-            <ImageContainer>
-                <Image src={male_dead} />
-                <Label>Deceased</Label>
-            </ImageContainer>
-            {['State', 'City'].includes(currentFilter) ?
-                <ImageContainer>
-                    <Image src={state_node} />
-                    <Label>State</Label>
-                </ImageContainer>
-                : null
-            }
-            {currentFilter === 'City' ?
-                <ImageContainer>
-                    <Image src={city_node} />
-                    <Label>City</Label>
-                </ImageContainer>
-                : null
-            }
-            {currentFilter === 'Travel' ?
-                <>
-                    <ImageContainer>
-                        <Image src={plane_local_node} />
-                        <Label>Domestic</Label>
-                    </ImageContainer>
-                    <ImageContainer>
-                        <Image src={plane_abroad_node} />
-                        <Label>International</Label>
-                    </ImageContainer>
-                </>
-                : null
-            }
+            {legends}
         </LegendContainer>
     )
 }

components/Redux/actionTypes.js

@@ -15,4 +15,6 @@ export default {
   SELECT_FILTER: 'SELECT_FILTER',
   SEARCH: 'SEARCH',
   UPDATE_STATES: 'UPDATE_STATES',
+  UPDATE_RAW_DATA: 'UPDATE_RAW_DATA',
+  SELECTED_LEGEND: 'SELECTED_LEGEND',
 }

components/Redux/actions.js

@@ -17,6 +17,16 @@ const updateGraph = graph => (dispatch, getState) => {
   })
 }
 
+const updateRawData = rawData => (dispatch, getState) => {
+  // Dispatch the result.
+  dispatch({
+    type: actionTypes.UPDATE_RAW_DATA,
+    payload: {
+      rawData: rawData,
+    },
+  })
+}
+
 const updatePatients = patients => (dispatch, getState) => {
   // Dispatch the result.
   dispatch({
@@ -27,6 +37,16 @@ const updatePatients = patients => (dispatch, getState) => {
   })
 }
 
+const setSelectedLegend = type => (dispatch, getState) => {
+  // Dispatch the result.
+  dispatch({
+    type: actionTypes.SELECTED_LEGEND,
+    payload: {
+      legendType: type,
+    },
+  })
+}
+
 const updateLastRefreshed = lastRefreshed => (dispatch, getState) => {
   // Dispatch the result.
   dispatch({
@@ -75,4 +95,6 @@ const updateStates = states => (dispatch, getState) => {
 }
 
 // Export the actions.
-export { updateGraph, updatePatients, updateLastRefreshed, selectPatient, selectFilter, setSearchTerm, updateStates}
+export { updateGraph, updatePatients, updateLastRefreshed,
+   selectPatient, selectFilter, setSearchTerm,setSelectedLegend,
+    updateStates, updateRawData}

components/Redux/reducers.js

@@ -13,9 +13,11 @@ const initialState = {
   filter: 'P2P',
   selected: null,
   graph: null,
+  rawData: null,
   patients: null,
   searchTerm: '',
-  states: null
+  states: null,
+  legendType : ''
 }
 
 // Export the Device Reducer.
@@ -29,10 +31,18 @@ export default (state = initialState, action) => {
       const { term } = action.payload
       return { ...state, searchTerm: term }
     }
+    case actionTypes.SELECTED_LEGEND: {
+      const { legendType } = action.payload
+      return { ...state, legendType: legendType }
+    }
     case actionTypes.UPDATE_GRAPH: {
       const { graph } = action.payload
       return { ...state, graph: graph }
     }
+    case actionTypes.UPDATE_RAW_DATA: {
+      const { rawData } = action.payload
+      return { ...state, rawData: rawData }
+    }
     case actionTypes.UPDATE_PATIENTS: {
       const { patients } = action.payload
       return { ...state, patients: patients, patient: patients.byId[251] } // `P1` in code

util/parse.js

@@ -106,13 +106,19 @@ export const codeToLetter = (code) => {
   return letters[letterPos - 10] + codeStr.substring(2)
 }
 
-export const rowsToGraph = rows => {
+export const rowsToGraph = (rows,legendType) => {
   let graph = {
     nodes: [],
     edges: [],
   }
 
-  rows.forEach(row => {
+  for(const i in rows) {
+    const row = rows[i]
+    // if legend is not set then return all rows else if
+    // return rows for selected legend
+    if(legendType !== "" &&  legendType !== row.status){
+      continue
+    }
     const patientCode = letterToCode('P' + row.patientId)
     let node = {
       id: patientCode,
@@ -132,7 +138,7 @@ export const rowsToGraph = rows => {
 
       graph = dotProp.set(graph, 'edges', list => [...list, edge])
     }
-  })
+  }
   return graph
 }