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" }) => (
+
+)
+
+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)
)
}
}