Merge pull request #28 from UMassCDS/24-indicate-if-showing-abundance…

…-or-movement 24 indicate if showing abundance or movement
UMassCDS · Oct 21, 2024 · 03ac333 · 03ac333
2 parents f9b4e03 + 03aeaed
commit 03ac333
Show file tree

Hide file tree

Showing 5 changed files with 167 additions and 125 deletions.
diff --git a/src/assets/taxa.json b/src/assets/taxa.json
@@ -1,7 +1,7 @@
 [
   {
     "value": "mean",
-    "label": "Average"
+    "label": "Total"
   },
   {
     "value": "mallar3",
@@ -23,10 +23,6 @@
     "value": "gnwtea",
     "label": "Green-winged Teal"
   },
-  {
-    "value": "cintea",
-    "label": "Cinnamon Teal"
-  },
   {
     "value": "buwtea",
     "label": "Blue-winged Teal"
@@ -42,9 +38,5 @@
   {
     "value": "wooduc",
     "label": "Wood Duck"
-  },
-  {
-    "value": "lotduc",
-    "label": "Long-tailed Duck"
   }
 ]
diff --git a/src/components/Legend.tsx b/src/components/Legend.tsx
@@ -1,17 +1,17 @@
 /* eslint-disable no-template-curly-in-string */
 import { useEffect, useState } from 'react';
 import { Grid } from '@mantine/core';
-import { changeLegend, DataTypes} from '../hooks/dataUrl';
+import { getScalingFilename, dataInfo} from '../hooks/dataUrl';
 
 // Interface for the Legend 
 interface LegendProps {
-  dataType: DataTypes;
-  speciesType: string;
+  dataTypeIndex: number;
+  speciesIndex: number;
 }
 
 /* Creates a custom legend component based on the species scale values. */
 function Legend(props: LegendProps) {
-  const { dataType, speciesType } = props;
+  const { dataTypeIndex, speciesIndex } = props;
   const [data, setData] = useState<string>();
   const [lowLabel, setLowLabel] = useState<number>(0);
   const [midLabel, setMidLabel] = useState<number>(50);
@@ -28,19 +28,9 @@ function Legend(props: LegendProps) {
     return d; // returns a promise, which resolves to this data value
   };
 
-  function getUnits(data_type: DataTypes) {
-    if (data_type === DataTypes.ABUNDANCE) {
-      return "Birds/km^2";
-    } else if (data_type === DataTypes.MOVEMENT) {
-      return "Birds/km/week";
-    }
-    return "";
-  };
-
-
-  // Every time the dataType or speciesType is changed by the user, the legend updates
+  // Every time the dataTypeIndex or speciesIndex is changed by the user, the legend updates
   useEffect(() => {
-    const u = changeLegend(dataType, speciesType);
+    const u = getScalingFilename(dataTypeIndex, speciesIndex);
     getJSON(u)
       .then((d) => {
         const pushed: any[] = [];
@@ -56,7 +46,7 @@ function Legend(props: LegendProps) {
       .catch((error) => {
         alert(error);
       });
-  }, [dataType, speciesType]);
+  }, [dataTypeIndex, speciesIndex]);
 
   return (
     <div className="Legend">
@@ -81,7 +71,7 @@ function Legend(props: LegendProps) {
           <div>{lowLabel}</div>
         </Grid.Col>
       </Grid>
-      <div style={{textAlign:"center"}}>{getUnits(dataType)}</div>
+      <div style={{textAlign:"center"}}>{dataInfo[dataTypeIndex].units}</div>
 
     </div>
   );

diff --git a/src/hooks/dataUrl.tsx b/src/hooks/dataUrl.tsx
@@ -1,25 +1,45 @@
 
 const baseUrl = 'https://avianinfluenza.s3.us-east-2.amazonaws.com/';
-export enum DataTypes {ABUNDANCE = 'abundance', MOVEMENT = 'netmovement'};
+import taxa from '../assets/taxa.json';
+
+export var dataInfo: {
+  datatype: string,
+  label: string,
+  units: string
+ } [] = [
+  {
+    datatype:'abundance', 
+    label:'Abundance',
+    units: 'Birds/km^2',
+  },
+  {
+    datatype: 'netmovement', 
+    label:'Migration',
+    units: 'Birds/km/week',
+  },
+];
+
 
 /* Determine the url containing data to display the legend scale.
- The function takes in the data type and the species type. */
-export function changeLegend(dataType: DataTypes, speciesType: string): string {
+ The function takes in the data type index and the species type. */
+export function getScalingFilename(data_index: number, taxa_index: number): string {
+  const name = dataInfo[data_index].datatype;
   const finalUrl = `${
-    baseUrl + dataType
-  }/${speciesType}/scale_${dataType}_${speciesType}.json`;
+    baseUrl + name
+  }/${taxa[taxa_index].value}/scale_${name}_${taxa[taxa_index].value}.json`;
   return finalUrl;
 }
 
 /* Determine the url containing the image data. 
-   The function takes in the data type, the species type, and the week number. */
+   The function takes in the data type index, the species type, and the week number. */
 export function imageURL(
-  dataType: DataTypes,
-  speciesType: string,
+  data_index: number,
+  taxa_index: number,
   week: number,
 ): string {
+  const name = dataInfo[data_index].datatype;
   const finalUrl = `${
-    baseUrl + dataType
-  }/${speciesType}/${dataType}_${speciesType}_${week}.png`;
+    baseUrl + name
+  }/${taxa[taxa_index].value}/${name}_${taxa[taxa_index].value}_${week}.png`;
   return finalUrl;
 }
diff --git a/src/styles/Home.css b/src/styles/Home.css
@@ -6,18 +6,28 @@
         z-index: 0;
     }
 
-    .dataType-button {
+    .title {
+        position: fixed;
+        z-index: 200;
+        top: 15px;
+        left: 50%;
+        transform: translate(-50%, 0%);
+        background-color: rgb(227, 243, 250);
+        opacity: 0.6;
+    }
+
+    .dataIndex-button {
         position: absolute;
-        top: 20px;
-        right: 20px;
+        top: 100px;
+        right: 250px;
         z-index: 400;
-
     }
 
     .speciesType-button {
         position: absolute;
-        top: 60px;
-        right: 20px;
+        top: 100px;
+        right: 100px;
+        width: 140;
         z-index: 400;
     }