From 2ab8c733e7e3d118098943a773b02a034e2e50ce Mon Sep 17 00:00:00 2001 From: Tammo Feldmann <31222040+Tammo-Feldmann@users.noreply.github.com> Date: Mon, 26 Jun 2023 14:12:04 -0700 Subject: [PATCH] Adjust filters and layout closes #548 (#552) * Adjust filters and layout * Add campaing aliases * Add aliases props --- src/components/explore/explore-tools.js | 70 +++++++++++-------- .../explore/filter-text-dropdown.js | 8 +-- src/icons/index.js | 2 + src/icons/information-icon.js | 19 +++++ src/pages/explore/products.js | 46 +++++++++++- src/templates/campaign/index.js | 2 +- src/utils/filter-utils.js | 28 +++++++- 7 files changed, 136 insertions(+), 39 deletions(-) create mode 100644 src/icons/information-icon.js diff --git a/src/components/explore/explore-tools.js b/src/components/explore/explore-tools.js index d2a2b09df..51d385b74 100644 --- a/src/components/explore/explore-tools.js +++ b/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} /> + + item !== "") .join(" ")}` } - filterLayoutWidth={"40%"} + filterLayoutWidth={"41.75%"} /> - - - )} diff --git a/src/components/explore/filter-text-dropdown.js b/src/components/explore/filter-text-dropdown.js index 3ceee98bb..e53fd4c0e 100644 --- a/src/components/explore/filter-text-dropdown.js +++ b/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 && ( - + )} diff --git a/src/icons/index.js b/src/icons/index.js index 31651ce72..a0d6f3e9f 100644 --- a/src/icons/index.js +++ b/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 } diff --git a/src/icons/information-icon.js b/src/icons/information-icon.js new file mode 100644 index 000000000..972d03cfc --- /dev/null +++ b/src/icons/information-icon.js @@ -0,0 +1,19 @@ +import React from "react" +import PropTypes from "prop-types" + +const ExternalLinkIcon = ({ color = "#FFF" }) => ( + + + Information + + +) + +ExternalLinkIcon.propTypes = { + color: PropTypes.string, +} + +export default ExternalLinkIcon diff --git a/src/pages/explore/products.js b/src/pages/explore/products.js index e446f9f4d..18a5d0f13 100644 --- a/src/pages/explore/products.js +++ b/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, }), diff --git a/src/templates/campaign/index.js b/src/templates/campaign/index.js index 8364a536d..8ec2c6168 100644 --- a/src/templates/campaign/index.js +++ b/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, diff --git a/src/utils/filter-utils.js b/src/utils/filter-utils.js index f2403360a..2994fa2f3 100644 --- a/src/utils/filter-utils.js +++ b/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) ) } }