D5.1. Report on Data Visualization Design v0.3 · IMPROVING RESILIENCE TO EMERGENCIES THROUGH ADVANCED CYBER TECHNOLOGIES Report on Data Visualization Design Deliverable ID D5.1 Work

IMPROVINGRESILIENCETOEMERGENCIESTHROUGH

ADVANCEDCYBERTECHNOLOGIES

ReportonDataVisualizationDesign

DeliverableID D5.1

WorkPackageReference WP5

Issue 1.0

DueDateofDeliverable 30/11/2017

SubmissionDate 15/11/2017

DisseminationLevel1 PU

LeadPartner AnswareTech

Contributors -

GrantAgreementNo 700256

CallID H2020-DRS-1-2015

FundingScheme Collaborative

I-REACTisco-foundedbytheHorizon2020FrameworkProgrammeoftheEuropeanCommissionundergrantagreementn.700256

1PU=Public,PP=Restrictedtootherprogrammeparticipants(includingtheCommissionServices),RE=Restrictedtoagroupspecifiedbytheconsortium(includingtheCommissionServices),CO=Confidential,onlyformembersoftheconsortium(includingtheCommissionServices)

ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies

Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:2of44

Preparedby Reviewedby Approvedby

JesúsMartínez, Raquel Yuste,Sergio Castro and VictoriaMoreno

C.Rossi F.Dominici

Issue Date Description Author(s)

0.1 20/10/2017 Draftdelivery Answare

0.2 02/11/2017 Firstinputs Answare

1.0 09/11/2017 Finalversion Answare



TABLEOFCONTENTS1 INTRODUCTION...........................................................................................................................7

1.1 PurposeoftheDocument....................................................................................................7

1.2 StructureoftheDocument..................................................................................................7

1.3 Acronymslist.......................................................................................................................8

1.4 Referenceandapplicabledocuments.................................................................................8

2 MULTI-PLATFORMFORDATAVISUALIZATION............................................................................9

2.1 Description...........................................................................................................................9

2.2 Contextualization.................................................................................................................9

3 FUNCTIONALSPECIFICATIONS..................................................................................................12

3.1 UserRoles..........................................................................................................................12

3.2 UserStories........................................................................................................................12

4 TECHNICALSPECIFICATION.......................................................................................................18

4.1 ComponentStructure........................................................................................................18

4.2 ConsumedServices............................................................................................................19

4.3 ImplementationEnvironment...........................................................................................20

5 MOCKUPSANDUSERINTERFACE..............................................................................................21

5.1 Mockups............................................................................................................................21

5.2 UserInterface....................................................................................................................40

6 CONCLUSIONS...........................................................................................................................43



LISTOFFIGURES

Figure2.2-1:I-REACTarchitecture.....................................................................................................9

Figure2.2-2:DataflowbetweenReduxwebappandReactJScomponents...................................10

Figure4.1-1:I-REACTfrontendarchitecture....................................................................................18

Figure5.1-1:Eventslist,cardandfilters..........................................................................................21

Figure5.1-2:Createnewevent........................................................................................................22

Figure5.1-3:Eventpopuponmap...................................................................................................23

Figure5.1-4:Eventpopup................................................................................................................23

Figure5.1-5:Statusbarbehaviour...................................................................................................24

Figure5.1-6:Missioncardandmissionslist.....................................................................................24

Figure5.1-7:Missionslistbehaviour................................................................................................25

Figure5.1-8:Missionpopup.............................................................................................................26

Figure5.1-9:CreatenewMission.....................................................................................................26

Figure5.1-10:Reportlistandfilters.................................................................................................27

Figure5.1-11:Reportfiltersdetail...................................................................................................28

Figure5.1-12:Reportandreportrequestbehaviouronmap..........................................................29

Figure5.1-13:Createnewreportrequest........................................................................................30

Figure5.1-14:Communicationslist,communicationcardandfilters..............................................31

Figure5.1-15:Communicationsbehaviouronmap.........................................................................32

Figure5.1-16:Createnewcommunication......................................................................................33

Figure5.1-17:Layerswidgetwithlegends.......................................................................................34

Figure5.1-18:Layerspanel..............................................................................................................34

Figure5.1-19:Layersoptions...........................................................................................................35

Figure5.1-20:Layerssettingspanel.................................................................................................36

Figure5.1-21:Socialpanelstructure................................................................................................36

Figure5.1-22:Socialpanel...............................................................................................................37

Figure5.1-23:Socialpanelwitheventdetection.............................................................................38

Figure5.1-24:Socialpanelmapbehaviour......................................................................................39

Figure5.1-25:Socialpanelfilters.....................................................................................................39

Figure5.1-26:Tweetcard................................................................................................................40



Figure5.2-1:Eventlistandeventonmap........................................................................................41

Figure5.2-2:Reportlistandreportselection..................................................................................41

Figure5.2-3:Layermenu.................................................................................................................42

Figure5.2-4:Socialpanel.................................................................................................................42



LISTOFTABLES

Table4.2-1.ConsumedI-REACTORAPIservices..............................................................................19

Table4.2-2.ConsumedSocialAPIservices......................................................................................20



1 INTRODUCTION

1.1 PURPOSEOFTHEDOCUMENT

ThegoalofthisdocumentistoprovideatechnicaldescriptionandtheguidelineforthetechnicalimplementationoftheI-REACTvisualizationplatform.ItgivesnotonlyanoverviewoftheoverallarchitectureoftheI-REACTsystem(whichisdetailedonWP2[RD01])butalsoprovidesdeepinsightsinthefunctionalitiesandresponsibilitiesofeachcomponentscomposingthevisualizationplatformoftheI-REACTprojectaswellastherelationshipsbetweeneachoneofthemwiththerestoftheI-REACTarchitecture.

1.2 STRUCTUREOFTHEDOCUMENT

Thedocumentisorganizedasinthefollowing:

• Chapter 1 provides general remarks addressing the purpose, structure, acronyms andreferencesofthisdocument.

• Chapter2presentsanddescribesthemulti-platformofI-REACTfordatavisualization.• Chapter3definesthedifferentuserrolesintheprojectaswellastheuserstoriesassociated

tothevisualizationplatform.• Chapter4detailsthetechnicalspecificationofthevisualizationplatform.• Chapter5showsthemockupsandthefunctionalitiesofthevisualizationplatformalready

implemented.• Chapter5includesconclusionsandnextsteps.



1.3 ACRONYMSLIST

API ApplicationProgrammingInterfaceC CitizensDM DecisionMakersDOM DocumentObjectModelDSS DecisionSupportSystemEMS EmergencyManagementSystemEP ExternalProvidersFR FirstrespondersFSM FiniteStateMachineGNSS GlobalNavigationSatelliteSystemHDFS HadoopDistributedFileSystemHTTPS HypertextTransferProtocolSecureIDI I-REACTDataInterface

MVC ModelViewControllerOauth AuthroizationFrameworkOR OrganizationResponsibleOR OrganizationResponsibleP ProPA PublicAuthoritiesPOI PointofInterestReactJS FacebookReactSPA SinglePageApplicationTS TechnicalServicesU UtilitiesprovidersUAV UnmannedAerialVehiclesUI UserInterface

1.4 REFERENCEANDAPPLICABLEDOCUMENTS

ID Title Revision Date

[RD01] D2.7.ReportonTechnicalRequirementsandOverallSystem

Architecture 3.0 30/12/2016

[RD02] D2.2 Users and Stakeholder requirements analysis,

operationalprocedures,processesandscenarios 2.0 17/10/2016



2 MULTI-PLATFORMFORDATAVISUALIZATION

2.1 DESCRIPTION

ThisistheFrontendinterfacefortheI-REACTproject.ThistoolisoneofthegatewaystotheI-REACTplatform,itisthewebaccessinterface.Frontendcanbeaccessiblethroughanywebbrowserinanydevice,doingitamultiplatformtoolavailableeverywhere.Thebrowsercompatibilitylististhenext:

• Chrome53+• Firefox49+• Edge38+

IntheFrontendausercanvisualizethemostimportanteventsofanincident,fromuser’sreportstomapswithalotofinformationavailable.Nextchaptershowshowcanaccesstothistoolandthedifferentfunctionalitiesthatitoffers.

2.2 CONTEXTUALIZATION

This section describes the relation between Frontend and other modules of the I-REACTarchitecture.

Frontend receives information from Back-end and GeoServer modules. It does not have directaccesstotheDataLayer,usingthelasttwomodulestoread,createandupdatenewinformation.

Theconnectionwith theBack-endandGeoServermodules isdoing throughRESTservices.Bothprovemethodstoretrieveandinsertinformation.

Figure2.2-1:I-REACTarchitecture



The I-REACTOR FrontEnd is developed as Single Page Application (SPA) using Facebook React(ReactJS)+Redux.ReactJSisaJavaScriptlibrarythatprovidesthetoolstodefineanddividetheUserInterfaceintocomponentsthatcanbereusable.Furthermore,Reduxisusedtodisengagetheglobalstateofthewebapplicationfromthevisualpart,wherethisstateisboththeUIstateandthedataretrievedbyservicesthatfetchinformationfromdiversesourceslikeexternalAPIortheapplicationBackendasOAuth2.0clientoverasecurechannel(https).Then,usingReacttheFrontEndexposesspecificviewsforthedatatobedisplayed,usingaresponsiveapproach.

Figure2.2-2:DataflowbetweenReduxwebappandReactJScomponents

Theredux-fluxpatternestablishesaunidirectionaldataflowwithasinglestorefortheapplicationstate.Thisensuresthattheviewswillalwaysrespectthechangesoftheappstate,whicharefiredby actions. Actions can be related to UI interactions or other events. This allows to separatepresentation from abstract representation of the app state, while boosting performances andsimplifyingcomponentreusabilityandscopeisolation.TheReactJS-Reduxdesignallowstoseparateviewrenderingfromappstaterepresentation,writingbetterorganizedandmoremaintainableandreusablecode.Themaincomponentsofthisarchitecturearethefollowing:

� ActionCreators:thesefunctionsdefinewhichactionaredispatchedinreactiontoeventssuchasuserinteraction,network,systemorsensorevents.ActionCreatorscanbesynchronousorasynchronous.TocommunicatewiththeI-REACTORbackend,ActionCreatorswilltakeadvantageoftheWebAPImodule.

� Reducer:dependingonthetriggeredActionCreators, thereducerhas thetaskofpropagatingevents thatmutate theappstate.SinceReduxcontemplatesa singlestorefortheappstate,alltheactions,definedasplainobjects,aredispatchedbythiscentralstore.



� Store:itencapsulatesthestateoftheapplicationanditisread-only,inthesensethatneither viewsnornetwork calls candirectlymanipulate it. Theway the state canmutateisdefinedthroughsocalled“reducers”,whicharepurefunctionsthatgiventhecurrentstateandanaction,returnthenextstate.ItcanbethoughtintermsofaFiniteStateMachine(FSM)whosestatesareacompositionofeachmodulestates,andreducersareacompositionofeachmodulereducers,exploitingmodularityandreusability.Eachmodulethusdefinesaportionoftheappstatethatiscombinedtothe other portions and stored into the single store. This store is therefore ahierarchicalobjecttreewhichservesassinglesourceoftruth.

� Selector: the selectorallows togetdataoutof the store.Are functions that take

Reduxstateasanargumentandreturnsomedatatopasstothecomponent.

� ReactViews:roughlycorrespondingtotheVoftheclassicMVCpattern,ReactViewsaremadeofreusablecomponentsthatonlyrenderaportionofthecurrentappstate,which ispropagatedbymeanof immutableproperties inahierarchicalway.UserInterface(UI)interactionsarethenpropagatedtotheappstatebycallingtheActionCreators,thatwillupdatetheappstateandfinallypropagatetotheinterestedviewcomponents,whenneeded.

ThefrontendincludesanadditionalReduxmodule,i.e.,theWebAPI.Itistaskedtoactasaliaisonwiththebackend,managingallinteractions,bothinboundandoutbound.Whiletheproposedarchitectureisverysimilarforbothfrontendandmobileapp,eachoneofthesewill implementspecificmodulesandviewcomponentstocopewithitsownpeculiarities.Ontheotherhand, all effortswill bemade for sharing commonmodules and view componentswherepossible.


Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1

GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:12of44

3 FUNCTIONALSPECIFICATIONS

3.1 USERROLES

TargetedusersofI-REACTaredifferentiatedintotwogroups,namelycitizensandpublicauthorities.The latter includes first responders (decisionmakers and in-field agents), as well as any othernational,regional,andlocalpublicentitiesinvolvedintheemergencymanagement.Insummary,wecandifferentiateamongthenextrolesandorganizationtypes.Roles:PA-PublicAuthoritiesTS-TechnicalServicesFR-FirstrespondersU-UtilitiesprovidersC-CitizensOR-OrganizationResponsibleEP-ExternalProvidersP–ProAProissomeonethathasanOrganization,andeveryorganizationhasanOrganizationResponsible,soaProcanbeofdifferenttypes:OrganizationTypes:PA-PublicAuthoritiesTS-TechnicalServicesFR-FirstrespondersU-Utilitiesproviders

3.2 USERSTORIES

This section shows theuser stories related to the I-REACTOR front-end, taking intoaccount therequirementsalreadydescribedinthedocuments[R001]and[RD02].

US1:Authentication

As a Decision Maker or Organization Responsible, I must be authenticated in the I-REACTORfrontendtowithwillallthesystemfeatures.

Pre-conditions:• Checkthepossibilitytoenterthroughanyexternalsocialmediatool.

Acceptancecriteria:

1) Theuseropenswebapplicationandlogsin2) Theuserentershiscredentials(user/password)




3) Thesystemchecksifheisanauthenticateduser:a. Notvalidcredentials:error401orOptionb. Theuserregistershimselfinthesystem(byprovidingthevalidcredential,itcouldbe

usefultoprovideapasswordrecoveryprocess)c. Validcredentials:userentersinthedashboardandviewstheavailableinformation

4) TheuserisinthedashboardSuccessPostcondition:

• Theuserisinthedashboard

US2:VisualiseFRandtheiravailability

AsaDecisionMakerorOrganizationResponsible,Iwanttochecktheavailablecrews.

Pre-conditions:• FRuserhastobeenteredalreadyonthesystemandshouldhaveinstalledthemobileapp

recordingtheGPSlocationAcceptancecriteria:

1)TheDMrequeststhelistofFR

2)ThesystemreturnstheFRstoredonthesystem.Theresultscanbefilteredbyarea, location,status,type,etc.Fromthispageitcouldbepossibletodootherfunctionalities(likeassignaFRtoamission)

SuccessPostcondition:

• TheDMvisualizesalltheinformationheneedsonthemap

US3:ReadPOIs

AsanOrganizationResponsible,IhavedetectedthattherearePOIsthatthesystemshouldinclude

Pre-conditions:• POIShavealreadybeenenteredinthesystem

Acceptancecriteria:

1) TheORopensthePOISwebpanel2) TheORcanaddanewPOI,edit,deleteorvisualizetheextendingPOIsdependingonthe

areaorapplyingafilter3) ThesystemautomaticallysavesthePOIwitha timestampandwith itsowner (user),and

showsitonthemap


• ThepageisautomaticallyupdatedwiththenewPOIs




US4:Consultweatherinthezone

AsaDecisionMaker,Iwanttoconsultcurrentweatherandforecastmodels,andvisualizethem

Pre-conditions:• TheDMhastobeauthenticated.Anassociatedemergencyeventhastobeselectedoradded

totakelocationAcceptancecriteria:

1) TheDMselectsoraddanEmergencyEvent2) Thesystemshowsthecurrentweatherandtheforecastmodelsinthelocationarea


• Theweathermodelsareshownonthewebpage

US5:Sensorsvisualization

AsaDecisionMaker,Iwanttovisualizethesensorreadingsinthemap

Pre-conditions:• Sensorsshouldbeintegratedonthesystemandshouldsendtheirreadings

Acceptancecriteria:

1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanselectandmakevisiblethelayer


• DMcanviewthesensorreadings

US6:Visualizetrackedprofessionalwithwearable

AsaDecisionMaker,Iwanttovisualizeprofessionaluserswithwearablesinthemap

Pre-conditions:• Anywearablein-fieldhastobetracked

Acceptancecriteria:

1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanselectandmakevisiblethewearablelocationslayer


• Themapshowsthelocationoftheprofessionalswhohaveawearable

US7:Visualizelayersonthemap

AsaDecisionMaker,Iwanttovisualizetheinformationrelatedtoanemergencyeventonthemap




Pre-conditions:• Theinformationshouldbeavailableusingservices

Acceptancecriteria:

1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanenable/disablethelayerstobevisualized3) Themapviewisupdatedtoreflectthenewselection


• TheinformationisshowntotheDM

US8:Selectdatasourcesonthemap

AsaDecisionMakerorOrganizationResponsible,Iwanttoselectdifferentexternaldatasourcestobevisualizedonthemap

Pre-conditions:• Datasourcesshouldexistonthesystem

Acceptancecriteria:

1) Theuseropensthewebpagethatshowsthemap2) Theuseropensthelistofdatasourcesavailable3) Theuserselectsasourceandthenewlayerisvisualizedonthemap


• Adatasourceisloadedinthemap

US9:Visualizethescaleonmaplayers

AsaDecisionMakerorOrganizationResponsible,Iwanttoviewthescaleonmaplayers

Pre-conditions:• Thelayermapshouldbeavailable

Acceptancecriteria:

1) Theuseropensthewebpagethatshowsthemap2) Theusercancheckanddovisibleanylayerinthemap3) Thescalewillbevisibleonthemap


• Themapshowsthescale

US10:Addnewgeolocateddata




AsaDecisionMaker,Iwanttoaddnewgeolocateddatathroughthemap

Pre-conditions:• Mapwitheditingtools

Acceptancecriteria:

1) Theusergoestothewebpagethatshowsthemap2) Themaphasamenutoaddgeographicaldata3) Aformdialogisdisplayedtoselectthetypeofdatatoenterandtointroducesomebasic

information.Ifitisthecrisisitispossibletointroducederadiusofinfluence4) Automaticallythewebapplicationshowsthenewdataonthemap


• Newgeolocateddataisaddedandvisualizedonthemap

US11:Itemsandlayersvisualization

AsaDecisionMaker,Iwanttouseatimesliderfiltertodisplayitemsandlayersonthemap

Pre-conditions:• Theitemsaremarkedwithtimeslots

Acceptancecriteria:

1) TheDMgoestothewebpagethatshowsthemap2) TheDMsetsthetimespan3) Thesystemupdatesthedatadisplayed


• Themapshowsitemsandlayersfilterbytime

US12:Visualizesocialmedia

AsaDecisionMaker,Iwanttovisualizeandbeabletofiltersocialmediainformation

Pre-conditions:• Socialmediaaccountsandhashtagsrelatingtheinformationoftheincidentwithi-react

Acceptancecriteria:

1) Thesystemshowsapartwheretheinformationofrisksinthesocialmediaisautomaticallyupdated

2) Thisinformationisfilteredbyhashtagsand/orarea


• Usercanviewsocialmediainformationfiltered




US13:VisualizeUAVandpilotlocationinreal-time

AsaDecisionMaker,IwanttotrackandvisualizeUAV’sreportsinreal-time

Pre-conditions:• UAVshouldcontributewiththepositionoravectorlayertobeshownonthemap

Acceptancecriteria:

1) TheDMgoestothewebpagethatshowsthemapandreports2) TheDMcanselectandmakevisibletheUAVinformation3) Thewebshowstheinformation


• ThewebshowstheUAV’sreportsanditslocation

US14:Selectinformationtosharewithcitizens

AsaDecisionMaker,Iwanttofiltertheinformation(riskmaps,hazardmaps,reports,etc..)tosharewithcitizens

Pre-conditions:• CitizenshaveaccesstotheI-REACTmobileapplication

Acceptancecriteria:

1) TheDMaccesstothesystem2) TheDMcanselectandmakevisiblesomeinformationforthecitizen3) TheDMcanchangethevisibilityofthedifferentmodulesofthesystem4) TheDMsavesthechanges


• Citizenscanviewinformationabouttheemergencyevent

US15:Dailylog

AsaDecisionMaker,Iwanttoinsertcommentsinthedailylog

Pre-conditions:• Thedailylogtoolisavailable

Acceptancecriteria:

1) Theuserselectstheworkingemergencyeventandgoestothedailylogsite2) Theuserclickson"Comments"3) Insertanewcomment4) Savethechanges





• Newcommentscanbedoneinthedailylog

US16:Viewhelpdocumentation

Asanykindofusers,IwanttoviewthehelpdocumentationaboutI-REACT

Pre-conditions:• Thereisahelpdocumentationinthesystem

Acceptancecriteria:

1) Thesystemoffersabutton"help"2) Theuserpressesthebutton3) ThesystemshowstheHelpwebpagewithallthedocumentationofthemodels


• Newcommentscanbedoneinthedailylog

4 TECHNICALSPECIFICATION

4.1 COMPONENTSTRUCTURE

TheFrontendApparchitectureiscomposedbythreelayers:Views,ReduxmodulesandWebAPIUtils. Thismeans that presentation, applicationprocessing anddatamanagement functions areseparatedintolooselycoupledmodules,whatalsoimprovethecodereusability.

Figure4.1-1:I-REACTfrontendarchitecture




• Views:thismoduleisinchargeofthevisualizationdata.Iscomposedbyseveralcomponentsthatcanbesharedbythemobileapp.Eachcomponentisapartofthewebpagewithanencapsulatedbehaviour.Eachcomponentcanuseexternallibraries,inordertoensurethedesiredvisualization.TheViewsareconnectedwiththereduxmodules,whichsetsthedatathatisshowninthislayer.

• Reduxmodules:themainfunctionalityofthismoduleistoensurethattheviewswillalwaysrespectthechangesoftheappstate.Astheviewlayer,thereduxmodulescanbeusedbythemobileapp.Reduxmodulesestablishaunidirectionaldataflowwithasinglestorefortheapplicationstate.InthislayerthedataisrequestedtotheAPIlayer.ThestatecontainsalltheinformationrequiredforthecorrectviewsbehaviourandallthedataprovidedbytheAPI.

• WebAPI:theAPIlayeristaskedtoactasaliaisonwiththebackend,managingalltheuserinteractions. The API request information to the backend and send the response to theReduxlayer.Thislayeriscompletelysharedwiththemobileapp.

4.2 CONSUMEDSERVICES

I this sectionwe show the services (or data) offered by other components of I-REACT that areconsumedbythevisualizationplatform.

MostofthedataofferedtothevisualizationplatformcomesfromtheI-REACTmoduleAPI.ThisAPIconnectstheBackendmodulewiththeFrontendprovidingallthedatarequested.

ConsumedI-REACTORBackendAPIservicesbytheFrontend

Services Actions

Emergencyevent Create,ReadandUpdateemergencyevents

Report ReadandUpdatereports

Reportrequest Create,Readandupdatereportrequests

Mission CreateandReadmissions.

AlertandWarning Readalertsandwarningsgeneratebyothermodules.Bothareemergencycommunications

Layerwidgetconfig Readlayerstoshowinthemap

Login Toallowuserstologininthesystem

Generalsettings Readandupdategeneralsettingsaboutmap’sthemeandapplication’slanguage

Table4.2-1.ConsumedI-REACTORAPIservices

ThesocialpanelconsumesadifferentAPImoduletoshowandeditallthedatarelatedwiththispanelsection.




ConsumedSOCIALAPIservicesbytheFrontend

Services Actions

Tweets ReadandUpdatetweets

Statistics Readstatistics

EventDetectionFeedback Readeventdetectionfeedback

Table4.2-2.ConsumedSocialAPIservices

4.3 IMPLEMENTATIONENVIRONMENT

The framework selected to implement the frontend and mobile application is ReactJS, whichexploitstheredux-fluxdesignpatternandhasproventobeveryefficientforbothlargeandsmallapplicationsonbothmobileanddesktopenvironments.Theredux-fluxpatternisaspecificversionof theone-way-flowpattern.Furthermore, theReactJSdevelopers’community isvery largeandthereisgoodsupportandmaintainability.

Actually, ReactJS is only the presentation layer of a ReactJS+Redux application, thus regardingmainly theuser interfaceand routing. Thepointof strengthofReact is that itsmodules, calledcomponents, are designed for maximizing reusability, while performance are boosted bymanipulatinganoptimizedshadowDOMinsteadofaccessingtheactualDOMdirectly,propagatingonlynecessaryUImutations.MoredetailscanbefoundontheReactofficialwebsite1.

The other component of React-Redux applications is Redux, which controls and models theapplicationstateandhowstatemutationsarepropagatedtotheviewsusingtheso-calledproviders.Reduxpatternisaspecificimplementationofthefluxpattern,whichinturnbelongstothefamilyoftheone-way-flowpatterns.

Thus, Redux controls how data are accessed, represented and mutated in the app state bydescribing how data sources have to be integrated into the app state. The state of a Reduxapplicationissavedtoasinglestore,whichmayalsobeserialized,anditiscreatedbycompositionoftheconnectedReduxmodules.MoredetailscanbefoundintheReduxdocumentation2.

ThevisualizationisprovidedinI-REACTbyawebandamobileapplication.ThemobileapplicationisimplementedusingtheApacheCordovaframeworkwiththeobjectiveofusingthesamecodeasforthewebapplication.

1https://facebook.github.io/react/2http://redux.js.org/


Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:21of44

5 MOCKUPSANDUSERINTERFACE

5.1 MOCKUPS

Mockupsarethepreviousdesignthatthevisualizationplatformfollowswhenisdeveloped.Thesemockupswheredesignedthinkingintheuserhistoriesthatmustbedone.Events

Figure5.1-1:Eventslist,cardandfilters



Figure5.1-2:Createnewevent



Figure5.1-3:Eventpopuponmap

Figure5.1-4:Eventpopup



Figure5.1-5:Statusbarbehaviour

MISIONS

Figure5.1-6:Missioncardandmissionslist



Figure5.1-7:Missionslistbehaviour



Figure5.1-8:Missionpopup

Figure5.1-9:CreatenewMission

REPORTS



Figure5.1-10:Reportlistandfilters



Figure5.1-11:Reportfiltersdetail



Figure5.1-12:Reportandreportrequestbehaviouronmap



Figure5.1-13:Createnewreportrequest

COMMUNICATIONS



Figure5.1-14:Communicationslist,communicationcardandfilters



Figure5.1-15:Communicationsbehaviouronmap



Figure5.1-16:Createnewcommunication

LAYERS



Figure5.1-17:Layerswidgetwithlegends

Figure5.1-18:Layerspanel



Figure5.1-19:Layersoptions



Figure5.1-20:Layerssettingspanel

SOCIALPANEL

Figure5.1-21:Socialpanelstructure



Figure5.1-22:Socialpanel



Figure5.1-23:Socialpanelwitheventdetection



Figure5.1-24:Socialpanelmapbehaviour

Figure5.1-25:Socialpanelfilters



Figure5.1-26:Tweetcard

5.2 USERINTERFACE

This subsection shows the current state of the Frontend implementation, mentioning the userstoriesalreadyimplementedandwhicharedescribedinSection3.Moredetailsaboutthistoolandtheir final functionalitieswillbedescribed in thenextdeliverableD5.4Web InterfacesandDataVisualizationToolkit.

ThenextfiguresarethemainscreenoftheFrontend.Figure5.2-1showsalateralmenuwiththeeventlistreceiveinthesystem.Also,itshowsaninformationpopupandtheareainterestoftheeventselectedintheleftlistofthemenu.ThisfigureshowstheimplementationofUS8,US10andUS11.



Figure5.2-1:Eventlistandeventonmap

Figure5.2-2showsareportlistandtheirlocationinthemap.ThislistshowsalsoUAVinformation,asareportmessage,alsogeolocatedinthemap.ThisfigureshowstheimplementationofUS8,US11andUS13

Figure5.2-2:Reportlistandreportselection

Figure5.2-3showsthelayermenu,inwhichausercanselectandfilterthedifferentlayersoffersbyI-REACTORandvisualizetheminthemaps.Thereareseveralkindsoflayers,aspointofinterest,weathermodel’sinformation,Copernicusinformation,etc.ThisfigureshowstheimplementationofUS2,US3,US4,US7andUS11



Figure5.2-3:Layermenu

Thelastfigure,5.2-4,showsthesocialpanel.Thisshowsthetwitsgeolocatedinthemap,andfilterbythehazardattribute.ThisfigureshowstheimplementationofUS11andUS12

Figure5.2-4:Socialpanel



6 CONCLUSIONS

ThisdocumentdescribesthevisualizationplatformoftheI-REACTproject,atooleasytouse,whichshowsalotofusefulinformationtodecisionmakers(informationprovidedbythedifferentmodulesandexternaltoolsofI-REACTproject),andimprovestheresponseagainstanemergencyinaneasyandfastway.

Fordevelopit,ithasbeenchosenReactJS+Redux,asitisexplainedinsection2.Thisallowstosharecodewithotherapplication,forexample,themobileapplication,reusingsomecomponents.

Section3ofthedocumentshowsthedifferentuserrolesthatwillusetheFrontendinterfaceofI-REACTORplatformaswellasthedifferentuserstoriesoftheusageforeachfunctionality.

Section4explainsindeepthearchitectureoftheFront-end,theservicesusedbyittocommunicatewiththeBackendmoduleandtheimplementationenvironmentusedtodevelopit.

Finally,severalmockupswhichdevelopershaveconsideredtodevelopthetoolareshowninSection5.ThesemockupswerecreatedwiththesuggestionscompiledintheParis’sEndUserMeetingatthe beginning of the project. At the end, it is summarized the functionalities of the Front-endalreadyimplemented.


Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:44of44

ENDOFTHEDOCUMENT

Documents

D5.1. Report on Data Visualization Design v0.3 · IMPROVING RESILIENCE TO EMERGENCIES THROUGH ADVANCED CYBER TECHNOLOGIES Report on Data Visualization Design Deliverable ID D5.1 Work