# Introduction What is Microreact? **Microreact is software developed by the** [**Centre for Genomic Pathogen Surveillance (CGPS)**](https://www.pathogensurveillance.net/) **that allows you to upload, visualise and explore any combination of clustering (trees), geographic (map) and temporal (timeline) data. Other metadata variables are displayed in a table. You can specify colours and/or shapes to display on the map, tree and/or timeline. A permanent URL is produced for you to share your Microreact, or a .microreact file can be downloaded for sharing with collaborators.** Microreact ([https://microreact.org/](https://microreact.org)) is a web-based application for the provision of interactive data visualisations. It enables the rapid generation and linkage of trees, maps, networks, charts and timelines, enabling epidemiologists and key decision makers to react faster and with greater accuracy. Microreact can be deployed securely on a local server, behind firewalls and adhering to local data governance. Users can make their Microreact projects findable on the network, or share them privately with another user by sharing a downloaded project or using secret links. Microreact projects for public consumption can be shared on the public Microreact site. Notably, unlike other data visualisation platforms with pre-specified and fixed combinations of data, Microreact permits substantial customisation of data fields, maps, charts, colours, and layouts, and these views can be filtered and saved to facilitate shared understanding of complex public health data. Specific needs can be addressed by further customisation of Microreact’s visual components, including tailored creation of many types of charts. The original data files can be downloaded by anyone who can view a project, enabling collaborators or the research community to further explore the data. Microreact can be updated automatically from various data sources, including the output of a Data-flo or Epicollect5 project. # Introductory Videos {% embed url="" %} ## Microreact Introduction {% embed url="" %} ## SARS-CoV-2 Surveillance Model The video below shows how Microreact can be used for SARS-CoV-2 surveillance. Using data from the COG-UK consortium, we exemplify features that can help in creating a pathogen surveillance project in Microreact. The data in this project are metadata and phylogenetic tree files from the first wave of the epidemic in the UK. The data in the two files are linked in Microreact by sharing a sample ID. The project can be explored here: And the video below walks through the project. {% embed url="" %} # About Microreact ### Microreact has been developed by the [Centre for Genomic Pathogen Surveillance](http://www.pathogensurveillance.net). By using Microreact, you agree to our use of cookies in accordance with our [cookie policy and terms of service](/about-microreact/privacy-and-terms). If you use Microreact within a publication please cite: > [Argimón S, Abudahab K, Goater R, Fedosejev A, Bhai J, Glasner C, Feil E, Holden M, Yeats C,\ > Grundmann H, Spratt B, Aanensen D. 30/11/2016. M Gen 2(11): doi:10.1099/mgen.0.000093](http://mgen.microbiologyresearch.org/content/journal/mgen/10.1099/mgen.0.000093) We gratefully acknowledge funding by **The Wellcome Trust**. Maps sponsored by the [Mapbox Community team](https://www.mapbox.com/community/).\ \ If you show a picture of a Microreact project that displays a map panel in a publicly accessible source such as a figure in a manuscript or image on a website/blog you must display the text quoted below underneath the figure or image. For full Mapbox terms of service see this [link](https://www.mapbox.com/legal/service-terms) and for further information please contact them via their [support page.](https://support.mapbox.com) > Maps © Mapbox ([www.mapbox.com/about/maps](http://www.mapbox.com/about/maps)) and © OpenStreetMap ([www.openstreetmap.org/about](http://www.openstreetmap.org/about)) For questions, ideas, or feedback please [contact us](/feedback/contact)**.** # Privacy and Terms Of Service ## Privacy This statement explains how the Centre for Genomic Pathogen Surveillance (“CGPS”) uses the personal information we collect from you when you visit Microreact website. By visiting Microreact website you are consenting to our use of your information in this way. We may make changes to this statement so please check from time to time for any updates. ### Information about you we may collect and use Microreact accesses your name and email when signing in with Google, Twitter, or Facebook. Other information (such as your profile photo, tweets, or Facebook friends) is not accessed, collected or stored by Microreact. When you visit Microreact, we collect certain technical information from your device including Page URL, HTTP Referer, Browser, Operating system, Device type, and your location (Country, region, city). We do not track anything more granular than the city level and the IP address of the visitor is discarded. We never store IP addresses in our database or logs. ### How we use your information We display the information you give us (your name and email) in [your account page](https://microreact.org/myaccount). If you sent an invitation to one of your private projects, only your name will be included in the invitation email sent to the invited user. Your email will not be included in the invitation email. ### Cookies When you visit Microreact we use cookies to automatically collect information about how you use our sites. Please see our Cookies information (below). ### Sharing your information We do not share your personal information with any organisation. Your name and email are not displayed to other Microreact users. We use an open-source web analytics tool to capture privacy friendly analytics which we store on our servers. Your data is not sent to, shared with, or sold to any third-parties. ### Personal Data and Your Responsibilities The CGPS is based in the UK and operate under the The Data Protection Act 2018, the UK’s implementation of the General Data Protection Regulation (GDPR). You may be in a different legal jurisdiction so must ensure that you follow UK GDPR as well as your own local laws. For more information on UK GDPR please see [Information Commissioner's Office (ICO)](https://ico.org.uk/). When you use Microreact, CGPS is the Data Processor and you are the Data Controller, as you have control over the data you collect and CGPS only acts on your instructions. ### Publication of Data If you make a project public, ALL project data you have collected will be visible to anyone on the internet. Please ensure that you are not breaking any Data Protections laws that may apply. CGPS cannot be held responsible for data published by users. ### Reasonable Use and Data Retention The service is provided at no cost to you, however we incur costs for managing and processing the data which are currently covered by grants from NIHR and Gates Foundation. Supported data are stored permanently. Supported data ### Protecting Your Data Microreact is part of the Big Data Institute at the University of Oxford () and hosted on DigitalOcean (a world-class cloud provider). DigitalOcean services comply with GDPR (), you can find more about DigitalOcean data security on: ​ Microreact embraces industry-standard best practices to protect against unauthorised access of your data. Data is sent over HTTPS protocol and its TLS certificate uses SHA-256 with RSA encryption as a signature algorithm. ### Sharing your information The CGPS does not share your personal information with any external organisation. Your name and email are not displayed to other Microreact users. We use an open-source web analytics tool to capture privacy friendly analytics which we store on our servers. Your data is not sent to, shared with, or sold to any third-parties. ### Data Deletion Please contact if you would like to delete your account. ## Cookies Microreact uses cookies only when you sign in to your Microreact account. A cookie is a small file of letters and numbers that we save to your computer or device if you agree. By signing in, you agree to that we save the following cookies to your computer or device. ### Details of cookie usage on Microreact webiste | Type | Name | Purpose | Duration | Used By | | ---------- | ---------------------------------- | ---------------------- | -------------- | ------- | | Your visit | `__Host-next-auth.csrf-token` | Authentication cookie. | Session cookie | GCPS | | Your visit | `__Secure-next-auth.callback-url` | Authentication cookie. | Session cookie | GCPS | | Your visit | `__Secure-next-auth.session-token` | Authentication cookie. | 14 days | GCPS | ### Third-party cookies Microreact does not use third party cookies. ## Contact us If you have any additional questions or you would like to a submit a data subject access request, please [contact us](/feedback/contact). # Open source software used by Microreact * [array-join](https://www.npmjs.com/package/array-join) * [await-to-js](https://www.npmjs.com/package/await-to-js) * [axios](https://www.npmjs.com/package/axios) * [babel/core](https://www.npmjs.com/package/@babel/core) * [babel/eslint-parser](https://www.npmjs.com/package/@babel/eslint-parser) * [babel/eslint-plugin](https://www.npmjs.com/package/@babel/eslint-plugin) * [babel/plugin-proposal-do-expressions](https://www.npmjs.com/package/@babel/plugin-proposal-do-expressions) * [babel/plugin-proposal-export-default-from](https://www.npmjs.com/package/@babel/plugin-proposal-export-default-from) * [babel/plugin-transform-runtime](https://www.npmjs.com/package/@babel/plugin-transform-runtime) * [babel/preset-env](https://www.npmjs.com/package/@babel/preset-env) * [babel/preset-react](https://www.npmjs.com/package/@babel/preset-react) * [babel/traverse](https://www.npmjs.com/package/@babel/traverse) * [babel/types](https://www.npmjs.com/package/@babel/types) * [boolean](https://www.npmjs.com/package/boolean) * [canvas2svg](https://www.npmjs.com/package/canvas2svg) * [classnames](https://www.npmjs.com/package/classnames) * [clsx](https://www.npmjs.com/package/clsx) * [colorbrewer](https://www.npmjs.com/package/colorbrewer) * [comlink](https://www.npmjs.com/package/comlink) * [d3-array](https://www.npmjs.com/package/d3-array) * [d3-dsv](https://www.npmjs.com/package/d3-dsv) * [d3-scale](https://www.npmjs.com/package/d3-scale) * [date-fns](https://www.npmjs.com/package/date-fns) * [dayjs](https://www.npmjs.com/package/dayjs) * [deck.gl](https://www.npmjs.com/package/deck.gl) * [downloadjs](https://www.npmjs.com/package/downloadjs) * [ejs](https://www.npmjs.com/package/ejs) * [email-templates](https://www.npmjs.com/package/email-templates) * [emoji-regex](https://www.npmjs.com/package/emoji-regex) * [escape-string-regexp](https://www.npmjs.com/package/escape-string-regexp) * [feedback-screenshot-tool](https://www.npmjs.com/package/feedback-screenshot-tool) * [filesize](https://www.npmjs.com/package/filesize) * [flexlayout-react](https://www.npmjs.com/package/flexlayout-react) * [fontsource/plus-jakarta-sans](https://www.npmjs.com/package/@fontsource/plus-jakarta-sans) * [ftp-get](https://www.npmjs.com/package/ftp-get) * [geojson-geometries-lookup](https://www.npmjs.com/package/geojson-geometries-lookup) * [global](https://www.npmjs.com/package/global) * [googleapis](https://www.npmjs.com/package/googleapis) * [gravatar](https://www.npmjs.com/package/gravatar) * [html2canvas](https://www.npmjs.com/package/html2canvas) * [htmlsvg](https://www.npmjs.com/package/htmlsvg) * [immutable](https://www.npmjs.com/package/immutable) * [jsftp](https://www.npmjs.com/package/jsftp) * [jsonschema](https://www.npmjs.com/package/jsonschema) * [loaders.gl/core](https://www.npmjs.com/package/@loaders.gl/core) * [loaders.gl/csv](https://www.npmjs.com/package/@loaders.gl/csv) * [loaders.gl/json](https://www.npmjs.com/package/@loaders.gl/json) * [local-storage](https://www.npmjs.com/package/local-storage) * [lodash.debounce](https://www.npmjs.com/package/lodash.debounce) * [lodash.groupby](https://www.npmjs.com/package/lodash.groupby) * [lodash.sortby](https://www.npmjs.com/package/lodash.sortby) * [lz-string](https://www.npmjs.com/package/lz-string) * [material-ui/core](https://www.npmjs.com/package/@material-ui/core) * [material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) * [material-ui/lab](https://www.npmjs.com/package/@material-ui/lab) * [mdi/js](https://www.npmjs.com/package/@mdi/js) * [merge-options](https://www.npmjs.com/package/merge-options) * [migrate-mongo](https://www.npmjs.com/package/migrate-mongo) * [mini-svg-data-uri](https://www.npmjs.com/package/mini-svg-data-uri) * [mongoose](https://www.npmjs.com/package/mongoose) * [next-auth](https://www.npmjs.com/package/next-auth) * [next-auth/mongodb-adapter](https://www.npmjs.com/package/@next-auth/mongodb-adapter) * [next](https://www.npmjs.com/package/next) * [node-uuid](https://www.npmjs.com/package/node-uuid) * [nodemailer](https://www.npmjs.com/package/nodemailer) * [notistack](https://www.npmjs.com/package/notistack) * [papaparse](https://www.npmjs.com/package/papaparse) * [path-exists](https://www.npmjs.com/package/path-exists) * [phylocanvas/phylocanvas.gl](https://www.npmjs.com/package/@phylocanvas/phylocanvas.gl) * [postal](https://www.npmjs.com/package/postal) * [query-string](https://www.npmjs.com/package/query-string) * [randomcolor](https://www.npmjs.com/package/randomcolor) * [re-reselect](https://www.npmjs.com/package/re-reselect) * [react-addons-shallow-compare](https://www.npmjs.com/package/react-addons-shallow-compare) * [react-base-table](https://www.npmjs.com/package/react-base-table) * [react-beforeunload](https://www.npmjs.com/package/react-beforeunload) * [react-color](https://www.npmjs.com/package/react-color) * [react-copy-to-clipboard](https://www.npmjs.com/package/react-copy-to-clipboard) * [react-debounce-input](https://www.npmjs.com/package/react-debounce-input) * [react-dom](https://www.npmjs.com/package/react-dom) * [react-file-drop](https://www.npmjs.com/package/react-file-drop) * [react-hashchange](https://www.npmjs.com/package/react-hashchange) * [react-hotkeys](https://www.npmjs.com/package/react-hotkeys) * [react-map-gl](https://www.npmjs.com/package/react-map-gl) * [react-markdown](https://www.npmjs.com/package/react-markdown) * [react-redux](https://www.npmjs.com/package/react-redux) * [react-rnd](https://www.npmjs.com/package/react-rnd) * [react-sortable-hoc](https://www.npmjs.com/package/react-sortable-hoc) * [react-split-pane](https://www.npmjs.com/package/react-split-pane) * [react-vega](https://www.npmjs.com/package/react-vega) * [react-virtualized](https://www.npmjs.com/package/react-virtualized) * [react-window](https://www.npmjs.com/package/react-window) * [react](https://www.npmjs.com/package/react) * [redux-thunk](https://www.npmjs.com/package/redux-thunk) * [redux-undo](https://www.npmjs.com/package/redux-undo) * [redux](https://www.npmjs.com/package/redux) * [request](https://www.npmjs.com/package/request) * [reselect](https://www.npmjs.com/package/reselect) * [short-uuid](https://www.npmjs.com/package/short-uuid) * [slugify](https://www.npmjs.com/package/slugify) * [swr](https://www.npmjs.com/package/swr) * [tmp-promise](https://www.npmjs.com/package/tmp-promise) * [turf/centroid](https://www.npmjs.com/package/@turf/centroid) * [type-analyzer](https://www.npmjs.com/package/type-analyzer) * [valid-url](https://www.npmjs.com/package/valid-url) * [vega-lite](https://www.npmjs.com/package/vega-lite) * [vega](https://www.npmjs.com/package/vega) * [vis](https://www.npmjs.com/package/vis) * [writers-digest](https://www.npmjs.com/package/writers-digest) * [xlsx](https://www.npmjs.com/package/xlsx) # Change Log ## [v292](https://github.com/microreact/server/releases/tag/v292.0.0) * Use [MapBox Streets](https://www.mapbox.com/maps/streets) for streets style. * Add support for [`globe` map projection](https://maplibre.org/maplibre-style-spec/types/#use-a-projection-preset). ## [v291](https://github.com/microreact/server/releases/tag/v291.0.0) * Bug fix: numerical IDs in tree leaf labels * Replace MapBox GL JS with MapLibre GL JS ## [v263](https://github.com/microreact/server/releases/tag/v263.0.0) * Feature: new chart type: Pie Chart. * Feature: new chart type: Heatmap Chart. * Feature: new chart type: Multi-variable Bar Chart. *** ## [v261](https://github.com/microreact/server/releases/tag/v261.0.0) * Feature: Sending encrypted JSON Web Token to external data sources (#3701). *** ## [v259](https://github.com/microreact/server/releases/tag/v259.0.0) * Bug fix: Sharing icon does not appear for Managers in My Account (#2485). *** ## [v258](https://github.com/microreact/server/releases/tag/v258.0.0) * Bug fix: cannot update a project after creating it in the same session (#4735). *** ## [v257](https://github.com/microreact/server/releases/tag/v257.0.0) * Change the default heatmap matrix colour scheme to "tealblues" (#2546). *** ## [v256](https://github.com/microreact/server/releases/tag/v256.0.0) * Support heatmap matrix visualisation (#2546). *** ## [v254](https://github.com/microreact/server/releases/tag/v254.0.0) * Make .microreact files portable (#2734). *** ## [v252](https://github.com/microreact/server/releases/tag/v252.0.0) * Bug fix: map render error when trying to colour a choropleth map by specific values (#4162). *** ## [v251](https://github.com/microreact/server/releases/tag/v251.0.0) * Bug fix: Colour by "Number of specific values in a column" renders a matrix of empty checkboxes (#4059). *** ## [v250](https://github.com/microreact/server/releases/tag/v250.0.0) * Update links in homepage footer. *** ## [v249](https://github.com/microreact/server/releases/tag/v249.0.0) * Support signing in with Microsoft. *** ## [v248](https://github.com/microreact/server/releases/tag/v248.0.0) * Bug fix: borders in SVG download of trees (#1685). * Update showcase links. *** ## [v247](https://github.com/microreact/server/releases/tag/v247.0.0) * Bug fix: projects linked to Google Drive do not load. *** ## [v243](https://github.com/microreact/server/releases/tag/v243.0.0) * Added ISO 3166-2 codes for Belgium. * Bug fix: trees with all distances 0 (#1472). * Add support for `.treefile` file extension (#1464). *** ## [v240](https://github.com/microreact/server/releases/tag/v240.0.0) * Bug fix: projects with invalid colour codes do not load (#1350). ## [v239](https://github.com/microreact/server/releases/tag/v239.0.0) * Update sign-in page to include cookies policy. *** ## [v238](https://github.com/microreact/server/releases/tag/v238.0.0) * Bug fix: show warning when uploading empty files. * Bug fix: rename duplicate column names when uploading Excel files. *** ## [v237](https://github.com/microreact/server/releases/tag/v237.0.0) * Bug fix: vega chart data becomes public (#739). *** ## [v236](https://github.com/microreact/server/releases/tag/v236.0.0) * Bug fix: stacking in line charts (#727). *** ## [v235](https://github.com/microreact/server/releases/tag/v235.0.0) * Restore links in the public showcase. *** ## [v234](https://github.com/microreact/server/releases/tag/v234.0.0) * Bug fix: columns in an Excel spreadsheet were only getting imported if there is data in the first row (#658) *** ## [v233](https://github.com/microreact/server/releases/tag/v233.0.0) * Feature: order a tree by increasing or decreasing node order (#620) *** ## [v232](https://github.com/microreact/server/releases/tag/v232.0.0) * Fix broken showcase links (#182) *** ## [v231](https://github.com/microreact/server/releases/tag/v231.0.0) * Bug fix: projects with linked datasets are not loading (#460) *** ## [v230](https://github.com/microreact/server/releases/tag/v230.0.0) * Bug fix: Table filter button is missing(#463) *** ## [v229](https://github.com/microreact/server/releases/tag/v229.0.0) * Bug fix: download links open in a new tab (#449) *** ## [v228](https://github.com/microreact/server/releases/tag/v228.0.0) * Bug fix: upside down labels for metadata block labels in SVG format (#449) *** ## [v227](https://github.com/microreact/server/releases/tag/v227.0.0) * Fixed: deleted projects are still accessible (#182). *** ## [v225](https://github.com/microreact/server/releases/tag/v225.0.0) * Fixed: saving base64 blobs on server (#183). *** ## [v224](https://github.com/microreact/server/releases/tag/v224.0.0) * Fixed charts filter bug (#130). *** ## [v223](https://github.com/microreact/server/releases/tag/v223.0.0) * Fixed loading TSV files (SUPPORT-45). *** ## [v222](https://github.com/microreact/server/releases/tag/v222.0.0) * Fixed broken project cards in my account page (#173). *** ## [v221](https://github.com/microreact/server/releases/tag/v221.0.0) * Fixed cannot load Excel files bug (#166). *** ## [v220](https://github.com/microreact/server/releases/tag/v220.0.0) * Fixed bug: Edit button is disabled after saving project as new ([#628](https://gitlab.com/cgps/microreact/support/-/issues/628)) * Update to Nextjs v12 * Update to @mui/material v5 * Update to Node.js v18 *** ## [v218](https://github.com/microreact/server/releases/tag/v218.0.0) * Moved viewer to Github. *** ## [v217](https://github.com/microreact/server/releases/tag/v217.0.0) * Fixed legend selection bug. *** ## [v216](https://github.com/microreact/server/releases/tag/v216.0.0) * Fixed map does not resize programmatically (). *** ## [v215](https://github.com/microreact/server/releases/tag/v215.0.0) * Added `auth.allowedUsers` to config ([#181](https://github.com/microreact/server/commit/f03ddc36a330ece5d55a6c469903614e8e4b4a9c)). * Reduced thumbnail size ([5ef2077](https://github.com/microreact/server/commit/5ef2077c129b24b124ab84396cfe02677fb6d44a)). *** ## [v214](https://github.com/microreact/server/releases/tag/v214.0.0) * Add heatmap charts. *** ## [v213](https://github.com/microreact/server/releases/tag/v213.0.0) ## [v212](https://github.com/microreact/server/releases/tag/v212.0.0) * Support signing in with Azure Active Directory. *** ## [v211](https://github.com/microreact/server/releases/tag/v211.0.0) * Bug fix: problem with login closing when you get into Mr from a link ([#648](https://gitlab.com/cgps/microreact/support/-/issues/648)). *** ## [v209](https://github.com/microreact/server/releases/tag/v209.0.0) * Add support for custom showcase. *** ## [v205](https://github.com/microreact/server/releases/tag/v205.0.0) * Update to Node.js v16. * Bug fix: bootstrap branch support internal labels ([#642](https://gitlab.com/cgps/microreact/support/-/issues/642)). *** ## [v203](https://github.com/microreact/server/releases/tag/v203.0.0) * User-friendly error messages ([#591](https://gitlab.com/cgps/microreact/support/-/issues/591)). *** ## [v202](https://github.com/microreact/server/releases/tag/v202.0.0) * Feature: data aggregation via slicer panel ([#562](https://gitlab.com/cgps/microreact/support/-/issues/562)). * Bug fix: invalid timeline grouping ([#574](https://gitlab.com/cgps/microreact/support/-/issues/574)). *** ## [v200](https://github.com/microreact/server/releases/tag/v200.0.0) * Bug fix: saving projects with only tree files ([#581](https://gitlab.com/cgps/microreact/support/-/issues/581)). *** ## [v199](https://github.com/microreact/server/releases/tag/v199.0.0) * Internal node labels can be filtered ([#493](https://gitlab.com/cgps/microreact/support/-/issues/493)). * Auto log off users after 14 days of inactivity ([#585](https://gitlab.com/cgps/microreact/support/-/issues/585)). * Log failed login attempts ([#580](https://gitlab.com/cgps/microreact/support/-/issues/580)). * Fix map lasso bug ([#579](https://gitlab.com/cgps/microreact/support/-/issues/579)). * Sort unique values ([#559](https://gitlab.com/cgps/microreact/support/-/issues/559)). * Add facet column for charts ([#538](https://gitlab.com/cgps/microreact/support/-/issues/538)). * Fix x-labels in stacked row view charts ([#531](https://gitlab.com/cgps/microreact/support/-/issues/531)). * Group bar charts into bins ([#505](https://gitlab.com/cgps/microreact/support/-/issues/505)). * Show branch lengths as whole numbers ([#568](https://gitlab.com/cgps/microreact/support/-/issues/568)). *** ## [v197](https://github.com/microreact/server/releases/tag/v197.0.0) * Add [Plausible Analytics](https://plausible.io/). *** ## [v196](https://github.com/microreact/server/releases/tag/v196.0.0) * Font size of branch labels can be set independently. *** ## [v195](https://github.com/microreact/server/releases/tag/v195.0.0) * A new a dropdown list to choose the column on which the selection chart is coloured ([#570](https://gitlab.com/cgps/microreact/support/-/issues/570)). *** ## [v194](https://github.com/microreact/server/releases/tag/v194.0.0) * Clicking on a subtree while holding the Cmd or Ctrl key selects the leaf nodes in the subtree ([#570](https://gitlab.com/cgps/microreact/support/-/issues/570)). *** ## [v193](https://github.com/microreact/server/releases/tag/v193.0.0) * Branch numbers can be rounded as whole numbers ([#568](https://gitlab.com/cgps/microreact/support/-/issues/568)). *** ## [v192](https://github.com/microreact/server/releases/tag/v192.0.0) * Bug [#563](https://gitlab.com/cgps/microreact/support/-/issues/563) fix. * Bug [#564](https://gitlab.com/cgps/microreact/support/-/issues/564) fix. *** ## [v191](https://github.com/microreact/server/releases/tag/v191.0.0) * Bug [#563](https://gitlab.com/cgps/microreact/support/-/issues/563) fix. *** ## [v190](https://github.com/microreact/server/releases/tag/v190.0.0) * Rename `Number of entries` to `Total number of entries` in bar charts ([#556](https://gitlab.com/cgps/microreact/support/-/issues/556)). *** ## [v189](https://github.com/microreact/server/releases/tag/v189.0.0) * Bug [#561](https://gitlab.com/cgps/microreact/support/-/issues/561) fix. *** ## [v188](https://github.com/microreact/server/releases/tag/v188.0.0) * Fixed Legend entries are in the wrong order ([#560](https://gitlab.com/cgps/microreact/support/-/issues/560)). * Show project metrics to project info dialog ([#558](https://gitlab.com/cgps/microreact/support/-/issues/558)). * Fixed duplicate colours legend ([#557](https://gitlab.com/cgps/microreact/support/-/issues/557)). * Change axis label orientation ([#504](https://gitlab.com/cgps/microreact/support/-/issues/504)). *** ## [v187](https://github.com/microreact/server/releases/tag/v187.0.0) * Show total values in bar charts ([#556](https://gitlab.com/cgps/microreact/support/-/issues/556)). * Accept `.nhx` as a Newick tree files (#554). * Bug [#550](https://gitlab.com/cgps/microreact/support/-/issues/550) fix. * Fix SVG export bug (#547). * Bug [#537](https://gitlab.com/cgps/microreact/support/-/issues/537) fix. * Charts can be coloured by different columns ([#502](https://gitlab.com/cgps/microreact/support/-/issues/502)). * Default view for a project ([#453](https://gitlab.com/cgps/microreact/support/-/issues/453)). *** ## [v185](https://github.com/microreact/server/releases/tag/v185.0.0) * Bug [#541](https://gitlab.com/cgps/microreact/support/-/issues/541) fix. *** ## [v184](https://github.com/microreact/server/releases/tag/v184.0.0) * Default views: [#453](https://gitlab.com/cgps/microreact/support/-/issues/453). * User-defined column labels: [#527](https://gitlab.com/cgps/microreact/support/-/issues/527). * Bug [#489](https://gitlab.com/cgps/microreact/support/-/issues/489) fix. * Bug [#521](https://gitlab.com/cgps/microreact/support/-/issues/521) fix. * Bug [#506](https://gitlab.com/cgps/microreact/support/-/issues/506) fix. * Bug [#533](https://gitlab.com/cgps/microreact/support/-/issues/533) fix. * Bug [#534](https://gitlab.com/cgps/microreact/support/-/issues/534) fix. * Add `CONFIG_FILE` environmental variable. # Navigating the site When you are not within a project view The top menu bar and the left sidebar (accessed via the hamburger icon) both allow you to navigate the site. The left sidebar can also be accessed from within a Microreact project. The site has four main pages: * [Main Showcase](#showcase-page-main-page) * [Upload](#upload-page) * [Documentation](#documentation) * [My Account](#my-account)
## Showcase Page (main page) ![](/files/ZELw7Qq8Ho6wssy4OhWV) The showcase includes an introductory video and a number of public projects ![The main page shows an introductory video above the showcase projects](/files/Qoa5vJGDez2DM1n8GPds) ![](/files/ibzFVJmAcAm0DxCHolNn) ## Upload Page ![](/files/IO7Ms0UERhN3qn88ojIY) This is the starting point for [creating a project](/instructions/creating-a-microreact-project) from scratch or from an offline .microreact file. See more at [Supported File Formats](/instructions/creating-a-microreact-project/supported-file-formats). ![](/files/ZARQ5UOOID07SyBcU9T3) ![](/files/3nTXfbGjlAwEqq3hTMqP) ## Documentation The Documentation header is a shortcut to these Help Pages. ![](/files/iST4g1W7h4CjHCnXWGkt) ## My Account ![](/files/x5TTY4jZhMz0lzYHAGt1) The My Account page is where you can see and search your projects, organise them into folders and favorites, and delete them, as well as change their [access permissions](https://github.com/microreact/docs/blob/main/instructions/navigating-the-site/broken-reference/README.md). ![](/files/12fFelktz8W7s4DxwjeH) # Managing Projects Projects can be managed from the 'My Account' page accessed from the left hand navigation panel ![](/files/SnO5OKdtVvuVNgjHP8XH) In this panel you will see a list of projects created by you which can be quickly filtered based on name using the `Search` bar in the top right ![](/files/POCZUo8lIOue4AexH63h) ![](/files/UNP6loziDi6q6osLrcv0) In each project panel you can **1**. Move a project to a folder (folders are accessed from the sidebar); **2.** Edit project access; **3.** Delete a project (projects in the bin are deleted after 30 days); **4.** Star a project (these are accessed from the sidebar) This is the only place to Move, Delete, or Star a project.\ Project Access can be edited from within a project or on this page. ![](/files/AUeqSavbq53R8jw0dGus) # Navigating within a project ## Top bar icons ![](/files/0xSApMa1MwXCErsefbSH) The details about each of these five functions are covered on the following pages: 1. [Adding and editing panels](/instructions/adding-and-editing-panels) 2. [Labels, Colours, and Shapes](/instructions/labels-colours-and-shapes) 3. [Download Project Files](/instructions/access-control-and-project-sharing/download-project-files) 4. [Project Access Control](/instructions/access-control-and-project-sharing) 5. [Saving Projects](/instructions/saving-and-sharing-projects) ## Side Panels Each project has side panels whereby you can access project-wide functions ![](/files/Fe3QSCEdigVv4a1lvakU) By default it shows the legend which reflects the label which is being used to colour the other panels. Other side panels can be selected * [Selection](/instructions/interacting-with-microreact-projects/selection) * [History](/instructions/interacting-with-microreact-projects/project-history) * [Views](/instructions/interacting-with-microreact-projects/saved-views) # History sidebar For each session when loading and interacting with a project, the history pane shows a list of actions which can be undone. Clicking on an item in the list will revert the project to state after the action has been applied. ![](/files/Gc8iPw5WiKe7FZeAw2ux) # Selection sidebar ![](/files/0RquZldgyxpLBBIqx0se) When multiple samples have been [selected](/instructions/selecting-and-filtering-data), the selection panel will show the distribution of the currently selected label column (as determined using the eye icon). In addition a second metric can be added using the details column. In the example below `Sample type` has been added ![](/files/hPSneFs5BcuhR2fPKj7p) # Views Sidebar The Views sidebar pane shows a list of saved views associated with the current project. Views can be used to create a story, guiding viewers through a series of data subsets and specific charts that facilitate understanding the insights and perspectives available via the project. Each saved view has its own URL, so the URL can be shared to bring others directly to a specific view. 1. [Add a view](#add-new-view) 2. View Menu: [Rename](#rename-views), [Set as Default](#set-as-default-view), [Update (save)](#update-view), [Delete](#delete-view) 3. [Reorder views](#reorder-views) ![](/files/IMeJ53dzNP0UzVXwpifd) ![](/files/ju8pDrSryAUwj1jJe6SR) The views can be renamed, updated or deleted by clicking in the 3-dot menu. If the project is saved on the server then each view will be given its own unique link that can be shared with collaborators who have access to the project, or made available for anyone if the project is public. To reorder the views in the sidebar panel, click-and-hold on a view until it {% hint style="warning" %} Changes made to a view must be saved in two places: First they must be saved within the view (`Update View`) and then the project must be updated. {% endhint %} Video showing creation, renaming, saving, and reordering of views, setting as the default view, plus common errors (described below) during reordering and saving. {% embed url="" %} ## Add new view Hitting the plus button will create an untitled view with the settings currently displayed. Whatever you are looking at will become the view. If you create a view and want to change the settings, you must make the changes and then apply "Update View". Any new views or changes you make to the view must be saved to the project, not just the view. The view will not be saved to the project until you save/update the project using the disk icon ## View menu ### Rename views Give each view its own descriptive name. The name will be reflected in the URL. ### Set as default view If you set one of the views as the default view, then when people navigate to the Microreact project's main URL, they will be automatically redirected to the Default View. In the Views sidebar, a green checkmark identifies the Default View, if one has been set. If no default view has been set, then the main project (not a Saved view) will be the default. ### Update view Once you have created a view, you can change or edit what you're seeing. Any changes you want to save as the way the view will be, you must save to the view using "Update view". Do not select "Update view" unless what you're currently seeing is what you want the view to be! Even after you've done "Update view" you must save/update the whole project to save your new view changes to the project. ### Delete view There is no confirmation dialogue box when you select "Delete view". Once you click "Delete view", the view will be deleted. If you accidentally delete a view, you can immediately retrieve it by navigating from the Views sidebar to the [History sidebar](/instructions/interacting-with-microreact-projects/project-history) and clicking the "undo" arrow or clicking the line below "Delete view" to return the project to the version right before you deleted the view. ![](/files/mmMzrSgjvhaJlxlAFoBi) ## Reorder views Setting the order of views can help others understand the data and insights in a project, guiding them through a story in a meaningful way. Click and hold on a view, and then drag it up or down to where you want it. Remember to save your project after reordering the views. If you don't hold the click long enough before dragging, you'll get this error:

Add files or URLs error, common problem when reordering views too quickly.

## Tips & Troubleshooting * Don't do "update view" for a view you are not viewing, or the view will be overwritten with whatever you are currently viewing. * Don't navigate away from a view until you've saved any changes you've made to it. * When dragging to reorder, hold the click long enough, or you'll get an error or dialog box for "Add Files or URLs". If this pops up, click "Cancel" and try to click/hold/drag the view again more slowly. * Don't forget to save the project after making new views or changes to views. * Use the [History sidebar](/instructions/interacting-with-microreact-projects/project-history) to undo accidental changes or deletions. * A [Note panel](/instructions/adding-and-editing-panels/note-panel) can be used to tell a story and either link to several saved views or to describe the data on a saved view. # Creating a Project There are multiple ways to create a project. You can start from a copy of an existing project or start from scratch. If you start from an existing project, the data underlying that project can then be replaced with different data, so that the configuration of the visualisation stays the same even as the data changes. **`Note`**: It is also possible to [create a project via API](/api/creating-projects) {% hint style="info" %} Newly created projects are not saved on Microreact servers until you click the save project button. {% endhint %} ## Copy an existing published project 1. From within a project, click on the disk icon in the top-right corner. 2. Select "Save as a New Project" and give the project a new name (the Project name defaults to being the same as the original being copied, so best practice is to give the new copy a new name) 3. This brings you to the new copy, and you can begin making edits as needed. If the same overall configuration is desired, with different data underneath, simply **replace the data**. ![](/files/lQ6p5GBluVtWHBXD9Sej) ## Upload data files into new project Navigate to ![](/files/HPIQASTZkguUXj5qkPaN) ![](/files/LWDQ5IYs6T2G3ipGozPb) 1. Add [supported files](/instructions/creating-a-microreact-project/supported-file-formats) using one of these methods: 1. drag and drop the files to the upload page, 2. click on the Plus Button (bottom right) and choose `Browse Files`, or click on the "`Drop files here`" area, and select the files from your computer, OR 3. link to externally hosted files. Click on the Plus Button (bottom right) and choose `Add URLs`. 2. Wait for the files to be fetched and processed. 3. Choose the ID column which identifies each row, then click `Continue`. The ID column is the ID that is unique to the row and shared across all data files being included in the Microreact project. 4. If you added a tree file, choose the metadata column which contains tree leaf labels then click `Continue`. 5. If you added a network file, choose the metadata column which contains network node labels then click `Continue`. 6. To [save the project](/instructions/saving-and-sharing-projects#the-save-project-dialog), click on the save project button (![](/files/-MYoh7LUMnxAq87WrNU7)). 7. ![](/files/StBYYRd0eDphN62xtY7b) ## Upload an offline .microreact file Microreact projects can be exported/downloaded from the server as entire projects, in .microreact file format. These can be shared and re-uploaded by other users. The .microreact file contains all configurations as well as all data from the original project, so sharing should be done with care. The file can be dragged onto the UPLOAD page and adapted as needed. # Supported File Formats ### Required Files Only a **data file** is required for creating projects. All other files are optional. ### Data / Metadata File Formats * [Comma-separated values ](https://en.wikipedia.org/wiki/Comma-separated_values)(`.csv`) * [Tab-separated values](https://en.wikipedia.org/wiki/Tab-separated_values) (`.tsv`) * Microsoft [Excel Office Open XML](https://en.wikipedia.org/wiki/Office_Open_XML) (`.xlsx`) or [Excel Spreadsheet](https://en.wikipedia.org/wiki/Microsoft_Excel#File_formats) (`.xls`) * [OpenDocument Spreadsheet](https://en.wikipedia.org/wiki/OpenDocument) (`.ods`) * [dBase database](https://en.wikipedia.org/wiki/.dbf) (`.dbf`) * Google Sheets (learn [how to link Microreact to GoogleSheets](/instructions/tips-and-faq/link-microreact-projects-to-google-sheets)) Note that .txt is not a supported file type. .txt files must be converted to a supported file type before upload. (TIP: In some cases, this is as simple as changing the extension on your file.) ### Tree File Formats * [Newick format](https://en.wikipedia.org/wiki/Newick_format) (`.nwk`, `.newick`, `.tre`, `.nhx`, `.tree`, or `.treefile`) * [Nexus format](https://en.wikipedia.org/wiki/Nexus_file) (`.nex` or `.nexus`) ### Network File Formats * [DOT graph description language](https://en.wikipedia.org/wiki/DOT_\(graph_description_language\)) (`.dot`, `.gv`) ### Geographical Features * [GeoJSON](https://en.wikipedia.org/wiki/GeoJSON) (`.geojson` or `.geo.json`) ### .microreact files * [A previously saved microreact project](/instructions/saving-and-sharing-projects) (`.microreact`) # Metadata Data This is the only file required for a Microreact project. ## Required columns Only an identifier for your data rows is required. The ID column must be unique (i.e. each row has a unique ID value). Note that the column does not need to be named "ID" as a header, although it can be [renamed ](#renaming-columns)as such. **Proper visualisation in Microreact requires a single ID column that uniquely identifies each row of data in each of the related files.** * if your data uses a combination of two or more columns to uniquely identify each row, then you will need to concatenate those columns into a single-column ID before importing the data.\ **`TIP`**: Use Data-flo's [columns-concatenation](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md) adaptor before importing the data to Microreact. * the ID values should be shared across files. IDs are the linking values that allow panels to interact with one another. * if a user changes the ID column name while updating the metadata table in Microreact, they will receive a warning message prompting them to select the correct ID column. This is necessary for the Microreact visualizations to function properly
## Optional columns In addition, your [data file ](/instructions/creating-a-microreact-project/supported-file-formats#data-file-formats)can contain the following columns: | column name (default) | other panels | column contents | | ------------------------ | --------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------- | | **`latitude`** | [map data](/instructions/creating-a-microreact-project/map-panel) | Decimal latitude ([WGS84](https://en.wikipedia.org/wiki/World_Geodetic_System)). | | **`longitude`** | [map data](/instructions/creating-a-microreact-project/map-panel) | Decimal longitude ([WGS84](https://en.wikipedia.org/wiki/World_Geodetic_System)). | | **`date`** | [timeline data](/instructions/creating-a-microreact-project/timeline-panel) | Parsed as date (ensure that [formatting ](#date-formats)is not getting misinterpreted if using a program like Excel) | | **`year`** | [timeline data](/instructions/creating-a-microreact-project/timeline-panel) | Parsed as number (i.e., 2016 and 16 are not the same year). | | **`month`** | [timeline data](/instructions/creating-a-microreact-project/timeline-panel) | Parsed as number (i.e, 03 and 3 are both parsed as March). | | **`day`** | [timeline data](/instructions/creating-a-microreact-project/timeline-panel) | Parsed as number. | | **`ColumnName__colour`** | | Assign a specific colour to a data attribute. | | **`ColumnName__shape`** | | Assign a specific shape to a data attribute. | ### Formats * [latitude/longitude](/instructions/creating-a-microreact-project/map-panel) * [dates & date parts](/instructions/creating-a-microreact-project/timeline-panel) ### Defining colour Microreact can colour by any column, and when that column is selected for colouring, colours from the selected palette will be automatically (randomly) assigned to column values. Sometimes, however, you may want to predefine which colours are used for which values. When specific colours are desired, you can use a separate column to define the colours and set specific colours for specific values. If you want to colour by a column named `Country` you would add a new column called `Country__colour` (or `Country__color`) containing colour values. Colours are defined using standard HEX codes or valid HTML5 colour names. A colour wheel allowing you to pick colours can be found here: . **`TIP`**: Use Data-flo to create the new column and set its values using the [extend-datatable](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md) adaptor. ### Defining shape You may want to change the shapes on your Microreact panels, e.g. making the leaf nodes on a tree more meaningful via specific shapes. To predefine the shapes for a column named `Country` you would add a new column called `Country__shape` containing shape values. **`TIP`**: Use Data-flo to create the new column and set its values using the [extend-datatable](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md) adaptor. Shapes are defined using the following values: * `circle` * `diamond` * `dot` * `heptagon` * `heptagon-inverted` * `heptagram` * `heptagram-inverted` * `hexagon` * `hexagram` * `octagon` * `octagram` * `pentagon` * `pentagon-inverted` * `pentagram` * `pentagram-inverted` * `plus` * `cross` * `square` * `star` * `tetragram` * `triangle` * `triangle-inverted` * `triangle-right` * `triangle-left` * `chevron` * `double-chevron` * `chevron-inverted` * `double-chevron-inverted` * `chevron-right` * `double-chevron-right` * `chevron-left` * `double-chevron-left` * `wye` * `wye-inverted` See for shape examples. ## Renaming columns Column names can be changed in the Data even after being imported to Microreact.\ Note, however, that these changes may not persist if the data are refreshed and updated via API. {% embed url="" %} Changing the name of a column after importing to Microreact {% endembed %} # Tree Data ### Tree File Formats * [Newick format](https://en.wikipedia.org/wiki/Newick_format) (`.nwk`, `.newick`, `.tre`, `.nhx`, `.tree`, or `.treefile`) * [Nexus format](https://en.wikipedia.org/wiki/Nexus_file) (`.nex` or `.nexus`) SNPs in the tree file need to be represented as numbers to reflect the branch lengths. ### Tree Data Configuration #### File Within the tree panel configuration panel, a local tree file or network location (URL) can be specified. #### Labels column In addition, the column in the metadata table that contains the leaf labels must be specified. The tree data must relate to the metadata table, so the tree file must contain a column containing values matching values in one of the metadata columns, which is selected here as the Labels Column. The column can have any name; the requirement is only that the values in that Labels Column must be in the tree file. ![](/files/J7WLMtWCTiE3Ur1OFslN) ### Hide data without matching tree leaves There is also an option to "Hide **#** data entries without matching tree leaves." This toggle appears in the `Edit Panel: Tree` interface when there are rows in the metadata table that do not have matching entries in the Tree File. Toggling this on removes the metadata rows that don't have a match, so that those rows are no longer part of any of the panels.
# Map Data ​Maps are created using MapBox. Map data are pulled down from MapBox.com, but **no information is sent to MapBox**. Location data in your Microreact project are not shared with MapBox, but rather they are overlaid onto the maps pulled from MapBox. ## ​​Location data formats Locations can be encoded via either geographic coordinates (latitude and longitude) or ISO 3166 codes. By default, Microreact expects columns for latitude and longitude (in positive and negative numbers). As an alternative to coordinates, a single column for [ISO 3166](https://en.wikipedia.org/wiki/ISO_3166) codes can be provided. ### Latitude and Longitude Latitude and Longitude columns must be in +/- values, not East/West/North/South. [Data-flo](https://data-flo.io/) software can be used to convert west/south values to negative numbers. [See how](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md). ![Data configuration for coordinates mapping](/files/GXvAFnwNDCXXhcRDsUoO) ### ISO 3166 Codes For country level codes, any two-letter code from the official [3166-1](https://en.wikipedia.org/wiki/ISO_3166-1#Current_codes) list can be used. For the UK and USA, two-letter codes from the the [3166-2](https://en.wikipedia.org/wiki/ISO_3166-2#Current_codes) lists can be used. **`Note`**: if you would like to add more lat/long codes for other country 3166-2 codes (or notice an outdated code) please send a pull request for this [file](https://gitlab.com/cgps/microreact/data/-/blob/master/iso-3166-codes.json) (or, if you do not know what a pull request is or cannot send one, submit the request as feedback using the "send feedback" menu in the [left sidebar](/instructions/navigating-the-site)). To expedite your request, include the codes and locations in the format below: ``` Code in double-quotes followed by a comma longitude followed by a comma latitude followed by a comma location/region name in double-quotes "BE-VLG", 51.0962462, 4.1786291, "Flemish Region" ``` ![Data configuration for ISO 3166 mapping](/files/YRyUYxCOCMBOOKtwICd6) ![Principal Subdivisions options](/files/oPgI2c6xrY4huMczKKc8) ## GeoJSON boundaries In addition to data location data, if a [**geojson**](https://en.wikipedia.org/wiki/GeoJSON) file is imported, then a [choropleth ](https://en.wikipedia.org/wiki/Choropleth_map)will be rendered on the map. Adding a GeoJSON file to your Microreact project is the only way to create a choropleth on your map. The colour will be based on an aggregate of the number of IDs within each geoJSON boundary. ![](/files/3uHndGXHx5gYwvXWz4Il) ### Sourcing a GeoJSON file GeoJSON files are shape files in a specific format. The internet has vast amounts of boundary shape data. There are also sites for converting files from one format to another, so you can create a GeoJSON from another shape file format. **Search online** for files containing the type of boundary and geographic area you need. Helpful search terms: geojson, shapefile, country polygons, administrative boundaries, regional borders, cartographic boundary Here are a few ideas (WARNING: CGPS cannot confirm safety or correctness of data from these sites) * * [United States Census Bureau data](https://data.census.gov/cedsci/map?layer=VT_2020_040_00_PP_D1\&loc=38.8800,-98.0000,z3.0000) * * * * * * Convert other shapefiles to GeoJSON format using an online converter tool like ## Troubleshooting If your map shows points in an unexpected place, you will need to fix your latitudes & longitudes. There are two main reasons records show in the wrong place. #### Lacking a minus sign for S/W coordinates Microreact requires South and West coordinates to be coded with negative numbers. If you see entries showing in the wrong place (e.g. mapping in China instead of in North America, or in Ethiopia instead of Tanzania), you may need to add a minus sign. This can be [done in Data-flo](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/qgXPCpc1OS5TiND7tN3x#change-south-west-geographic-coordinates-to-negative-numbers). #### Ambiguous Geocoding determined lat/long If you are using Data-flo or another method of geocoding to determine the latitude and longitude, ambiguities like these might be causing misinterpretation of your locations: * Manchester is a city in England and also a city in New Hampshire, USA * 15220 is a postcode for Vitrac France and also for Pittsburgh, PA USA * Washington is the name of one US State, one US District, 21 US Cities, and 30 US Counties Being more specific in your geocoding step can fix these problems. For tips on doing this in Data-flo, see [these instructions](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/6FWxQP1tKVJQQKdgt9sG#misinterpreting-placecolumn). # Timeline Data A timeline can be created from a single column containing temporal data in supported [formats ](#date-formats)(e.g. yyyy-MM-dd) or from multiple columns specifying the time parts (i.e. year column, month column, day column). ## Column options ### One date column, specifying `Temporal Data Column` ![](/files/TWslB0OsfjnzEnb9lIn4) ### Three date part columns, specifying `Year Column`, `Month Column`, and `Day Column`. ![](/files/6DocMXG5E6yrT4Y8ZHe0) ## Date formats Microreact can interpret several date formats correctly, based on [Unicode ](https://www.unicode.org/reports/tr35/tr35-dates.html#Date_Field_Symbol_Table\))Technical Standard #35. [These formats include](https://www.unicode.org/reports/tr35/tr35-dates.html#table-date-field-symbol-table) the following. Note that capital Y and capital D are also acceptable and are automatically converted to lowercase and treated as lowercase; this adaptation was included to allow backwards-compatibility with Moment.js formats. * yyyy-MM-dd (e.g. 2022-01-20) **THIS IS THE PREFERRED FORMAT (ISO 8601)** * yyyy-M-d (e.g. 2022-1-5) * dd/MM/yyyy (e.g. 20/01/2022) * yyyy/M/d (e.g. 2022/1/20) * M/d/yyyy (e.g. 1/20/2022) * MMMM dd, yyyy (e.g. January 20, 2022) * MMM dd, yyyy (e.g. Jan 20, 2022) * MMMM ddo, yyyy (e.g. January 20th, 2022) * MMM ddo, yyyy (e.g. Jan 20th, 2022) ### Troubleshooting Note some that data coming from other programs may be encoded in a way that is inaccessible to Microreact. For example, a custom datetime format in Excel may display within Excel as "2022-08-16 15:30" but may display in Microreact as "44789.64632". Possible ways to fix misinterpreted dates: * In external program, save file as CSV, then open in a text editor to verify proper formatting * In external program, set the column format as text instead of date * In external program, use ISO 8601 dates (yyyy-MM-dd) and set column date format accordingly * **Reformat the dates using** [**Data-flo**](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md)\*\*\*\* *** # Network Data [Network ](https://en.wikipedia.org/wiki/DOT_\(graph_description_language\))files must be in .dot or .gv format. Within the network panel configuration panel, a local network file or network location (URL) can be specified. In addition, the column in the metadata table that contains the network node labels must be specified. ![](/files/6EYGnkUtToztkGXxJyze) DOT files can be created in [Data-flo](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md) using the [datatable-to-graph](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md) adaptor and/or the [graph-to-dot adaptor](https://github.com/microreact/docs/blob/main/instructions/creating-a-microreact-project/broken-reference/README.md). # Matrix Data ### Matrix data **File formats**: .csv **File configuration:** Users can upload the matrix files with the metadata when creating a new project. Alternatively, users can navigate to the Editing Existing Panels menu and within the Matrix panel configuration menu, a local .csv file or the location (URL) of your matrix file can be specified.
Your matrix file will typically consist of both rows and columns of unique IDs. The intersecting values (table cells) could represent the relationship between each ID. Note that any unique IDs included in the matrix file must match the unique IDs in the metadata file in your Microreact project. An example is shown below with representing a matrix with the number of SNP differences between the sample IDs in the metadata.
## # Adding and Editing Panels A Microreact project comprises any number of customisable panels that interact with each other. ## Types of panels A panel within Microreact contains one of several data types which can be added and edited as described in the [Adding and Editing Panels](/instructions/adding-and-editing-panels) section. All panels are configurable. * [Data Table](/instructions/adding-and-editing-panels/data-table-panel): spreadsheet-style table showing metadata, which can be used to filter and slice data shown in other panels * [Tree](/instructions/adding-and-editing-panels/tree-panel): visualisation of a phylogenetic tree file * [Map](/instructions/creating-a-microreact-project/map-panel): data as markers using latitude/longitude from data table, as well as any imported geojson information * [Timeline](/instructions/creating-a-microreact-project/timeline-panel): chart of a timeline specific to selected date-time data * [Network](https://github.com/microreact/docs/blob/main/instructions/adding-and-editing-panels/broken-reference/README.md): visualisation of a network data file * [Charts](/instructions/adding-and-editing-panels/charts-panel): predetermined or fully customised charts visualising data from the data table * [Note](/instructions/adding-and-editing-panels/note-panel): text panel that can contain a story being told, instructions, links, etc. * [Data Slicer](/instructions/adding-and-editing-panels/data-slicer-panel): A simple filter based on values in a single data column Each panel is configurable using the ![](/files/-MZCqB_W9YSHxHGSKMW0) button found in the top right of the panel. A panel can be temporarily maximised using the ![](/files/-MZIFBrtEMCyiM68mOx9) icon and then minimised again to show all panels. This allows deeper investigation and interaction with a single panel, while also allowing more panels to interact on a single dashboard. ## Adding, Editing, Removing panels The same menu is used for both adding (creating) new panels and editing existing panels. To do either, click the pencil icon (add or edit views button) ![](/files/-MYyUqbQHVppM_V6eSs4) in the project controls toolbar (top right of view), which brings up the following menu: ![](/files/bLIVXdVdcNaV1pFY5Sor) ### Add (create) new panels ![](/files/-MYyUqbQHVppM_V6eSs4) * Choose the [Panel Type](https://github.com/microreact/docs/blob/main/instructions/adding-and-editing-panels/broken-reference/README.md) you want to create (e.g. `Create New Tree`) * Drag the grey rectangle and drop it onto the area of the page where you want the new panel to be added. * **`TIP`**: To **overlay** on an existing panel so that only one of them is visible at a time, allow the grey box to totally overlap with the existing panel. Otherwise, the new panel will take half the space and the existing panel will take the other half (as in the image below) * You can click the `X` button in the "add" dialogue (or press the Escape key) to cancel. * Adjust panel sizes as needed by dragging their edges. * Configure the panel as described in the following section. ![](/files/-MYyWyeIURLpPJABZyKz) ### Edit Panel: Data settings ![](/files/-MYyUqbQHVppM_V6eSs4) To edit the data for an existing panel, you can either 1. click the hamburger icon on the panel you want to edit, and select "edit" from the popup menu, or: 2. Click on `add or edit panels` button (pencil icon ![](/files/-MYyUqbQHVppM_V6eSs4)) from the project controls toolbar 1. Choose `Edit Existing Panels` 2. Choose the panel you want to alter Note that the panel will be listed with the [name it has been given](#renaming-panels) in the panel's title lozenge. ![](/files/LHCnGyyQ4soCs8eYdDdO) * Edit the panel's data settings: * [Map panel ](/instructions/creating-a-microreact-project/map-panel)(map type, latitude & longitude columns, GeoJSON file) * [Network](/instructions/creating-a-microreact-project/network-panel-configuration) panel * [Metadata (data table) ](/instructions/creating-a-microreact-project/metadata-column-types)panel (data file, id column, Column names, Colour palette type). To change the data source, you can select either a file or enter a URL here * [Timeline ](/instructions/creating-a-microreact-project/timeline-panel)panel (data type, columns) * [Tree ](/instructions/creating-a-microreact-project/tree-panel-configuration)panel(tree file, column in metadata table with labels) * [Data slicer ](/instructions/adding-and-editing-panels/data-slicer-panel)panel (columns used for slicing, grouping, display mode, sorting) ### Moving & Resizing Panels See silent video below for a demo. Panels can be moved by clicking on the Title lozenge (i.e. where it says "Slicer", "Tree", etc by default) and dragging to the desired location. . The darkened border will show where the panel will go when the dragging is let go. If an entire other panel is framed, then the panels will overlay one another. This is a good way to save space or to hide panels that are irrelevant for a saved view. Panels can be resized. Click & drag the edge of a panel to change the width or height of the panel. Remember that you can also maximise a panel temporarily. {% embed url="" %} ### Renaming Panels Panels can easily be renamed to clarify their contents. This is especially helpful when a view contains more than one panel of the same type. The name added here will show up in the "Add or edit panels" listing. Silent video: {% embed url="" %} ### Removing Panels To delete an existing panel: * Click on add or edit panels button (pencil icon ![](/files/-MYyUqbQHVppM_V6eSs4)) from the project controls toolbar * Choose `Edit Existing Panels` * Choose the panel you want to delete (e.g. Map) * Click the `Remove` button under the list of panels. ![](/files/-MYzKsc4m62ZanUUmbge) # Data Table The Metadata Table panel shows the data that was uploaded as a spreadsheet (usually CSV) either at initial upload or during addition of more data tables using the add panel tool. See [Metadata Data](/instructions/creating-a-microreact-project/metadata-column-types) for data source guidance. The look of the Data Table can be formatted and sorted, and the table can be used to select (highlight) data on other panels or filter data on other panels. ## Formatting table ### Show/hide column in table **To hide a column**, you can either click on the icon ![](/files/SD4rLQdSyOfBnVX2SFKh) or uncheck the column in the Columns configuration menu (lozenge) **To show a column**, the Columns lozenge and re-check the column's checkbox. ![](/files/-MZYBCuNy-sEUns_draw) ### Set column width in table The width icon will **automatically set the width of the column** to fit the contents. For columns with a lot of text this will expand the column enabling all the data to be viewed, and for columns with short headers and values, this will shrink the column. ### Renaming columns See [Renaming columns](/instructions/creating-a-microreact-project/metadata-column-types#renaming-columns) ### Reorder columns Column order can be manually changed. Hover over the left side of the column name, and when the hand icon appears, click and drag the column right or left to the desired location.

Reorder columns

### Set row density in table The density of the rows can be altered by clicking on the density lozenge which brings up the following dialog ![](/files/-MZYBlxyBIpG48EvG537) ### Sort table by selected column The AZ button **sorts rows in ascending order** The ZA button **sorts rows in descending order** ## Selecting data To select (highlight) data across other panels by using the data table, click in the checkboxes on the left side of a row. ## Filtering data Any column in the data can be used to filter the data visualised on all panels. To filter by a column, hover over the column name in the metadata table header, and click on the filter icon. This will bring up a dialog box with options for filtering the data, depending on what kind of field the column is. {% hint style="warning" %} **Always** click on the **APPLY FILTER** button to apply the filtering conditions to the column {% endhint %} ### Filter by condition Conditions are dependent on the type of column. Choose the condition and the value to apply as the filter.
### Filter by value To filter the column by selecting one or more specific values from the dataset, click on **filter by values** * **Search** for specific text (or scroll) * **Select** those values you want to include ![](https://lh4.googleusercontent.com/Ww07RjQcZ0XM5DISJSB3ZQ1qdUdkv5D6RmlXx6JJP8iJohnsr2QUJCUfoU7PO3Cxtvii3o3eWtCVAwwoOwbMK7bbdZ3XLwf9VaNIVI_yxZLxVqHEVKIECuN3eCGCIia8lYTZbkUMi5QTdH7qlE0tDEChY4C7KZPNbP_xyzgbyTNlALOrzTPkAhwCdI9W) ### Filter using a list Users can also search metadata with a comma-separated list. Navigate to your metadata table to the column of data you would like to filter or search on. Choose “Text in comma-separated values” as your filter by condition. \ Type or copy/paste your comma-separated values into the filter criteria. Use the Reset Filter in the search bar to clear the filter. ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXd5-AdVIV2-ZRaO6A1pzfJdbnZyp0cQPIEEXwPEFYcu8l4INdabxRkF8yrThcBl00utY4qGoyHwaMnhg9ceIg7s8gpt-ZkuBwEsYFCnpdRR7zOqqGxh4ctU-ia3E72wEgAm6bOE6JIOVmmeif5e4wMR8Zt5?key=eWiUFSXUJbPgi8wi6uipZA) \\ # Map See [Map Data](/instructions/creating-a-microreact-project/map-panel) for data source guidance (including what to do if markers seem to be showing up in the wrong place on the map, which is usually due to W/S lat/long instead of negative numbers, or due to an ambiguous place). The Map panel uses [Mapbox](https://www.mapbox.com/) to create the basic map, and only requires latitude & longitude to place your data correctly. No data gets sent to Mapbox; rather, your data are overlaid onto data from Mapbox. Choropleth GeoJSON files must be created specifically, but otherwise no specific maps must be created. ## Interactive Map Settings Clicking the configure icon ![](/files/-MZCqB_W9YSHxHGSKMW0) on the top-right corner of a map panel brings up menus for configuring the [markers ](#markers-menu)and overall map [style](#style-menu), as well as two [quick-filter options](#filtering) to use the map panel for filtering the rest of the Microreact panels. ​​​ ### Markers menu ![](/files/-MZxI_CBb6aEtvu94ipz) * Map markers can be toggled on and off * The size and opacity can be changed using the slider * If the uploaded data included a GeoJSON file, the markers can be grouped by the boundaries defined in that file by selecting the 'Group by region' toggle * Turning on the '**Scale markers**' button will scale each marker's size based on the number of samples at that map location. * There are 3 **scaling functions** to choose from, with SQRT being the option where the area is proportional to number of samples * A **minimum** and **maximum** pixel size for the scaled markers can also be set so that the markers are not too small or become too dominant. ### Style menu The overall style of the map can be changed. "Light" style is the default. Below is the same map with different styles:

Map styles

### Regions menu (Choropleth) To color regions on your map, you must first add a GeoJSON file to your project. See [Map Data](/instructions/creating-a-microreact-project/map-panel#geojson-boundaries) for more information. When the project contains a GeoJSON file, the choropleth will automatically be rendered, shading the regions based on an aggregate of the number of IDs (entries) in your data that fall within each geoJSON boundary. ![](/files/3uHndGXHx5gYwvXWz4Il) When GeoJSON regions are included in the data, the map menus will include a new lozenge called "**Regions**" with a few customisable options (including toggling the region features on/off). The calculation used for depth of colour can be changed, as well as which column is being aggregated.
## Filtering ### Lasso (polygon lasso) Samples can be filtered based on their location by using the lasso tool ![](/files/-MZx3hvMzs_o3CV0imdi) ![](/files/-MZxVaV27AccHFlKW81G) ### Viewport filtering The viewport button ![](/files/-MZxWBi3TqSeYcR0R4vu) filters dynamically based on what is *currently visible in the map* (the viewport). When this **Viewport Button** is selected (the button goes dark), the other panels are filtered to show only the data represented in the visible area of the map. Zooming or panning on the map will live-update the rest of the panels so they remain in concert with the visible portion of the map. ![](/files/spDTRILrjwaMhttjVQHk) ![Panels being filtered to show only what is visible in the Viewport](/files/-MZxWfv3hoasx5uYGFbC) {% embed url="" %} Viewport filter interaction {% endembed %} # Timeline Timelines show aggregated data as a histogram. See [Timeline Data](/instructions/creating-a-microreact-project/timeline-panel) for data guidance. ## Panel Overview The following image gives an overview of the anatomy of the timeline panel. The Timeline Overview will always span the entire date range of the Microreact Project's data, regardless of what filters are applied. The Filtered Timeline will only show the portion of the data that has been selected (by [defining a date range](#defining-the-date-range) or by selecting data in another way, such as using a [data slicer](/instructions/adding-and-editing-panels/data-slicer-panel)) ![](/files/-MZxkN6GPqcSP2uvRHTk) ## Timeline configuration Click on the configuration icon ![](/files/-MZCqB_W9YSHxHGSKMW0) to change the timeline type (bar chart or normalised bar chart) .\ ![](/files/smFP3denZngwsEjltgBk) #### Area charts **`TIP`**: To create an area chart over time, you can create that using a Chart panel instead of the timeline panel. **Use an** [**Area Chart**](/instructions/adding-and-editing-panels/charts-panel/area-chart#secondary-timeline) **as a secondary timeline**.

Area chart as secondary timeline

### Bar Chart Shows number of samples per date unit, stacking each colouring category ![Bar Chart example](/files/-MZxygwzpmQgl0b4TILV) ### Normalised Bar Chart Shows proportion of samples per colouring category, regardless of the total number of samples in each date unit. ![Normalised Bar Chart example](/files/-MZxyoqhkmGfl2XRuvUV) ## Defining the Date Range {% embed url="" %} Silent short video showing Timeline filtering options {% endembed %} The date range can be set by typing the start and end dates, or clicking on the calendar icons and selecting a date, or by dragging the Timeline Overview endpoints.
Using the calendar icons

Using the Timeline Overview endpoints

#### Dragging the window Once a date range has defined, the selection window on the Timeline Overview can be moved around to look at the same size window over different timeframes. To drag the window, hover the mouse over the bottom part of the timeline overview until a dark box appears, and drag that box to the left or right. ### Units The units of the timeline features can be changed using the unit button in the panel configuration menu. This can be used to adjust the width of the bars when either of the bar chart types are selected in the type menu.\\ ![](/files/-M_PWFwMZycNLjL6juWR) ### Playback ![](/files/YVjQYWOfSry02Yhn6OTr) The timeline can be played to show changes over time. The unit of time can be changed, and the speed (number of seconds each unit is displayed) can be changed.\ If the endpoints on the Timeline Overview have been set, then the playback will continue from the endpoint onward. To begin midway through the timeline, select only the first unit of the region you wish to play. {% embed url="" %} # Tree The tree panel creates a visualisation of a Newick file. Multiple basic styles are available, and many details can be configured. See [Tree Data](/instructions/creating-a-microreact-project/tree-panel-configuration) for Tree data source guidance, including hiding all metadata that lacks a matching tree leaf. ### Basic tree settings & controls {% embed url="" %} Some basic tree settings and interactions {% endembed %} ## Tree style The tree style can be changed by clicking the panel configuration button, and then hovering over the tree button and selecting one of the options ![](/files/49LasgggeC8PIIimT0E0) ![](/files/DqariPB3p8xkEQrG2l19) ## Tree Controls ### Node, Label and Branch controls ![Nodes & Labels options](/files/d0iSIQelhe7XiKyMCyZX) #### Leaf Properties * If leaf borders are turned on, they will be the same colour as the node unless they have no colour, in which case the border will be dark grey. * When turning on the leaf labels, the labels will be shown in a sparse fashion so that overlapping leaf labels are hidden. **In order to see all leaf labels, zoom in** (see below). * When displaying leaf labels only those which do not overlap each other will be displayed. You can think of these as sparse labels. As you zoom in on the tree more labels will be revealed. * **Align leaf labels:** move the labels away from the nodes and place them flush to one another * **Colour leaf labels:** they will be the same colour as defined within the menu #### Internal Properties * The **internal nodes** toggle will display internal nodes if available * If internal nodes have label properties, the **Internal Labels** toggle will turn those on, and the slider will change the label size * **Filter Internal Nodes** is an option when Internal Labels is selected, and will * Branch lengths can be displayed and defined using the **Branch Lengths** toggle & slider * The **colour internal edges** toggle will colour edges connected to leaves using same colour as the connected leaf node ## Metadata blocks ![](/files/QSNTXoJMDTGwp4UhGIEb) These are coloured shapes added alongside the tips of the tree to show features that differ between samples. This information adds context to the tree, and can help identify sample metadata correlating with genotype. ![](/files/AQTqgoMbbTXe5ByiEYwE) When adding metadata blocks, the blocks to be displayed can be selected from all available columns, and the metadata block characteristics can be changed. The colours shown are defined within the menu, and show up in the Legend side panel. To change the colours, select each Colour Column within the menu, set the Colour Palette, and do this for each column you'd like to change. **`TIP`**: Remember that the Colour Column option should be returned to the column you want to use as the main Colour Column on your Dashboard or view. **`Caution`**: once you have saved views in the views sidebar, there is no way for Microreact to know which views you want to apply these colour changes, so you must make the changes and save them on each saved view, using "Update View" option. This effort can be avoided by setting the colours at the start. One robust way to do this is by using the [Colour Definition "\_\_colour" option](/instructions/creating-a-microreact-project/metadata-column-types#defining-colour). **Block Headers** defines the size of the label font.\ **Block Size** defines the width of each block.\ **Block Gap** defines the space between blocks, if multiple blocks are added. ![](/files/DdJ7j6VHmuW3qGvqMLIc) ## Moving and Zooming Clicking on the white space next to the tree will allow the tree to be dragged around the panel. The tree can be zoomed (in or out) by using a mouse wheel. Holding the control (Windows)/command (Mac) key or alt (Windows)/option (Mac) whilst rotating the mouse wheel will zoom the tree horizontally and vertically respectively. The configuration icon makes zoom controls show/hide. Clicking the +/- icons zoom in and out, while clicking the central icon determines whether the zooming happens in all directions, horizontally, or vertically.
#### Manipulating the tree Hovering to the left of a parent node will highlight all the children node branches in green ![](/files/-MZsb1qAzRZbVtxrcvk-) Right-clicking on this selected parent node will bring up a contextual menu that allows several functions ![](/files/-MZsbZKc_PvMgLlpko_y) ### **View Subtree** This will display just the child nodes of the selected parent node. If you have trouble hovering over the desired child node, zoom in until you can select the desired node to right-click on it. ![](/files/-MZsbt5uAkhXRS9RGQ9R) ### **Collapse subtree** Collapse all the child nodes into a single branch ### **Rotate subtree** Rotate the child nodes around the selected parent node ### **Set as Root (Re-root)** Set the selected node as the root of the tree ### **Export Leaf Labels/Export Newick File** Export the selected subtree as a text list of the leaf label names or as a newick file containing just the subtree. The features above refer to a subtree. Right-clicking away from tree within the panel will display a contextual menu ![](/files/-MZwTujsK2QhUpD387k4) ### Fit in panel The ![](/files/-MZwV8LTuYjCVbH7-CQk) button will fit the tree to the current panel size ### Redraw Original Tree Clicking on this returns the tree state to it's original topology and displays all the leaves ### Midpoint Root Clicking this enables the tree to be midpoint rooted if it was not rooted prior to upload ### Export The tree can be exported as a text file with a list of leaf labels, a newick file or as a PNG image You can also export the tree as a SVG file via the ![](/files/-MZwqZxocO7wNUtJQYfD) button ![](/files/-MYozXe-YMihqtN51Wq-) ## Filtering Data You can filter the tree data by * clicking on an internal node in the tree or * using the **lasso** tool ![](/files/-MZx3hvMzs_o3CV0imdi) to draw a polygonal region * Filtering on other panels that are linked to the tree (e.g. selecting via the data-slicer) ![](/files/-MZx47jk4D5M2FF4_tZU) # Network See [Network Data](/instructions/creating-a-microreact-project/network-panel-configuration) for more information about the file underlying a Network panel. Networks can be force-directed or undirected. If a `__shape` column is included in the metadata table, then the network panel nodes can be shaped. Examples of simple network panels in two projects (directed and undirected):

directed network graph

undirected network graph

**`TIP`**: Data-flo can be used to set node shapes (using [extend-datatable](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/KBiPjK2QHTtxS2IkmQ5x) adaptor). **`TIP`**: Data-flo can be used to add force-direction to the network file (using [force-directed-layout](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/oBd0yPlaWarcS7WNkSvX) adaptor). # Data-slicer **The Data Slicer provides an interface for filtering the Microreact project's display by limiting the data shown, based on a preselected column.** The filtering done with a Data Slicer is the same functionality as filtering from within the metadata table, but simplified to show only a single column. It's useful when the data contain many columns, or when there is a column frequently used for filtering. Silent demo showing data slicer: {% embed url="" %} Adding and configuring a data slicer panel {% endembed %} ### Add a Data Slicer panel using the edit panels button ![](/files/XcMtTPK5Zh15QXX1GBlP) * Choose a data column that you want to filter the data by (each of these will become a checkbox) * Choose a Group if you want sub-sections in the listing of checkboxes and the option to colour by a different level of detail. * Choose whether to show bars (and whether to colour them). The bars represent the number of data rows represented by that value. * Choose whether to sort the existing values in alphabetical order or by frequency of occurrence. ![](/files/OpdNRV4HT0wqYN2RA0cY) # Chart overview Charts let you visualise the data from your Data Panel. Many types of charts are available. Between the standard Chart Types and the Custom Vega-Lite charts available, there is a vast amount of customisability for visualising your data. You may want to play with multiple options to see what works best for the story you are trying to tell. Most charts use [X-axis, Y-axis](#x-axis-and-y-axis), [Colour](#colour-column), and [Facet](#facet-column), and can accomodate formatted [labels](#label-angles-and-size). ## Creating a Chart Regardless of the type of chart, you will create a new chart panel using the ![](/files/-MYyUqbQHVppM_V6eSs4) icon. ![](/files/GBSobV9UMXkkM37pnOtI)\ [Place the chart panel](/instructions/adding-and-editing-panels) wherever you want it on your dashboard. Click on the Chart Type lozenge to start creating the new chart ![](/files/-M_1xCqV4XQB8KwTxnLb) ![Blank Chart panel](/files/rOzBqRaAedl0B140itzc) ## Chart Type The chart type should reflect the data types being visualised. All charts have a continuous secondary axis, representing an aggregate calculation: **Area chart**: continuous variables for both axes, with [interpolation ](#interpolation)options **Line chart**: continuous variables for both axes, with [interpolation ](#interpolation)options **Bar chart:** one discrete axis and one continuous axis **Circle, Point, Tick charts**: Functionally these are the same, with different markers. The primary axis can be continuous or discrete. **Custom**: Anything possible using [Vega Lite](https://vega.github.io/vega-lite/) specifications can be created here. ### Interpolation Interpolation is a way to approximate values between data points If you have selected Area or Line charts you may want to go back to the chart type menu and select a method to interpolate. ![](/files/-M_24mz-WNER0rFJJO2G) **The interpolate options are** * \*\*\*\*[Linear ](https://en.wikipedia.org/wiki/Linear_interpolation)(piecewise linear segments, as in a polyline) * [Step ](https://en.wikipedia.org/wiki/Nearest-neighbor_interpolation)(i.e. piecewise constant, or nearest-neighbor; alternate between horizontal and vertical segments) * Basis (a [B-spline](https://en.wikipedia.org/wiki/B-spline), with control point duplication on the ends) * Cardinal (a [Cardinal spline](https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Cardinal_spline), with control point duplication on the ends) * Monotone ([cubic interpolation](https://en.wikipedia.org/wiki/Cubic_Hermite_spline#Monotone_cubic_interpolation) that preserves monotonicity in y-axis) ## X-axis and Y-axis By default, the X-axis pops up in chart creation as the primary axis; however, charts can instead be created with the Y-axis as the primary axis by leaving the X-axis variables undefined until after the Y-axis is defined. For example, a [horizontal bar chart](/instructions/adding-and-editing-panels/charts-panel/bar-chart#creating-a-horizontal-bar-chart) is possible by first defining the Y-axis as the discrete variable and then selecting the aggregation on the X-axis. **`TIP`**: To clear the axis data (e.g. to transpose your axes) simply click the "x" in the Axis Lozenge. ## Colour Column Choose the **series** to be coloured (which variables are charted against each other for comparison). **`TIP`**: To remove colour option after adding it, simply click the "x" in the Colour Lozenge. **`NOTE`**: To change the actual colours, you need to use the overall dashboard controls Selecting a colour column requires choosing the column's characteristics and how the chart should be rendered: * Data Type (Quantitative, Temporal, Ordinal, Nominal) affects the default colour palette (categorical or gradient). Change this manually from `Auto` to one of the other options to see how the visualisation changes. * Sort (ascending or descending, according to your secondary axis values) * Stacking ([Stacked, Normalised stacked](#stacked-view-and-normalised-stacked-view), [Row, or Overlapping](#row-view-and-overlapping-row-view))![](/files/rGf8K4doaRBCR0sWhXdr) ### Stacked view & Normalised stacked view Values as discrete or a percentage of the total ![](/files/JXJWMS9RwZj0Ek7Ke1Tq) ![](/files/F5XZIyQlEIPy6OWAE49O) ### Row view & Overlapping row view With Row view, all secondary axes are scaled to fit the largest values. With Overlapping Row View, the secondar axis is not necessarily scaled to fit, and the largest values overlap the other colours. ![](/files/rUa1v34mpNnD3mH7GQaf) ![](/files/LUJLVU0jMmy81qfhioot) ### Overlapping row view: Ascending & Descending Changing from Ascending to Descending (or vice versa) may help to prevent some data from being hidden. ![](/files/LUJLVU0jMmy81qfhioot) ![](/files/axZPe8ZcnhyEcTTlxfHu) ## Facet Column While the Colour Column plots values separately for each Colour Column value, they all use the same primary axis. The Facet Column splits them into separate charts. Setting the number of columns and rows changes the display layout of the charts. Setting one row per facet makes a very similar chart to selecting the "Row view" colour options. **`TIP`**: To remove facet option after adding it, simply click the "x" in the Facet Lozenge. See the same data below, with variations in the colour and facet column options.
Changing the number of columns and rows in the facet options will only affect the compactness of the display, not which data gets shown. It is essentially a way to tell the software how many charts you want to see on your screen at one time. If your data splits into ten facets (ten charts) and you set 1 column & 1 row, you will need to scroll to see each of the charts. This can be useful to manipulate if you want to allow more or less detailed viewing of each chart. ## Label angles & size Changing the label angles and size can be critical to legibility and fast interpretation.\ Labels can be vertical, horizontal, or diagonal. Changing label angles helps legibility and often makes better use of space. ![](/files/wSaNArDelAgwA7Hye1fR) Label sizes change the number of pixels used by the labels, so must sometimes be increased to show longer labels. Compare the following default labels (left) and edited (right)

Turning labels horizontal and diagonal can help

More pixels mean more space for text

# Area Chart An area chart shows changes in quantities over time. It's similar to a line chart, with the area under the line filled in with color. It's best used with multiple lines (**series**), and a continuous primary axis. Generally, the X-axis is the primary axis. The primary axis can be Quantitative, Temporal, Ordinal, or Nominal. It has an automatic setting, but this can be manually set as well. ![](/files/TSaTWDrCaRJxrQAAeP71) ### Secondary Timeline **`TIP`**: A temporal axis works well to show changes over time, and can be used as a secondary timeline on your dashboard. If the data contains a column that aggregates to a larger unit of time (e.g. week number of study), this can be plotted as an aggregated timeline using that column (week number) as the axis. This is a way to simulate the unit changes that are available in the actual timeline panel.

Using an area chart as a secondary timeline, using a temporal axis

Using an area chart as an aggregated secondary timeline, using a week number instead of temporal axis

### Interpolation When choosing your chart type, the default is linear interpolation, but [other options](/instructions/adding-and-editing-panels/charts-panel#interpolation) may be more appropriate for your data. # Line Chart Line charts are useful when the primary axis is continuous (e.g. time) and you want to compare the changes in an aggregated value.
![](/files/dpNUPOSc04WdMVj6ApF7) # Bar Chart Bar charts can be created vertically or horizontally, depending on which axis is defined first. They can be stacked (this is the most common method) or normalised (where each bar fills 100%, and colours within the bar show ratios). Overlapping row view is technically an option, but will likely not show meaningful representations of the data in most cases. **Basic guidance can be found on the** [**Chart Overview**](/instructions/adding-and-editing-panels/charts-panel) **page.** **Labels can be vertical, horizontal, or diagonal, depending on preference and legibility.** ![](/files/5EnME3Zi5nzoYKUTmRq3) **Data type can be manually set, if auto is not producing the colour options desired.** ![](/files/6c3pJdICzuuppKjSc8Eo) **The primary axis can be alpha-sorted in ascending or descending order.**

X-axis sorted ascending and sorted descending

#### Creating a horizontal bar chart {% embed url="" %} Creating a horizontal bar chart instead of the default vertical bar chart {% endembed %} ### Colour views & facets ![](/files/2HLKvvxmgb9ZtMUY7N4s)
### Troubleshooting If your colours are not showing as expected, there may be a misinterpretation of the data type. Check the Colour Menu and change the Data Type from Auto to another option. # Circle, Tick, Point Charts These three chart types function the same way and have the same configuration settings, but slightly different visual marks.
# Custom charts When the standard Microreact charts don't provide the visualisation you need, you can create a custom chart. The Custom Chart option uses a Vega-Lite script to program the visual. First, users can browse the Vega gallery to get ideas for potential visuals to include in your project: Once you know the visual you want to create, you can use Vega-lite Editor (an in-browser tool NOT managed by CGPS) to build and run your code:
The Vega-lite Editor can help to ensure users that their chart is visualising their data as intended. The editor requires access to data in order to test and troubleshoot. To get your data into the Vega-lite editor you can host your file anywhere the provides a publicly accessible link to the data file (your own website, cloud account, etc.) If that's not a convenient option, you can easily create a Github Gist. With a Gist, you can either make it public, or create a secret Gist. Important information about the privacy of secret Gists is available at Github's[ website](https://docs.github.com/en/get-started/writing-on-github/editing-and-sharing-content-with-gists/creating-gists). A demonstration of how to create a Gist and use that in the Vega-lite editor is available in [video](https://vimeo.com/944103728?share=copy) below.
Once you have created your Vega-lite script, head to your Microreact project. Create a New Chart specifying Custom as the chart type. ![](https://t26483244.p.clickup-attachments.com/t26483244/c97d830a-59a1-438a-8268-fef4fccccba4/image.png) Copy your Vega-Lite script from the Vega Editor and paste it into the Vega Spec lozenge in the custom chart panel. ![](https://t26483244.p.clickup-attachments.com/t26483244/2a8da981-defb-44d9-89e2-952d0b5d3f0e/image.png) {% embed url="" %} # Pie Chart ## About **pie charts** A pie chart divides one categorical variable into slices that represent parts of a whole

Example of a pie chart in Microreact

## **Creating your pie chart** |

Step 1: Select a category from your metadata table to create the pie chart, with slices representing the proportion of each unique element in that column.

Tooltips will display the count and percentage of each category when hovering over individual slices.

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXc-ZKG3vB7Xpzmzx76s2NAJ2gE8UA5YAFRyUc5H98d1oJ612zQkYnZQjKKoxVE5rp5b99gcPXzEHAk52nkm56FPwQLhz-0pbZCO6Pfoewm3NTrwOsADh7d0SF24tB_vLjBVDjZPCsxc9msCFEYxBlsOu-rl?key=eWiUFSXUJbPgi8wi6uipZA) | | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | |

Step 2: Select how you would like the size of your pie slices to be represented and whether you would like to omit null values from the visual.

  • Representing your pie slices by radius means the larger slices extend further outward from the centre, visually emphasising the relative size of each data point more dramatically than a traditional pie chart
  • Representing your pie slices by area means the area of each slice is proportional to the category's value relative to the total data set

Note: rows with null values for your pie chart category will still be present in other panels of your dashboard.

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdOCcs-qss5CTlYq0FuA_MwccnOJEVSNBEuPMyyQaeLz6Ig9ScEbK-nFKH9GlvL3UXVn0wh-e669eQV5WhlmwQRyFUjLEydzkm6KWItqHat4Dr76n1T8ks1gsgVqgfa2eFh2Ovc66tRYbNLuodES3OMJaCl?key=eWiUFSXUJbPgi8wi6uipZA) | |

Step 3: Indicate whether you want the slice labels to appear inside each slice, outside the pie chart or turn labels off.

You can also select whether to display percentages as part of the labels. Even if you turn off the percentage labels, you will still see percent values in the tooltips.


Users can also set a minimum count to hide labels from slices that are very small while still visualising labels for primary slices.


| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXfr9287MXFctqatEzBMyoiWUhY97SQK8Ar-dNVHWhloSElI9NUcE8tGwLKRMGMLNiglwfmpnITlEb1J_PpJety9TksTj6L7xqk8Khhlx4EjNXYPxSde73-ef1CWtcaz5ucBb0zpBsNcX-kfokEmKs5YJLk?key=eWiUFSXUJbPgi8wi6uipZA) | \\ # Multi-variable Chart ## About our multi-variable charts The multi-variable chart allows users to select multiple columns for the x-axis. Each x-axis variable is divided into segments representing different data elements within that column. In the example below, drug tests are compiled on the x-axis while the stacks represent test results (resistant, susceptible, not determined, etc.) Enjoy a panel-specific legend for ease of interpretation of the different bar stacks as well as a panel-specific dropdown to drill down in specific columns of data!

Example of a multi-variable chart in Microreact

## Creating your multi-variable chart |

Step 1: Select which columns from your metadata should be shown as bars in the x-axis of your chart.

This chart type allows users to make comparisons across multiple columns consisting of similar data elements. For example:

  • Presence or absence of a certain mutation across multiple gene columns
  • Standard scores across multiple student columns
  • Weather patterns across multiple geographic columns
| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeQWLOxr_Lx_0uuks-WZC8oMj14ZTF9DIiSlDLQCMES0TGxoGdbvQf5Xg8J0Up-KmbLL0p5bnKJGNVnabrxMoPnV1o-Zi83RVgejt-zZE8BNHeIFxR3_Zj5Xaid5JjEcL9-W2r_8HgzzSoO-o1CKGdVYvSF?key=eWiUFSXUJbPgi8wi6uipZA) | | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | |

Step 2: Select which data elements appear in each bar stack. Choose between showing all data elements present in each column, exclude blank values or choose from a list of data elements you want to appear in your chart.

  • Option 1 (All values): Absent, Present, Detected with low coverage, Not tested, null
  • Option 2 (All values except blanks): Absent, Present, Detected with low coverage, Not tested
  • Option 3 (Custom values): Absent, Present
|


| \\ # Heatmap ## About heatmaps Users can use the heatmap visual to a grid using colours to represent different values. This is particularly useful to identify intersections of data with high or low values relative to others. Users can define a colour scheme from a range of panel-specific colour palettes. There is also a filter bar so users can select the threshold of values to appear in the heatmap.

Example of a heatmap in Microreact

## Creating your heatmap |

Step 1: Select one or more columns to appear in your heatmap from the list of columns in your metadata table.

These column variables will appear on the y-axis of your heatmap.

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXeb458cRyL_6v_pPCY1xIB_k3vzPOan9Y_Bb5n9wZ48MxwzmxnyAy_3S8_GViWb3yYvb-r3ucaaT6Nd5y6xcDeusn9nkHni0If0wx7MwZRuCDvO4R1a2IxTS7U3IQ4eka_L5yhpHeOzGcw_pF8U6enJYTc?key=eWiUFSXUJbPgi8wi6uipZA) | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | **Step 2**: Select the variable from your metadata table to appear on the x-axis of your heatmap. | ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXdVZxqHc60rrhkj5M3aEW2O0pK-cnaUH1xsyJp9Fpd9K26KdenI9aGcvY3Jet8QJ20fKKw89ZBaDqIlt1d4gc58H9hr0vg3v-kakhjjzd2xga2XsVRFZo6-NqIhahwqavy3OW0Uo5JKHRp29iawCntxceCW?key=eWiUFSXUJbPgi8wi6uipZA) | |

Step 3: Select whether Counts or Percentages will appear as the colours and labels.

You may also elect to hide labels from the heatmap. The colours will remain if you hide your labels and note the differences in colour density depending if you are showing Counts or Percentages.

Select one or more values from the columns to be included in the Counts or Percentages.

Consider whether you would like to exclude blank values, this is particularly important if you are calculating percentages.

The x-axis labels can also be rotated so that labels with more characters can be easily read.

| ![](https://lh7-rt.googleusercontent.com/docsz/AD_4nXehsuYMFXzFd1pPwuOZaWzFufBGWSETweb2jcoMAOHRPdwCXGEdkNU3t7dkhSRe2Rp9v9jduGaf4azOzun4tq2wS-0Bwi4EDr06orC3Oz6JzSgi_CA-DMRA9dlfDF838-_LbaIq1dur8IKg1BE0zXMaOKFG?key=eWiUFSXUJbPgi8wi6uipZA) | ## Interpreting your heatmap The heatmap panel calculates counts or percentages using your metadata. Percentages are based on the variable selected for the x-axis, with the total of all metadata rows for that variable serving as the denominator. Selecting specific values in the Values losenge (Step 3) does not alter this denominator; if all values are selected, the percentages will total 100%. # Note Panel The Note panel is a text panel where simple text or Markdown can be written.
## Use cases * Provide instructions on how to interpret the visualisations in the project * Describe the data and filters applied on a saved view * Tell a story and link to specific saved views * Link to the Run Page of the data-flo that can be run to refresh the data in the project * Add links to external references, citations, etc. * Add the contact information of the project's authors ## Markdown The web has many resources for learning Markdown syntax. This Cheat Sheet covers the most common needs: # Matrix ### Matrix The matrix panel creates a heatmap or a graphical representation of data organised in a matrix format, with rows and columns representing different variables or categories. Each cell in the matrix corresponds to a specific combination of row and column variables and is often encoded using a gradient of colours. See Matrix Data for data source guidance. #### **Format** There are several ways to format the matrix using the menu in the Labels losenge.![](https://t26483244.p.clickup-attachments.com/t26483244/5892bf2b-1480-4c3d-9530-a24cea957b12/image.png) **Show values:** First, users can choose to show cell labels. These values can be toggled on/off at the users discretion using the Show Values button in the labels losenge. ![](https://t26483244.p.clickup-attachments.com/t26483244/d19cc780-5a24-4335-81ad-0a04e2a39205/image.png) ![](https://t26483244.p.clickup-attachments.com/t26483244/04e72215-bc98-4dd8-bb14-f3e68c8de541/image.png) **Rotate axis labels:** Secondly, users can choose the angle at which the top row labels appear. Users can select from a range of 0 degrees (completely flat/ horizontal) to 90 degrees (complete straight/ vertical).![](https://t26483244.p.clickup-attachments.com/t26483244/93c8fd27-a1f4-45f4-811a-6218926935dd/image.png)![](https://t26483244.p.clickup-attachments.com/t26483244/b2eacdb6-2c80-4a73-82ce-de65879f51df/image.png) # Selecting and Filtering Data Microreact offers two methods to interact with data entries in a project: selecting and filtering. This page describes how to use these two methods. ## Selecting vs Filtering Selecting data is using one panel to highlight the related marks in other panels, while leaving all the unselected marks still visible. Filtering data limits the visible marks on all panels, hiding the other marks. See [Summary of panel actions](#summary-of-panel-actions) below to learn how different panels can be used to select or filter the dashboard. ### What is Data Selection Selecting data allows you to highlight some data entries without hiding the entries which are not selected. When an entry is within the selection, a halo is usually rendered around it, while entries that are not within the selection are rendered normally. Entries selected in one panel will be selected in the other panels, as shown by halos on most panels and by checked check boxes in data table panels. ### What is Data Filtering Filtering allows you to temporarily hide some data entries from all panels in a project. When a single filter is applied, only data entries which are within the applied filter are shown, and entries which are outside the filter are hidden. When multiple filters are applied, then data entries which are within all filters are shown (i.e. the intersection of all filters is used). Data can be filtered using a [Data-slicer](/instructions/adding-and-editing-panels/data-slicer-panel), using the "Search and filter" bar at the top, or by interacting with panels in the ways described below. ### Search-and-filter bar Typing in the top search-and-filter bar will filter the data across all columns in the metadata. If any row contains the typed value in any column, then it will remain visible on all panels. If something is typed here that is not reflected in any of the columns of a row, then that row gets filtered out and hidden from the panels. The number (e.g. "21 of 50") on the right side of the bar reflects how many rows are showing (e.g. 21) and how many rows there are in total (50) in the unfiltered metadata file. ### Resetting Filters The easiest way to reset filters and get back to visualising the full dataset is to click on the filter icon in the Search (Filter) bar and select "`Reset All Filters`" Note that there are tree settings that may be filtering your data behind-the-scenes, even after using "Reset Tree Filter" or "Reset All Filters". To reset the tree, right-click on the tree panel whitespace and select "Redraw original tree". If you are the author of the Microreact project, you can also change the setting for "Hide **x** data entries without matching tree leaves", which effectively uses the tree as the source of truth and hides any metadata rows that are not found in the tree. {% embed url="" %} Check for hidden tree filters {% endembed %} ## Summary of panel actions
PanelSelecting dataFiltering dataSee also
Data tablesData entries can be selected using the checkboxes to the left of each rowData entries can be filtered (by individual values or by condition) from the data column header menu. Data can also be filtered by using a data slicer panelFiltering and sorting in data table
TreesIndividual entries can be selected by clicking on individual leaf nodes. Multiple entries can be selected by holding Ctrl/Cmd button and clicking on leaves. A range can be selected by clicking on the first leaf, then holding the Shift key while clicking on another leaf.

Clicking on a subtree filters out data entries which are not in the subtree. The same filter is applied when right clicking on a subtree and choosing View Subtree.

You can also apply a filter on a tree by using the lasso tool. You can exclude metadata rows from the panels by applying the "Hide x data entries without matching tree leaves" in the Edit Panel: Tree menu.

Filtering via a tree
Maps

Clicking on a map marker selects all entries at that location.

Multiple markers can be selected by holding Ctrl/Cmd button and clicking on markers.

You can apply a filter on a map by using the lasso tool.

You can also apply a filter using the viewport filter button.

Filtering via a map
Timeline

Clicking on a timeline bar selects all entries in that bar.

Multiple bars can be selected by holding Ctrl/Cmd button and clicking on markers.

You can apply a filter on a timeline by sliding the endpoint markers on either side of the timeline.Filtering via a timeline
LegendClicking on a value (or ctrl-clicking or cmd-clicking multiple values) in the legend will select related marks and rows across all panelsN/A
Search-and-filter barN/AThe search-and-filter bar (magnifying glass) can filter to an exact or partial match to data in all columns.
# Labels, Colours, and Shapes The labels, colours and shapes panel allows configuration of your visualisations. **`TIP`**: While colours and shapes can be defined in the imported metadata table file, the `__colour` and `__shape` columns are not displayed in the metadata table panel, since they are configuration columns and not metadata columns. To view the information in those columns, you can download the CSV file from the project. ## Labels ![](/files/QkQd7ETpfeOifpnHSELU) **Labels** affect which field is displayed on tree tips and network nodes ## Colours The **colour column** is the field used to colour map markers, tree nodes, chart features and timeline blocks * Any column can be used to colour the panels. The **colour palette** used can be changed by toggling and clicking on the colour palette box. * If a colour has been specified in the metadata sheet with a name `_colour` corresponding to the colour column, these will be used as categorical values. (e.g. if you want to define the colours for the '`country`' column, add a column to your data called '`country__colour`' (or '`country__color`') before importing to Microreact) * Auto-colour will be used as a default when no `__colour` column is defined * By default, if a `__colour` field has **not** been specified for a column in the metadata sheet, a categorical colour palette with 24 qualitative colours will be used. * Even if the colour palette is set via a `__colour` column, you can override those colours by manually setting them in the colour palette box. * A selection of pre-defined **palettes** are available and these colours can be edited by the user from within Microreact. * **Numeric columns** can be coloured continuously using a gradient-continuous palette
* Colour palettes can be **re-used** for other columns which contain the same values.
* Colours can be defined for any and all columns, regardless of whether they are used as the main colour column for the panels. **Charts and tree Metadata Blocks** colour by columns other than the main Colour Column. These can customised using the custom palette toggle button and clicking on each colour in turn. ![](/files/g5dqgbaQ9laGKNDdOTh9) If a column has shared values with other columns that already has a colour these can be re-used using the re-use feature. For a column that has numerical values only there is the option to select a gradient palette that can either be continuous or from 3-24 steps. The palette for the individual steps or the continuous start and stop boundaries can be customised. ![](/files/QSO0HLsJiSLY4HbLRVsD) **`TIP:`**When a column is used in many of your team's Microreact projects, you can define the colours in a reference spreadsheet . The image below shows and It's possible to standardise colours for a frequently-used column across all your team's Microreact projects, create a spreadsheet containing the colour codes. One column should contain the data values to colour, with another column (named with \_\_colour) containing the hex codes for the colour values (or colour names). Pull those values into your metadata table using [Data-flo](https://data-flo.io) using the [extend-datatable](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/KBiPjK2QHTtxS2IkmQ5x) adaptor. ![](/files/LCoeFkQEcjXYdEnUhaYV) **`TIP`**: Use the palettes available at [colorbrewer2.org](https://colorbrewer2.org/#type=qualitative\&scheme=Accent\&n=7) ## Shapes Tree nodes and single-row marks on maps can be configured with shapes in addition to colour. The only way to set shapes is within the data, by creating a `__shape` column. If there is no "Shape Column" shown in the Labels, Colours, and Shapes menu, then no columns have a corresponding `__shape` column. All columns with a corresponding `__shape` column will be available for selection in the Shape Column dropdown. ![](/files/l9skEveKRl6Ucy6vvAVh) **`TIP`**: To easily associate shapes with the data in `__shape` columns, map the shapes for each data value by using Data-flo's [Extend-datatable](broken://spaces/-LR6fIJNEF0X5oKcJNhv/pages/KBiPjK2QHTtxS2IkmQ5x) adaptor. The available shapes are listed here in Phylocanvas: Example of a tree displaying shapes and the corresponding metadata table containing the `__shape` field: ![](/files/PXeN66x6WNRZmp6ujHG3)

Example of data containing shape field

# Saving and version control ## **Microreact does not auto-save your work**. This is important to remember. Working within Microreact is inherently interactive and iterative, so it is up to the user to decide which configurations are to be saved. [**Session history**](/instructions/interacting-with-microreact-projects/project-history) \*\*\*\* tracks recent changes within the browsing session. **Session history is only available until the user closes or refreshes the page, or navigates away from it.** Session history allows undo (`Cmd`+`Z` or `Ctrl`+`Z`) and redo (`Cmd`+`Shift`+`Z`, `Ctrl`+`Shift`+`Z`, or `Ctrl`+`Z`) {% hint style="warning" %} Newly created projects are not saved on Microreact servers unless you click the save project button (![](/files/-MYoh7LUMnxAq87WrNU7)). {% endhint %} ### There is no version control Microreact does not keep a history of project versions or changes, beyond the Session History. **`TIP`**: To maintain a history of project versions over time, download the project and maintain an offline set of project versions. ## The Save Project Dialog ![](/files/-MYoh7LUMnxAq87WrNU7) ### ![](/files/S4CvM3w9jNwiGPrnnY4F) To save a newly created or a modified project: * Click on the disk icon (![](/files/-MYoh7LUMnxAq87WrNU7)) in the top right corner of the webpage. * Enter a name for the project. * Optionally, enter a brief **description** of the project (Markdown is supported). This is a good place to add a website link or an email address, or a link to the [Data-flo](https://www.data-flo.io) data-flo that prepares the data for the project. * Choose **`Save as a New Project`** if you want to store a new project on Micoreact servers (this option is only available when you are signed in to your Microreact account). You can [change the project access control](/instructions/access-control-and-project-sharing) after it has been saved. * If you are saving changes to an existing project that you own, you can choose either **`Update This Project`** or **`Save as a New Project`**. If you save as a new project, consider giving it a new name. * Choose **`Download as .microreact file`** if you do not want to store the project on Microreact servers. This allows you to share the project (and all its data) privately, outside of the Microreact server. ![Saving a new project](/files/ZLdWpMOYiSEcOO4OXGsN) ![Saving an existing project](/files/WFicwOEQ4ClIAQX9WUVN) ### Updating views Once a project has saved views, saving happens slightly differently. Changes must be made to each view, and that view updated. It is no longer possible to make colour or shape changes that affect the entire project. See [Views](https://docs.microreact.org/instructions/interacting-with-microreact-projects/saved-views). ### Updating projects Microreact does not save past versions of projects. If users make changes to a project but later decide to revert to this previous version, you can use the Replace Project feature to restore the original files, panels and views without changing the file name, link or any user access permissions. This is useful if you have a project shared with other users and you want to make changes to the project without disrupting their access. Navigate to the Pencil icon, and select Edit Existing Panels. In the left side panel, click the Replace Project button and use the dialog box to find a .microreact file to upload. This action will keep allow users to retain the project name, link, and share settings while replacing with new project files, panels and views.

Navigate to the pencil icon and select Edit Existing Panels. In the panel edit menu, click Replace Project.

## The Share with People Dialog When you have performed "Save as a New Project", the "Share with People" dialog pops up. This is described here: [**Access Control and Project Sharing**](/instructions/access-control-and-project-sharing)\*\*\*\* ## Deleting a Project Deletion of a project is possible from the [my-account](https://microreact.org/my-account) page. {% hint style="warning" %} There is no "Are you sure you want to delete this project" message, so be sure before you click the bin icon. {% endhint %} ![](/files/ZYVK6VVBXTDoN2DtZWhZ) # Access Control and Project Sharing Privacy and permissions for Microreact projects Everyone with access to a Microreact project has access to the data the project uses. Privacy and permissions can be configured to change who can access the project and its data. Edit project Access from within a project or from your My Account page. ![](/files/e4P8a2GopbY1t52TpbpJ) ![](/files/1rdg4vcq09OFTpB2NXEm) {% hint style="warning" %} By default, a saved project on Microreact.org can only be accessed by the user who created it. Access must be explicitly granted for others to view it. {% endhint %} ![](/files/Byu8Z8Da3YC1DHO7RQev) {% tabs %} {% tab title="Projects with Restricted Access" %} The project can be accessed by the user who created it. You can invite other users to project as described [in the next section](#sharing-a-project-with-specific-people). {% endtab %} {% tab title="Projects with Public Access" %} Anyone with the project link can view the project {% endtab %} {% endtabs %} ### Sharing a Project with via Email Invitation To give a specific user access to a project, enter the email address of the person you want to invite and click Send Invitation. You can enter up to 30 email addresses. Invitation emails will be sent from the address: ******. ![](/files/-MYoqzhQeMbtY_A8RVq1) ### Managing User Access Roles After entering the emails of all users, you will be prompted to choose the access role they should have. For each group of email addresses entered at the same time, you can assign only one access role. If you wish to assign different access roles to individual users, add them one by one and select their access level. **Viewer**: can view another user's projects and copy them into their personal account. The copied project will not impact the original. **Editor**: can view and edit another user's projects in the same way the project owner/ creator can edit the projects. **Manager**: can view and edit another user's projects as well as invite additional users access the project. ![](https://t26483244.p.clickup-attachments.com/t26483244/0ed3b2d1-20cc-4caa-a9fb-6ae4351f51de/image.png) # Download Project Files Each of the original files used to create a project can be downloaded from the Download Project Files menu. Data can be downloaded by anyone with access to the project. ![](/files/-MZD5CFhoCFL66hZRipL)
# URL control options Linking to a Microreact Project can include specific options to control the project view This section lists project options which can be set via URL query string keys. For example, add `?tt=cr` to the end of a project link to set tree type to circular: . Multiple options can be combined using ampersand character (`&`). For example, add `?tt=cr&tl=0` to the end of a project link to set tree type to circular and hide tree labels. **Filter URL Options** | Option | Description | Default value | Accepted values | | ------ | ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------ | | `fb` | Metadata block columns | | Sets the initial columns displayed as metadata blocks on the tree. Multiple column names can be combined using comma (`,`) character | | `fc` | Colour column | | Sets the initial column used to colour nodes | | `fl` | Label column | | Sets the initial column used for labels | | `fs` | Shape column | | Sets the initial column used for shapes | **Map URL Options** | Option | Description | Default value | Accepted values | | ------ | ----------------------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `mc` | Map controls | `0` | `1` to show map controls, or `0` to hide them | | `mmns` | Map min node size | `4` | Sets the minimal map node size | | `mns` | Map node size | `14` | Sets the map node size in pixels | | `mxns` | Map max node size | `160` | Sets the maximal metadata node size | | `mo` | Map centre geographical point | `0,0` | Sets the initial geographic centre of the map. Must be a valid geographical point with a certain latitude and longitude separated with a comma. | | `mz` | Map zoom level | `1` | Sets the initial map zoom level. | | `ms` | Map Mapbox tile style | `light` |

Sets the initial Mapbox tile style as follows:
light: Light style
dark: Dark style
streets: Streets
satellite: Satellite
'saellite-streets': 'Satellite Streets
basic: Basic
bright: Bright
outdoors: Outdoors

| **Layout URL Options** | Option | Description | Default value | Accepted values | | ------ | -------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `ud` | Details pane view | `t` (the default value is set to `d` when project does not include a timeline) |

Sets the initial view in the details pane as follows:
d: Data table
t: Timeline

| | `uhs` | Horizontal pane size | `50` | Sets the initial size of the horizontal panes, e.g. `40` sets the size of the main pane to 40% of the window height and the details pane to 60%. | | `ui` | Shape column | `null` | Sets the initial column used for shapes | | `us` | Side pane view | |

Sets the initial view in the side pane as follows:
b: Blocks
c: Colour columns
e: Network edge styles
h: Project history
l: Label columns
d: Legend
p: Pattern columns
s: Shape columns

| | `uvs` | Vertical pane size | `68` | Sets the initial size of the vertical panes, e.g. `40` sets the size of the map pane to 40% of the window width and tree pane to 60%. See option `ui` above to change the order of the panes. | **Data Table URL Options** | Option | Description | Default value | Accepted values | | ------ | -------------------- | ------------- | -------------------------------------------- | | `dm` | Display density mode | `comf` |

Sets the initial display density:

| **Timeline URL Options** | Option | Description | Default value | Accepted values | | ------ | ---------------------- | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `lc` | Timeline controls | `0` | `1` to show timeline controls, or `0` to hide them | | `lmns` | Timeline min node size | `1` | Sets the minimal timeline node size | | `lns` | Timeline node size | `14` | Sets the timeline node size in pixels | | `lu` | Time grouping unit | `year` |

Sets the unit used to group timeline data as follows:
y: Year
q: Quarter
m: Month
w: Week
d: Day

| | `lxns` | Timeline max node size | `160` | Sets the maximal timeline node size | | `ls` | Timeline play speed | `1` | Sets the interval (in seconds) at which the timeline is played | **Tree URL Options** | Option | Description | Default value | Accepted values | | ------ | --------------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `tal` | Align tree labels | `0` | `1` to align tree labels, or otherwise `0` | | `tbh` | Show block headers | `0` | `1` to show metadata block headers, or `0` to hide them | | `tbl` | Tree block length | `6` | Sets the metadata block length in pixels | | `tbn` | Tree branch length | `0` | `1` to show tree branch lengths, or `0` to hide them | | `tc` | Tree controls | `0` | `1` to show tree controls, or `0` to hide them | | `tl` | Tree labels | `0` | `1` to show tree labels, or `0` to hide them | | `tmbl` | Tree min block length | `1` | Sets the minimal metadata block length | | `tmns` | Tree min node size | `1` | Sets the minimal tree node size | | `tmts` | Tree min text size | `1` | Sets the minimal font size in pixels | | `tns` | Tree node size | `14` | Sets the tree node size in pixels | | `tt` | Tree type | `rc` |

Sets the initial tree type as follows:
rc: Rectangular tree
cr: Circular tree
rd: Radial tree
dg: Diagonal tree
hr: Hierarchical tree

| | `tts` | Tree text size | `8` | Sets the tree font size in pixels | | `txbl` | Tree max block length | `160` | Sets the maximal metadata block length | | `txns` | Tree max node size | `160` | Sets the maximal metadata node size | | `txts` | Tree max text size | `64` | Sets the maximal font size in pixels | # Tips & FAQ ## Project version control Within a browser session, you can revert to previous versions from within that same browser session. Navigating away from the page deletes the history of changes, so **downloading .microreact files** is the key to true version control. Keep in mind that the downloaded version saves all data within that version. ## Sharing A downloaded .microreact file encapsulates all the data, so that file should only be shared with people who have permission to view the data. ## Columns with same values showing as different colours? Sometimes you have multiple columns with the same data values (e.g. Boolean data). However, if one column lacks the existence of one or more of the values, it may end up with different colours applied to the existing values, compared with other columns.
In such a case, you can choose to "REUSE" a colour palette across the similar columns. Choose a column that represents all the values, and use it as the column you REUSE when setting other columns' palettes.
## Data showing incorrectly on Maps? If you are using Data-flo to create latitude & longitude values, the geocoding step in Data-flo may be creating incorrect values because there isn't enough information getting passed to MapBox, so MapBox is inferring locations incorrectly. (e.g. 15220 is a postcode for Vitrac France and also for Pittsburgh, PA USA). Your lat/long values may be lacking the minus-sign. If your data used East/West instead of +/- then the points can be showing in unexpected places (e.g. in China instead of in Washington State, USA). Add the minus sign back into the data as needed, and remap. ## Changing the name of a project Sometimes when you copy a project, you rename it and it doesn't immediately appear changed on the view shown. Refresh your browser page to see the new name. Remember that the name only changes when you explicitly change it -- saving as a new project doesn't automatically change the name. ## Layouts * When creating a dashboard or view, consider the audience and the **variety of screen sizes** they are likely to use. * Using **nested panels** and/or **overlaid panels** can be an effective use of space and individual panels can be maximised for closer inspection. * Different panels can be used on different **saved views** in the Views tab * Consider **horizontal bar charts** to use space differently or to make axis labels more legible. ## Exporting static images In addition to downloading the data files that drive a Microreact project, you can export images of the visual panels by clicking on the ![](/files/m4618Wp6b5SsltrSgCf6)"hamburger" icon in the top right corner of a panel and selecting the desired format. The legend must be downloaded on its own (it does not come automatically with each panel image download), and each section of the legend downloads separately. Of course, you can also take a screenshot of the entire dashboard at once.

Panel image downloads and datatable CSV download

## Can we hide certain data from people who access the Microreact project? Any data in the Microreact project is available to anyone with access to the project. If you want to create a project without certain data, you will need to remove the data from the project (e.g. delete those columns from the CSV you imported). This is a potential use case for [Data-flo](https://data-flo.io/) software and its ["remove columns" adaptor](https://docs.data-flo.io/using-data-flo/specific-adaptors/remove-columns), but you can also remove the columns manually and save a copy of the project that uses the smaller dataset. ## Can I add more metadata while I'm working on an existing Microreact project? Sure! As long as your additional metadata file has the same IDs as the existing metadata file in the project, you can add another metadata file to the project. This new file can add more columns per ID. ## How can I share a video of the timeline being "played"? A third-party screen-capture tool is your best bet for this (e.g. Apple Screenshot, Dell Snipping Tool, Quicktime Player's recording feature, etc.) # How to Link Microreact projects to Google Sheets This tutorial shows how to create a Microreact project linked to data on Google Sheets. It also shows how to configure Google Sheets to automatically publish changes to the linked Microreact project. In order for Microreact to download the CSV file, you need to follow this guide to generate a download link for the CSV file of Google Sheets. ### I. Configure Google Sheets Access Settings 1. Upload the data file to Google Sheets or open an existing Google Sheets file. 2. Click on the `Share` button in the top right corner to change share settings. Google Sheets share button 3. Click on on `Get shareable link`. Google Sheets 4. Make sure that option `Anyone with the link can view` is selected. Google Sheets 5. Finally click on `Done` button. ### II. Configure Google Sheets Publish Settings 1. Select `File` menu. 2. Click on `Publish to the web...`. ![Google Sheets](https://microreact.org/images/tutorials/google-sheets-publish-to-the-web.png)\\ 3. Choose `Comma-separated values (.csv)`. ![Google Sheets](https://microreact.org/images/tutorials/google-sheets-share-type-csv.png)\\ 4. Click on `Published content and settings`. ![Google Sheets](https://microreact.org/images/tutorials/google-sheets-published-content-settings.png)\\ 5. Make sure that the option `Automatically republish when changes are made` is active. ![Google Sheets](https://microreact.org/images/tutorials/google-sheets-auto-republish.png)\\ 6. Click on `Publish` button. 7. Finally, copy the shareable link generated by Google Sheets. Google Sheets ### III. Create Microreact project 1. Goto 2. Click on the green plus button in the bottom right corner, then select `Add URLs` Google Sheets 3. Paste the shareable link under Enter URL. Google Sheets 4. Select `Data (CSV)` under File kind 5. Add more files (e.g. a Newick tree file) or click `CONTINUE` to created the project. # API Access Tokens ### When you need an Access Token * When you are the owner of a Microreact project, your API Access Token is needed for interaction with your project via API. * An access token is required for [creating projects via the API](/api/creating-projects). The user whose API Access Token is used will be the owner of the new Microreact project. * [Data-flo](https://www.data-flo.io) software connects to Microreact projects via API access, and requires the API Access Token of the project's owner. * To access the API directly, you need to include the API access token associated with the Microreact account of the owner of the Microreact project as a request header. ### Obtain your API Access Token * Go to * Choose [Account Settings](https://microreact.org/my-account/settings) from the navigation menu * Copy your Access Token displayed under API Access section ![](/files/RKTEnH7VkShQ93F8R9Mo) ![](/files/-MZXKpwEabdZZbVrSR-M) ### Using Access Tokens The Access Token should be sent as a request header named Access-Token, for example: {% tabs %} {% tab title="cURL + Bash" %} ```bash curl \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ https://microreact.org/api/projects/create ``` {% endtab %} {% endtabs %} # Creating Projects via API {% hint style="warning" %} Unlike the previous versions of Microreact, creating project via API requires an [API access token](/api/access-tokens). {% endhint %} ## Create Project `POST` `https://microreact.org/api/projects/create/` #### Query Parameters | Name | Type | Description | | ------ | ------ | ------------------------------------------------------------------ | | access | String | When set to `private`, the created project will be set to private. | #### Headers | Name | Type | Description | | ------------ | ------ | ------------------------------------------------------------------- | | Content-Type | String |

Should be

application/json; charset=utf-8

| | Access-Token | String | An API access token. | #### Request Body | Name | Type | Description | | ---- | ------ | ----------------------------------------------------------------- | | | Object |

A valid

.microreact

JSON document

| #### Response {% tabs %} {% tab title="Status code 200" %} A JSON document which include the ID and the URL of the project. ```javascript { "id": "gb7RzDg87aJK2yGAqQiaiu", "url": "https://microreact.org/project/gb7RzDg87aJK2yGAqQiaiu" } ``` {% endtab %} {% endtabs %} ### Example {% tabs %} {% tab title="cURL + Bash" %} ```bash curl \ --header "Content-Type: application/json; charset=utf-8" \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ --data "@project.microreact" \ https://microreact.org/api/projects/create ``` {% endtab %} {% endtabs %} # Updating Projects via API ## Update Project `POST` `https://microreact.org/api/projects/update/` #### Query Parameters | Name | Type | Description | | ------- | ------ | ------------------------------------------------------------------------------------------------- | | project | string |

The ID of the project to be updated (e.g.

gb7RzDg87aJK2yGAqQiai

)

| #### Headers | Name | Type | Description | | ------------ | ------ | -------------------------------------------------------------------------------- | | Content-Type | string |

Should be

Content-Type application/json; charset=utf-8

| | Access-Token | string | An API access token. | #### Request Body | Name | Type | Description | | ---- | ------ | ----------------------------------------------------------------- | | | object |

A valid

.microreact

JSON document

| {% tabs %} {% tab title="200 A JSON document which include the ID and the URL of the project." %} ```javascript { "id": "gb7RzDg87aJK2yGAqQiaiu", "url": "https://microreact.org/project/gb7RzDg87aJK2yGAqQiaiu" } ``` {% endtab %} {% endtabs %} See [API Access Tokens](/api/access-tokens) ### Example {% tabs %} {% tab title="cURL + Bash" %} ```bash curl \ --header "Content-Type: application/json; charset=utf-8" \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ --data "@project.microreact" \ https://microreact.org/api/projects/update?project=gb7RzDg87aJK2yGAqQiai ``` {% endtab %} {% endtabs %} # Deleting Projects via API ## Delete Project `POST` `https://microreact.org/api/projects/bin/` #### Query Parameters | Name | Type | Description | | ------- | ------ | ------------------------------------------------------------------------------------------------- | | project | string |

The ID of the project to be deleted (e.g.

gb7RzDg87aJK2yGAqQiai

)

| #### Headers | Name | Type | Description | | ------------ | ------ | -------------------- | | Access-Token | string | An API access token. | {% tabs %} {% tab title="200 The value true is returned if the project is deleted successfully." %} ```javascript true ``` {% endtab %} {% endtabs %} ### See [API Access Tokens](/api/access-tokens) ### Example {% tabs %} {% tab title="cURL + Bash" %} ```bash curl \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ https://microreact.org/api/projects/bin?project=gb7RzDg87aJK2yGAqQiai ``` {% endtab %} {% endtabs %} # Sharing Projects via API ## Share Project `POST` `https://microreact.org/api/invitations/send/` #### Query Parameters | Name | Type | Description | | ----------------------------------------- | ------ | ----------------------------------------------------------------- | | project\* | string | The ID of the project to be shared (e.g. `gb7RzDg87aJK2yGAqQiai`) | #### Headers | Name | Type | Description | | ---------------------------------------------- | ------ | -------------------- | | Access-Token\* | string | An API access token. | #### Request Body | Name | Type | Description | | ---------------------------------------- | ----- | ------------------------------------------------------- | | emails\* | array | An array of email addressess to share the project with. | {% tabs %} {% tab title="200 The value true is returned if the project is invitations are set successfully." %} ```javascript true ``` {% endtab %} {% endtabs %} ### See [API Access Tokens](/api/access-tokens) Note: Email addresses of users who should have access must be comma-separated ("","") ### Example {% tabs %} {% tab title="cURL + Bash" %} ```bash curl \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ --data '{ "emails": [ "email@example.com" ] }' \ https://microreact.org/api/invitations/send?project=gb7RzDg87aJK2yGAqQiai ``` {% endtab %} {% endtabs %} # Migrating to the new API This page relates to major changes in Microreact released in 2020 ## Summary of breaking changes {% hint style="danger" %} The new Microreact API only accepts authenticated requests. Calls without an `Acccess-Token` header will fail with 401 Unauthorized error. {% endhint %} | | New API | Old API | | --------------------- | ------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------ | | API Endpoint | \*\* | \*\* | | Documentation | | | | Request body | A valid `.microreact` JSON file | Old API request payload as documented in | | `Access-Token` header | Required (Obtain your access token from ) | Optional | ## Converting old API request payload You can convert an old API request payload to a new .microreact JSON file using the schema convertor endpoint: {% tabs %} {% tab title="cURL + Bash" %} ``` curl \ --header "Content-type: application/json; charset=UTF-8" \ --request POST \ --data '{ "name": "hayu110x2c0smcm", "data": "https://raw.githubusercontent.com/microreact/data/main/data.csv" }' \ https://microreact.org/api/schema/convert ``` {% endtab %} {% endtabs %} The response is a valid `.microreact` JSON file ``` { "datasets": { "dataset-1": { "file": "data-file-1", "idFieldName": "id" } }, "files": { "data-file-1": { "id": "data-file-1", "format": "text/csv", "name": "data.csv", "url": "https://raw.githubusercontent.com/microreact/data/main/data.csv" } }, "maps": { "map-1": { "title": "Map", "latitudeField": "__latitude", "longitudeField": "__longitude" } }, "meta": { "name": "hayu110x2c0smcm" }, "tables": { "table-1": { "dataset": "dataset-1", "title": "Metadata", "columns": [ { "field": "id" }, { "field": "__latitude" }, { "field": "__longitude" }, { "field": "country" }, { "field": "__year" }, { "field": "__month" }, { "field": "__day" } ] } }, "timelines": { "timeline-1": { "title": "Timeline", "dataType": "year-month-day", "yearField": "__year", "monthField": "__month", "dayField": "__day" } }, "schema": "https://microreact.org/schema/v1.json" } ``` You can also pipe the response into the create project endpoint as in the following example: ``` curl \ --header "Content-type: application/json; charset=UTF-8" \ --request POST \ --data '{ "name": "hayu110x2c0smcm", "data": "https://raw.githubusercontent.com/microreact/data/main/data.csv" }' \ # Old API request payload as documented in https://old.microreact.org/api-docs https://microreact.org/api/schema/convert \ | \ curl \ --header "Content-type: application/json; charset=UTF-8" \ --header "Access-Token: eyJhbGciOiJIUzUxMiJ9..." \ # Obtain your access token from https://microreact.org/my-account/settings --data @- \ https://microreact.org/api/projects/create ``` # Contact the Microreact team Send feedback, request support, request a local installation, etc. There are multiple ways to contact the team. Whichever method you choose, please ensure that you include as much information as possible to help us understand your situation. Additionally, **please add @cgps.group to your safe domains and safe senders list** to prevent our responses from going to your spam folder. You may hear back from us via several email addresses @cgps.group. ### In-App feedback link This feature is accessible on any Microreact page. Navigate to the "burger icon" in the top left corner of any Microreact page. Then select "Send Feedback".
You can use the feedback form to contact us or report bugs to the Microreact support team. Please make sure to include an email address if you wish Microreact support team to contact you. You can also include a screenshot of the page to highlight bugs. ![](/files/-MYyNUQ2CnEFEIrtn0Xv) ### Secondary method of contact If you cannot access the form for any reason, please **email** us at . ### Information to include The more information you provide about your situation, the more quickly we can get you a response: * you & your organisation * the URL for your Microreact project * exact error messages * screenshots (not containing any sensitive information) * example data (not containing any sensitive information) * a clear description of the question or problem * what efforts you've already made toward a solution ### Interested in an on-prem, local installation? Microreact can be installed behind your firewall to enable you to visualise sensitive data safely.\ To request further information, please email .