wv-2702 orbit tracks (#4596)

* Preliminary labels added

* Style changes to address orbit track label text

* remove logging

web/js/components/layer/settings/associated-layers-toggle.js

@@ -32,6 +32,7 @@ function AssociatedLayersToggle(props) {
       <h2 className="wv-header"> Associated Layers </h2>
       { associatedLayers.map((layer) => {
         const { id } = layer;
+        const satelliteName = layer.title.split(' - ')[0];
         const isEnabled = !!activeLayers[id];
         const onCheck = () => (isEnabled ? removeLayer(id) : addLayer(id));
         return (
@@ -41,7 +42,7 @@ function AssociatedLayersToggle(props) {
             title="Enable/disable this layer"
             checked={isEnabled}
             onCheck={onCheck}
-            label={getTitle(layer)}
+            label={`${getTitle(layer)} (${satelliteName})`}
           />
         );
       }) }

web/js/containers/sidebar/orbit-track.js

@@ -27,6 +27,7 @@ function OrbitTrack(props) {
 
   const containerClasses = `wv-orbit-track ${!trackLayer.visible ? 'not-visible' : ''}`;
   const [palette, setPalette] = useState();
+  const satelliteName = trackLayer.title.split(' - ')[0];
 
   useEffect(() => {
     if (hasPalette && !isLoading && !renderedPalette) {
@@ -50,7 +51,7 @@ function OrbitTrack(props) {
       {palette}
       <FontAwesomeIcon icon="satellite" />
       <span className="wv-orbit-track-label">
-        {getOrbitTrackTitle(trackLayer)}
+        {`${getOrbitTrackTitle(trackLayer)} (${satelliteName})`}
       </span>
     </div>
   );

web/scss/features/sidebar.scss

@@ -838,6 +838,8 @@ p.recharts-tooltip-label {
 
   .layer-orbit-tracks .wv-checkbox {
     margin: 10px 0 10px 10px;
+    display: flex;
+    align-items: center;
 
     & label {
       display: inline;