Merge pull request #5 from osg-htc/map-start

Sidebar only shows panels with data and quick fix on the Gracc link

package.json

@@ -11,6 +11,8 @@
   "dependencies": {
     "@mui/icons-material": "^5.14.14",
     "@mui/material": "^5.14.14",
+    "@types/date-fns": "^2.6.0",
+    "date-fns": "^2.30.0",
     "mapbox-gl": "^2.15.0",
     "next": "13.5.4",
     "react": "^18",

src/app/components/Markers.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo, useState, useEffect } from "react";
 import { Marker } from "react-map-gl";
 import { School } from "@mui/icons-material";
-import { Feature } from "../../../types/mapTypes";
+import { Feature, TypedFeatures } from "../../../types/mapTypes";
 import Features from "../../../public/features.json";
 import { getFacilityEsData } from "@/app/institutions/elasticQuery.js";
 
@@ -33,7 +33,7 @@ const Markers: React.FC<MarkersProps> = ({ onMarkerClick }) => {
         return null;
       }
 
-      const typedFeature: Feature = {
+      const typedFeature: TypedFeatures = {
         type: feature.type,
         properties: {
           "Institution Name": institutionName,
@@ -46,7 +46,8 @@ const Markers: React.FC<MarkersProps> = ({ onMarkerClick }) => {
             feature.geometry.coordinates[1]
           ] as [number, number]
         },
-        id: feature.id
+        id: feature.id,
+        dataState: esInfo.gpuProvided > 0 ? true : false
       };
 
       return (

src/app/components/MarkersComponent.tsx

@@ -1,17 +1,17 @@
 import React, { useState } from "react";
-import { Feature } from "../../../types/mapTypes";
+import { Feature, TypedFeatures } from "../../../types/mapTypes";
 import Sidebar from "./Sidebar";
 import Markers from "./Markers";
 
-
 const MarkersComponent: React.FC = () => {
-  const [selectedMarker, setSelectedMarker] = useState<Feature | null>(null);
+  const [selectedMarker, setSelectedMarker] = useState<TypedFeatures | null>(null);
   const [facultyName, setFacultyName] = useState<string>("");
 
   const handleMarkerClick = (feature: Feature) => {
     setSelectedMarker(feature);
     convertName(feature);
   };
+
   const convertName = (feature: Feature) => {
     const originalName = feature.properties["Institution Name"];
     const convertedName = originalName.replace(/\s+/g, '+');
@@ -25,7 +25,7 @@ const MarkersComponent: React.FC = () => {
   return (
     <>
       <Markers onMarkerClick={handleMarkerClick} />
-      {selectedMarker && <Sidebar facultyName={facultyName} onClose={closeSidebar} header={selectedMarker.properties["Institution Name"]}/>}
+      {selectedMarker && <Sidebar facultyName={facultyName} onClose={closeSidebar} header={selectedMarker.properties["Institution Name"]} dataState={selectedMarker.dataState}/>}
     </>
   );
 };

src/app/components/Sidebar.tsx

@@ -1,12 +1,14 @@
 import React from 'react';
-import { Box, Grid, IconButton, Typography, useMediaQuery } from '@mui/material';
+import { Box, IconButton, Typography, useMediaQuery } from '@mui/material';
 import { Close as CloseIcon } from '@mui/icons-material';
 import useTheme from '@mui/material/styles/useTheme';
+import { sub } from 'date-fns';
 
 type SidebarProps = {
   onClose: () => void;
   header: string;
   facultyName: string;
+  dataState?: boolean;
 }
 type HTMLContentProps = {
   html: string;
@@ -40,15 +42,15 @@ const GrafanaPanel: React.FC<GrafanaPanelProps> = ({ panelId, panelUrl, start, e
   );
 }
 
-const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName }) => {
+const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName, dataState}) => {
   const theme = useTheme();
   const isSmallScreen = useMediaQuery(theme.breakpoints.down('sm'));
 
   const data = {
     panelId:[12, 16, 8, 6, 2],
-    panelUrl: `https://gracc.opensciencegrid.org/d-solo/hfZQzo2Vk/ospool-facility`,
-    start: 1667402917814,
-    end: 1698938917814,
+    panelUrl: `https://gracc.opensciencegrid.org/d-solo/axV4YtN4k/facility`,
+    start: sub(new Date(), { years: 1 }).getTime(),
+    end: new Date().getTime(),
     orgId: 1
   }
   return (
@@ -73,7 +75,7 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName }) => {
         </IconButton>
       </Box>
       <Box className="flex gap-2 ">
-            <GrafanaPanel
+              <GrafanaPanel
                 panelId={12}
                 panelUrl={data.panelUrl}
                 start={data.start}
@@ -109,14 +111,16 @@ const Sidebar: React.FC<SidebarProps> = ({ onClose, header, facultyName }) => {
             />
         </Box>
         <Box className="flex gap-2 ">
+          { dataState ?
             <GrafanaPanel
                 panelId={8}
                 panelUrl={data.panelUrl}
                 start={data.start}
                 end={data.end}
                 orgId={data.orgId}
                 facultyName={facultyName}
-            />
+            /> : undefined
+          }
         </Box>
     </Box>
   );

src/app/institutions/elasticQuery.js

@@ -3,13 +3,14 @@
  *
  * This endpoint uses Elasticsearch
  */
+import { subYears, subMonths } from 'date-fns';
 
 const SUMMARY_INDEX = "gracc.osg.summary"
 const ENDPOINT = "https://gracc.opensciencegrid.org/q"
 const DEBUG=true
 const DATE_RANGE = {
-    oneYearAgo: new Date(new Date().setDate(new Date().getDate()-365)).getTime(), // Gets last years timestamp
-    threeMonthsAgo: new Date(new Date().setDate(new Date().getDate()-90)).getTime(), // Gets date object 90 days in advance
+    oneYearAgo: subYears(new Date(), 1).getTime(),
+    threeMonthsAgo: subMonths(new Date(), 3).getTime(),
     now: new Date().getTime()
 }
 

types/mapTypes.ts

@@ -18,4 +18,7 @@ export type Geometry = {
   export type FeaturesType = {
     features: Feature[];
   };
-
+
+  export type TypedFeatures = Feature & {
+    dataState?: boolean;
+  }