t puMerge branch 'main' of https://github.com/hackforla/311-data

components/Map/Map.jsx

@@ -35,6 +35,7 @@ import { pointsWithinGeo, getNcByLngLatv2 } from './geoUtils';
 import RequestsLayer from './layers/RequestsLayer';
 import BoundaryLayer from './layers/BoundaryLayer';
 import AddressLayer from './layers/AddressLayer';
+import DbContext from '@db/DbContext';
 
 // import MapOverview from './controls/MapOverview';
 
@@ -103,6 +104,9 @@ const hoverables = ['nc-fills', 'cc-fills'];
 const featureLayers = ['request-circles', ...hoverables];
 
 class Map extends React.Component {
+  // Note: 'this.context' is defined using the static contextType property
+  // static contextType assignment allows Map to access values provided by DbContext.Provider
+  static contextType = DbContext;
   constructor(props) {
     super(props);
 
@@ -172,9 +176,19 @@ class Map extends React.Component {
   }
 
   componentDidUpdate(prevProps, prevState) {
+    const entireMapLoadTime = () => {
+      if (this.map.isSourceLoaded('requests')) {
+        const { dbStartTime } = this.context;
+        const pinLoadEndTime = performance.now()
+        console.log(`Pin load time: ${Math.floor(pinLoadEndTime - dbStartTime)} ms`)
+        this.map.off('idle', entireMapLoadTime);
+      }
+    }
+
     if (this.props.requests != prevProps.requests) {
       if (this.state.mapReady) {
         this.setState({ requests: this.props.requests });
+        this.map.on('idle', entireMapLoadTime)
         // this.map.once('idle', this.setFilteredRequestCounts);
       } else {
         this.map.once('idle', () => {

components/Map/index.js

@@ -68,7 +68,7 @@ class MapContainer extends React.Component {
 
   createRequestsTable = async () => {
     this.setState({ isTableLoading: true });
-    const { conn, tableNameByYear } = this.context;
+    const { conn, tableNameByYear, setDbStartTime } = this.context;
     const startDate = this.props.startDate; // directly use the startDate prop transformed for redux store
     const year = moment(startDate).year(); // extrac the year
     const datasetFileName = `requests${year}.parquet`;
@@ -78,6 +78,7 @@ class MapContainer extends React.Component {
       `CREATE TABLE IF NOT EXISTS ${tableNameByYear} AS SELECT * FROM "${datasetFileName}"`; // query from parquet
 
     const startTime = performance.now(); // start the time tracker
+    setDbStartTime(startTime)
 
       try {
         await conn.query(createSQL);
@@ -99,7 +100,6 @@ class MapContainer extends React.Component {
 
   async componentDidUpdate(prevProps) {
     const { activeMode, pins, startDate, endDate } = this.props;
-
     // create conditions to check if year or startDate or endDate changed
     const yearChanged = moment(prevProps.startDate).year() !== moment(startDate).year();
     const startDateChanged = prevProps.startDate !== startDate;

components/db/DbContext.jsx

@@ -5,6 +5,7 @@ const DbContext = React.createContext({
   conn: null,
   worker: null,
   tableNameByYear: '',
+  startTime: null,
 });
 
 export default DbContext;

components/db/DbProvider.jsx

@@ -29,6 +29,7 @@ function DbProvider({ children, startDate }) {
   const [conn, setConn] = useState(null);
   const [worker, setWorker] = useState(null);
   const [tableNameByYear, setTableNameByYear] = useState('');
+  const [dbStartTime, setDbStartTime] = useState(null);
 
   useEffect(() => {
     const dbInitialize = async () => {
@@ -127,7 +128,12 @@ function DbProvider({ children, startDate }) {
 
   return (
     <DbContext.Provider value={{
-      db, conn, worker, tableNameByYear,
+      db,
+      conn,
+      worker,
+      tableNameByYear,
+      dbStartTime,
+      setDbStartTime,
     }}
     >
       {children}