@performant-software/core-data 2.1.0-beta.2 → 2.1.0-beta.21

package/src/components/LayerMenu.js

@@ -0,0 +1,154 @@
+// @flow
+
+import * as Dropdown from '@radix-ui/react-dropdown-menu';
+import { Check, Dot, Layers } from 'lucide-react';
+import React, {
+  useCallback,
+  useContext,
+  useEffect,
+  useState
+} from 'react';
+import _ from 'underscore';
+import I18nContext from '../context/I18n';
+import type { Layer } from '../types/RuntimeConfig';
+
+type Props = {
+  baseLayer: Layer,
+  baseLayers: Array<Layer>,
+  dataLayers: Array<Layer>,
+  onChangeBaseLayer: (config: Layer) => void,
+  onChangeOverlays: (visible: Array<string>) => void
+};
+
+const LayerMenu = (props: Props) => {
+  const [selectedOverlays, setSelectedOverlays] = useState({});
+
+  const { translations } = useContext(I18nContext);
+
+  const {
+    baseLayer,
+    baseLayers,
+    dataLayers
+  } = props;
+
+  /**
+   * Changes the base layer to the layer with the passed name.
+   *
+   * @type {(function(*): void)|*}
+   */
+  const onChangeBaseLayer = useCallback((name) => {
+    props.onChangeBaseLayer(_.findWhere(baseLayers, { name }));
+  }, [baseLayers, props.onChangeBaseLayer]);
+
+  /**
+   * Toggles visibility for the overlay with the passed name.
+   *
+   * @type {function(string): function(boolean): void}
+   */
+  const onToggleOverlay = useCallback((name: string) => (
+    (checked: boolean) => setSelectedOverlays((state) => ({ ...state, [name]: checked }))
+  ), []);
+
+  /**
+   * Calls the onChangeOverlays prop when the selected overlays are changed.
+   */
+  useEffect(() => {
+    const visible = Object.entries(selectedOverlays)
+      .filter(([, v]) => v)
+      .map(([name]) => dataLayers.find((l) => l.name === name))
+      .filter(Boolean);
+
+    props.onChangeOverlays(visible);
+  }, [selectedOverlays]);
+
+  return (
+    <>
+      <Dropdown.Root>
+        <Dropdown.Trigger
+          asChild
+        >
+          <button
+            className='p6o-control p6o-control-btn'
+            aria-label={translations.t_selectMapLayers()}
+            type='button'
+          >
+            <Layers
+              className='h-4 w-4'
+            />
+          </button>
+        </Dropdown.Trigger>
+        <Dropdown.Portal>
+          <Dropdown.Content
+            align='start'
+            className='bg-white/80 max-h-[50vh] overflow-y-auto backdrop-blur z-20 shadow-md rounded-md max-w-lg p-4 outline-none'
+            side='left'
+            sideOffset={10}
+          >
+            <Dropdown.Label
+              className='w-full font-medium text-sm text-muted'
+            >
+              { translations.t_baseLayers() }
+            </Dropdown.Label>
+            <Dropdown.RadioGroup
+              className='py-1.5'
+              onValueChange={onChangeBaseLayer}
+              value={baseLayer}
+            >
+              { baseLayers.map((b) => (
+                <Dropdown.RadioItem
+                  className='outline-none relative pl-7 pr-2 pt-0.5 rounded-md cursor-pointer hover:bg-teal-700/10'
+                  key={b.name}
+                  value={b.name}
+                >
+                  <Dropdown.ItemIndicator
+                    className='absolute -left-1 -top-0.5'
+                  >
+                    <Dot
+                      className='w-8 h-8'
+                    />
+                  </Dropdown.ItemIndicator>
+                  { b.name }
+                </Dropdown.RadioItem>
+              ))}
+            </Dropdown.RadioGroup>
+            { dataLayers.length > 0 && (
+              <>
+                <Dropdown.Separator
+                  className='w-full border-b pt-0.5 my-2'
+                />
+                <Dropdown.Label
+                  className='w-full font-medium text-sm text-muted'
+                >
+                  { translations.t_overlays() }
+                </Dropdown.Label>
+                <div
+                  className='pt-1.5'
+                >
+                  { dataLayers.map((o) => (
+                    <Dropdown.CheckboxItem
+                      checked={selectedOverlays[o.name]}
+                      className='outline-none relative pl-7 pr-2 py-0.5 rounded-md cursor-pointer hover:bg-teal-700/10'
+                      key={o.name}
+                      onCheckedChange={onToggleOverlay(o.name)}
+                    >
+                      <Dropdown.ItemIndicator
+                        className='absolute left-1 top-1.5'
+                      >
+                        <Check
+                          className='w-4 h-4'
+                        />
+                      </Dropdown.ItemIndicator>
+                      { o.name }
+                    </Dropdown.CheckboxItem>
+                  ))}
+                </div>
+              </>
+            )}
+          </Dropdown.Content>
+        </Dropdown.Portal>
+      </Dropdown.Root>
+    </>
+  );
+};
+
+export default LayerMenu;

package/src/components/OverlayLayers.js

@@ -0,0 +1,48 @@
+// @flow
+
+import { MapStyles } from '@performant-software/geospatial';
+import { GeoJSONLayer, RasterLayer } from '@peripleo/maplibre';
+import React from 'react';
+import _ from 'underscore';
+import type { Layer as LayerType } from '../types/RuntimeConfig';
+
+interface OverlayLayerProps {
+  overlay: Layer;
+}
+
+const OverlayLayer = (props: OverlayLayerProps) => {
+  const { overlay } = props;
+
+  if (overlay.layer_type === 'geojson') {
+    return (
+      <GeoJSONLayer
+        id={overlay.name}
+        data={overlay.url}
+        fillStyle={MapStyles.fill}
+        pointStyle={MapStyles.point}
+        strokeStyle={MapStyles.stroke}
+      />
+    );
+  }
+
+  if (overlay.layer_type === 'raster') {
+    return (
+      <RasterLayer
+        id={overlay.name}
+        url={overlay.url}
+      />
+    );
+  }
+
+  return null;
+};
+
+type Props = {
+  overlays: Array<LayerType>
+};
+
+const OverlayLayers = (props: Props) => (
+  _.map(props.overlays, (overlay: any) => <OverlayLayer overlay={overlay} />)
+);
+
+export default OverlayLayers;

package/src/components/PersistentSearchStateContextProvider.js

@@ -0,0 +1,46 @@
+// @flow
+
+import React, { useMemo, type ReactNode } from 'react';
+import PersistentSearchStateContext from '../context/PersistentSearchState';
+import useProgressiveSearch from '../hooks/ProgressiveSearch';
+
+type Props = {
+  geoSearch: any,
+  infiniteHits: any,
+  searchBox: any,
+  children: ReactNode
+};
+
+const PersistentSearchStateContextProvider = (props: Props) => {
+  const { geoSearch, infiniteHits, searchBox } = props;
+  const { cachedHits, observe, unobserve } = useProgressiveSearch(infiniteHits);
+
+  /**
+   * Memoizes the context value.
+   *
+   * @type {{
+   *   unobserve: function(OnCompleteCallback): void,
+   *   geoSearch: *,
+   *   cachedHits: TypesenseSearchResult[],
+   *   observe: function(OnCompleteCallback): void,
+   *   searchBox: *
+   * }}
+   */
+  const value = useMemo(() => ({
+    cachedHits,
+    geoSearch,
+    searchBox,
+    observe,
+    unobserve
+  }), [cachedHits, geoSearch, searchBox, observe, unobserve]);
+
+  return (
+    <PersistentSearchStateContext.Provider
+      value={value}
+    >
+      { props.children }
+    </PersistentSearchStateContext.Provider>
+  );
+};
+
+export default PersistentSearchStateContextProvider;

package/src/components/PlaceDetailsPanel.js

@@ -49,7 +49,7 @@ const PlaceDetailsPanel = (props: Props) => {
 
   return (
     <aside
-      className='flex flex-col relative z-10 h-full min-w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto'
+      className='flex flex-col relative z-10 h-full min-w-[260px] bg-white/80 backdrop-blur shadow overflow-y-auto'
       ref={el}
     >
       <button

package/src/components/PlaceMarkers.js

@@ -0,0 +1,74 @@
+// @flow
+
+import { LocationMarkers } from '@performant-software/geospatial';
+import { feature, featureCollection } from '@turf/turf';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+
+type Props = {
+  /**
+   * The URL of the Core Data place record.
+   */
+  urls: Array<string>
+};
+
+/**
+ * This component renders a map marker for a given Core Data Place record.
+ */
+const PlaceMarkers = ({ urls, ...props }: Props) => {
+  const [places, setPlaces] = useState([]);
+
+  /**
+   * Converts the set of places into a FeatureCollection.
+   *
+   * @type {FeatureCollection<Geometry, Properties>}
+   */
+  const data = useMemo(() => featureCollection(places), [places]);
+
+  /**
+   * Fetches the passed URLs and converts the response to JSON.
+   *
+   * @type {function(): *}
+   */
+  const onFetch = useCallback(() => (
+    _.map(urls, (url) => fetch(url).then((res) => res.json()))
+  ), [urls]);
+
+  /**
+   * Converts the passed list of records to Features and sets them on the state.
+   *
+   * @type {function(*): *}
+   */
+  const onLoad = useCallback((records) => (
+    _.map(records, (record) => setPlaces((prevPlaces) => (
+      record.geometry ? [...prevPlaces, feature(record.geometry, record.properties)] : prevPlaces
+    )))
+  ), []);
+
+  /**
+   * Fetch the place record from the passed URL.
+   */
+  useEffect(() => {
+    Promise
+      .all(onFetch())
+      .then(onLoad);
+  }, [onFetch, onLoad]);
+
+  if (_.isEmpty(data?.features)) {
+    return null;
+  }
+
+  return (
+    <LocationMarkers
+      {...props}
+      data={data}
+    />
+  );
+};
+
+export default PlaceMarkers;

package/src/components/RefinementListProxy.js

@@ -0,0 +1,15 @@
+// @flow
+
+type Props = {
+  useRefinementList: (props: any) => void;
+};
+
+const RefinementListProxy = ({ useRefinementList, ...props }: Props) => {
+  // Just a trick to have an empty component that keeps this
+  // facet mounted, while the GUI element mounts and unmounts
+  useRefinementList(props);
+
+  return null;
+};
+
+export default RefinementListProxy;

package/src/components/SearchResultsLayer.js

@@ -0,0 +1,66 @@
+// @flow
+
+import { LocationMarkers } from '@performant-software/geospatial';
+import { useMap } from '@peripleo/maplibre';
+import React, { useEffect, useMemo, useState } from 'react';
+import TypesenseUtils from '../utils/Typesense';
+import { useCachedHits, useSearchCompleted } from '../hooks/Typesense';
+
+type Props = {
+  layerId: string
+};
+
+const SearchResultsLayer = (props: Props) => {
+  const [fitBoundingBox, setFitBoundingBox] = useState(false);
+  const [mapLoaded, setMapLoaded] = useState(false);
+  const [visible, setVisible] = useState(false);
+
+  const hits = useCachedHits();
+  const map = useMap();
+
+  const data = useMemo(() => TypesenseUtils.toFeatureCollection(hits), [hits]);
+
+  /**
+   * Sets the mapLoaded state to true.
+   */
+  useEffect(() => {
+    if (map.loaded()) {
+      setMapLoaded(true);
+    } else {
+      const onLoad = () => setMapLoaded(true);
+      map.on('load', onLoad);
+    }
+
+    return () => {
+      setMapLoaded(false);
+    };
+  }, [map]);
+
+  /**
+   * Sets the visible state to true.
+   */
+  useSearchCompleted(() => {
+    setVisible(true);
+    setFitBoundingBox(true);
+  }, []);
+
+  useEffect(() => {
+    if (fitBoundingBox) {
+      setFitBoundingBox(false);
+    }
+  }, [fitBoundingBox]);
+
+  if (!(mapLoaded && visible)) {
+    return null;
+  }
+
+  return (
+    <LocationMarkers
+      {...props}
+      data={data}
+      fitBoundingBox={fitBoundingBox}
+    />
+  );
+};
+
+export default SearchResultsLayer;

package/src/context/FacetStateContext.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { createContext } from 'react';
+
+type FacetStateContextType = {
+  attributes: Array<string>;
+};
+
+const FacetStateContext = createContext<FacetStateContextType>({ attributes: [] });
+
+export default FacetStateContext;

package/src/context/I18n.js

@@ -0,0 +1,11 @@
+// @flow
+
+import { createContext } from 'react';
+
+type I18nContextType = {
+  translations: any
+};
+
+const I18nContext = createContext<I18nContextType>();
+
+export default I18nContext;

package/src/context/PersistentSearchState.js

@@ -0,0 +1,16 @@
+// @flow
+
+import { createContext } from 'react';
+import type { SearchResult } from '../types/typesense/SearchResult';
+
+type PersistentSearchStateContextType = {
+  cachedHits: Array<SearchResult>,
+  geoSearch: any,
+  searchBox: any,
+  observe: (callback: ((hits: Array<SearchResult>) => void)) => void,
+  unobserve: (callback: ((hits: Array<SearchResult>) => void)) => void
+};
+
+const PersistentSearchStateContext = createContext<PersistentSearchStateContextType>(undefined);
+
+export default PersistentSearchStateContext;

package/src/hooks/ProgressiveSearch.js

@@ -0,0 +1,92 @@
+// @flow
+
+import { dequal } from 'dequal/lite';
+import {
+  useCallback,
+  useEffect,
+  useRef,
+  useState
+} from 'react';
+import type { SearchResult } from '../types/typesense/SearchResult';
+import TypesenseUtils from '../utils/Typesense';
+
+type OnCompleteCallback = (results: Array<SearchResult>) => void;
+
+const useProgressiveSearch = (infiniteHits) => {
+  const [cachedHits, setCachedHits] = useState(TypesenseUtils.createCachedHits([]));
+
+  const lastSearchState = useRef<any>();
+  const callbacks = useRef<Array<OnCompleteCallback>>([]);
+
+  /**
+   * Adds the passed callback to the list of callbacks.
+   *
+   * @type {(function(OnCompleteCallback): void)|*}
+   */
+  const observe = useCallback((callback: OnCompleteCallback) => {
+    callbacks.current = [...callbacks.current, callback];
+  }, []);
+
+  /**
+   * Removes the passed callback from the list of callbacks.
+   *
+   * @type {(function(OnCompleteCallback): void)|*}
+   */
+  const unobserve = useCallback((callback: OnCompleteCallback) => {
+    callbacks.current = callbacks.current.filter((c) => c !== callback);
+  }, []);
+
+  /**
+   * Returns true if the state has changed.
+   *
+   * @param a
+   * @param b
+   * @param ignorePageNo
+   *
+   * @returns {boolean}
+   */
+  const hasStateChanged = (a: any, b: any, ignorePageNo?: boolean) => {
+    if (ignorePageNo && a) {
+      // eslint-disable-next-line no-param-reassign
+      delete a.page;
+    }
+
+    if (ignorePageNo && b) {
+      // eslint-disable-next-line no-param-reassign
+      delete b.page;
+    }
+
+    return !dequal(a, b);
+  };
+
+  useEffect(() => {
+    const { results } = infiniteHits;
+
+    const isFirstPage = results.page === 0;
+    const isLastPage = results.page + 1 >= results.nbPages;
+
+    const hits = TypesenseUtils.normalizeResults(results.hits);
+
+    // Add to cache and load next page
+    if (isFirstPage && hasStateChanged(results._state, lastSearchState.current, true)) {
+      setCachedHits(() => TypesenseUtils.createCachedHits(hits));
+    } else {
+      setCachedHits(({ merge }) => merge(hits));
+    }
+
+    if (!isLastPage && infiniteHits.showMore) {
+      setTimeout(() => infiniteHits.showMore(), 25);
+    } else if (hasStateChanged(results._state, lastSearchState.current)) {
+      callbacks.current.forEach((callback) => {
+        const merged = cachedHits.merge(hits);
+        callback(merged.hits);
+      });
+    }
+
+    lastSearchState.current = results._state;
+  }, [infiniteHits.results]);
+
+  return { cachedHits: cachedHits.hits, observe, unobserve };
+};
+
+export default useProgressiveSearch;

package/src/hooks/Typesense.js

@@ -0,0 +1,31 @@
+// @flow
+
+import { useContext, useEffect } from 'react';
+import PersistentSearchStateContext from '../context/PersistentSearchState';
+
+export const useCachedHits = () => {
+  const { cachedHits } = useContext(PersistentSearchStateContext);
+  return cachedHits;
+};
+
+export const useSearchBox = () => {
+  const { searchBox } = useContext(PersistentSearchStateContext);
+  return searchBox;
+};
+
+export const useGeoSearch = () => {
+  const { geoSearch } = useContext(PersistentSearchStateContext);
+  return geoSearch;
+};
+
+export const useSearchCompleted = (callback: ((hits: TypesenseSearchResult[]) => void), deps: Array<any>) => {
+  const { observe, unobserve } = useContext(PersistentSearchStateContext);
+
+  useEffect(() => {
+    observe(callback);
+
+    return () => {
+      unobserve(callback);
+    };
+  }, deps);
+};

package/src/index.js

@@ -4,11 +4,19 @@
 import './index.css';
 
 // Components
+export { default as FacetList } from './components/FacetList';
+export { default as FacetLists } from './components/FacetLists';
+export { default as FacetListsGrouped } from './components/FacetListsGrouped';
+export { default as FacetStateContextProvider } from './components/FacetStateContextProvider';
+export { default as LayerMenu } from './components/LayerMenu';
 export { default as LoadAnimation } from './components/LoadAnimation';
 export { default as MediaGallery } from './components/MediaGallery';
+export { default as OverlayLayers } from './components/OverlayLayers';
+export { default as PersistentSearchStateContextProvider } from './components/PersistentSearchStateContextProvider';
 export { default as PlaceDetailsPanel } from './components/PlaceDetailsPanel';
-export { default as PlaceMarker } from './components/PlaceMarker';
+export { default as PlaceMarkers } from './components/PlaceMarkers';
 export { default as PlaceResultsList } from './components/PlaceResultsList';
+export { default as RefinementListProxy } from './components/RefinementListProxy';
 export { default as RelatedItemsList } from './components/RelatedItemsList';
 export { default as RelatedList } from './components/RelatedList';
 export { default as RelatedMedia } from './components/RelatedMedia';
@@ -16,3 +24,17 @@ export { default as RelatedOrganization } from './components/RelatedOrganization
 export { default as RelatedPeople } from './components/RelatedPeople';
 export { default as RelatedPlaces } from './components/RelatedPlaces';
 export { default as RelatedTaxonomies } from './components/RelatedTaxonomies';
+export { default as SearchResultsLayer } from './components/SearchResultsLayer';
+
+// Contexts
+export { default as FacetStateContext } from './context/FacetStateContext';
+export { default as I18nContext } from './context/I18n';
+
+// Hooks
+export { default as useProgressiveSearch } from './hooks/ProgressiveSearch';
+export * from './hooks/Typesense';
+
+// Utilities
+export { default as CoreData } from './utils/CoreData';
+export { default as Peripleo } from './utils/Peripleo';
+export { default as Typesense } from './utils/Typesense';

package/src/types/RuntimeConfig.js

@@ -0,0 +1,43 @@
+// @flow
+
+export type Layer = {
+  name: string,
+  layer_type: 'raster' | 'vector' | 'geojson',
+  overlay?: boolean,
+  url: string,
+  description?: string,
+  tilesize?: number,
+  attribution?: string,
+  minzoom?: number,
+  maxzoom?: number
+};
+
+export type RuntimeConfig = {
+  branding: {
+    title?: string,
+    map_style: string,
+    related?: Array<{
+      endpoint: string,
+      ui_label: string,
+      default_open?: boolean
+    }>
+  },
+  layers: Array<Layer>,
+  typesense: {
+    host: string,
+    port?: number,
+    protocol?: 'http' | 'https',
+    api_key: string,
+    index_name: string,
+    query_by: string,
+    limit?: number,
+    facets?: {
+      include?: string[],
+      exclude?: string[]
+    }
+  },
+  core_data: {
+    project_ids: number[],
+    url: string
+  }
+};

package/src/types/typesense/SearchResult.js

@@ -0,0 +1,14 @@
+// @flow
+
+export type SearchResult = {
+  uuid: string,
+  record_id: string,
+  type: string,
+  name: string,
+  names: Array<string>,
+  coordinates: Array<number>,
+  geometry: {
+    type: 'Point' | 'GeometryCollection',
+    coordinates: [ number, number ]
+  }
+};