Task/goes thumbnail resolution (#158)

US-GHG-Center · Nov 26, 2024 · f9c4602 · f9c4602
2 parents 5e2a6b5 + a6e1e4e
commit f9c4602
Show file tree

Hide file tree

Showing 8 changed files with 26 additions and 19 deletions.
diff --git a/goes-plume-viewer/src/components/card/index.jsx b/goes-plume-viewer/src/components/card/index.jsx
@@ -99,7 +99,7 @@ export function PlumeCard({ plumeSourceId, plumeSourceName, startDatetime, endDa
             <CardMedia
                 component="img"
                 height="100"
-                sx={{ padding: "1em", objectFit: "contain" }}
+                sx={{ padding: "1em", objectFit: "contain", minWidth: "50px" }}
                 image={imageUrl}
                 alt="Plume image"
             />
@@ -109,7 +109,7 @@ export function PlumeCard({ plumeSourceId, plumeSourceName, startDatetime, endDa
         <CardContent sx={{ flex: '1 0 auto' }}>
             <HorizontalLayout>
                 <CaptionValue
-                    caption = "Plume Source Name"
+                    caption = "Plume ID"
                     value = {plumeSourceName}
                 />
             </HorizontalLayout>
@@ -159,12 +159,12 @@ export function PlumeCard({ plumeSourceId, plumeSourceName, startDatetime, endDa
             <HorizontalLayout>
                 <CaptionValue
                     className="card-plume"
-                    caption = "Longitude"
+                    caption = "Approximate Release Longitude"
                     value = {Number(lon).toFixed(3)}
                 />
                 <CaptionValue
                     className="card-plume"
-                    caption = "Latitude"
+                    caption = "Approximate Release Latitude"
                     value = {Number(lat).toFixed(3)}
                 />
             </HorizontalLayout>

diff --git a/goes-plume-viewer/src/components/colorBar/index.css b/goes-plume-viewer/src/components/colorBar/index.css
@@ -7,7 +7,7 @@
     bottom: 3%;
     right: 5px;
     height: var(--colorbar-height);
-    width: 33.6rem;
+    width: 30rem;
     z-index: 10000;
     background-color: white;
     padding: 1rem;
@@ -18,7 +18,7 @@
 
 .colorbar-svg {
     height: 1rem;
-    width: 32rem; /* this will define the colorbar width, make it a bit small than container */
+    width: 28rem; /* this will define the colorbar width, make it a bit small than container */
 }
 
 .colorbar-scale {

diff --git a/goes-plume-viewer/src/components/drawer/index.jsx b/goes-plume-viewer/src/components/drawer/index.jsx
@@ -9,7 +9,7 @@ import { useEffect, useState } from 'react';
 
 import "./index.css";
 
-const drawerWidth = "34rem";
+const drawerWidth = "30rem";
 
 const Main = styledmui('main', { shouldForwardProp: (prop) => prop !== 'open' })(
   ({ theme }) => ({
@@ -111,9 +111,11 @@ export function PersistentDrawerRight({open, setOpen, selectedPlumes, plumeMetaD
       <Drawer
         sx={{
           width: drawerWidth,
+          marginRight: "5px",
           flexShrink: 0,
           '& .MuiDrawer-paper': {
             width: drawerWidth,
+            marginRight: "5px",
             height: 'calc(100vh - var(--colorbar-height) - 3.5%)', //colobar is up 3% from bottom
             borderRadius: '3px',
           },
@@ -123,7 +125,7 @@ export function PersistentDrawerRight({open, setOpen, selectedPlumes, plumeMetaD
         open={open}
       >
         <DrawerHeader className="drawer-head">
-          <HorizontalLayout style={{marginLeft: "1rem"}}>
+          <HorizontalLayout>
             <Typography
                   variant="h6"
                   component="div"
@@ -146,8 +148,8 @@ export function PersistentDrawerRight({open, setOpen, selectedPlumes, plumeMetaD
               <PlumeCard
                 key={selectedPlumeMeta.id}
                 plumeSourceId={selectedPlumeMeta.id}
-                plumeSourceName={selectedPlumeMeta.id.replace(/_/g, " ")}
-                imageUrl={`${process.env.REACT_APP_RASTER_API_URL}/collections/${collectionId}/items/${plumesMap[selectedPlumeMeta.id].representationalPlume.id}/preview.png?assets=rad&rescale=${VMIN}%2C${VMAX}&colormap_name=${colorMap}`}
+                plumeSourceName={selectedPlumeMeta.id}
+                imageUrl={`${process.env.REACT_APP_RASTER_API_URL}/collections/${collectionId}/items/${plumesMap[selectedPlumeMeta.id].representationalPlume.id}/preview.png?assets=rad&rescale=${VMIN}%2C${VMAX}&colormap_name=${colorMap}&width=250&height=250`}
                 tiffUrl={`${process.env.REACT_APP_CLOUD_BROWSE_URL}/browseui/#${collectionId}/#q=${selectedPlumeMeta.id.split("_").slice(-1)}`}
                 lon={selectedPlumeMeta.lon}
                 lat={selectedPlumeMeta.lat}

diff --git a/goes-plume-viewer/src/components/mapControls/index.jsx b/goes-plume-viewer/src/components/mapControls/index.jsx
@@ -139,6 +139,6 @@ export const MapControls = ({
   }, [map, mapScaleUnit, measureMode]);
 
   return (
-    <div id="mapbox-custom-controls" ref={customControlContainer} style={{ right: openDrawer ? "34.5rem" : "0.5rem" }}></div>
+    <div id="mapbox-custom-controls" ref={customControlContainer} style={{ right: openDrawer ? "30.7rem" : "0.5rem" }}></div>
   );
 };
diff --git a/goes-plume-viewer/src/components/plumeAnimation/index.css b/goes-plume-viewer/src/components/plumeAnimation/index.css
@@ -17,7 +17,7 @@
 display: block;
 position: relative;
 top: 0px; 
-left: 10px; 
+left: 0px;
 font-size: 0.9rem;
 border-radius: 6px;
 } 

diff --git a/goes-plume-viewer/src/components/title/index.css b/goes-plume-viewer/src/components/title/index.css
@@ -9,8 +9,7 @@
     position: absolute;
     top: 5px;
     left: 5px;
-    width: 25rem;
-    width: 28.5rem;
+    width: 27rem;
     background-color: white;
     color: black;
     z-index: 999;
@@ -23,7 +22,6 @@
 }
 
 .title-note {
-    border-bottom: 2px solid var(--main-blue);
-    padding: 0.9rem;
-    padding-top: 0.1rem;
+    padding: 0.3rem 0.9rem;
+    padding-bottom: 12px;
 }
diff --git a/goes-plume-viewer/src/components/title/index.jsx b/goes-plume-viewer/src/components/title/index.jsx
@@ -1,4 +1,4 @@
-import { Paper, Typography } from "@mui/material";
+import { Paper, Typography, Divider } from "@mui/material";
 
 import "./index.css";
 
@@ -22,6 +22,13 @@ export const Title = ({ children }) => {
             >
                 The Geostationary Operational Environmental Satellites collect images of the surface every 5 minutes. Only very large emission events can be detected, but plume expansion is easy to see over time. More plumes will be added soon.
             </Typography>
+            <Divider
+                sx={{
+                    borderColor: "var(--main-blue)",
+                    borderWidth: "1px",
+                    margin: "0.3rem 1.4rem",
+                }}
+            />
             <div className="title-content">
                 { children }
             </div>

diff --git a/goes-plume-viewer/src/pages/dashboard/index.jsx b/goes-plume-viewer/src/pages/dashboard/index.jsx
@@ -24,7 +24,7 @@ const HorizontalLayout = styled.div`
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 15px;
+    margin: 12px;
 `;
 
 const scaleUnits = {