# Interactive Collection View tutorial

Once you are signed in, you can follow this tutorial using a collection of your own.&#x20;

## Open the Collection

Navigate to the Collections page using either menu (Hamburger or banner). Select a collectio&#x6E;**.**

<div><figure><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FZw2w44GJaIkThSOwSfFy%2FPathSafeCollectionsSideMenu.png?alt=media&#x26;token=631b2cda-c1d8-4dc8-8bd5-a815f65f2dcb" alt="" width="179"><figcaption><p>side hamburger menu</p></figcaption></figure> <figure><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FAP40dA2HyhAs6Wbxjzmk%2FBannerMenuAnonymous.png?alt=media&#x26;token=3ca7d281-23f6-42df-acee-e80a644e5263" alt="" width="340"><figcaption><p>top banner menu</p></figcaption></figure> <figure><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FTj6xz37XznvdGMtpQHJ9%2Fimage.png?alt=media&#x26;token=d4ad5040-d0c9-441a-870f-2c3557643cf1" alt=""><figcaption><p>Example collection</p></figcaption></figure></div>

## The Interactive Collection View

{% hint style="info" %}
Collections are the easiest way of sharing data with colleagues and the general public. Some Collections are pre-built, and accessible from the Collections page.
{% endhint %}

Opening (or creating) a Collection brings up the [Interactive Collection View](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv), displaying all genomes in the Collection in multiple panels.

### Tree, Map, Tables & Timeline

* [**Tree**](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/tree-panel): a core distance-based neighbour-joining tree, viewed using PhyloCanvas (top left)
  * When you create a collection, the tree is not created automatically. If it is possible to create a tree, a "generate tree" button will be shown.
* [**Map**](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/map-panel): shows all genomes in the collection that have a location associated with them (top right).
* [**Metadata table, Analysis Results**](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/data-tables)**,** & [**Timeline** ](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/timeline)(bottom)

{% hint style="info" %}
The Interactive Collection View's URL is permanent, even if the owner changes the title text. You can bookmark it and return later. If you are signed in and create a collection, it will be saved to your account.
{% endhint %}

### Explore the Collection

1. **Scroll** through the Metadata Table at the bottom to get an idea of the genome data.

<table data-header-hidden><thead><tr><th width="451"></th><th></th></tr></thead><tbody><tr><td>Select some data rows, and <strong>notice</strong> that the Map Panel and Tree panel highlight the location for that genome.<br><br>Use the Table menu to “Hide unselected entries.” This applies in each table separately.</td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FkBItyvpeuRFLqwMY8YYc%2Fselectmetadatarowsrecords.png?alt=media&#x26;token=6de15c7a-8b61-4208-88e4-bc1b98afeb9d" alt="" data-size="original"><br><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FFFGHUNPZdYEtWydxNY2Y%2Ftreemapselectionhighlight.png?alt=media&#x26;token=a7f70306-ea7d-40b6-b0aa-9026de7bb1ca" alt=""><br><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FN9nu825CFeuEJIVCPEAo%2Fhideunselectedentries.png?alt=media&#x26;token=af5c2534-29f2-4e51-9b71-9462667a4d83" alt=""></td></tr><tr><td><strong>Change column width</strong> by dragging the sides of a column header or by using the column’s filter icon and the “expand column” icon.</td><td><p><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FX2V7nZDYwNRkiD4jR36s%2FadjustcolumnwidthST2.png?alt=media&#x26;token=553023f8-c957-4947-aa41-0a5d5ddc4236" alt=""></p><p><br><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fgit-blob-8467d9e08508c7200153ffc70f494eaf5f6948b5%2FFilter.png?alt=media" alt="" data-size="line"><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fgit-blob-cfa07f00785b880c8d3570eb3318bb4d3448a66d%2Fresizecolumn.png?alt=media" alt="" data-size="line"></p></td></tr><tr><td><strong>Adjust row height</strong> using <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FfZ8iIwxxBppi3MHyhMRb%2Fconfiguresettings.png?alt=media&#x26;token=b6d0e83a-47eb-4b3b-8fa0-c58f15e33d70" alt="" data-size="line"> “Density"</td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fwv0bhOPjpR5FyLZ3OX38%2Ftablemenuscolumnsdensitylozenges.png?alt=media&#x26;token=9b4b4f82-8dd0-4c92-b025-c2da4ed5ca2f" alt="" data-size="original"></td></tr><tr><td>Choose which data columns to show/hide on the active table using the filter <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FfZ8iIwxxBppi3MHyhMRb%2Fconfiguresettings.png?alt=media&#x26;token=b6d0e83a-47eb-4b3b-8fa0-c58f15e33d70" alt="" data-size="line"> icon "Columns" lozenge and tickboxes (or the "Search" and "Select all" options to quickly select subsets of columns)</td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FAmoWZHzdPDCGWjsy2e7X%2Fselectcolumns.png?alt=media&#x26;token=6d7bd5c4-5e41-4c85-a2c6-541ed2cbd4b4" alt=""><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fs9UFSFTA0VVGEKJEy4ew%2Fnamecolumns.png?alt=media&#x26;token=5475f732-f770-45ed-a430-7472065bb9e6" alt=""></td></tr><tr><td><ol start="15"><li>Hover on a column header: A filter icon appears, and can be used to <strong>open</strong> the column's filtering menu.</li><li><strong>Show/hide</strong> an individual column by using the show/hide icon that appeared.<img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fgit-blob-8467d9e08508c7200153ffc70f494eaf5f6948b5%2FFilter.png?alt=media" alt="" data-size="line"> <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FOlLFne2r7hMiTNhRoUAn%2Fshowhidecolumnseye.png?alt=media&#x26;token=45bdaa54-9f88-4215-aca7-f88389c71a3d" alt="" data-size="line"></li><li>In the column's filtering menu, Click "<strong>Sort</strong>" options to order the rows based on the values in the column. Note that these may be alpha-sorted, not numerically.</li><li>Open "Filter by values" and select some options, then "APPLY FILTER" - all panels are filtered. Clear the filter.</li></ol><p>Filtering by condition allows you to set number- or text-based specifications (depending on the column type), including the use of regular expressions for text columns.</p><p>Genomes (rows) with values that are not selected or do not meet conditions will be filtered out from all panels, until/unless the filter is cleared.</p></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FlNazrKzda6KecPosvtor%2Fcolumnfilter_byvalues.png?alt=media&#x26;token=3e81eab0-4f6a-46bd-b28e-844abc036579" alt="" data-size="original"><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FlDR8sMsExBa7ZuQKhyG7%2Fapplyfilter.png?alt=media&#x26;token=186420f0-c09e-40f3-b6f5-cbcb0e5ad1e0" alt=""></td></tr></tbody></table>

<table data-header-hidden><thead><tr><th width="352"></th><th></th></tr></thead><tbody><tr><td><ol start="19"><li>Now click on the Settings icon in the <a href="https://github.com/pathogenwatch/docs/blob/main/quickstart/broken-reference/README.md"><strong>Map Panel</strong></a>, and notice that zoom icons appeared in the bottom right corner. Zoom in (using your mouse wheel or the zoom icons) until the map only shows two or three markers, including the highlighted one.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FlVRGAQkKKn1Sgb0BFz4g%2Fmapselectionhighlight.png?alt=media&#x26;token=e4adf33b-34fd-4320-8307-ba4296c377e2" alt="" data-size="original"></td></tr><tr><td><ol start="20"><li>Click on the the highlighted marker, and notice that a number of rows get selected (all the genomes from that location, not just the one you originally selected in the table), and those genomes are highlighted in the tree too.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FeBs6GSiWVqi0sUA7Cdwl%2Ftreehighlighted.png?alt=media&#x26;token=8527d2ac-8145-4705-9c1d-3a10c0157446" alt="" data-size="original"></td></tr><tr><td><ol start="21"><li>Select the "<a href="https://github.com/pathogenwatch/docs/blob/main/quickstart/broken-reference/README.md"><strong>Viewport</strong></a>" icon <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FsIUCJVOBk1si3Wffh3R3%2Fviewport.png?alt=media&#x26;token=ca4fd3c2-40d1-45e7-ae58-6ab51ebd3eca" alt="" data-size="line"> in the Map menu and notice that all genomes not currently shown on the map are hidden from all panels. The highlighted genomes remain highlighted until you click on a blank area of the Map or Tree. Select the Viewport icon again to clear that filter. <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FLkTl7Mce1sHyd5Mpdi4a%2Fviewportpurple.png?alt=media&#x26;token=e9050e7c-6704-42bd-8826-7f61fe91aa7a" alt="" data-size="line"></li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FFFGHUNPZdYEtWydxNY2Y%2Ftreemapselectionhighlight.png?alt=media&#x26;token=a7f70306-ea7d-40b6-b0aa-9026de7bb1ca" alt="" data-size="original"></td></tr></tbody></table>

22. Select the [**Timeline Panel**](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/timeline), which is layered behind the [Data Tables](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/data-tables). Click on a bar and it highlights in other panels. Adjust the "**Unit**" lozenge and "**Type**." Filter the date range by dragging the "Timeline Overview" (bottom timeline) rightmost bar. This also affects other Panels.

<div><figure><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FVclEE9kE7ZaKGopZu2Nw%2Ftimelineleft.png?alt=media&#x26;token=ac526cb3-2715-4bc6-bbdc-fe29ec092440" alt=""><figcaption></figcaption></figure> <figure><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FydD2Lmk9vsNrQeQyToAn%2Ftimelineoverviewdragendpoint.png?alt=media&#x26;token=8cad462a-f4eb-477d-b7ed-9e17a65bc39c" alt=""><figcaption></figcaption></figure></div>

23. Open the [**Tree Panel**](https://next-docs.pathogen.watch/how-to-use-pathogenwatch/collections/using-the-icv/tree-panel) settings menu <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FfZ8iIwxxBppi3MHyhMRb%2Fconfiguresettings.png?alt=media&#x26;token=b6d0e83a-47eb-4b3b-8fa0-c58f15e33d70" alt="" data-size="line"> and select different tree styles.

<table data-header-hidden><thead><tr><th width="352"></th><th></th></tr></thead><tbody><tr><td><ol start="24"><li><strong>Clear all filters</strong> by clicking the filter icon at the right of the "Search in all columns" search &#x26; filter bar (top center). "reset all filters."</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FLPnUltEKmkJQYzVdB6WH%2Fresetfilters.png?alt=media&#x26;token=45bde9ba-7f19-4d2a-979b-3122aa437141" alt="" data-size="original"></td></tr><tr><td><ol start="25"><li>In the Metadata Table, click on the filter icon for a column to see how many values it contains: This will affect how many colour palettes are available for that column. </li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FSs5m2oJjF52hwJe3XrIq%2Fcolumnfilter_city.png?alt=media&#x26;token=f62a1685-a61d-4038-85c0-92306edeb6a7" alt="" data-size="original"></td></tr><tr><td><ol start="26"><li>Click on the eye icon <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FMfzvI3p9MsCPmzWgLQwG%2Feye.png?alt=media&#x26;token=afb27a4f-8ac0-4ed2-98f2-610501de2c24" alt="" data-size="line"> in the upper right corner of the dashboard. Click on "<a href="../../how-to-use-pathogenwatch/collections/using-the-icv/legend-labels-and-colours#change-the-colour-column">Colour Column</a>." Start typing your column name until it shows, then select it.<br><br>Click on "Colour Palette" and set "Number of Colours" to be greater than the values in your column. Select a pallette. Notice that the tree colours change accordingly.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FI4o2cT77UZ5BcApN1Q1O%2Ftutorial26colourcolumnpalette.png?alt=media&#x26;token=e08ae3f8-0142-4cf7-bdb0-443b27b8379a" alt=""></td></tr><tr><td><ol start="27"><li>Select a new column as the Colour Column, and toggle "Custom Palette." Click on the colour box and choose specific colours.<br><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FNiF3Pirf7xwKTbTAM6Da%2Fcaution.png?alt=media&#x26;token=71e8a9bc-41d9-4459-ad2d-e4637d64ab7e" alt="" data-size="line"><strong>CLICK "CONFIRM"</strong> in the bottom right before closing the palette windows! (you may need to click in the white space first, see #4)</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FirsCbIgi56xn6avIKFZo%2Fcustompalettesetting.png?alt=media&#x26;token=804cb5fe-9348-4957-8eb1-151d04c3cada" alt=""></td></tr><tr><td><ol start="28"><li>Select "No. contigs" as the Colour Column, and select "Gradient" in the Colour Palette option. Click on the colour band.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2F77a46Zhobu14BppZwhj4%2Fgradientpalette.png?alt=media&#x26;token=c2ece80e-8042-48c2-af51-ba4665a43bf7" alt=""></td></tr><tr><td><ol start="29"><li>Change Colour Column to "Name"</li><li>Open the Tree Panel Menu and click "Metadata Blocks"</li><li>Add "No. Contigs" and the other columns you set palettes for. Note that the resulting Metadata Blocks are coloured with the palettes you selected.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2F8XLf52uQepQzvOqJSW1m%2Fmetadatablocksmenu.png?alt=media&#x26;token=d82bc0c1-57f4-40bd-9654-dee646ed9473" alt="" data-size="original"> <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2FCakPuJLJTtp6kLQqGihh%2Ftree.png?alt=media&#x26;token=c3e101ea-fc79-40be-a62f-1c52009ee38a" alt=""></td></tr><tr><td><ol start="30"><li><strong>Open the Legend</strong> using the right side panel.</li><li>Choose the "Genes" or "Antibiotics" table. <img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2F77lJgHeA9MBEuj3YJooy%2Fgenestableheader.png?alt=media&#x26;token=ae5f408c-0782-40a3-a722-093ff80cf000" alt="" data-size="line"> Click on a column header, and notice that the tree leaves, map markers, and legend change with this quick column-header method of setting the Colour Column.</li></ol></td><td><img src="https://3802074513-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FHXfIP1DQQRf1INOFCCsK%2Fuploads%2Fic7QbsIyLYgIgEP6EbWI%2Flegendandcolourbycolumn.gif?alt=media&#x26;token=8c5c2b61-4c9b-4726-b219-cbd035659f60" alt=""></td></tr></tbody></table>
