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

package/src/components/FacetTimeline.js

@@ -1,5 +1,6 @@
 // @flow
 
+import { useTimer } from '@performant-software/shared-components';
 import { clsx } from 'clsx';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { timeTicks } from 'd3-time';
@@ -16,12 +17,13 @@ import _ from 'underscore';
 import type { Event as EventType } from '../types/Event';
 import FacetSlider, { type Action as ActionType, type ClassNames as ClassNamesType } from './FacetSlider';
 import Icon from './Icon';
+import { useEventsService } from '../hooks/CoreData';
 import i18n from '../i18n/i18n';
 
 /**
  * Helper constants: periods of time in milliseconds.
  */
-const ONE_SECOND = 1000;
+const ONE_DAY = 86400000;
 const MIN_MONTH = 2419200000; // 28 days
 const MAX_MONTH = 2678400000; // 31 days
 
@@ -247,13 +249,8 @@ const Timeline = (props: TimelineProps) => {
       xOffset: scale(date),
     }));
     // Ensure the last major tick is at tMax (if not already included)
-    if (majorTicks.length > 0) {
-      if (_.last(majorTicks).value.getTime() < tMax.getTime()) {
-        majorTicks.push({ value: tMax, xOffset: scale(tMax), hideVal: true });
-      }
-      if (_.first(majorTicks).value.getTime() > tMin.getTime()) {
-        majorTicks.unshift({ value: tMin, xOffset: scale(tMin), hideVal: true });
-      }
+    if (majorTicks.length > 0 && _.last(majorTicks).value.getTime() < tMax.getTime()) {
+      majorTicks.push({ value: tMax, xOffset: scale(tMax), hideVal: true });
     }
     if (tickType === 'minor') {
       // because major ticks aren't evenly distributed due to calendar irregularities,
@@ -295,12 +292,33 @@ const Timeline = (props: TimelineProps) => {
   }, []);
 
   /**
-   * On facet change, update the timeline min and max.
+   * On load (or timeline width change), adjust based on the width of the slider.
    */
   useEffect(() => {
-    setMin(range.min);
-    setMax(range.max);
-  }, [range.min, range.max]);
+    let newMin = range.min;
+    let newMax = range.max;
+
+    // for ticks, expand overall range to get round values
+    // generate major and minor ticks across the range of valid values
+    const majTicks = _.pluck(generateTicks(
+      range.min, range.max, ticksBounds.width, MAJOR_TICKS_MIN_SPACE
+    ), 'value');
+    if (majTicks?.length > 1) {
+      // adjust the min and max such that no values are outside of the
+      // first and last major tick
+      const tickInterval = majTicks[1] - majTicks[0];
+      if (range.min < _.first(majTicks)) {
+        const firstMaj = _.first(majTicks);
+        newMin = Math.min(range.min, firstMaj.getTime() - ONE_DAY - tickInterval);
+      }
+      if (range.max > _.last(majTicks)) {
+        const lastMaj = _.last(majTicks);
+        newMax = Math.max(range.max, lastMaj.getTime() + ONE_DAY + tickInterval);
+      }
+    }
+    setMin(newMin);
+    setMax(newMax);
+  }, [range.min, range.max, ticksBounds.width]);
 
   /**
    * Memoize the set of major and minor ticks based on the current min,
@@ -522,11 +540,6 @@ type Props = {
     marker?: string,
   },
 
-  /**
-   * Typesense hit events to display, as an array.
-   */
-  data: Array<EventType>,
-
   /**
    * Callback fired when the event popover is clicked.
    */
@@ -562,14 +575,19 @@ const FacetTimeline = (props: Props) => {
   const { range = {}, refine, start = [] } = props;
 
   const from = Math.max(range.min, Number.isFinite(start[0]) ? start[0] : range.min);
-  const to = Math.min(range.max, Number.isFinite(start[1]) ? start[1] : range.max);
+  // NOTE: All calculations are done on range.max + 1, because range.min and range.max are years,
+  // while actual values of events are dates. Therefore, range.max should be one more than
+  // the highest year, so that events occuring during that year fall within the visible range.
+  const to = Math.min(range.max + 1, Number.isFinite(start[1]) ? start[1] : range.max + 1);
 
   const [events, setEvents] = useState();
-  const [max, setMax] = useState(range.max);
+  const [max, setMax] = useState(range.max + 1);
   const [min, setMin] = useState(range.min);
   const [value, setValue] = useState([from, to]);
 
+  const EventsService = useEventsService();
   const ref = useRef();
+  const { clearTimer, setTimer } = useTimer();
   const [sliderRef, sliderBounds] = useMeasure();
 
   /**
@@ -599,7 +617,6 @@ const FacetTimeline = (props: Props) => {
    */
   const onSliderReset = () => {
     setValue([min, max]);
-    refine([min, max]);
   };
 
   /**
@@ -620,12 +637,10 @@ const FacetTimeline = (props: Props) => {
    * @type {function(*): *}
    */
   const getDate = useCallback((event) => {
-    const date = (!_.isEmpty(event.start_date) && event.start_date[0])
-      || (!_.isEmpty(event.end_date) && event.end_date[0]);
+    const date = event.start_date?.start_date || event.end_date?.start_date;
 
     if (date) {
-      // Typsense date is a Unix timestamp, which is in seconds, so convert to ms
-      return new Date(date * ONE_SECOND);
+      return new Date(date);
     }
 
     return date;
@@ -636,12 +651,38 @@ const FacetTimeline = (props: Props) => {
    *
    * @type {(function(*): void)|*}
    */
-  useEffect(() => {
-    setEvents(_.map(props.data, (event) => ({
+  const onLoad = useCallback((data) => {
+    setEvents(_.map(data.events, (event) => ({
       ...event,
       date: getDate(event)
     })));
-  }, [props.data]);
+  }, []);
+
+  /**
+   * Loads the list of events when the range or min/max values are changed.
+   */
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+
+    // Clear the timeout when the range changes
+    clearTimer();
+
+    // Reset the timer to fetch the events
+    setTimer(() => {
+      setEvents([]);
+
+      const params = {
+        min_year: value[0],
+        max_year: value[1]
+      };
+
+      EventsService
+        .fetchAll(params)
+        .then(onLoad);
+    });
+  }, [onLoad, max, min, value]);
 
   /**
    * Calls the onLoad prop when the events are changed.
@@ -658,7 +699,7 @@ const FacetTimeline = (props: Props) => {
   useEffect(() => {
     setValue([from, to]);
     setMin(range.min);
-    setMax(range.max);
+    setMax(range.max + 1);
   }, [from, to, range.min, range.max]);
 
   /**
@@ -694,6 +735,32 @@ const FacetTimeline = (props: Props) => {
     minor: sliderBounds?.width ? generateTicks(min, max, sliderBounds.width, 'minor') : [],
   }), [min, max, sliderBounds.width]);
 
+  /**
+   * On load (or slider width change), adjust based on the width of the slider.
+   */
+  useEffect(() => {
+    // for ticks, expand overall range to get round values
+    const nValues = range.max + 1 - range.min;
+    // generate ticks across the range of valid values
+    const genTicks = _.pluck(generateTicks(
+      range.min, range.max + 1, sliderBounds.width, 'major'
+    ), 'value');
+    if (genTicks?.length < nValues && genTicks.length > 1) {
+      // adjust the min and max such that no values are outside of the
+      // first and last major tick
+      const tickInterval = genTicks[1] - genTicks[0];
+      const newMin = Math.min(range.min, _.first(genTicks) - tickInterval);
+      const newMax = Math.max(range.max + 1, _.last(genTicks) + tickInterval);
+      setMin(newMin);
+      setMax(newMax);
+      if (value[0] === range.min && value[1] === range.max + 1) {
+        // if the slider hasn't been changed from the initial range,
+        // set it to encompass the new slider min and max
+        setValue([newMin, newMax]);
+      }
+    }
+  }, [range.min, range.max, sliderBounds.width]);
+
   return (
     <div
       className={clsx(
@@ -709,9 +776,7 @@ const FacetTimeline = (props: Props) => {
         classNames={props.classNames}
         events={events}
         onClick={props.onClick}
-        // range.min and range.max are years; actual values of events are dates. Therefore, use
-        // value[1] + 1, so that events occuring during final year fall within the visible range.
-        range={{ min: value[0], max: value[1] + 1 }}
+        range={{ min: value[0], max: value[1] }}
       />
       <FacetSlider
         actions={[

package/src/utils/Peripleo.js

@@ -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/src/utils/Typesense.js

@@ -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/components/EventDetailsModal.js.flow

@@ -0,0 +1,35 @@
+// @flow
+
+import * as Dialog from '@radix-ui/react-dialog';
+import React from 'react';
+import EventDetails from './EventDetails';
+import { X } from 'lucide-react';
+
+const EventDetailsModal = (props) => {
+  return (
+    <Dialog.Root
+      open
+    >
+      <Dialog.Portal>
+        <Dialog.Content>
+          <EventDetails
+            id={props.id}
+          />
+          <Dialog.Close
+            asChild
+          >
+            <button
+              aria-label='Close Modal'
+              onClick={props.onClose}
+              type='button'
+            >
+              <X />
+            </button>
+          </Dialog.Close>
+        </Dialog.Content>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+};
+
+export default EventDetailsModal;

package/types/components/FacetTimeline.js.flow

@@ -1,5 +1,6 @@
 // @flow
 
+import { useTimer } from '@performant-software/shared-components';
 import { clsx } from 'clsx';
 import { scaleLinear, scaleTime } from 'd3-scale';
 import { timeTicks } from 'd3-time';
@@ -16,12 +17,13 @@ import _ from 'underscore';
 import type { Event as EventType } from '../types/Event';
 import FacetSlider, { type Action as ActionType, type ClassNames as ClassNamesType } from './FacetSlider';
 import Icon from './Icon';
+import { useEventsService } from '../hooks/CoreData';
 import i18n from '../i18n/i18n';
 
 /**
  * Helper constants: periods of time in milliseconds.
  */
-const ONE_SECOND = 1000;
+const ONE_DAY = 86400000;
 const MIN_MONTH = 2419200000; // 28 days
 const MAX_MONTH = 2678400000; // 31 days
 
@@ -247,13 +249,8 @@ const Timeline = (props: TimelineProps) => {
       xOffset: scale(date),
     }));
     // Ensure the last major tick is at tMax (if not already included)
-    if (majorTicks.length > 0) {
-      if (_.last(majorTicks).value.getTime() < tMax.getTime()) {
-        majorTicks.push({ value: tMax, xOffset: scale(tMax), hideVal: true });
-      }
-      if (_.first(majorTicks).value.getTime() > tMin.getTime()) {
-        majorTicks.unshift({ value: tMin, xOffset: scale(tMin), hideVal: true });
-      }
+    if (majorTicks.length > 0 && _.last(majorTicks).value.getTime() < tMax.getTime()) {
+      majorTicks.push({ value: tMax, xOffset: scale(tMax), hideVal: true });
     }
     if (tickType === 'minor') {
       // because major ticks aren't evenly distributed due to calendar irregularities,
@@ -295,12 +292,33 @@ const Timeline = (props: TimelineProps) => {
   }, []);
 
   /**
-   * On facet change, update the timeline min and max.
+   * On load (or timeline width change), adjust based on the width of the slider.
    */
   useEffect(() => {
-    setMin(range.min);
-    setMax(range.max);
-  }, [range.min, range.max]);
+    let newMin = range.min;
+    let newMax = range.max;
+
+    // for ticks, expand overall range to get round values
+    // generate major and minor ticks across the range of valid values
+    const majTicks = _.pluck(generateTicks(
+      range.min, range.max, ticksBounds.width, MAJOR_TICKS_MIN_SPACE
+    ), 'value');
+    if (majTicks?.length > 1) {
+      // adjust the min and max such that no values are outside of the
+      // first and last major tick
+      const tickInterval = majTicks[1] - majTicks[0];
+      if (range.min < _.first(majTicks)) {
+        const firstMaj = _.first(majTicks);
+        newMin = Math.min(range.min, firstMaj.getTime() - ONE_DAY - tickInterval);
+      }
+      if (range.max > _.last(majTicks)) {
+        const lastMaj = _.last(majTicks);
+        newMax = Math.max(range.max, lastMaj.getTime() + ONE_DAY + tickInterval);
+      }
+    }
+    setMin(newMin);
+    setMax(newMax);
+  }, [range.min, range.max, ticksBounds.width]);
 
   /**
    * Memoize the set of major and minor ticks based on the current min,
@@ -522,11 +540,6 @@ type Props = {
     marker?: string,
   },
 
-  /**
-   * Typesense hit events to display, as an array.
-   */
-  data: Array<EventType>,
-
   /**
    * Callback fired when the event popover is clicked.
    */
@@ -562,14 +575,19 @@ const FacetTimeline = (props: Props) => {
   const { range = {}, refine, start = [] } = props;
 
   const from = Math.max(range.min, Number.isFinite(start[0]) ? start[0] : range.min);
-  const to = Math.min(range.max, Number.isFinite(start[1]) ? start[1] : range.max);
+  // NOTE: All calculations are done on range.max + 1, because range.min and range.max are years,
+  // while actual values of events are dates. Therefore, range.max should be one more than
+  // the highest year, so that events occuring during that year fall within the visible range.
+  const to = Math.min(range.max + 1, Number.isFinite(start[1]) ? start[1] : range.max + 1);
 
   const [events, setEvents] = useState();
-  const [max, setMax] = useState(range.max);
+  const [max, setMax] = useState(range.max + 1);
   const [min, setMin] = useState(range.min);
   const [value, setValue] = useState([from, to]);
 
+  const EventsService = useEventsService();
   const ref = useRef();
+  const { clearTimer, setTimer } = useTimer();
   const [sliderRef, sliderBounds] = useMeasure();
 
   /**
@@ -599,7 +617,6 @@ const FacetTimeline = (props: Props) => {
    */
   const onSliderReset = () => {
     setValue([min, max]);
-    refine([min, max]);
   };
 
   /**
@@ -620,12 +637,10 @@ const FacetTimeline = (props: Props) => {
    * @type {function(*): *}
    */
   const getDate = useCallback((event) => {
-    const date = (!_.isEmpty(event.start_date) && event.start_date[0])
-      || (!_.isEmpty(event.end_date) && event.end_date[0]);
+    const date = event.start_date?.start_date || event.end_date?.start_date;
 
     if (date) {
-      // Typsense date is a Unix timestamp, which is in seconds, so convert to ms
-      return new Date(date * ONE_SECOND);
+      return new Date(date);
     }
 
     return date;
@@ -636,12 +651,38 @@ const FacetTimeline = (props: Props) => {
    *
    * @type {(function(*): void)|*}
    */
-  useEffect(() => {
-    setEvents(_.map(props.data, (event) => ({
+  const onLoad = useCallback((data) => {
+    setEvents(_.map(data.events, (event) => ({
       ...event,
       date: getDate(event)
     })));
-  }, [props.data]);
+  }, []);
+
+  /**
+   * Loads the list of events when the range or min/max values are changed.
+   */
+  useEffect(() => {
+    if (!value) {
+      return;
+    }
+
+    // Clear the timeout when the range changes
+    clearTimer();
+
+    // Reset the timer to fetch the events
+    setTimer(() => {
+      setEvents([]);
+
+      const params = {
+        min_year: value[0],
+        max_year: value[1]
+      };
+
+      EventsService
+        .fetchAll(params)
+        .then(onLoad);
+    });
+  }, [onLoad, max, min, value]);
 
   /**
    * Calls the onLoad prop when the events are changed.
@@ -658,7 +699,7 @@ const FacetTimeline = (props: Props) => {
   useEffect(() => {
     setValue([from, to]);
     setMin(range.min);
-    setMax(range.max);
+    setMax(range.max + 1);
   }, [from, to, range.min, range.max]);
 
   /**
@@ -694,6 +735,32 @@ const FacetTimeline = (props: Props) => {
     minor: sliderBounds?.width ? generateTicks(min, max, sliderBounds.width, 'minor') : [],
   }), [min, max, sliderBounds.width]);
 
+  /**
+   * On load (or slider width change), adjust based on the width of the slider.
+   */
+  useEffect(() => {
+    // for ticks, expand overall range to get round values
+    const nValues = range.max + 1 - range.min;
+    // generate ticks across the range of valid values
+    const genTicks = _.pluck(generateTicks(
+      range.min, range.max + 1, sliderBounds.width, 'major'
+    ), 'value');
+    if (genTicks?.length < nValues && genTicks.length > 1) {
+      // adjust the min and max such that no values are outside of the
+      // first and last major tick
+      const tickInterval = genTicks[1] - genTicks[0];
+      const newMin = Math.min(range.min, _.first(genTicks) - tickInterval);
+      const newMax = Math.max(range.max + 1, _.last(genTicks) + tickInterval);
+      setMin(newMin);
+      setMax(newMax);
+      if (value[0] === range.min && value[1] === range.max + 1) {
+        // if the slider hasn't been changed from the initial range,
+        // set it to encompass the new slider min and max
+        setValue([newMin, newMax]);
+      }
+    }
+  }, [range.min, range.max, sliderBounds.width]);
+
   return (
     <div
       className={clsx(
@@ -709,9 +776,7 @@ const FacetTimeline = (props: Props) => {
         classNames={props.classNames}
         events={events}
         onClick={props.onClick}
-        // range.min and range.max are years; actual values of events are dates. Therefore, use
-        // value[1] + 1, so that events occuring during final year fall within the visible range.
-        range={{ min: value[0], max: value[1] + 1 }}
+        range={{ min: value[0], max: value[1] }}
       />
       <FacetSlider
         actions={[

package/types/components/Icons.js.flow

@@ -0,0 +1,12 @@
+// @flow
+
+import React from 'react';
+import SpriteContent from '../icons/icons.svg?react';
+
+const Icons = () => (
+  <div style={{ display: 'none' }}>
+    <SpriteContent />
+  </div>
+);
+
+export default Icons;

package/types/components/PlaceDetailsPanel.js.flow

@@ -0,0 +1,126 @@
+// @flow
+
+import { Image, X } from 'lucide-react';
+import React, { useMemo, useRef } from 'react';
+import _ from 'underscore';
+import type { Place } from '../types/Place';
+import type { RelatedItems } from '../types/RelatedItems';
+import RelatedItemsList from './RelatedItemsList';
+
+type Props = {
+  /**
+   * The place record to render.
+   */
+  place?: Place,
+
+  /**
+   * A list of items related to the place.
+   */
+  related: Array<RelatedItems>,
+
+  /**
+   * Callback fired when the panel is closed.
+   */
+  onClose: () => void
+};
+
+/**
+ * This component renders a side panel for the passed Core Data place record.
+ */
+const PlaceDetailsPanel = (props: Props) => {
+  const el = useRef<HTMLElement>(null);
+
+  /**
+   * Returns the first image for the passed related items.
+   */
+  const firstImage = useMemo(() => {
+    const images = props.related.find((i) => i.endpoint === 'media_contents' && !_.isEmpty(i.data?.items));
+    return images ? (images.data && images.data.items[0].body) : undefined;
+  }, [props.related]);
+
+  /**
+   * Sets the user defined field values.
+   *
+   * @type {UserDefinedField[]|*[]}
+   */
+  const userDefined = useMemo(() => (
+    props.place?.user_defined ? Object.values(props.place.user_defined) : []
+  ), [props.place]);
+
+  return (
+    <aside
+      className='flex flex-col relative z-10 h-full min-w-[260px] bg-white/80 backdrop-blur shadow overflow-y-auto'
+      ref={el}
+    >
+      <button
+        className='absolute top-2 right-2 p-1.5 rounded-full z-10 bg-slate-200/60 hover:bg-slate-200 focus:outline-2 focus:outline-offset-2 focus:outline-teal-700'
+        onClick={props.onClose}
+        type='button'
+      >
+        <X className='h-4 w-4' />
+      </button>
+      { props.place && (
+        <>
+          { firstImage && (
+            <div
+              className='relative w-full h-[200px] flex-grow-0 flex-shrink-0 bg-muted/20 z-0'
+            >
+              <div
+                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'
+              >
+                <Image
+                  className='h-20 w-20 text-gray-400'
+                  strokeWidth={1}
+                />
+              </div>
+              <div
+                className='absolute top-0 left-0 w-full h-full flex justify-center items-center'
+              >
+                <img
+                  className='object-cover h-full w-full'
+                  src={firstImage.content_url}
+                  alt={firstImage.title}
+                />
+              </div>
+            </div>
+          )}
+          <div
+            className='p-3'
+          >
+            <h1
+              className='pr-6 font-medium'
+            >
+              { props.place.properties.title }
+            </h1>
+            <ol
+              className='text-sm mt-4 leading-6 overflow-hidden'
+            >
+              { _.map(userDefined, ({ label, value }) => (
+                <li
+                  key={label}
+                  className='mb-2'
+                >
+                  <div
+                    className='text-muted'
+                  >
+                    { label }
+                  </div>
+                  <div
+                    className='font-medium overflow-hidden text-ellipsis'
+                  >
+                    { value }
+                  </div>
+                </li>
+              ))}
+            </ol>
+          </div>
+          <RelatedItemsList
+            items={props.related}
+          />
+        </>
+      )}
+    </aside>
+  );
+};
+
+export default PlaceDetailsPanel;