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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:3of44
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:4of44
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:5of44
Figure5.2-1:Eventlistandeventonmap........................................................................................41
Figure5.2-2:Reportlistandreportselection..................................................................................41
Figure5.2-3:Layermenu.................................................................................................................42
Figure5.2-4:Socialpanel.................................................................................................................42
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:6of44
LISTOFTABLES
Table4.2-1.ConsumedI-REACTORAPIservices..............................................................................19
Table4.2-2.ConsumedSocialAPIservices......................................................................................20
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:7of44
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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:8of44
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:9of44
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:10of44
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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015 Page:11of44
� 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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
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)
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:13of44
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
SuccessPostcondition:
• ThepageisautomaticallyupdatedwiththenewPOIs
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:14of44
US4:Consultweatherinthezone
AsaDecisionMaker,Iwanttoconsultcurrentweatherandforecastmodels,andvisualizethem
Pre-conditions:• TheDMhastobeauthenticated.Anassociatedemergencyeventhastobeselectedoradded
totakelocationAcceptancecriteria:
1) TheDMselectsoraddanEmergencyEvent2) Thesystemshowsthecurrentweatherandtheforecastmodelsinthelocationarea
SuccessPostcondition:
• Theweathermodelsareshownonthewebpage
US5:Sensorsvisualization
AsaDecisionMaker,Iwanttovisualizethesensorreadingsinthemap
Pre-conditions:• Sensorsshouldbeintegratedonthesystemandshouldsendtheirreadings
Acceptancecriteria:
1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanselectandmakevisiblethelayer
SuccessPostcondition:
• DMcanviewthesensorreadings
US6:Visualizetrackedprofessionalwithwearable
AsaDecisionMaker,Iwanttovisualizeprofessionaluserswithwearablesinthemap
Pre-conditions:• Anywearablein-fieldhastobetracked
Acceptancecriteria:
1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanselectandmakevisiblethewearablelocationslayer
SuccessPostcondition:
• Themapshowsthelocationoftheprofessionalswhohaveawearable
US7:Visualizelayersonthemap
AsaDecisionMaker,Iwanttovisualizetheinformationrelatedtoanemergencyeventonthemap
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:15of44
Pre-conditions:• Theinformationshouldbeavailableusingservices
Acceptancecriteria:
1) TheDMgoestothewebpagethatshowsthemap2) TheDMcanenable/disablethelayerstobevisualized3) Themapviewisupdatedtoreflectthenewselection
SuccessPostcondition:
• TheinformationisshowntotheDM
US8:Selectdatasourcesonthemap
AsaDecisionMakerorOrganizationResponsible,Iwanttoselectdifferentexternaldatasourcestobevisualizedonthemap
Pre-conditions:• Datasourcesshouldexistonthesystem
Acceptancecriteria:
1) Theuseropensthewebpagethatshowsthemap2) Theuseropensthelistofdatasourcesavailable3) Theuserselectsasourceandthenewlayerisvisualizedonthemap
SuccessPostcondition:
• Adatasourceisloadedinthemap
US9:Visualizethescaleonmaplayers
AsaDecisionMakerorOrganizationResponsible,Iwanttoviewthescaleonmaplayers
Pre-conditions:• Thelayermapshouldbeavailable
Acceptancecriteria:
1) Theuseropensthewebpagethatshowsthemap2) Theusercancheckanddovisibleanylayerinthemap3) Thescalewillbevisibleonthemap
SuccessPostcondition:
• Themapshowsthescale
US10:Addnewgeolocateddata
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:16of44
AsaDecisionMaker,Iwanttoaddnewgeolocateddatathroughthemap
Pre-conditions:• Mapwitheditingtools
Acceptancecriteria:
1) Theusergoestothewebpagethatshowsthemap2) Themaphasamenutoaddgeographicaldata3) Aformdialogisdisplayedtoselectthetypeofdatatoenterandtointroducesomebasic
information.Ifitisthecrisisitispossibletointroducederadiusofinfluence4) Automaticallythewebapplicationshowsthenewdataonthemap
SuccessPostcondition:
• Newgeolocateddataisaddedandvisualizedonthemap
US11:Itemsandlayersvisualization
AsaDecisionMaker,Iwanttouseatimesliderfiltertodisplayitemsandlayersonthemap
Pre-conditions:• Theitemsaremarkedwithtimeslots
Acceptancecriteria:
1) TheDMgoestothewebpagethatshowsthemap2) TheDMsetsthetimespan3) Thesystemupdatesthedatadisplayed
SuccessPostcondition:
• Themapshowsitemsandlayersfilterbytime
US12:Visualizesocialmedia
AsaDecisionMaker,Iwanttovisualizeandbeabletofiltersocialmediainformation
Pre-conditions:• Socialmediaaccountsandhashtagsrelatingtheinformationoftheincidentwithi-react
Acceptancecriteria:
1) Thesystemshowsapartwheretheinformationofrisksinthesocialmediaisautomaticallyupdated
2) Thisinformationisfilteredbyhashtagsand/orarea
SuccessPostcondition:
• Usercanviewsocialmediainformationfiltered
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:17of44
US13:VisualizeUAVandpilotlocationinreal-time
AsaDecisionMaker,IwanttotrackandvisualizeUAV’sreportsinreal-time
Pre-conditions:• UAVshouldcontributewiththepositionoravectorlayertobeshownonthemap
Acceptancecriteria:
1) TheDMgoestothewebpagethatshowsthemapandreports2) TheDMcanselectandmakevisibletheUAVinformation3) Thewebshowstheinformation
SuccessPostcondition:
• ThewebshowstheUAV’sreportsanditslocation
US14:Selectinformationtosharewithcitizens
AsaDecisionMaker,Iwanttofiltertheinformation(riskmaps,hazardmaps,reports,etc..)tosharewithcitizens
Pre-conditions:• CitizenshaveaccesstotheI-REACTmobileapplication
Acceptancecriteria:
1) TheDMaccesstothesystem2) TheDMcanselectandmakevisiblesomeinformationforthecitizen3) TheDMcanchangethevisibilityofthedifferentmodulesofthesystem4) TheDMsavesthechanges
SuccessPostcondition:
• Citizenscanviewinformationabouttheemergencyevent
US15:Dailylog
AsaDecisionMaker,Iwanttoinsertcommentsinthedailylog
Pre-conditions:• Thedailylogtoolisavailable
Acceptancecriteria:
1) Theuserselectstheworkingemergencyeventandgoestothedailylogsite2) Theuserclickson"Comments"3) Insertanewcomment4) Savethechanges
SuccessPostcondition:
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:18of44
• Newcommentscanbedoneinthedailylog
US16:Viewhelpdocumentation
Asanykindofusers,IwanttoviewthehelpdocumentationaboutI-REACT
Pre-conditions:• Thereisahelpdocumentationinthesystem
Acceptancecriteria:
1) Thesystemoffersabutton"help"2) Theuserpressesthebutton3) ThesystemshowstheHelpwebpagewithallthedocumentationofthemodels
SuccessPostcondition:
• Newcommentscanbedoneinthedailylog
4 TECHNICALSPECIFICATION
4.1 COMPONENTSTRUCTURE
TheFrontendApparchitectureiscomposedbythreelayers:Views,ReduxmodulesandWebAPIUtils. Thismeans that presentation, applicationprocessing anddatamanagement functions areseparatedintolooselycoupledmodules,whatalsoimprovethecodereusability.
Figure4.1-1:I-REACTfrontendarchitecture
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:19of44
• 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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1
GrantAgreementNo:700256 CallID:H2020-DRS-1-2015 Page:20of44
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/
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:22of44
Figure5.1-2:Createnewevent
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:23of44
Figure5.1-3:Eventpopuponmap
Figure5.1-4:Eventpopup
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:24of44
Figure5.1-5:Statusbarbehaviour
MISIONS
Figure5.1-6:Missioncardandmissionslist
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:25of44
Figure5.1-7:Missionslistbehaviour
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:26of44
Figure5.1-8:Missionpopup
Figure5.1-9:CreatenewMission
REPORTS
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:27of44
Figure5.1-10:Reportlistandfilters
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:28of44
Figure5.1-11:Reportfiltersdetail
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:29of44
Figure5.1-12:Reportandreportrequestbehaviouronmap
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:30of44
Figure5.1-13:Createnewreportrequest
COMMUNICATIONS
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:31of44
Figure5.1-14:Communicationslist,communicationcardandfilters
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:32of44
Figure5.1-15:Communicationsbehaviouronmap
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:33of44
Figure5.1-16:Createnewcommunication
LAYERS
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:34of44
Figure5.1-17:Layerswidgetwithlegends
Figure5.1-18:Layerspanel
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:35of44
Figure5.1-19:Layersoptions
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:36of44
Figure5.1-20:Layerssettingspanel
SOCIALPANEL
Figure5.1-21:Socialpanelstructure
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:37of44
Figure5.1-22:Socialpanel
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:38of44
Figure5.1-23:Socialpanelwitheventdetection
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:39of44
Figure5.1-24:Socialpanelmapbehaviour
Figure5.1-25:Socialpanelfilters
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:40of44
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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:41of44
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
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:42of44
Figure5.2-3:Layermenu
Thelastfigure,5.2-4,showsthesocialpanel.Thisshowsthetwitsgeolocatedinthemap,andfilterbythehazardattribute.ThisfigureshowstheimplementationofUS11andUS12
Figure5.2-4:Socialpanel
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreementNo:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:43of44
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.
ImprovingResiliencetoEmergenciesthroughAdvancedCyberTechnologies
Project:I-REACT Report on Data Visualization Design DeliverableID:D5.1GrantAgreement:700256 CallID:H2020-DRS-1-2015H2020-DRS-1-2015 Page:44of44
ENDOFTHEDOCUMENT