diff --git a/components/NetworkMap/index.js b/components/NetworkMap/index.js index 381d720..6b56f75 100644 --- a/components/NetworkMap/index.js +++ b/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,12 +12,13 @@ import NetworkMapLegend from '../NetworkMapLegend' const NetworkMap = ({ filter, - graph, updateGraph, updatePatients, updateLastRefreshed, updateStates, selectPatient, + setSelectedLegend, + updateRawData, height, width, states @@ -23,10 +26,13 @@ const NetworkMap = ({ 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 = ({
{isLoading ? null : ( <> - + setSelectedLegend(id)}/> @@ -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) diff --git a/components/NetworkMapLegend/index.js b/components/NetworkMapLegend/index.js index d8fb572..182df57 100644 --- a/components/NetworkMapLegend/index.js +++ b/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(filterGraph(legend.id)}> + + + ) + }) + return ( - - - - - - - - - - - - - {['State', 'City'].includes(currentFilter) ? - - - - - : null - } - {currentFilter === 'City' ? - - - - - : null - } - {currentFilter === 'Travel' ? - <> - - - - - - - - - - : null - } + {legends} ) } diff --git a/components/Redux/actionTypes.js b/components/Redux/actionTypes.js index 1f42e27..4ec5549 100644 --- a/components/Redux/actionTypes.js +++ b/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', } diff --git a/components/Redux/actions.js b/components/Redux/actions.js index f5658bd..c91debc 100644 --- a/components/Redux/actions.js +++ b/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} diff --git a/components/Redux/reducers.js b/components/Redux/reducers.js index f774e3b..e8421b4 100644 --- a/components/Redux/reducers.js +++ b/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 diff --git a/util/parse.js b/util/parse.js index bf0d258..7c5f2b7 100644 --- a/util/parse.js +++ b/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 }