Adjust filters and layout closes #548 (#552)

* Adjust filters and layout

* Add campaing aliases

* Add aliases props

src/components/explore/explore-tools.js

@@ -163,18 +163,44 @@ const ExploreTools = React.forwardRef(
                 getMatchTerm={option => option.shortname}
                 getFilterOptions={getGcmdOptions}
                 filterValue={option => option.shortname}
-                filterLayoutWidth={"60%"}
+                filterLayoutWidth={"50%"}
                 hasLinkOut={true}
               />
               <FilterMenu
-                id="style"
+                id="concepts"
                 selectedFilterIds={selectedFilterIds}
                 addFilter={addFilter}
                 removeFilter={removeFilter}
-                label="Measurement Styles"
-                options={getFilterOptionsById("style")}
+                label="Geophysical Concepts"
+                options={getFilterOptionsById("concepts")}
                 category={category}
               />
+              <FilterByDate
+                id="date"
+                label="Date range"
+                dateRange={dateRange}
+                setDateRange={setDateRange}
+              />
+              <button
+                css={`
+                  flex-grow: 1;
+                  border: 1px solid ${colors[NEGATIVE].text};
+                  padding: 0.25rem;
+
+                  flex-grow: 0;
+                  background: transparent;
+                  color: ${colors[NEGATIVE].text};
+                  vertical-align: middle;
+                  cursor: pointer;
+                `}
+                data-cy="map-toggle-btn"
+                onClick={e => {
+                  e.preventDefault()
+                  toggleMap(!isDisplayingMap)
+                }}
+              >
+                <span>{isDisplayingMap ? "Hide" : "Show"} Map</span>
+              </button>
               <DropdownByTextInput
                 setSearchResult={setSearchResult}
                 id="type"
@@ -199,13 +225,16 @@ const ExploreTools = React.forwardRef(
                     .filter(item => item !== "")
                     .join(" ")}`
                 }
-                filterLayoutWidth={"40%"}
+                filterLayoutWidth={"41.75%"}
               />
-              <FilterByDate
-                id="date"
-                label="Date range"
-                dateRange={dateRange}
-                setDateRange={setDateRange}
+              <FilterMenu
+                id="style"
+                selectedFilterIds={selectedFilterIds}
+                addFilter={addFilter}
+                removeFilter={removeFilter}
+                label="Measurement Styles"
+                options={getFilterOptionsById("style")}
+                category={category}
               />
 
               <FilterMenu
@@ -225,27 +254,6 @@ const ExploreTools = React.forwardRef(
                 label="Vertical Measurement Region"
                 options={getFilterOptionsById("vertical")}
               />
-
-              <button
-                css={`
-                  flex-grow: 1;
-                  border: 1px solid ${colors[NEGATIVE].text};
-                  padding: 0.25rem;
-
-                  flex-grow: 0;
-                  background: transparent;
-                  color: ${colors[NEGATIVE].text};
-                  vertical-align: middle;
-                  cursor: pointer;
-                `}
-                data-cy="map-toggle-btn"
-                onClick={e => {
-                  e.preventDefault()
-                  toggleMap(!isDisplayingMap)
-                }}
-              >
-                <span>{isDisplayingMap ? "Hide" : "Show"} Map</span>
-              </button>
             </>
           )}
 

src/components/explore/filter-text-dropdown.js

@@ -1,7 +1,7 @@
 import React, { useState } from "react"
 import PropTypes from "prop-types"
 
-import { CloseIcon, ExternalLinkIcon, SearchIcon } from "../../icons"
+import { CloseIcon, SearchIcon, InformationIcon } from "../../icons"
 import { NEGATIVE, POSITIVE } from "../../utils/constants"
 import { colors } from "../../theme"
 import {
@@ -115,7 +115,7 @@ const DropdownByTextInput = ({
             placeholder={placeholder}
             style={{ border: "unset" }}
           />
-          {hasLinkOut && (
+          {hasLinkOut && !term && (
             <a
               href={
                 "https://gcmd.earthdata.nasa.gov/KeywordViewer/scheme/all/e9f67a66-e9fc-435c-b720-ae32a2c3d8f5?gtm_keyword=EARTH%20SCIENCE&gtm_scheme=Earth%20Science "
@@ -124,10 +124,10 @@ const DropdownByTextInput = ({
               rel="noreferrer"
               aria-label="Link to GCMD keywords"
               css={`
-                margin: 4px 10px;
+                margin: 10px 10px 4px 10px;
               `}
             >
-              <ExternalLinkIcon color={colors[NEGATIVE].text} />
+              <InformationIcon color={colors[NEGATIVE].text} />
             </a>
           )}
         </span>

src/icons/index.js

@@ -6,6 +6,7 @@ import SearchIcon from "./search-icon"
 import TrashIcon from "./trash-icon"
 import FilterIcon from "./filter-icon"
 import ExternalLinkIcon from "./external-link-icon"
+import InformationIcon from "./information-icon"
 
 import CampaignIcon from "./campaign-icon"
 import InstrumentIcon from "./instrument-icon"
@@ -25,6 +26,7 @@ export {
   TrashIcon,
   FilterIcon,
   ExternalLinkIcon,
+  InformationIcon,
 }
 
 export { CampaignIcon, InstrumentIcon, PlatformIcon, CaseiLogoIcon }

src/icons/information-icon.js

@@ -0,0 +1,19 @@
+import React from "react"
+import PropTypes from "prop-types"
+
+const ExternalLinkIcon = ({ color = "#FFF" }) => (
+  <svg version="1.1" width="16" height="16" viewBox="0 0 16 16">
+    <rect width="16" height="16" id="icon-bound" fill="none" />
+    <title>Information</title>
+    <path
+      fill={color}
+      d="M7,12h2V7H7V12z M8,4C7.448,4,7,4.448,7,5s0.448,1,1,1c0.552,0,1-0.448,1-1S8.552,4,8,4z M8,0C3.582,0,0,3.582,0,8 c0,4.418,3.582,8,8,8s8-3.582,8-8C16,3.582,12.418,0,8,0z M12.243,12.243C11.109,13.376,9.603,14,8,14s-3.109-0.624-4.243-1.757 C2.624,11.109,2,9.603,2,8s0.624-3.109,1.757-4.243C4.891,2.624,6.397,2,8,2s3.109,0.624,4.243,1.757C13.376,4.891,14,6.397,14,8 C14,9.603,13.376,11.109,12.243,12.243z"
+    />
+  </svg>
+)
+
+ExternalLinkIcon.propTypes = {
+  color: PropTypes.string,
+}
+
+export default ExternalLinkIcon

src/pages/explore/products.js

@@ -135,6 +135,25 @@ export default function ExploreProducts({ data, location }) {
     { vals: [], set: new Set() }
   ).vals
 
+  const allGeophysicalConcepts = allShapedDoi.reduce(
+    (acc, doi) => {
+      if (doi.campaigns) {
+        for (const campaign of doi.campaigns) {
+          if (campaign.geophysical_concepts) {
+            for (const concept of campaign.geophysical_concepts) {
+              if (concept?.shortname && !acc.set.has(concept?.shortname)) {
+                acc.set.add(concept.shortname)
+                acc.vals.push(concept)
+              }
+            }
+          }
+        }
+      }
+      return acc
+    },
+    { vals: [], set: new Set() }
+  ).vals
+
   let shapedGcmdPhenomena = []
   let GcmdKeywordSet = new Set()
   for (const doi of allShapedDoi) {
@@ -203,6 +222,17 @@ export default function ExploreProducts({ data, location }) {
       }
       for (const campaign of doi.campaigns) {
         if (campaign && !acc.set.has(campaign.id)) {
+          if (campaign.aliases) {
+            for (const alias of campaign.aliases) {
+              acc.set.add(alias.id)
+              acc.values.push({
+                id: alias.id,
+                shortname: alias.shortname,
+                longname: alias.longname,
+                type: "alias",
+              })
+            }
+          }
           acc.set.add(campaign.id)
           acc.values.push({
             id: campaign.id,
@@ -216,7 +246,7 @@ export default function ExploreProducts({ data, location }) {
     },
     { values: [], set: new Set() }
   ).values
-
+  console.log({ allCampaignPlatformInstruments })
   const { getFilterLabelById, getFilterOptionsById } = selector({
     measurement: { options: allMeasurementTypes },
     style: { options: allMeasurementStyles },
@@ -225,6 +255,7 @@ export default function ExploreProducts({ data, location }) {
     gcmd: { options: shapedGcmdPhenomena },
     platform: { options: allPlatform.nodes },
     related: { options: allCampaignPlatformInstruments },
+    concepts: { options: allGeophysicalConcepts },
     funding: {
       // This transforms the query results from the distinct `funding_agency`
       // field into the filter format { id, shortname }.
@@ -403,6 +434,14 @@ export const query = graphql`
           id
           shortname: short_name
           longname: long_name
+          geophysical_concepts {
+            shortname: short_name
+            id
+          }
+          aliases {
+            id
+            shortname: short_name
+          }
           end_date
           start_date
           deployments {
@@ -505,6 +544,11 @@ ExploreProducts.propTypes = {
               id: PropTypes.string.isRequired,
               longname: PropTypes.string.isRequired,
               shortname: PropTypes.string.isRequired,
+              aliases: PropTypes.arrayOf(
+                PropTypes.shape({
+                  shortname: PropTypes.string,
+                })
+              ),
               measurement_type: PropTypes.shape({
                 short_name: PropTypes.string,
               }),

src/templates/campaign/index.js

@@ -273,7 +273,7 @@ CampaignTemplate.propTypes = {
       countDataProducts: PropTypes.number,
       aliases: PropTypes.arrayOf(
         PropTypes.shape({
-          shortname: PropTypes.string.isRequired,
+          shortname: PropTypes.string,
         }).isRequired
       ),
       description: PropTypes.string.isRequired,

src/utils/filter-utils.js

@@ -119,8 +119,26 @@ export function productsFilter(selectedFilterIds) {
       }, new Set())
     )
 
+    const geophysicalConcepts = Array.from(
+      product.campaigns.reduce((acc, campaign) => {
+        if (campaign.geophysical_concepts) {
+          for (const concept of campaign.geophysical_concepts) {
+            acc.add(concept?.id)
+          }
+        }
+        return acc
+      }, new Set())
+    )
+
     const gcmdKeywords = new Set()
-    const keywords = JSON.parse(product.keywords)
+    // const keywords = JSON.parse(product.keywords)
+    let keywords = []
+    try {
+      keywords = JSON.parse(product.keywords)
+    } catch (e) {
+      console.error(`ERROR: Could not parse ${product.keywords}`)
+    }
+
     if (
       keywords?.length &&
       keywords != "null" &&
@@ -165,6 +183,11 @@ export function productsFilter(selectedFilterIds) {
     }
     for (const campaign of product.campaigns) {
       relatedKeywords.add(campaign.id)
+      if (campaign.aliases) {
+        for (const alias of campaign.aliases) {
+          relatedKeywords.add(alias.id)
+        }
+      }
     }
     for (const platform of product.platforms) {
       relatedKeywords.add(platform.id)
@@ -176,7 +199,8 @@ export function productsFilter(selectedFilterIds) {
         measurementRegions.includes(filterId) ||
         measurementStyles.includes(filterId) ||
         gcmdKeywords.has(filterId) ||
-        relatedKeywords.has(filterId)
+        relatedKeywords.has(filterId) ||
+        geophysicalConcepts.includes(filterId)
     )
   }
 }