feat: add sherlock

.vscode/settings.json

@@ -1,4 +1,4 @@
 {
   "editor.formatOnSave": true,
-  "cSpell.words": ["fontawesome", "fortawesome"]
+  "cSpell.words": ["fontawesome", "fortawesome", "TSQL"]
 }

package.json

@@ -10,6 +10,10 @@
     "@testing-library/react": "^13.0.1",
     "@testing-library/user-event": "^13.5.0",
     "bootstrap": "^5.1.3",
+    "downshift": "^6.1.7",
+    "lodash.debounce": "^4.0.8",
+    "lodash.escaperegexp": "^4.1.2",
+    "lodash.uniqwith": "^4.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-scripts": "5.0.1",

src/App.js

@@ -1,14 +1,17 @@
+import * as watchUtils from '@arcgis/core/core/watchUtils';
 import Map from '@arcgis/core/Map';
 import MapView from '@arcgis/core/views/MapView';
 import Home from '@arcgis/core/widgets/Home';
 import React from 'react';
 import 'typeface-montserrat';
 import './App.scss';
 import Filter from './components/Filter';
+import { MapServiceProvider, Sherlock } from './components/Sherlock';
 import config from './services/config';
 
 function App() {
   const [mapView, setMapView] = React.useState(null);
+  const [zoomToGraphic, setZoomToGraphic] = React.useState(null);
 
   React.useEffect(() => {
     const map = new Map({
@@ -20,13 +23,79 @@ function App() {
     setMapView(view);
   }, []);
 
+  const [displayedZoomGraphic, setDisplayedZoomGraphic] = React.useState(null);
+  const zoomTo = React.useCallback(
+    async (zoomObj) => {
+      if (!Array.isArray(zoomObj.target)) {
+        zoomObj.target = [zoomObj.target];
+      }
+
+      if (!zoomObj.zoom) {
+        if (zoomObj.target.every((graphic) => graphic.geometry.type === 'point')) {
+          zoomObj = {
+            target: zoomObj.target,
+            zoom: 10,
+          };
+        } else {
+          zoomObj = {
+            target: zoomObj.target,
+          };
+        }
+      }
+
+      await mapView.goTo(zoomObj);
+
+      if (displayedZoomGraphic) {
+        mapView.graphics.removeMany(displayedZoomGraphic);
+      }
+
+      setDisplayedZoomGraphic(zoomObj.target);
+
+      mapView.graphics.addMany(zoomObj.target);
+
+      if (!zoomObj.preserve) {
+        watchUtils.once(mapView, 'extent', () => {
+          mapView.graphics.removeAll();
+        });
+      }
+    },
+    [displayedZoomGraphic, mapView]
+  );
+
+  React.useEffect(() => {
+    if (zoomToGraphic) {
+      const { graphic, level, preserve } = zoomToGraphic;
+
+      graphic &&
+        zoomTo({
+          target: graphic,
+          zoom: level,
+          preserve: preserve,
+        });
+    }
+  }, [zoomToGraphic, mapView, zoomTo]);
+
+  const onSherlockMatch = (graphics) => {
+    setZoomToGraphic({
+      graphic: graphics,
+      preserve: false,
+    });
+  };
+
+  const sherlockConfig = {
+    provider: new MapServiceProvider(config.SHERLOCK.serviceUrl, config.SHERLOCK.searchField),
+    placeHolder: 'Search...',
+    onSherlockMatch,
+  };
+
   return (
     <div className="d-flex flex-column w-100 h-100">
       <div className="m-3 title">
         <h4 className="my-0">RTP Projects</h4>
       </div>
       <div id="mapDiv" className="flex-fill border-top border position-relative">
         <Filter mapView={mapView} />
+        <Sherlock {...sherlockConfig}></Sherlock>
       </div>
     </div>
   );