@performant-software/core-data 2.3.10-beta.8 → 2.3.10

package/types/components/PlaceMarker.js.flow

@@ -0,0 +1,77 @@
+// @flow
+
+import { LocationMarker } from '@performant-software/geospatial';
+import { feature, featureCollection } from '@turf/turf';
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState
+} from 'react';
+import _ from 'underscore';
+
+type Props = {
+  animate?: boolean,
+
+  /**
+   * 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 PlaceMarker = (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(props.urls, (url) => fetch(url).then((res) => res.json()))
+  ), [props.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) => [
+      ...prevPlaces,
+      feature(record.geometry, record.properties)
+    ]))
+  ), []);
+
+  /**
+   * Fetch the place record from the passed URL.
+   */
+  useEffect(() => {
+    Promise
+      .all(onFetch())
+      .then(onLoad);
+  }, [onFetch, onLoad]);
+
+  if (_.isEmpty(data?.features)) {
+    return null;
+  }
+
+  return (
+    <LocationMarker
+      animate={props.animate}
+      data={data}
+    />
+  );
+};
+
+export default PlaceMarker;

package/types/components/PlaceResultsList.js.flow

@@ -0,0 +1,137 @@
+// @flow
+
+import React, { useMemo } from 'react';
+import { Highlight } from 'react-instantsearch';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { FixedSizeList } from 'react-window';
+import type { Feature } from '../types/Feature';
+import type { Place } from '../types/typesense/Place';
+import TypesenseUtils from '../utils/Typesense';
+
+type HitComponentProps = {
+  hit: any,
+  isHovered: boolean,
+  onClick: () => void
+};
+
+const HitComponent = (props: HitComponentProps) => {
+  const { hit } = props;
+
+  const className = useMemo(() => {
+    const classNames = [
+      'h-full',
+      'border-b',
+      'flex',
+      'flex-col',
+      'justify-start'
+    ];
+
+    if (props.isHovered) {
+      classNames.push('bg-teal-700/30');
+    }
+
+    return classNames.join(' ');
+  }, [props.isHovered]);
+
+  return (
+    <div
+      className={className}
+    >
+      <button
+        aria-label='Search result'
+        className='py-2 px-3 flex-grow text-left flex rounded-none flex-col hover:bg-transparent'
+        onClick={props.onClick}
+        type='button'
+      >
+        <Highlight
+          attribute='name'
+          className='line-clamp-2'
+          hit={hit}
+        />
+        <p
+          className='text-muted text-xs line-clamp-1'
+        >
+          <Highlight
+            hit={hit}
+            attribute='names'
+          />
+        </p>
+      </button>
+    </div>
+  );
+};
+
+type Props = {
+  /**
+   * An array of search results representing `/typesense/Place` objects.
+   */
+  hits: Array<Place>,
+
+  /**
+   * The object that is currently occupying the hover state.
+   */
+  hover?: Feature<{ id: string }>,
+
+  /**
+   * Callback fired when the hover item is changed.
+   */
+  onHoverChange: (hover?: Feature<{ id: string }>) => void,
+
+  /**
+   * Callback fired when a search result is clicked.
+   */
+  onClick: (result: Place) => void
+};
+
+type RowProps = {
+  index: number,
+  style: any
+};
+
+/**
+ * This component renders a list of search results returned from a Core Data Typesense index.
+ */
+const PlaceResultsList = (props: Props) => {
+  const {
+    hits,
+    hover,
+    onClick,
+    onHoverChange
+  } = props;
+
+  const Row = ({ index, style }: RowProps) => {
+    const hit = hits[index];
+    const id = parseInt(hit.record_id, 10);
+
+    return (
+      <div
+        style={style}
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : TypesenseUtils.toFeature(hit))}
+        onPointerLeave={() => onHoverChange(undefined)}
+      >
+        <HitComponent
+          hit={hit}
+          isHovered={hover?.id === parseInt(hit?.record_id, 10)}
+          onClick={() => onClick(hit)}
+        />
+      </div>
+    );
+  };
+
+  return (
+    <AutoSizer>
+      {({ height, width }) => (
+        <FixedSizeList
+          height={height}
+          itemCount={hits.length}
+          width={width}
+          itemSize={88}
+        >
+          { Row }
+        </FixedSizeList>
+      )}
+    </AutoSizer>
+  );
+};
+
+export default PlaceResultsList;

package/types/context/I18n.js.flow

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

package/types/types/Translations.js.flow

@@ -0,0 +1,5 @@
+// @flow
+
+export type Translations = {
+  [key: string]: string
+};

package/types/utils/Peripleo.js.flow

@@ -27,12 +27,15 @@ const filterLayers = (config: RuntimeConfig) => {
 const normalize = (config: RuntimeConfig) => ({
   ...config,
   layers: config.layers || [],
-  typesense: {
-    ...config.typesense,
-    host: config.typesense.host || '443',
-    protocol: config.typesense.protocol || 'https',
-    sort_by: `_text_match:desc${config.typesense.default_sort ? `,${config.typesense.default_sort}:asc` : ''}`
-  },
+  search: _.map(config.search, (search) => ({
+    ...search,
+    typesense: {
+      ...search.typesense,
+      host: search.typesense.host || '443',
+      protocol: search.typesense.protocol || 'https',
+      sort_by: `_text_match:desc${search.typesense.default_sort ? `,${search.typesense.default_sort}:asc` : ''}`
+    }
+  })),
   core_data: {
     ...config.core_data,
 

package/types/utils/Typesense.js.flow

@@ -101,7 +101,9 @@ const createTypesenseAdapter = (config: TypesenseConfig, options = {}) => (
           protocol: config.protocol || 'https'
         }
       ],
-      cacheSearchResultsForSeconds: 120
+      cacheSearchResultsForSeconds: 120,
+      connectionTimeoutSeconds: config.connection_timeout,
+      timeoutSeconds: config.timeout
     },
     geoLocationField: 'coordinates',
     additionalSearchParameters: {

package/types/utils/test.mjs.flow

@@ -0,0 +1,37 @@
+import record1 from './record1.json' assert { type: 'json' };
+import record2 from './record2.json' assert { type: 'json' };
+import record3 from './record3.json' assert { type: 'json' };
+import _ from 'underscore';
+
+const getGeometries = (result, path) => {
+  const paths = path.split('.');
+
+  let obj = result;
+
+  _.each(paths, (attr) => {
+    if (_.isArray(obj)) {
+      obj = _.map(obj, (entry) => _.get(entry, attr));
+    } else {
+      obj = _.get(obj, attr);
+    }
+  });
+
+  return obj;
+};
+
+const test = () => {
+  console.log('**********************TEST1');
+  console.dir(getGeometries(record1, '83f862f6-f231-45f7-9bc1-66ef8c2eeaf3.geometry'));
+
+  console.log('');
+
+  console.log('**********************TEST2');
+  console.dir(getGeometries(record2, '83f862f6-f231-45f7-9bc1-66ef8c2eeaf3.geometry'));
+  
+  console.log('');
+
+  console.log('**********************TEST3');
+  console.dir(getGeometries(record3, '83f862f6-f231-45f7-9bc1-66ef8c2eeaf3.geometry'));
+};
+
+test();