Add new map filters

packages/api/src/sites/sites.module.ts

@@ -1,6 +1,7 @@
 import { Module } from '@nestjs/common';
 import { TypeOrmModule } from '@nestjs/typeorm';
 import { SketchFab } from 'site-sketchfab/site-sketchfab.entity';
+import { ReefCheckSurvey } from '../reef-check-surveys/reef-check-surveys.entity';
 import { SitesController } from './sites.controller';
 import { SitesService } from './sites.service';
 import { Site } from './sites.entity';
@@ -33,6 +34,7 @@ import { ScheduledUpdate } from './scheduled-updates.entity';
       TimeSeries,
       ScheduledUpdate,
       SketchFab,
+      ReefCheckSurvey,
     ]),
   ],
   controllers: [SitesController],

packages/api/src/sites/sites.service.ts

@@ -11,6 +11,7 @@ import { DataSource, Repository } from 'typeorm';
 import { omit } from 'lodash';
 import Bluebird from 'bluebird';
 import { sanitizeUrl } from '@braintree/sanitize-url';
+import { ReefCheckSurvey } from 'reef-check-surveys/reef-check-surveys.entity';
 import { DateTime } from '../luxon-extensions';
 import { Site, SiteStatus } from './sites.entity';
 import { DailyData } from './daily-data.entity';
@@ -29,6 +30,7 @@ import {
   getLatestData,
   getSite,
   createSite,
+  getReefCheckDataSubQuery,
 } from '../utils/site.utils';
 import { getSpotterData, sofarLatest } from '../utils/sofar';
 import { ExclusionDates } from './exclusion-dates.entity';
@@ -88,6 +90,9 @@ export class SitesService {
     @InjectRepository(ScheduledUpdate)
     private scheduledUpdateRepository: Repository<ScheduledUpdate>,
 
+    @InjectRepository(ReefCheckSurvey)
+    private reefCheckSurveyRepository: Repository<ReefCheckSurvey>,
+
     private dataSource: DataSource,
   ) {}
 
@@ -204,12 +209,17 @@ export class SitesService {
       this.latestDataRepository,
     );
 
+    const reefCheckDataSet = await getReefCheckDataSubQuery(
+      this.reefCheckSurveyRepository,
+    );
+
     return res.map((site) => ({
       ...site,
       applied: site.applied,
       collectionData: mappedSiteData[site.id],
       hasHobo: hasHoboDataSet.has(site.id),
       waterQualitySources: waterQualityDataSet.get(site.id),
+      reefCheckData: reefCheckDataSet[site.id],
     }));
   }
 

packages/api/src/utils/site.utils.ts

@@ -10,8 +10,9 @@ import {
   NotFoundException,
 } from '@nestjs/common';
 import { ObjectLiteral, Repository } from 'typeorm';
-import { groupBy, mapValues, some } from 'lodash';
+import { Dictionary, groupBy, keyBy, mapValues, merge, some } from 'lodash';
 import geoTz from 'geo-tz';
+import { ReefCheckSurvey } from 'reef-check-surveys/reef-check-surveys.entity';
 import { Region } from '../regions/regions.entity';
 import { ExclusionDates } from '../sites/exclusion-dates.entity';
 import { ValueWithTimestamp, SpotterData } from './sofar.types';
@@ -325,6 +326,50 @@ export const getWaterQualityDataSubQuery = async (
   return waterQualityDataSet;
 };
 
+/**
+ * Get all reef check related data like organisms and substrates spotted each site
+ * This information is intented to be used to filter sites
+ */
+export const getReefCheckDataSubQuery = async (
+  reefCheckSurveyRepository: Repository<ReefCheckSurvey>,
+): Promise<
+  Dictionary<{ siteId: number; organism: string[]; substrate: string[] }>
+> => {
+  const organisms: { siteId: number; organism: string[] }[] =
+    await reefCheckSurveyRepository
+      .createQueryBuilder('survey')
+      .select('survey.site_id', 'siteId')
+      .addSelect('json_agg(distinct rco.organism)', 'organism')
+      .leftJoin('reef_check_organism', 'rco', 'rco.survey_id = survey.id')
+      .where('(rco.s1 + rco.s2 + rco.s3 + rco.s4) > 0')
+      .addGroupBy('survey.site_id')
+      .getRawMany();
+
+  const substrates: { siteId: number; substrate: string[] }[] =
+    await reefCheckSurveyRepository
+      .createQueryBuilder('survey')
+      .select('survey.site_id', 'siteId')
+      .addSelect('json_agg(distinct substrate_code)', 'substrate')
+      .leftJoin('reef_check_substrate', 'rcs', 'survey_id = survey.id')
+      .where('(rcs.s1 + rcs.s2 + rcs.s3 + rcs.s4) > 0')
+      .addGroupBy('survey.site_id')
+      .getRawMany();
+
+  const impact: { siteId: number; impact: string[] }[] =
+    await reefCheckSurveyRepository
+      .createQueryBuilder('survey')
+      .select('survey.site_id', 'siteId')
+      .addSelect('json_agg(distinct overall_anthro_impact)', 'impact')
+      .addGroupBy('survey.site_id')
+      .getRawMany();
+
+  return merge(
+    keyBy(organisms, 'siteId'),
+    keyBy(substrates, 'siteId'),
+    keyBy(impact, 'siteId'),
+  );
+};
+
 export const getLatestData = async (
   site: Site,
   latestDataRepository: Repository<LatestData>,

packages/website/src/common/DeleteButton/__snapshots__/index.test.tsx.snap

@@ -44,7 +44,7 @@ exports[`Delete Button should render with given state from Redux store 1`] = `
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorError MuiAlert-standardError MuiAlert-standard css-1yey3j8-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorError MuiAlert-standardError MuiAlert-standard css-95d7z1-MuiPaper-root-MuiAlert-root"
               role="alert"
               style="--Paper-shadow: none;"
             >

packages/website/src/common/Dialog/index.tsx

@@ -85,6 +85,7 @@ const styles = (theme: Theme) =>
     dialogTitle: {
       backgroundColor: theme.palette.primary.main,
       overflowWrap: 'break-word',
+      color: 'white',
     },
     loading: {
       color: 'white',

packages/website/src/common/ErrorPage/__snapshots__/index.test.tsx.snap

@@ -803,7 +803,7 @@ exports[`Error Page should render with given state from Redux store 1`] = `
             class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
           >
             <div
-              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorSuccess MuiAlert-standardSuccess MuiAlert-standard css-1fa6j4p-MuiPaper-root-MuiAlert-root"
+              class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorSuccess MuiAlert-standardSuccess MuiAlert-standard css-1v1cteu-MuiPaper-root-MuiAlert-root"
               role="alert"
               style="--Paper-shadow: none;"
             >

packages/website/src/common/Footer/index.tsx

@@ -31,6 +31,7 @@ const styles = (theme: Theme) =>
     appBar: {
       '&.MuiPaper-root': {
         backgroundColor: theme.palette.primary.main,
+        color: 'white',
       },
     },
     navBarLink: {

packages/website/src/common/MenuDrawer/index.tsx

@@ -141,6 +141,7 @@ const styles = (theme: Theme) =>
       width: '18rem',
       alignItems: 'center',
       backgroundColor: darkBlue,
+      color: 'white',
     },
     contributeButton: {
       width: '50%',

packages/website/src/common/NavBar/index.tsx

@@ -368,6 +368,7 @@ const styles = (theme: Theme) =>
       height: 64,
       '&.MuiPaper-root': {
         backgroundColor: theme.palette.primary.main,
+        color: 'white',
       },
     },
     navBarLink: {

packages/website/src/common/Search/__snapshots__/index.test.tsx.snap

@@ -13,7 +13,7 @@ exports[`Search should render with given state from Redux store 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-1umw9bq-MuiSvgIcon-root"
+          class="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium css-g7pk96-MuiSvgIcon-root"
           data-testid="SearchIcon"
           focusable="false"
           viewBox="0 0 24 24"
@@ -55,7 +55,7 @@ exports[`Search should render with given state from Redux store 1`] = `
             >
               <mock-iconbutton
                 aria-label="Open"
-                classname="MuiAutocomplete-popupIndicator css-jhk8ta-MuiAutocomplete-popupIndicator"
+                classname="MuiAutocomplete-popupIndicator css-z4hckw-MuiAutocomplete-popupIndicator"
                 disabled="false"
                 tabindex="-1"
                 title="Open"

packages/website/src/common/Search/index.tsx

@@ -109,7 +109,7 @@ const Search = ({ geocodingEnabled = false, classes }: SearchProps) => {
     <div className={classes.searchBar}>
       <div className={classes.searchBarIcon}>
         <IconButton size="small" onClick={onSearchSubmit}>
-          <SearchIcon />
+          <SearchIcon sx={{ color: 'black' }} />
         </IconButton>
       </div>
       <div className={classes.searchBarText}>
@@ -126,6 +126,7 @@ const Search = ({ geocodingEnabled = false, classes }: SearchProps) => {
               : undefined
           }
           getOptionLabel={siteAugmentedName}
+          getOptionKey={(option) => option.id.toString()}
           value={searchedSite}
           onChange={onDropdownItemSelect}
           onInputChange={(_event, _value, reason) =>
@@ -144,6 +145,11 @@ const Search = ({ geocodingEnabled = false, classes }: SearchProps) => {
               }}
             />
           )}
+          slotProps={{
+            popupIndicator: {
+              sx: { color: 'black' },
+            },
+          }}
         />
       </div>
     </div>
@@ -157,6 +163,7 @@ const styles = () =>
       alignItems: 'stretch',
       borderRadius: 4,
       overflow: 'hidden',
+      color: 'black',
     },
     searchBarIcon: {
       display: 'flex',
@@ -181,6 +188,10 @@ const styles = () =>
       },
       height: '100%',
       width: '100%',
+
+      '& input::placeholder': {
+        opacity: 1,
+      },
     },
     listbox: {
       overflowX: 'hidden',

packages/website/src/common/SiteDetails/FeaturedMedia/index.tsx

@@ -81,7 +81,20 @@ const FeaturedMedia = ({
     <Card className={classes.card}>
       <div className={classes.noVideoCardHeader}>
         <Grid container direction="column" alignItems="center" spacing={2}>
-          {isSiteAdmin ? (
+          {hasReefCheckSurveys ? (
+            <Box
+              component={HashLink}
+              to={`/sites/${siteId}#surveys`}
+              display="flex"
+              alignItems="center"
+              gap={1}
+              className={classes.noVideoCardHeaderText}
+            >
+              <img src={reefCheckLogo} alt="Reef Check" width={50} />
+              <Typography variant="h5">REEF CHECK DATA AVAILABLE</Typography>
+              <KeyboardDoubleArrowDown />
+            </Box>
+          ) : isSiteAdmin ? (
             <>
               <Grid item>
                 <Typography
@@ -101,19 +114,6 @@ const FeaturedMedia = ({
                 </IconButton>
               </Grid>
             </>
-          ) : hasReefCheckSurveys ? (
-            <Box
-              component={HashLink}
-              to={`/sites/${siteId}#surveys`}
-              display="flex"
-              alignItems="center"
-              gap={1}
-              className={classes.noVideoCardHeaderText}
-            >
-              <img src={reefCheckLogo} alt="Reef Check" width={50} />
-              <Typography variant="h5">REEF CHECK DATA AVAILABLE</Typography>
-              <KeyboardDoubleArrowDown />
-            </Box>
           ) : (
             <Typography className={classes.noVideoCardHeaderText} variant="h5">
               SURVEY TO BE UPLOADED

packages/website/src/common/SiteDetails/Satellite/index.tsx

@@ -146,6 +146,7 @@ const styles = () =>
       height: '100%',
       display: 'flex',
       flexDirection: 'column',
+      color: 'white',
     },
     content: {
       display: 'flex',

packages/website/src/common/SiteDetails/Surveys/SurveyCard/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Survey Card should render with given state from Redux store 1`] = `
 <div>
   <div
-    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-5 css-1bvccj3-MuiPaper-root"
+    class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-5 css-14gemme-MuiPaper-root"
     style="--Paper-shadow: none;"
   >
     <div
@@ -142,7 +142,7 @@ exports[`Survey Card should render with given state from Redux store 1`] = `
                         class="MuiCollapse-wrapperInner MuiCollapse-vertical css-1i4ywhz-MuiCollapse-wrapperInner"
                       >
                         <div
-                          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorError MuiAlert-standardError MuiAlert-standard css-1yey3j8-MuiPaper-root-MuiAlert-root"
+                          class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorError MuiAlert-standardError MuiAlert-standard css-95d7z1-MuiPaper-root-MuiAlert-root"
                           role="alert"
                           style="--Paper-shadow: none;"
                         >

packages/website/src/common/SiteDetails/Surveys/__snapshots__/index.test.tsx.snap

@@ -375,7 +375,7 @@ exports[`Surveys should render with given state from Redux store 1`] = `
                 component="div"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-47 css-1bvccj3-MuiPaper-root"
+                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-47 css-14gemme-MuiPaper-root"
                   style="--Paper-shadow: none;"
                 >
                   <div
@@ -505,7 +505,7 @@ exports[`Surveys should render with given state from Redux store 1`] = `
                 class="MuiGrid-root MuiGrid-container MuiGrid-item MuiGrid-grid-xs-12 makeStyles-surveyCardWrapper-65 css-wcmnoq-MuiGrid-root"
               >
                 <div
-                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-47 css-1bvccj3-MuiPaper-root"
+                  class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 makeStyles-surveyCard-47 css-14gemme-MuiPaper-root"
                   style="--Paper-shadow: none;"
                 >
                   <div

packages/website/src/common/StatusSnackbar/__snapshots__/index.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`renders as expected 1`] = `
     open="true"
   >
     <div
-      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorSuccess MuiAlert-filledSuccess MuiAlert-filled makeStyles-alert-2 css-19sgit9-MuiPaper-root-MuiAlert-root"
+      class="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation0 MuiAlert-root MuiAlert-colorSuccess MuiAlert-filledSuccess MuiAlert-filled makeStyles-alert-2 css-d55hu6-MuiPaper-root-MuiAlert-root"
       role="alert"
       style="--Paper-shadow: none;"
     >

packages/website/src/common/styles/dialogStyles.ts

@@ -6,6 +6,7 @@ const styles = {
   },
   dialogHeader: {
     backgroundColor: theme.palette.primary.main,
+    color: 'white',
   },
   dialogHeaderSecondPart: {
     color: '#8AC6DE',