Virtualized TypeSense search results list

packages/geospatial/package.json

@@ -19,7 +19,10 @@
     "lucide-react": "^0.320.0",
     "mapbox-gl": "npm:[email protected]",
     "maplibre-gl": "^3.5.2",
+    "react-instantsearch": "^7.5.4",
     "react-map-gl": "^7.1.6",
+    "react-virtualized-auto-sizer": "^1.0.21",
+    "react-window": "^1.8.10",
     "underscore": "^1.13.6"
   },
   "peerDependencies": {

packages/geospatial/src/components/CoreDataTypes.ts

@@ -2,6 +2,30 @@
 
 import { Annotation, AnnotationPage, FeatureGeometry, Place, PlaceFeatureProperties } from '@peripleo/peripleo';
 
+export interface TypeSenseSearchResult {
+
+  uuid: string;
+
+  record_id: string;
+
+  type: string;
+
+  name: string;
+
+  names: string[];
+
+  coordinates: number[];
+
+  geometry: {
+
+    type: 'Point' | 'GeometryCollection',
+
+    coordinates: [ number, number ];
+
+  }
+
+}
+
 export interface CoreDataProperties extends PlaceFeatureProperties {
 
   record_id: string;

packages/geospatial/src/components/SearchResultsList.css

@@ -0,0 +1,7 @@
+.ais-InfiniteHits-loadMore {
+  color: #0005119e;
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  padding: 2em;
+}

packages/geospatial/src/components/SearchResultsList.js

@@ -0,0 +1,109 @@
+// @flow
+
+import React from 'react';
+import { FixedSizeList } from 'react-window';
+import AutoSizer from "react-virtualized-auto-sizer";
+import { Feature } from '@peripleo/peripleo';
+import { Highlight } from 'react-instantsearch';
+import { TypeSenseSearchResult } from './CoreDataTypes';
+
+import './SearchResultsList.css';
+
+const toFeature = (result: TypeSenseSearchResult) => ({
+  id: parseInt(result.record_id),
+  type: 'Feature',
+  properties: {
+    id: result.record_id,
+    ccode: [],
+    title: result.name,
+    uuid: result.uuid,     
+    record_id: result.record_id,
+    name: result.name,
+    names: result.names.map(toponym => ({ toponym })),
+    type: result.type
+  },
+  geometry: {
+    type: 'Point',
+    coordinates: result.coordinates.slice().reverse()
+  }
+});
+
+interface HitComponentProps {
+
+  hit: any;
+
+  isHovered: boolean;
+
+  onClick(): void;
+
+}
+
+const HitComponent = (props: HitComponentProps) => {
+
+  const { hit } = props;
+
+  const cls = "h-[5.5em] border-b flex flex-col justify-start";
+
+  return (
+    <div 
+      className={props.isHovered ? `bg-teal-700/30 ${cls}` : cls}>
+      <button 
+        className="py-2 px-3 flex-grow text-left inline-flex flex-col"
+        onClick={props.onClick}>
+        <Highlight hit={hit} attribute="name" className="line-clamp-2" />
+        <p className="text-muted text-xs line-clamp-1">
+          <Highlight hit={hit} attribute={"names"} />
+        </p>
+      </button>
+    </div>
+  );
+}
+
+export interface SearchResultListProps {
+
+  hits: TypeSenseSearchResult[];
+
+  hover?: Feature<{ id: string }>;
+
+  onHoverChange(hover?: Feature<{ id: string }>): void;  
+
+  onClick(result: TypeSenseSearchResult): void;
+
+}
+
+export const SearchResultsList = (props: SearchResultListProps) => {
+
+  const { hits, hover, onHoverChange } = props;
+
+  const Row = ({ index, style}) => {
+    const hit = hits[index];
+    const id = parseInt(hit.record_id);
+
+    return (
+      <div 
+        style={style} 
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : toFeature(hit))}
+        onPointerLeave={() => onHoverChange(undefined)}>
+        <HitComponent 
+          hit={hit} 
+          isHovered={hover?.id === parseInt(hit?.record_id)} 
+          onClick={() => props.onClick(hit)} />
+      </div>
+    )
+  }
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          height={height}
+          itemCount={hits.length}
+          width={width}
+          itemSize={88}>
+          {Row}
+        </FixedSizeList>
+      )}
+    </AutoSizer>
+  )
+
+}