From 6790023c28719193c533c303855059d7fa5b2372 Mon Sep 17 00:00:00 2001 From: tienhoah Date: Wed, 13 Sep 2023 16:41:46 -0700 Subject: [PATCH 1/6] Add extra items to bleaching subheading and refactor. --- src/components/ProtocolChartSubHeading.js | 87 ++++++++++++++++------- 1 file changed, 61 insertions(+), 26 deletions(-) diff --git a/src/components/ProtocolChartSubHeading.js b/src/components/ProtocolChartSubHeading.js index 868a8d0..1ca7d68 100644 --- a/src/components/ProtocolChartSubHeading.js +++ b/src/components/ProtocolChartSubHeading.js @@ -1,5 +1,6 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' +import styled from 'styled-components/macro' import { Typography } from '@material-ui/core' import FishFamilyModal from './FishFamilyModal' import { @@ -7,9 +8,25 @@ import { bleachingPropType, fishbeltPropType, } from '../lib/mermaidDataPropTypes' +import { + BENTHIC_LIT_SAMPLE_UNIT, + BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT, + BENTHIC_PIT_SAMPLE_UNIT, + BLEACHING_SAMPLE_UNIT, + FISHBELT_SAMPLE_UNIT, +} from '../constants/transect-protocols' + +const SubHeadingText = ({ propertyName, propertyInfo, unit = '' }) => { + return propertyInfo ? ( + + {propertyName}: {propertyInfo} + {unit} + + ) : null +} const ProtocolChartSubHeading = ({ - protocolName, + sampleUnit, protocolProperties, isPrivatePolicy, bleachingProtocolSubItems, @@ -19,17 +36,21 @@ const ProtocolChartSubHeading = ({ const fishFamilyModalToggleHandler = () => setFishFamilyModalStageOpen(!fishFamilyModalStageOpen) - if (isPrivatePolicy || !protocolName) { + if (isPrivatePolicy || !sampleUnit) { return <> } - if (protocolName === 'beltfish') { + if (sampleUnit === FISHBELT_SAMPLE_UNIT) { + const { sample_unit_count, biomass_kgha_avg } = protocolProperties + return ( <> - Sample units: {protocolProperties.sample_unit_count} - - Reef fish biomass: {protocolProperties.biomass_kgha_avg} kg/ha - + + {projectFishFamilies.length > 0 && ( <> @@ -47,33 +68,47 @@ const ProtocolChartSubHeading = ({ } if ( - protocolName === 'benthiclit' || - protocolName === 'benthicpit' || - protocolName === 'benthicpqt' + sampleUnit === BENTHIC_LIT_SAMPLE_UNIT || + sampleUnit === BENTHIC_PIT_SAMPLE_UNIT || + sampleUnit === BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT ) { + const { sample_unit_count, percent_cover_by_benthic_category_avg } = protocolProperties + return ( <> - Sample units: {protocolProperties.sample_unit_count} - - Hard coral cover: {protocolProperties.percent_cover_by_benthic_category_avg['Hard coral']} - % - + + ) } - if (protocolName === 'bleachingqc') { + if (sampleUnit === BLEACHING_SAMPLE_UNIT) { + const { count_total_avg, count_genera_avg } = bleachingProtocolSubItems + const { percent_hard_avg_avg, percent_soft_avg_avg, percent_algae_avg_avg } = protocolProperties + return ( <> - - Bleached colonies: {bleachingProtocolSubItems.percent_bleached_avg.toFixed(1)}% - - - Hard coral genera: {bleachingProtocolSubItems.count_genera_avg} - - - Observed coral colonies: {bleachingProtocolSubItems.count_total_avg} - + + + + + ) } @@ -82,7 +117,7 @@ const ProtocolChartSubHeading = ({ } ProtocolChartSubHeading.propTypes = { - protocolName: PropTypes.string.isRequired, + sampleUnit: PropTypes.string.isRequired, protocolProperties: PropTypes.oneOfType([ fishbeltPropType, benthicPitPropType, From a8e89aa8d44065927b56e9f1d373cf23e04709b8 Mon Sep 17 00:00:00 2001 From: tienhoah Date: Wed, 13 Sep 2023 16:42:00 -0700 Subject: [PATCH 2/6] Refactor and rename. --- src/components/CardChartContent.js | 8 ++-- src/components/DownloadDataModal.js | 18 +++++---- src/components/InformationCard.js | 22 ++++++----- src/components/PieChart.js | 9 +++-- src/components/SiteDetail.js | 44 +++++++++++++++------- src/constants/transect-protocols.js | 57 +++++++++++++++++------------ 6 files changed, 97 insertions(+), 61 deletions(-) diff --git a/src/components/CardChartContent.js b/src/components/CardChartContent.js index 6f208a7..55ea904 100644 --- a/src/components/CardChartContent.js +++ b/src/components/CardChartContent.js @@ -9,7 +9,7 @@ import { histogramContentPropType, pieChartContentPropType } from '../lib/mermai const CardChartContent = ({ chartType, - protocolName, + sampleUnit, pieChartContent, isPrivatePolicy, title, @@ -20,7 +20,7 @@ const CardChartContent = ({ ) : ( { // Both keys 'colonies_bleached' and 'quadrat_benthic_percent' are part of Bleaching protocol. // this filter is based on the setup in transect-protocol.js as 'quadrat_benthic_percent' is used to determined as Bleaching. - protocols => protocols !== 'colonies_bleached', + protocols => protocols !== BLEACHING_PROPERTY_COLONIES_BLEACHED, ) return uniqueAvailableProtocol.reduce((accumulator, protocol) => { - const protocolMethod = protocolMethods[protocol] + const protocolTitle = protocolTitles[protocol] - if (protocolMethod) { + if (protocolTitle) { const protocolDataPolicy = - protocolMethod === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${protocol}` + protocolTitle === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${protocol}` const protocolInfo = { - method: protocolMethod, + method: protocolTitle, policy: currentSelectedSite[protocolDataPolicy], protocol, } @@ -80,7 +84,7 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => { } const handleDownloadCSV = protocol => { - const protocolToDownload = pluralizedProtocols[protocol] + const protocolToDownload = pluralizedSampleUnits[protocol] const downloadCSVApi = `${process.env.REACT_APP_MERMAID_API_URL}/v1/projects/${currentSelectedSite.project_id}/${protocolToDownload}/sampleevents/csv/` window.open(downloadCSVApi) diff --git a/src/components/InformationCard.js b/src/components/InformationCard.js index 8dc02c5..bbc2d03 100644 --- a/src/components/InformationCard.js +++ b/src/components/InformationCard.js @@ -50,8 +50,8 @@ const InformationCard = ({ histogramContent, isFiltering, isPrivatePolicy, - protocol, - protocolName, + protocolProperties, + sampleUnit, title, type, pieChartContent, @@ -69,8 +69,8 @@ const InformationCard = ({ Data sharing: {dataPolicy} { +const PieChart = ({ sampleUnit, chartContent, isPrivatePolicy, title }) => { const mediaMin600 = useMediaQuery('(min-width:600px)') const mediaMax600 = useMediaQuery('(max-width:600px)') const mediaMax960 = useMediaQuery('(max-width:960px') @@ -54,7 +55,7 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => { const mediaMin960_Max1280 = mediaMax1280 && mediaMin960 const attributeColors = - protocolName === 'beltfish' ? fishBeltAttributeColors : benthicAttributeColors + sampleUnit === FISHBELT_SAMPLE_UNIT ? fishBeltAttributeColors : benthicAttributeColors const attributeCollection = chartContent.map(({ x, y }) => y !== 0 && x) const filteredAttributeCollection = attributeColors.filter(({ name }) => attributeCollection.includes(name), @@ -66,7 +67,7 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => { return { x: name, y: foundAttribute.y } }) - const labelUnit = protocolName === 'beltfish' ? 'kg/ha' : '%' + const labelUnit = sampleUnit === FISHBELT_SAMPLE_UNIT ? 'kg/ha' : '%' const legendData = contentData .filter(({ y }) => y > 0) .map(({ x }) => ({ name: x, symbol: { type: 'square' } })) @@ -187,7 +188,7 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => { PieChart.propTypes = { chartContent: pieChartContentPropType.isRequired, isPrivatePolicy: PropTypes.bool, - protocolName: PropTypes.string.isRequired, + sampleUnit: PropTypes.string.isRequired, title: PropTypes.string.isRequired, } diff --git a/src/components/SiteDetail.js b/src/components/SiteDetail.js index 834f660..dddf6e4 100644 --- a/src/components/SiteDetail.js +++ b/src/components/SiteDetail.js @@ -13,7 +13,18 @@ import SiteNote from './SiteNote' import InformationCard from './InformationCard' import { TextLoader } from './Loader' import { defaultPieChartContent } from '../constants/sample-data' -import { chartContentProperties, chartTitles } from '../constants/transect-protocols' +import { + BENTHIC_LIT_SAMPLE_UNIT, + BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT, + BENTHIC_PIT_SAMPLE_UNIT, + BLEACHING_PROPERTY_COLONIES_BLEACHED, + BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT, + BLEACHING_SAMPLE_UNIT, + FISHBELT_SAMPLE_UNIT, + HABITAT_COMPLEXITY_SAMPLE_UNIT, + chartContentProperties, + chartTitles, +} from '../constants/transect-protocols' import getChartContent from '../lib/chart-helpers' import { ReactComponent as OrganizationIcon } from '../styles/Icons/earth.svg' import { sitesPropType } from '../lib/mermaidDataPropTypes' @@ -41,8 +52,14 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { ) const filteredProtocolsForSiteChartCards = useMemo(() => { - const sortBy = ['benthicpit', 'benthiclit', 'benthicpqt', 'quadrat_benthic_percent', 'beltfish'] - const ignoreProtocols = ['colonies_bleached', 'habitatcomplexity'] + const sortBy = [ + BENTHIC_PIT_SAMPLE_UNIT, + BENTHIC_LIT_SAMPLE_UNIT, + BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT, + BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT, + FISHBELT_SAMPLE_UNIT, + ] + const ignoreProtocols = [BLEACHING_PROPERTY_COLONIES_BLEACHED, HABITAT_COMPLEXITY_SAMPLE_UNIT] const sortProtocols = Object.entries(currentSelectedSite?.protocols).sort( (a, b) => sortBy.indexOf(a[0]) - sortBy.indexOf(b[0]), @@ -51,9 +68,10 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { return sortProtocols.filter(protocol => !ignoreProtocols.includes(protocol[0])) }, [currentSelectedSite.protocols]) - const bleachingProtocolSubItems = useMemo(() => currentSelectedSite.protocols.colonies_bleached, [ - currentSelectedSite, - ]) + const bleachingProtocolSubItems = useMemo( + () => currentSelectedSite.protocols[BLEACHING_PROPERTY_COLONIES_BLEACHED], + [currentSelectedSite], + ) const handleCurrentSelectedSiteChange = event => { const filterSampleEventSite = selectSite.filter( @@ -93,19 +111,19 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { const siteChartCards = filteredProtocolsForSiteChartCards.map( ([protocol, protocolProperties]) => { - const isBleachingProtocol = protocol === 'quadrat_benthic_percent' - const protocolName = isBleachingProtocol ? 'bleachingqc' : protocol - const dataPolicy = currentSelectedSite[`data_policy_${protocolName}`] + const isBleachingSampleUnit = protocol === BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT + const sampleUnit = isBleachingSampleUnit ? BLEACHING_SAMPLE_UNIT : protocol + const dataPolicy = currentSelectedSite[`data_policy_${sampleUnit}`] const isPrivatePolicy = dataPolicy === 'private' const chartTitle = chartTitles[protocol] const chartInfoProperty = chartContentProperties[protocol] - const chartInfo = isBleachingProtocol + const chartInfo = isBleachingSampleUnit ? protocolProperties : protocolProperties[chartInfoProperty] const sourceContent = isPrivatePolicy ? defaultPieChartContent - : getChartContent(chartInfo, isBleachingProtocol) + : getChartContent(chartInfo, isBleachingSampleUnit) return (
@@ -115,8 +133,8 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { isPrivatePolicy={isPrivatePolicy} pieChartContent={sourceContent} projectFishFamilies={projectFishFamilies} - protocol={protocolProperties} - protocolName={protocolName} + protocolProperties={protocolProperties} + sampleUnit={sampleUnit} title={chartTitle} type="pieChart" /> diff --git a/src/constants/transect-protocols.js b/src/constants/transect-protocols.js index 6c2047d..f2c46f7 100644 --- a/src/constants/transect-protocols.js +++ b/src/constants/transect-protocols.js @@ -1,3 +1,12 @@ +export const FISHBELT_SAMPLE_UNIT = 'beltfish' +export const BENTHIC_PIT_SAMPLE_UNIT = 'benthicpit' +export const BENTHIC_LIT_SAMPLE_UNIT = 'benthiclit' +export const BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT = 'benthicpqt' +export const HABITAT_COMPLEXITY_SAMPLE_UNIT = 'habitatcomplexity' +export const BLEACHING_SAMPLE_UNIT = 'bleachingqc' +export const BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT = 'quadrat_benthic_percent' +export const BLEACHING_PROPERTY_COLONIES_BLEACHED = 'colonies_bleached' + export const bleachingCategories = [ { type: 'percent_hard_avg_avg', name: 'Hard coral' }, { type: 'percent_soft_avg_avg', name: 'Soft coral' }, @@ -5,35 +14,35 @@ export const bleachingCategories = [ ] export const chartContentProperties = { - benthiclit: 'percent_cover_by_benthic_category_avg', - benthicpit: 'percent_cover_by_benthic_category_avg', - benthicpqt: 'percent_cover_by_benthic_category_avg', - beltfish: 'biomass_kgha_by_trophic_group_avg', - quadrat_benthic_percent: 'quadrat_benthic_percent', + [BENTHIC_LIT_SAMPLE_UNIT]: 'percent_cover_by_benthic_category_avg', + [BENTHIC_PIT_SAMPLE_UNIT]: 'percent_cover_by_benthic_category_avg', + [BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT]: 'percent_cover_by_benthic_category_avg', + [FISHBELT_SAMPLE_UNIT]: 'biomass_kgha_by_trophic_group_avg', + [BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT]: 'quadrat_benthic_percent', } export const chartTitles = { - benthiclit: 'Benthic % Cover (LIT)', - benthicpit: 'Benthic % Cover (PIT)', - benthicpqt: 'Benthic % Cover (Photo Quadrat)', - beltfish: 'Fish Belt', - quadrat_benthic_percent: 'Bleaching', + [BENTHIC_LIT_SAMPLE_UNIT]: 'Benthic % Cover (LIT)', + [BENTHIC_PIT_SAMPLE_UNIT]: 'Benthic % Cover (PIT)', + [BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT]: 'Benthic % Cover (Photo Quadrat)', + [FISHBELT_SAMPLE_UNIT]: 'Fish Belt', + [BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT]: 'Bleaching', } -export const protocolMethods = { - beltfish: 'Fish Belt', - benthiclit: 'Benthic LIT', - benthicpit: 'Benthic PIT', - benthicpqt: 'Benthic Photo Quadrat', - habitatcomplexity: 'Habitat Complexity', - quadrat_benthic_percent: 'Bleaching', +export const protocolTitles = { + [FISHBELT_SAMPLE_UNIT]: 'Fish Belt', + [BENTHIC_LIT_SAMPLE_UNIT]: 'Benthic LIT', + [BENTHIC_PIT_SAMPLE_UNIT]: 'Benthic PIT', + [BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT]: 'Benthic Photo Quadrat', + [HABITAT_COMPLEXITY_SAMPLE_UNIT]: 'Habitat Complexity', + [BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT]: 'Bleaching', } -export const pluralizedProtocols = { - beltfish: 'beltfishes', - benthiclit: 'benthiclits', - benthicpit: 'benthicpits', - benthicpqt: 'benthicpqts', - habitatcomplexity: 'habitatcomplexities', - quadrat_benthic_percent: 'bleachingqcs', +export const pluralizedSampleUnits = { + [FISHBELT_SAMPLE_UNIT]: 'beltfishes', + [BENTHIC_LIT_SAMPLE_UNIT]: 'benthiclits', + [BENTHIC_PIT_SAMPLE_UNIT]: 'benthicpits', + [BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT]: 'benthicpqts', + [HABITAT_COMPLEXITY_SAMPLE_UNIT]: 'habitatcomplexities', + [BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT]: 'bleachingqcs', } From 4725068317f93ad528662b19b0f2deee0828be2e Mon Sep 17 00:00:00 2001 From: tienhoah Date: Wed, 13 Sep 2023 16:48:09 -0700 Subject: [PATCH 3/6] Fix lint errors. --- src/components/ProtocolChartSubHeading.js | 41 ++++++++++++++--------- 1 file changed, 25 insertions(+), 16 deletions(-) diff --git a/src/components/ProtocolChartSubHeading.js b/src/components/ProtocolChartSubHeading.js index 1ca7d68..b3e9893 100644 --- a/src/components/ProtocolChartSubHeading.js +++ b/src/components/ProtocolChartSubHeading.js @@ -1,6 +1,5 @@ import PropTypes from 'prop-types' import React, { useState } from 'react' -import styled from 'styled-components/macro' import { Typography } from '@material-ui/core' import FishFamilyModal from './FishFamilyModal' import { @@ -16,7 +15,7 @@ import { FISHBELT_SAMPLE_UNIT, } from '../constants/transect-protocols' -const SubHeadingText = ({ propertyName, propertyInfo, unit = '' }) => { +const SubHeadingText = ({ propertyName, propertyInfo, unit }) => { return propertyInfo ? ( {propertyName}: {propertyInfo} @@ -45,11 +44,11 @@ const ProtocolChartSubHeading = ({ return ( <> - + {projectFishFamilies.length > 0 && ( <> @@ -76,11 +75,11 @@ const ProtocolChartSubHeading = ({ return ( <> - + ) @@ -92,22 +91,22 @@ const ProtocolChartSubHeading = ({ return ( <> - - + + ) @@ -116,6 +115,16 @@ const ProtocolChartSubHeading = ({ return <> } +SubHeadingText.propTypes = { + propertyName: PropTypes.string.isRequired, + propertyInfo: PropTypes.string.isRequired, + unit: PropTypes.string, +} + +SubHeadingText.defaultProps = { + unit: '', +} + ProtocolChartSubHeading.propTypes = { sampleUnit: PropTypes.string.isRequired, protocolProperties: PropTypes.oneOfType([ From 18a5b4f3eed2aceccec096a7ef5277fc19ce307f Mon Sep 17 00:00:00 2001 From: tienhoah Date: Thu, 14 Sep 2023 13:17:47 -0700 Subject: [PATCH 4/6] Add new bleaching legend pie chart vis. --- src/components/CardChartContent.js | 9 +++------ src/components/PieChart.js | 12 +++--------- src/components/ProtocolChartSubHeading.js | 3 ++- src/components/SiteDetail.js | 2 +- src/constants/attribute-colors.js | 6 ++++++ src/constants/transect-protocols.js | 22 ++++++++++++++++++---- src/lib/chart-helpers.js | 2 +- 7 files changed, 34 insertions(+), 22 deletions(-) diff --git a/src/components/CardChartContent.js b/src/components/CardChartContent.js index 55ea904..86844e8 100644 --- a/src/components/CardChartContent.js +++ b/src/components/CardChartContent.js @@ -32,17 +32,14 @@ const CardChartContent = ({ CardChartContent.propTypes = { chartType: PropTypes.string.isRequired, - sampleUnit: PropTypes.string, - title: PropTypes.string, - isPrivatePolicy: PropTypes.bool, + sampleUnit: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + isPrivatePolicy: PropTypes.bool.isRequired, pieChartContent: pieChartContentPropType, histogramContent: histogramContentPropType, } CardChartContent.defaultProps = { - sampleUnit: undefined, - title: undefined, - isPrivatePolicy: undefined, pieChartContent: [], histogramContent: [], } diff --git a/src/components/PieChart.js b/src/components/PieChart.js index a3ce2e4..aac9ecf 100644 --- a/src/components/PieChart.js +++ b/src/components/PieChart.js @@ -4,13 +4,9 @@ import useMediaQuery from '@material-ui/core/useMediaQuery' import styled, { css } from 'styled-components/macro' import PropTypes from 'prop-types' -import { - privateColorScale, - benthicAttributeColors, - fishBeltAttributeColors, -} from '../constants/attribute-colors' +import { privateColorScale } from '../constants/attribute-colors' import { pieChartContentPropType } from '../lib/mermaidDataPropTypes' -import { FISHBELT_SAMPLE_UNIT } from '../constants/transect-protocols' +import { FISHBELT_SAMPLE_UNIT, sampleUnitAttributeColors } from '../constants/transect-protocols' const ChartWrapper = styled('div')` width: 100%; @@ -54,10 +50,8 @@ const PieChart = ({ sampleUnit, chartContent, isPrivatePolicy, title }) => { const mediaMin600_Max960 = mediaMax960 && mediaMin600 const mediaMin960_Max1280 = mediaMax1280 && mediaMin960 - const attributeColors = - sampleUnit === FISHBELT_SAMPLE_UNIT ? fishBeltAttributeColors : benthicAttributeColors const attributeCollection = chartContent.map(({ x, y }) => y !== 0 && x) - const filteredAttributeCollection = attributeColors.filter(({ name }) => + const filteredAttributeCollection = sampleUnitAttributeColors[sampleUnit].filter(({ name }) => attributeCollection.includes(name), ) const attributeColorScale = filteredAttributeCollection.map(({ color }) => color) diff --git a/src/components/ProtocolChartSubHeading.js b/src/components/ProtocolChartSubHeading.js index b3e9893..24879f9 100644 --- a/src/components/ProtocolChartSubHeading.js +++ b/src/components/ProtocolChartSubHeading.js @@ -117,11 +117,12 @@ const ProtocolChartSubHeading = ({ SubHeadingText.propTypes = { propertyName: PropTypes.string.isRequired, - propertyInfo: PropTypes.string.isRequired, + propertyInfo: PropTypes.number, unit: PropTypes.string, } SubHeadingText.defaultProps = { + propertyInfo: null, unit: '', } diff --git a/src/components/SiteDetail.js b/src/components/SiteDetail.js index dddf6e4..ba6d09f 100644 --- a/src/components/SiteDetail.js +++ b/src/components/SiteDetail.js @@ -118,7 +118,7 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { const chartTitle = chartTitles[protocol] const chartInfoProperty = chartContentProperties[protocol] const chartInfo = isBleachingSampleUnit - ? protocolProperties + ? bleachingProtocolSubItems : protocolProperties[chartInfoProperty] const sourceContent = isPrivatePolicy diff --git a/src/constants/attribute-colors.js b/src/constants/attribute-colors.js index 8bd1fc5..6b009e5 100644 --- a/src/constants/attribute-colors.js +++ b/src/constants/attribute-colors.js @@ -22,6 +22,12 @@ export const fishBeltAttributeColors = [ { name: 'planktivore', color: '#BEBADA' }, ] +export const bleachingAttributeColors = [ + { name: 'Normal', color: '#3c6e99' }, + { name: 'Pale', color: '#a8bed5' }, + { name: 'Bleached & Recently Dead', color: '#B4B4B4' }, +] + export const privateColorScale = [ '#DCDCDC', '#D3D3D3', diff --git a/src/constants/transect-protocols.js b/src/constants/transect-protocols.js index f2c46f7..2570472 100644 --- a/src/constants/transect-protocols.js +++ b/src/constants/transect-protocols.js @@ -1,3 +1,9 @@ +import { + benthicAttributeColors, + bleachingAttributeColors, + fishBeltAttributeColors, +} from './attribute-colors' + export const FISHBELT_SAMPLE_UNIT = 'beltfish' export const BENTHIC_PIT_SAMPLE_UNIT = 'benthicpit' export const BENTHIC_LIT_SAMPLE_UNIT = 'benthiclit' @@ -8,11 +14,10 @@ export const BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT = 'quadrat_benthic_perce export const BLEACHING_PROPERTY_COLONIES_BLEACHED = 'colonies_bleached' export const bleachingCategories = [ - { type: 'percent_hard_avg_avg', name: 'Hard coral' }, - { type: 'percent_soft_avg_avg', name: 'Soft coral' }, - { type: 'percent_algae_avg_avg', name: 'Macroalgae' }, + { type: 'percent_normal_avg', name: 'Normal' }, + { type: 'percent_pale_avg', name: 'Pale' }, + { type: 'percent_bleached_avg', name: 'Bleached & Recently Dead' }, ] - export const chartContentProperties = { [BENTHIC_LIT_SAMPLE_UNIT]: 'percent_cover_by_benthic_category_avg', [BENTHIC_PIT_SAMPLE_UNIT]: 'percent_cover_by_benthic_category_avg', @@ -46,3 +51,12 @@ export const pluralizedSampleUnits = { [HABITAT_COMPLEXITY_SAMPLE_UNIT]: 'habitatcomplexities', [BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT]: 'bleachingqcs', } + +export const sampleUnitAttributeColors = { + [FISHBELT_SAMPLE_UNIT]: fishBeltAttributeColors, + [BENTHIC_LIT_SAMPLE_UNIT]: benthicAttributeColors, + [BENTHIC_PIT_SAMPLE_UNIT]: benthicAttributeColors, + [BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT]: benthicAttributeColors, + [HABITAT_COMPLEXITY_SAMPLE_UNIT]: benthicAttributeColors, + [BLEACHING_SAMPLE_UNIT]: bleachingAttributeColors, +} diff --git a/src/lib/chart-helpers.js b/src/lib/chart-helpers.js index dc99c07..be128cf 100644 --- a/src/lib/chart-helpers.js +++ b/src/lib/chart-helpers.js @@ -3,7 +3,7 @@ import { bleachingCategories } from '../constants/transect-protocols' export default function getChartContent(content, isBleaching) { if (isBleaching) { return bleachingCategories.reduce((accumulator, category) => { - const { name, type } = category + const { type, name } = category if (content[type]) { accumulator.push({ x: name, y: content[type] }) From 643d44358b46a00ab75f19c51421ecfab3acc9e4 Mon Sep 17 00:00:00 2001 From: tienhoah Date: Fri, 15 Sep 2023 16:21:30 -0700 Subject: [PATCH 5/6] Rename all protocol to sample unit names, fix react key id warning. --- src/components/AutocompleteFilter.js | 4 +- src/components/DownloadDataModal.js | 58 +++++++++---------- src/components/InformationCard.js | 24 ++++---- src/components/MermaidDash.js | 26 ++++----- src/components/PieChart.js | 5 +- ...eading.js => SampleUnitChartSubHeading.js} | 34 ++++++----- src/components/SiteDetail.js | 37 ++++++------ ...rotocols.js => sample-unit-information.js} | 2 +- src/lib/chart-helpers.js | 2 +- 9 files changed, 101 insertions(+), 91 deletions(-) rename src/components/{ProtocolChartSubHeading.js => SampleUnitChartSubHeading.js} (82%) rename src/constants/{transect-protocols.js => sample-unit-information.js} (98%) diff --git a/src/components/AutocompleteFilter.js b/src/components/AutocompleteFilter.js index 2b16d3d..d2093dd 100644 --- a/src/components/AutocompleteFilter.js +++ b/src/components/AutocompleteFilter.js @@ -70,10 +70,10 @@ const AutocompleteFilter = ({ return (
- {parts.map(part => { + {parts.map((part, index) => { return ( {part.text} diff --git a/src/components/DownloadDataModal.js b/src/components/DownloadDataModal.js index e4bd869..b15e52e 100644 --- a/src/components/DownloadDataModal.js +++ b/src/components/DownloadDataModal.js @@ -17,10 +17,10 @@ import CloudDownloadIcon from '@material-ui/icons/CloudDownload' import { DialogText, DialogTitle, MermaidButton } from '../styles/MermaidStyledComponents' import { - protocolTitles, + sampleUnitTitles, pluralizedSampleUnits, BLEACHING_PROPERTY_COLONIES_BLEACHED, -} from '../constants/transect-protocols' +} from '../constants/sample-unit-information' import MermaidDashboardTooltip from './MermaidDashboardTooltip' import { siteDetailPropType, sitesPropType } from '../lib/mermaidDataPropTypes' @@ -46,31 +46,31 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => { const mediaMin1281 = useMediaQuery('(min-width:1281px)') const [open, setOpen] = useState(false) - const availableProtocols = useMemo(() => { + const availableSampleUnits = useMemo(() => { const allSites = sites.map(site => site[1]).flat() - const allProtocols = allSites.map(site => Object.keys(site.protocols)).flat() + const allSampleUnits = allSites.map(site => Object.keys(site.protocols)).flat() - const uniqueAvailableProtocol = [...new Set(allProtocols)].filter( - // Both keys 'colonies_bleached' and 'quadrat_benthic_percent' are part of Bleaching protocol. - // this filter is based on the setup in transect-protocol.js as 'quadrat_benthic_percent' is used to determined as Bleaching. + const uniqueAvailableSampleUnits = [...new Set(allSampleUnits)].filter( + // Both keys 'colonies_bleached' and 'quadrat_benthic_percent' are part of Bleaching sample unit. + // this filter is based on the setup in sample-unit-information.js as 'quadrat_benthic_percent' is used to determined as Bleaching. - protocols => protocols !== BLEACHING_PROPERTY_COLONIES_BLEACHED, + sampleUnitType => sampleUnitType !== BLEACHING_PROPERTY_COLONIES_BLEACHED, ) - return uniqueAvailableProtocol.reduce((accumulator, protocol) => { - const protocolTitle = protocolTitles[protocol] + return uniqueAvailableSampleUnits.reduce((accumulator, sampleUnit) => { + const sampleUnitTitle = sampleUnitTitles[sampleUnit] - if (protocolTitle) { - const protocolDataPolicy = - protocolTitle === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${protocol}` + if (sampleUnitTitle) { + const sampleUnitDataPolicy = + sampleUnitTitle === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${sampleUnit}` - const protocolInfo = { - method: protocolTitle, - policy: currentSelectedSite[protocolDataPolicy], - protocol, + const sampleUnitInfo = { + method: sampleUnitTitle, + policy: currentSelectedSite[sampleUnitDataPolicy], + sampleUnit, } - accumulator.push(protocolInfo) + accumulator.push(sampleUnitInfo) } return accumulator @@ -83,9 +83,9 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => { setOpen(false) } - const handleDownloadCSV = protocol => { - const protocolToDownload = pluralizedSampleUnits[protocol] - const downloadCSVApi = `${process.env.REACT_APP_MERMAID_API_URL}/v1/projects/${currentSelectedSite.project_id}/${protocolToDownload}/sampleevents/csv/` + const handleDownloadCSV = sampleUnit => { + const sampleUnitToDownload = pluralizedSampleUnits[sampleUnit] + const downloadCSVApi = `${process.env.REACT_APP_MERMAID_API_URL}/v1/projects/${currentSelectedSite.project_id}/${sampleUnitToDownload}/sampleevents/csv/` window.open(downloadCSVApi) } @@ -105,12 +105,12 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => { ) - const downloadCSVButton = protocol => ( + const downloadCSVButton = sampleUnit => ( handleDownloadCSV(protocol)} + onClick={() => handleDownloadCSV(sampleUnit)} > Download CSV @@ -141,13 +141,13 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => { - {availableProtocols.map(row => ( - - {row.method} - {row.policy} + {availableSampleUnits.map(({ method, policy, sampleUnit }) => ( + + {method} + {policy} - {row.policy === 'public' || row.policy === 'public summary' - ? downloadCSVButton(row.protocol) + {policy === 'public' || policy === 'public summary' + ? downloadCSVButton(sampleUnit) : contactAdminsButton} diff --git a/src/components/InformationCard.js b/src/components/InformationCard.js index bbc2d03..2ff1d3a 100644 --- a/src/components/InformationCard.js +++ b/src/components/InformationCard.js @@ -12,7 +12,7 @@ import CardChartContent from './CardChartContent' import CartTextContent from './CardTextContent' import LiveCoralCoverModal from './LiveCoralCoverModal' -import ProtocolChartSubHeading from './ProtocolChartSubHeading' +import SampleUnitChartSubHeading from './SampleUnitChartSubHeading' import { benthicPitPropType, bleachingPropType, @@ -45,12 +45,12 @@ const cardStyle = makeStyles(theme => ({ })) const InformationCard = ({ - bleachingProtocolSubItems, + bleachingSampleUnitSubItems, dataPolicy, histogramContent, isFiltering, isPrivatePolicy, - protocolProperties, + sampleUnitProperties, sampleUnit, title, type, @@ -65,14 +65,14 @@ const InformationCard = ({ const modalToggleHandler = () => setModalStage(!modalStageOpen) - const pieChartProtocolSubHeadingItem = type === 'pieChart' && ( + const pieChartSubHeadingItem = type === 'pieChart' && ( Data sharing: {dataPolicy} - @@ -106,7 +106,7 @@ const InformationCard = ({ /> )} - {pieChartProtocolSubHeadingItem} + {pieChartSubHeadingItem} {contentItem} @@ -119,14 +119,14 @@ const InformationCard = ({ } InformationCard.propTypes = { - bleachingProtocolSubItems: bleachingPropType, + bleachingSampleUnitSubItems: bleachingPropType, dataPolicy: PropTypes.string, histogramContent: histogramContentPropType, isFiltering: PropTypes.bool, isPrivatePolicy: PropTypes.bool, pieChartContent: pieChartContentPropType, projectFishFamilies: PropTypes.arrayOf(PropTypes.string), - protocolProperties: PropTypes.oneOfType([ + sampleUnitProperties: PropTypes.oneOfType([ fishbeltPropType, benthicPitPropType, bleachingPropType, @@ -138,12 +138,12 @@ InformationCard.propTypes = { } InformationCard.defaultProps = { - bleachingProtocolSubItems: {}, + bleachingSampleUnitSubItems: {}, histogramContent: [], pieChartContent: [], projectFishFamilies: [], textContent: {}, - protocolProperties: {}, + sampleUnitProperties: {}, sampleUnit: '', dataPolicy: '', isFiltering: false, diff --git a/src/components/MermaidDash.js b/src/components/MermaidDash.js index 3d09d47..5b23da4 100644 --- a/src/components/MermaidDash.js +++ b/src/components/MermaidDash.js @@ -164,16 +164,16 @@ class MermaidDash extends Component { return sampleEvents }, []) - const sampleEventProtocols = sampleEventsFromSites.map(({ protocols }) => protocols) + const sampleUnitProtocols = sampleEventsFromSites.map(({ protocols }) => protocols) - setHistogram(this.histogramCount(sampleEventProtocols, histogram)) + setHistogram(this.histogramCount(sampleUnitProtocols, histogram)) const countryCount = this.getCount(sampleEventsFromSites, 'country_id') const projectCount = this.getCount(sampleEventsFromSites, 'project_id') const yearCount = this.getCount(sampleEventsFromSites, 'sample_date') const uniqueSiteCount = updatedSites.length - const transectCount = this.getTransectCount(sampleEventProtocols) - const averageCoralCoverageCount = this.getAverageCoralCoverage(sampleEventProtocols) + const transectCount = this.getTransectCount(sampleUnitProtocols) + const averageCoralCoverageCount = this.getAverageCoralCoverage(sampleUnitProtocols) if (prevMetricCountriesCount !== countryCount) { metrics[0].count = countryCount @@ -384,8 +384,8 @@ class MermaidDash extends Component { return new Set(result).size } - getTransectCount = protocols => { - const protocolCount = protocols + getTransectCount = sampleUnits => { + const sampleUnitCount = sampleUnits .map(({ beltfish, benthicpit, benthiclit, habitatcomplexity, colonies_bleached }) => { const beltfishCount = beltfish ? beltfish.sample_unit_count : 0 const benthicPitCount = benthicpit ? benthicpit.sample_unit_count : 0 @@ -403,11 +403,11 @@ class MermaidDash extends Component { }) .reduce((acc, val) => acc + val, 0) - return protocolCount + return sampleUnitCount } - getSampleEventBenthicHardCoralAverages = protocols => { - return protocols.map(({ benthiclit, benthicpit, benthicpqt }) => { + getSampleEventBenthicHardCoralAverages = sampleUnits => { + return sampleUnits.map(({ benthiclit, benthicpit, benthicpqt }) => { const benthicLITCover = benthiclit && benthiclit.percent_cover_by_benthic_category_avg const benthicPITCover = benthicpit && benthicpit.percent_cover_by_benthic_category_avg const benthicPQTCover = benthicpqt && benthicpqt.percent_cover_by_benthic_category_avg @@ -434,8 +434,8 @@ class MermaidDash extends Component { }) } - getAverageCoralCoverage = protocols => { - const benthicHardCoralAverages = this.getSampleEventBenthicHardCoralAverages(protocols) + getAverageCoralCoverage = sampleUnits => { + const benthicHardCoralAverages = this.getSampleEventBenthicHardCoralAverages(sampleUnits) const filteredBenthicHardCoralAverages = benthicHardCoralAverages.filter(val => val !== null) const sumOfHardCoralAverages = filteredBenthicHardCoralAverages.reduce( (acc, val) => acc + val, @@ -517,8 +517,8 @@ class MermaidDash extends Component { zoomToSiteHandler = zoomToSiteOption => this.setState({ zoomToSite: zoomToSiteOption }) - histogramCount = (protocols, histogramData) => { - const benthicHardCoralCount = this.getSampleEventBenthicHardCoralAverages(protocols) + histogramCount = (sampleUnits, histogramData) => { + const benthicHardCoralCount = this.getSampleEventBenthicHardCoralAverages(sampleUnits) return histogramData.map(({ x }) => { let count = 0 diff --git a/src/components/PieChart.js b/src/components/PieChart.js index aac9ecf..11da413 100644 --- a/src/components/PieChart.js +++ b/src/components/PieChart.js @@ -6,7 +6,10 @@ import styled, { css } from 'styled-components/macro' import PropTypes from 'prop-types' import { privateColorScale } from '../constants/attribute-colors' import { pieChartContentPropType } from '../lib/mermaidDataPropTypes' -import { FISHBELT_SAMPLE_UNIT, sampleUnitAttributeColors } from '../constants/transect-protocols' +import { + FISHBELT_SAMPLE_UNIT, + sampleUnitAttributeColors, +} from '../constants/sample-unit-information' const ChartWrapper = styled('div')` width: 100%; diff --git a/src/components/ProtocolChartSubHeading.js b/src/components/SampleUnitChartSubHeading.js similarity index 82% rename from src/components/ProtocolChartSubHeading.js rename to src/components/SampleUnitChartSubHeading.js index 24879f9..d71c727 100644 --- a/src/components/ProtocolChartSubHeading.js +++ b/src/components/SampleUnitChartSubHeading.js @@ -13,7 +13,7 @@ import { BENTHIC_PIT_SAMPLE_UNIT, BLEACHING_SAMPLE_UNIT, FISHBELT_SAMPLE_UNIT, -} from '../constants/transect-protocols' +} from '../constants/sample-unit-information' const SubHeadingText = ({ propertyName, propertyInfo, unit }) => { return propertyInfo ? ( @@ -24,11 +24,11 @@ const SubHeadingText = ({ propertyName, propertyInfo, unit }) => { ) : null } -const ProtocolChartSubHeading = ({ +const SampleUnitChartSubHeading = ({ sampleUnit, - protocolProperties, + sampleUnitProperties, isPrivatePolicy, - bleachingProtocolSubItems, + bleachingSampleUnitSubItems, projectFishFamilies, }) => { const [fishFamilyModalStageOpen, setFishFamilyModalStageOpen] = useState(false) @@ -40,7 +40,7 @@ const ProtocolChartSubHeading = ({ } if (sampleUnit === FISHBELT_SAMPLE_UNIT) { - const { sample_unit_count, biomass_kgha_avg } = protocolProperties + const { sample_unit_count, biomass_kgha_avg } = sampleUnitProperties return ( <> @@ -71,7 +71,7 @@ const ProtocolChartSubHeading = ({ sampleUnit === BENTHIC_PIT_SAMPLE_UNIT || sampleUnit === BENTHIC_PHOTO_QUADRAT_SAMPLE_UNIT ) { - const { sample_unit_count, percent_cover_by_benthic_category_avg } = protocolProperties + const { sample_unit_count, percent_cover_by_benthic_category_avg } = sampleUnitProperties return ( <> @@ -86,8 +86,12 @@ const ProtocolChartSubHeading = ({ } if (sampleUnit === BLEACHING_SAMPLE_UNIT) { - const { count_total_avg, count_genera_avg } = bleachingProtocolSubItems - const { percent_hard_avg_avg, percent_soft_avg_avg, percent_algae_avg_avg } = protocolProperties + const { count_total_avg, count_genera_avg } = bleachingSampleUnitSubItems + const { + percent_hard_avg_avg, + percent_soft_avg_avg, + percent_algae_avg_avg, + } = sampleUnitProperties return ( <> @@ -126,23 +130,23 @@ SubHeadingText.defaultProps = { unit: '', } -ProtocolChartSubHeading.propTypes = { +SampleUnitChartSubHeading.propTypes = { sampleUnit: PropTypes.string.isRequired, - protocolProperties: PropTypes.oneOfType([ + sampleUnitProperties: PropTypes.oneOfType([ fishbeltPropType, benthicPitPropType, bleachingPropType, ]), isPrivatePolicy: PropTypes.bool, - bleachingProtocolSubItems: bleachingPropType, + bleachingSampleUnitSubItems: bleachingPropType, projectFishFamilies: PropTypes.arrayOf(PropTypes.string), } -ProtocolChartSubHeading.defaultProps = { - bleachingProtocolSubItems: {}, - protocolProperties: {}, +SampleUnitChartSubHeading.defaultProps = { + bleachingSampleUnitSubItems: {}, + sampleUnitProperties: {}, isPrivatePolicy: false, projectFishFamilies: [], } -export default ProtocolChartSubHeading +export default SampleUnitChartSubHeading diff --git a/src/components/SiteDetail.js b/src/components/SiteDetail.js index ba6d09f..06020f4 100644 --- a/src/components/SiteDetail.js +++ b/src/components/SiteDetail.js @@ -24,7 +24,7 @@ import { HABITAT_COMPLEXITY_SAMPLE_UNIT, chartContentProperties, chartTitles, -} from '../constants/transect-protocols' +} from '../constants/sample-unit-information' import getChartContent from '../lib/chart-helpers' import { ReactComponent as OrganizationIcon } from '../styles/Icons/earth.svg' import { sitesPropType } from '../lib/mermaidDataPropTypes' @@ -51,7 +51,7 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { [selectSite], ) - const filteredProtocolsForSiteChartCards = useMemo(() => { + const filteredSampleUnitsForSiteChartCards = useMemo(() => { const sortBy = [ BENTHIC_PIT_SAMPLE_UNIT, BENTHIC_LIT_SAMPLE_UNIT, @@ -59,16 +59,19 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT, FISHBELT_SAMPLE_UNIT, ] - const ignoreProtocols = [BLEACHING_PROPERTY_COLONIES_BLEACHED, HABITAT_COMPLEXITY_SAMPLE_UNIT] + const ignoredSampleUnitTypes = [ + BLEACHING_PROPERTY_COLONIES_BLEACHED, + HABITAT_COMPLEXITY_SAMPLE_UNIT, + ] - const sortProtocols = Object.entries(currentSelectedSite?.protocols).sort( + const sortedSampleUnits = Object.entries(currentSelectedSite?.protocols).sort( (a, b) => sortBy.indexOf(a[0]) - sortBy.indexOf(b[0]), ) - return sortProtocols.filter(protocol => !ignoreProtocols.includes(protocol[0])) + return sortedSampleUnits.filter(sampleUnit => !ignoredSampleUnitTypes.includes(sampleUnit[0])) }, [currentSelectedSite.protocols]) - const bleachingProtocolSubItems = useMemo( + const bleachingSampleUnitSubItems = useMemo( () => currentSelectedSite.protocols[BLEACHING_PROPERTY_COLONIES_BLEACHED], [currentSelectedSite], ) @@ -109,31 +112,31 @@ const SiteDetail = ({ selectSite, projectFishFamilies, sites }) => { ) - const siteChartCards = filteredProtocolsForSiteChartCards.map( - ([protocol, protocolProperties]) => { - const isBleachingSampleUnit = protocol === BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT - const sampleUnit = isBleachingSampleUnit ? BLEACHING_SAMPLE_UNIT : protocol + const siteChartCards = filteredSampleUnitsForSiteChartCards.map( + ([sampleUnitType, sampleUnitProperties]) => { + const isBleachingSampleUnit = sampleUnitType === BLEACHING_PROPERTY_QUADRAT_BENTHIC_PERCENT + const sampleUnit = isBleachingSampleUnit ? BLEACHING_SAMPLE_UNIT : sampleUnitType const dataPolicy = currentSelectedSite[`data_policy_${sampleUnit}`] const isPrivatePolicy = dataPolicy === 'private' - const chartTitle = chartTitles[protocol] - const chartInfoProperty = chartContentProperties[protocol] + const chartTitle = chartTitles[sampleUnitType] + const chartInfoProperty = chartContentProperties[sampleUnitType] const chartInfo = isBleachingSampleUnit - ? bleachingProtocolSubItems - : protocolProperties[chartInfoProperty] + ? bleachingSampleUnitSubItems + : sampleUnitProperties[chartInfoProperty] const sourceContent = isPrivatePolicy ? defaultPieChartContent : getChartContent(chartInfo, isBleachingSampleUnit) return ( -
+
Date: Mon, 18 Sep 2023 12:35:27 -0700 Subject: [PATCH 6/6] Fix lint errors. --- src/components/AutocompleteFilter.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/AutocompleteFilter.js b/src/components/AutocompleteFilter.js index d2093dd..daefb77 100644 --- a/src/components/AutocompleteFilter.js +++ b/src/components/AutocompleteFilter.js @@ -1,4 +1,6 @@ /* eslint-disable react/jsx-props-no-spreading */ +/* eslint-disable react/no-array-index-key */ + import PropTypes from 'prop-types' import React from 'react' import TextField from '@material-ui/core/TextField'