refactor: significant zip performance improvements

client/src/components/Map/Map.jsx

@@ -188,9 +188,10 @@ class PraxisMap extends Component {
       handleGetZipcodesDataAction(zipRoute)
     )
 
-    //Set viewport to parcels bbox
-    if (parcelsGeojson) {
+    if (parcelsGeojson?.type === "FeatureCollection") {
       this._createNewViewport(parcelsGeojson)
+    } else if (zipsGeojson) {
+      this._createNewViewport(zipsGeojson)
     }
 
     // set marker not undefined or null
@@ -396,13 +397,6 @@ class PraxisMap extends Component {
             minzoom={13}
             maxzoom={14}
           >
-            {/* this is an optional highlight layer that 
-            higlights centroids rather than polys */}
-            {/* <Layer
-              key="highlight-centroid-layer"
-              {...parcelCentroidHighlightLayer}
-              filter={["in", "id", ...highlightIds]} // hightlight can be an array or string
-            /> */}
             <Layer
               key="parcel-layer"
               {...parcelLayer}
@@ -412,7 +406,6 @@ class PraxisMap extends Component {
                   stops: this._stops,
                 },
                 "fill-opacity": sliderValue / 100,
-                // "fill-outline-color": "rgba(255,255,255,1)",
               }}
               filter={parcelLayerFilter}
             />

client/src/components/Search/DetailedResultsContainer.jsx

@@ -25,18 +25,21 @@ function DetailedResultsContainer() {
   const { drawerIsOpen, results, resultsType } = useSelector(
     (state) => state.searchState.detailedSearch
   )
-  const { details, detailsType } = getDetailsFromGeoJSON(ppraxis)
+  const { details, detailsCount, detailsZip, detailsType } =
+    getDetailsFromGeoJSON(ppraxis)
   const dispatch = useDispatch()
 
   const queryParams = useQueryParams({ searchQuery: window.location.search })
   useEffect(() => {
     dispatch(
       updateDetailedSearch({
         results: details,
+        resultsZip: detailsZip,
+        resultsCount: detailsCount,
         resultsType: detailsType,
       })
     )
-  }, [JSON.stringify(details), detailsType])
+  }, [JSON.stringify(details), detailsZip, detailsCount, detailsType])
 
   if (results && resultsType && queryParams) {
     return (

client/src/components/Search/DetailedSearchResults.jsx

@@ -75,7 +75,7 @@ function useSpeculationByCode(results, { code, year }) {
       }
     })()
     return () => null
-  }, [code, year, results])
+  }, [code, year])
   return { data, topCount, topPer }
 }
 
@@ -315,7 +315,7 @@ function ContentSwitch({ detailsType, queryParams }) {
         return <SingleParcel result={results[0]} queryParams={queryParams} />
 
       case "parcels-by-geocode:multiple-parcels":
-        return <MultipleParcels results={results} queryParams={queryParams} />
+        return <MultipleParcels results={[]} queryParams={queryParams} />
 
       case "parcels-by-speculator":
         return <SpeculatorParcels results={results} queryParams={queryParams} />
@@ -342,6 +342,8 @@ function ContentSwitch({ detailsType, queryParams }) {
       default:
         return null
     }
+  } else if (detailsType === "parcels-by-geocode:multiple-parcels") {
+    return <MultipleParcels results={[]} queryParams={queryParams} />
   } else if (results && results.length === 0) {
     return <NoResults />
   } else {
@@ -482,15 +484,19 @@ function SpeculatorParcels(props) {
 function MultipleParcels(props) {
   const { place, year } = props.queryParams
   const { searchState } = useSelector((state) => state)
-  const { drawerIsOpen, results } = searchState.detailedSearch
-  const { propzip: code } = results[0].properties
+  const {
+    drawerIsOpen,
+    resultsCount,
+    resultsZip = props.queryParams?.code,
+  } = searchState.detailedSearch
+  const code = resultsZip
   const dispatch = useDispatch()
 
   const {
     data: speculatorData,
     topCount,
     topPer,
-  } = useSpeculationByCode(results, {
+  } = useSpeculationByCode([], {
     code,
     year,
   })
@@ -516,7 +522,7 @@ function MultipleParcels(props) {
               <span>{` ${parseMBAddressString(place)} `}</span> in
               <span>{` ${year}. `}</span> In zip code
               <span>{` ${code}`}</span> we have identified
-              <span>{` ${results.length} `}</span>
+              <span>{` ${resultsCount} `}</span>
               other properties owned by{" "}
               <span>{`${speculatorData.length} `}</span>
               speculators. Of these speculators, the top ten owned
@@ -527,7 +533,7 @@ function MultipleParcels(props) {
           </div>
           <div className="detailed-title">
             <img src={questionMarkRose} alt="A question mark icon" />
-            <span> Top 10 Speculators in {`${code}`}</span>
+            <span> Top 10 Speculators in {`${resultsZip}`}</span>
           </div>
 
           <div className="detailed-zipcode">
@@ -539,7 +545,7 @@ function MultipleParcels(props) {
                       to={createQueryStringFromParams(
                         {
                           type: "zipcode",
-                          code,
+                          code: resultsZip,
                           ownid: record.own_id,
                           coordinates: null,
                           year,

client/src/components/Search/MapViewer.jsx

@@ -5,6 +5,7 @@ import { calculateDesiredBearing, bearingToBasic } from "../../utils/viewer"
 import * as Mapillary from "mapillary-js"
 import noImageIcon from "../../assets/img/no_image_icon.svg"
 
+// TODO: TypeError: cnavasPoint is null
 class MapViewer extends Component {
   _getViewerImage = ({ longitude, latitude }) => {
     this.props.dispatch(handleGetViewerImage(longitude, latitude))

client/src/reducers/search.js

@@ -23,6 +23,8 @@ const initialSearchState = {
     results: null,
     drawerIsOpen: false,
     contentIsVisible: false,
+    resultsZip: null,
+    resultsCount: null,
     resultsType: null,
     recordYears: null,
   },

client/src/utils/helper.js

@@ -202,15 +202,35 @@ export function flattenPrimaryResults(primaryResults) {
   return primaryResults.reduce((acc, val) => acc.concat(val), [])
 }
 
+// Hacking this a bit to handle different response types
 export function getDetailsFromGeoJSON(geojson) {
-  if (geojson) {
+  if (geojson?.type === "FeatureCollection") {
     const details = geojson.features.map((feature) => {
       const { centroid, properties } = feature
       return { centroid, properties }
     })
-    return { details, detailsType: geojson.praxisDataType }
+    return {
+      details,
+      detailsZip: geojson.zipcode || details[0].properties.propzip,
+      detailsCount: geojson.count || details.length,
+      detailsType: geojson.praxisDataType,
+    }
+  } else if (
+    geojson?.praxisDataType === "parcels-by-geocode:multiple-parcels"
+  ) {
+    return {
+      details: [],
+      detailsZip: geojson.code,
+      detailsCount: +geojson.count,
+      detailsType: geojson.praxisDataType,
+    }
   } else {
-    return { details: null, detailsType: null }
+    return {
+      details: null,
+      detailsZip: null,
+      detailsCount: null,
+      detailsType: null,
+    }
   }
 }
 

client/src/utils/map.js

@@ -9,10 +9,10 @@ export function createNewViewport(geojson, mapRef) {
     const reducer = (accumulator, currentValue) => accumulator + currentValue
     featureCount = features
       .map((feature) => {
-        if (feature.geometry.geometries)
-          return feature.geometry.geometries.length
-        if (feature.geometry.coordinates)
-          return feature.geometry.coordinates.length
+        if (feature?.geometry?.geometries)
+          return feature?.geometry?.geometries.length
+        if (feature?.geometry?.coordinates)
+          return feature?.geometry?.coordinates.length
 
         return 0
       })

server/index.js

@@ -5,7 +5,7 @@ const morgan = require("morgan")
 const helmet = require("helmet")
 const cors = require("cors")
 const mountRoutes = require("./routes")
-const Sentry = require("@sentry/node")
+// const Sentry = require("@sentry/node")
 
 const app = express()
 
@@ -22,7 +22,8 @@ app.use(morgan("combined"))
 //mount routes
 mountRoutes(app)
 
-Sentry.setupExpressErrorHandler(app)
+// TODO:
+// Sentry.setupExpressErrorHandler(app)
 
 app.listen(5000, () => {
   console.log("Listening on port 5000...")