Setting up a Multi-Pathogen View

When working with datasets that track multiple pathogens, it may be useful to set up a multi-pathogen view that displays at-a-glance information of each pathogen with the option to click in for pathogen-specific information.

Follow the Getting Started guide up until Displaying Your Data. You should also be familiar with how layout.json files are structured before setting up a multi-pathogen view.

To begin, you’ll need two layout.json files: one for your multi-pathogen view, and one for the pathogen-specific views. Create the two files inside ./site/layouts with a blank template:

my-single-view.json, my-multi-view.json
```
 {
   "charts": { },
   "columns": [ ]
 }
```

Navigate to config.json to link the layouts to your Lookout site (and note the multiple pathogens defined under the pathogens field):

config.json

   "layouts": {
     "multi_pathogen": [{ "layout_file": "my-multi-view.json" }],
     "single_pathogen": [{ "layout_file": "my-single-view.json" }]
   }
   ...
   "pathogens": ["flua", "flub", "malaria", "lassa", "yellowfever", "fluc"]

Navigate back to your multi-view file and assign each pathogen a disease chart:

my-multi-view.json

 {
   "charts": {
     "my-flua-chart": {"kind": "disease", "field": "flua"},
     "my-flub-chart": {"kind": "disease", "field": "flub"},
     "my-malaria-chart": {"kind": "disease", "field": "malaria"},
     "my-lassa-chart": {"kind": "disease", "field": "lassa"},
     "my-yellowfever-chart": {"kind": "disease", "field": "yellowfever"},
     "my-fluc-chart": {"kind": "disease", "field": "fluc"},
     ... // more charts
   },
   "columns": [ ... ]
 }

Inside "columns", set up a new multi-pathogen Group Block:

my-multi-view.json

 {
   "charts": { ... },
   "columns": [
     {
       "title": "Multi-Pathogen View Column",
       "width": 5,
       "children": [
         {
           "template": "multi-pathogen",
           "primary": ["my-flua-chart", "my-flub-chart", "my-malaria-chart"], // charts displayed at a larger size
           "secondary": ["my-lassa-chart", "my-yellowfever-chart", "my-fluc-chart"] // charts displayed at a smaller size
         }
       ]
     },
     ... // more columns
   ]
 }

Your multi-view should now be all set! Now, you can follow the instructions in Displaying Your Data to set up the pathogen-specific views inside my-single-view.json. You can use the special "field": "{pathogen}" key to link any charts in your single view to its parent in the multi-view:

my-single-view.json
```
 {
   "charts": {
     "my-singleview-case-chart": { "kind": "disease", "field": "{pathogen}" }, // pulls data for the respective pathogen that is being displayed
     ... // more charts
   },
   "columns": [ ... ]
 }
```

optional You can also set up specific single-pathogen views for specific pathogens. To do so, create your single-pathogen view layout files, then use the pathogens key in config.json layouts as shown:

config.json

   "layouts": {
     "multi_pathogen": [{ "layout_file": "my-multi-view.json" }],
     "single_pathogen": [
       { 
         "layout_file": "my-single-view.json"  // default single-pathogen view for all pathogens
       },
       {
         "layout_file": "my-flu-view.json", // special flu single-pathogen view for specified pathogens
         "pathogens": ["flua", "flub", "fluc"]
       }
     ]
   }
   ...
   "pathogens": ["flua", "flub", "malaria", "lassa", "yellowfever", "fluc"]

Functional demos and their repositories are available to view at the Lookout-demos repository or the Lookout homepage.

For more information on Group Blocks and special keys, see layout.json Reference.

For more information on assigning layouts, see config.json Reference.