Streamline display with onlyPanels

When controls.showOnlyPanels is active via the URL param "&onlyPanels" switch each primary panel to be an "infoPanel". This removes the title and the line above the title in the display card giving the panel a more streamlined appearance. This results in a more pleasant embedding into slide decks.

src/components/entropy/index.js

@@ -79,7 +79,8 @@ const getStyles = (width) => {
     zoomMax: state.controls.zoomMax,
     defaultColorBy: state.controls.defaults.colorBy,
     panelLayout: state.controls.panelLayout,
-    narrativeMode: state.narrative.display
+    narrativeMode: state.narrative.display,
+    showOnlyPanels: state.controls.showOnlyPanels
   };
 })
 class Entropy extends React.Component {
@@ -258,7 +259,7 @@ class Entropy extends React.Component {
   render() {
     const styles = getStyles(this.props.width);
     return (
-      <Card title={this.title()}>
+      <Card infocard={this.props.showOnlyPanels} title={this.title()}>
         <InfoPanel d3event={this.state.hovered.d3event} width={this.props.width} height={this.props.height}>
           {this.state.hovered ? this.state.hovered.tooltip(this.props.t) : null}
         </InfoPanel>

src/components/frequencies/index.js

@@ -20,7 +20,8 @@ import "../../css/entropy.css";
     colorBy: state.controls.colorBy,
     colorScale: state.controls.colorScale,
     colorOptions: state.metadata.colorings,
-    normalizeFrequencies: state.controls.normalizeFrequencies
+    normalizeFrequencies: state.controls.normalizeFrequencies,
+    showOnlyPanels: state.controls.showOnlyPanels    
   };
 })
 
@@ -102,7 +103,7 @@ class Frequencies extends React.Component {
     const { t } = this.props;
     const {tipCount, fullTipCount} = this.props.nodes[0];
     return (
-      <Card title={`${t("Frequencies")} (${t("colored by")} ${parseColorBy(this.props.colorBy, this.props.colorOptions)} ${t(normString(this.props.normalizeFrequencies, tipCount, fullTipCount))})`}>
+      <Card infocard={this.props.showOnlyPanels} title={`${t("Frequencies")} (${t("colored by")} ${parseColorBy(this.props.colorBy, this.props.colorOptions)} ${t(normString(this.props.normalizeFrequencies, tipCount, fullTipCount))})`}>
         <div
           id="freqinfo"
           style={{

src/components/map/map.js

@@ -56,7 +56,8 @@ import "../../css/mapbox.css";
       state.controls.geoResolution !== state.controls.colorScale.colorBy // geo circles match colorby == no pie chart
     ),
     legendValues: state.controls.colorScale.legendValues,
-    showTransmissionLines: state.controls.showTransmissionLines
+    showTransmissionLines: state.controls.showTransmissionLines,
+    showOnlyPanels: state.controls.showOnlyPanels
   };
 })
 
@@ -614,7 +615,7 @@ class Map extends React.Component {
     const transmissionsExist = this.state.transmissionData && this.state.transmissionData.length;
     // clear layers - store all markers in map state https://github.com/Leaflet/Leaflet/issues/3238#issuecomment-77061011
     return (
-      <Card center title={transmissionsExist ? t("Transmissions") : t("Geography")}>
+      <Card center infocard={this.props.showOnlyPanels} title={transmissionsExist ? t("Transmissions") : t("Geography")}>
         {this.props.legend && <ErrorBoundary>
           <Legend right width={this.props.width} />
         </ErrorBoundary>}

src/components/tree/index.js

@@ -26,7 +26,8 @@ const Tree = connect((state) => ({
   showAllBranchLabels: state.controls.showAllBranchLabels,
   tipLabelKey: state.controls.tipLabelKey,
   narrativeMode: state.narrative.display,
-  animationPlayPauseButton: state.controls.animationPlayPauseButton
+  animationPlayPauseButton: state.controls.animationPlayPauseButton,
+  showOnlyPanels: state.controls.showOnlyPanels
 }))(UnconnectedTree);
 
 export default Tree;

src/components/tree/tree.js

@@ -193,7 +193,7 @@ class Tree extends React.Component {
     const styles = this.getStyles();
     const widthPerTree = this.props.showTreeToo ? (this.props.width - spaceBetweenTrees) / 2 : this.props.width;
     return (
-      <Card center title={t("Phylogeny")}>
+      <Card center infocard={this.props.showOnlyPanels} title={t("Phylogeny")}>
         <ErrorBoundary>
           <Legend width={this.props.width}/>
         </ErrorBoundary>