Merge branch 'dev'

data-mermaid · Oct 13, 2023 · 515816d · 515816d
2 parents a626fea + 2045492
commit 515816d
Show file tree

Hide file tree

Showing 14 changed files with 436 additions and 332 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git 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'
@@ -70,10 +72,10 @@ const AutocompleteFilter = ({
 
           return (
             <div>
-              {parts.map(part => {
+              {parts.map((part, index) => {
                 return (
                   <span
-                    key={`dropdown-filter-list-${part.text}`}
+                    key={`dropdown-filter-list-${part.text}-${index}`}
                     style={{ fontWeight: part.highlight ? 700 : 400 }}
                   >
                     {part.text}

diff --git 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 = ({
       <BarChart chartContent={histogramContent} />
     ) : (
       <PieChart
-        protocolName={protocolName}
+        sampleUnit={sampleUnit}
         chartContent={pieChartContent}
         isPrivatePolicy={isPrivatePolicy}
         title={title}
@@ -32,17 +32,14 @@ const CardChartContent = ({
 
 CardChartContent.propTypes = {
   chartType: PropTypes.string.isRequired,
-  protocolName: 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 = {
-  protocolName: undefined,
-  title: undefined,
-  isPrivatePolicy: undefined,
   pieChartContent: [],
   histogramContent: [],
 }

diff --git a/src/components/DownloadDataModal.js b/src/components/DownloadDataModal.js
@@ -16,7 +16,11 @@ import ContactIcon from '@material-ui/icons/Email'
 import CloudDownloadIcon from '@material-ui/icons/CloudDownload'
 
 import { DialogText, DialogTitle, MermaidButton } from '../styles/MermaidStyledComponents'
-import { protocolMethods, pluralizedProtocols } from '../constants/transect-protocols'
+import {
+  sampleUnitTitles,
+  pluralizedSampleUnits,
+  BLEACHING_PROPERTY_COLONIES_BLEACHED,
+} from '../constants/sample-unit-information'
 import MermaidDashboardTooltip from './MermaidDashboardTooltip'
 import { siteDetailPropType, sitesPropType } from '../lib/mermaidDataPropTypes'
 
@@ -42,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 !== 'colonies_bleached',
+      sampleUnitType => sampleUnitType !== BLEACHING_PROPERTY_COLONIES_BLEACHED,
     )
 
-    return uniqueAvailableProtocol.reduce((accumulator, protocol) => {
-      const protocolMethod = protocolMethods[protocol]
+    return uniqueAvailableSampleUnits.reduce((accumulator, sampleUnit) => {
+      const sampleUnitTitle = sampleUnitTitles[sampleUnit]
 
-      if (protocolMethod) {
-        const protocolDataPolicy =
-          protocolMethod === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${protocol}`
+      if (sampleUnitTitle) {
+        const sampleUnitDataPolicy =
+          sampleUnitTitle === 'Bleaching' ? `data_policy_bleachingqc` : `data_policy_${sampleUnit}`
 
-        const protocolInfo = {
-          method: protocolMethod,
-          policy: currentSelectedSite[protocolDataPolicy],
-          protocol,
+        const sampleUnitInfo = {
+          method: sampleUnitTitle,
+          policy: currentSelectedSite[sampleUnitDataPolicy],
+          sampleUnit,
         }
 
-        accumulator.push(protocolInfo)
+        accumulator.push(sampleUnitInfo)
       }
 
       return accumulator
@@ -79,9 +83,9 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
     setOpen(false)
   }
 
-  const handleDownloadCSV = protocol => {
-    const protocolToDownload = pluralizedProtocols[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)
   }
@@ -101,12 +105,12 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
     </MermaidButton>
   )
 
-  const downloadCSVButton = protocol => (
+  const downloadCSVButton = sampleUnit => (
     <MermaidButton
       size="small"
       variant="contained"
       color="primary"
-      onClick={() => handleDownloadCSV(protocol)}
+      onClick={() => handleDownloadCSV(sampleUnit)}
     >
       <CloudDownloadIconWrapper />
       <Box fontWeight="fontWeightMedium">Download CSV</Box>
@@ -137,13 +141,13 @@ const DownloadDataModal = ({ currentSelectedSite, sites }) => {
           </TableRow>
         </TableHeadWrapper>
         <TableBody>
-          {availableProtocols.map(row => (
-            <TableRow key={row.method}>
-              <TableCellWrapper>{row.method}</TableCellWrapper>
-              <TableCellWrapper>{row.policy}</TableCellWrapper>
+          {availableSampleUnits.map(({ method, policy, sampleUnit }) => (
+            <TableRow key={method}>
+              <TableCellWrapper>{method}</TableCellWrapper>
+              <TableCellWrapper>{policy}</TableCellWrapper>
               <TableCellWrapper>
-                {row.policy === 'public' || row.policy === 'public summary'
-                  ? downloadCSVButton(row.protocol)
+                {policy === 'public' || policy === 'public summary'
+                  ? downloadCSVButton(sampleUnit)
                   : contactAdminsButton}
               </TableCellWrapper>
             </TableRow>

diff --git 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,13 +45,13 @@ const cardStyle = makeStyles(theme => ({
 }))
 
 const InformationCard = ({
-  bleachingProtocolSubItems,
+  bleachingSampleUnitSubItems,
   dataPolicy,
   histogramContent,
   isFiltering,
   isPrivatePolicy,
-  protocol,
-  protocolName,
+  sampleUnitProperties,
+  sampleUnit,
   title,
   type,
   pieChartContent,
@@ -65,14 +65,14 @@ const InformationCard = ({
 
   const modalToggleHandler = () => setModalStage(!modalStageOpen)
 
-  const pieChartProtocolSubHeadingItem = type === 'pieChart' && (
+  const pieChartSubHeadingItem = type === 'pieChart' && (
     <Box>
       <Typography m={1}>Data sharing: {dataPolicy}</Typography>
-      <ProtocolChartSubHeading
-        protocolName={protocolName}
-        protocolProperties={protocol}
+      <SampleUnitChartSubHeading
+        sampleUnit={sampleUnit}
+        sampleUnitProperties={sampleUnitProperties}
         isPrivatePolicy={isPrivatePolicy}
-        bleachingProtocolSubItems={bleachingProtocolSubItems}
+        bleachingSampleUnitSubItems={bleachingSampleUnitSubItems}
         projectFishFamilies={projectFishFamilies}
       />
     </Box>
@@ -84,7 +84,7 @@ const InformationCard = ({
     ) : (
       <CardChartContent
         chartType={type}
-        protocolName={protocolName}
+        sampleUnit={sampleUnit}
         pieChartContent={pieChartContent}
         isPrivatePolicy={isPrivatePolicy}
         title={title}
@@ -106,7 +106,7 @@ const InformationCard = ({
                 />
               )}
             </Box>
-            {pieChartProtocolSubHeadingItem}
+            {pieChartSubHeadingItem}
           </Box>
         </Box>
         {contentItem}
@@ -119,28 +119,32 @@ 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),
-  protocol: PropTypes.oneOfType([fishbeltPropType, benthicPitPropType, bleachingPropType]),
-  protocolName: PropTypes.string,
+  sampleUnitProperties: PropTypes.oneOfType([
+    fishbeltPropType,
+    benthicPitPropType,
+    bleachingPropType,
+  ]),
+  sampleUnit: PropTypes.string,
   textContent: textContentPropType,
   title: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
 }
 
 InformationCard.defaultProps = {
-  bleachingProtocolSubItems: {},
+  bleachingSampleUnitSubItems: {},
   histogramContent: [],
   pieChartContent: [],
   projectFishFamilies: [],
   textContent: {},
-  protocol: {},
-  protocolName: '',
+  sampleUnitProperties: {},
+  sampleUnit: '',
   dataPolicy: '',
   isFiltering: false,
   isPrivatePolicy: false,

diff --git 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
@@ -4,12 +4,12 @@ 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,
+  sampleUnitAttributeColors,
+} from '../constants/sample-unit-information'
 
 const ChartWrapper = styled('div')`
   width: 100%;
@@ -43,7 +43,7 @@ const SvgWrapper = styled('svg')`
     `}
 `
 
-const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
+const PieChart = ({ sampleUnit, chartContent, isPrivatePolicy, title }) => {
   const mediaMin600 = useMediaQuery('(min-width:600px)')
   const mediaMax600 = useMediaQuery('(max-width:600px)')
   const mediaMax960 = useMediaQuery('(max-width:960px')
@@ -53,10 +53,8 @@ const PieChart = ({ protocolName, chartContent, isPrivatePolicy, title }) => {
   const mediaMin600_Max960 = mediaMax960 && mediaMin600
   const mediaMin960_Max1280 = mediaMax1280 && mediaMin960
 
-  const attributeColors =
-    protocolName === 'beltfish' ? 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)
@@ -66,7 +64,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 +185,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,
 }