@performant-software/core-data 2.2.0-beta.1 → 2.2.0-beta.3

package/src/components/PlaceLayersSelector.js

@@ -79,21 +79,27 @@ const PlaceLayersSelector = (props: Props) => {
               className='flex gap-1.5 items-center'
             >
               <Checkbox.Root
+                asChild
                 className='hover:bg-transparent mb-0.5'
                 id={layer.name}
                 checked={isSelected(layer)}
                 onCheckedChange={() => onChange(layer)}
               >
-                { isSelected(layer) && (
-                  <CheckSquare2
-                    className='w-5 h-5'
-                  />
-                )}
-                { !isSelected(layer) && (
-                  <Square
-                    className='w-5 h-5'
-                  />
-                )}
+                <button
+                  aria-label={layer.name}
+                  type='button'
+                >
+                  { isSelected(layer) && (
+                    <CheckSquare2
+                      className='w-5 h-5'
+                    />
+                  )}
+                  { !isSelected(layer) && (
+                    <Square
+                      className='w-5 h-5'
+                    />
+                  )}
+                </button>
               </Checkbox.Root>
               <label
                 className='cursor-pointer grow'

package/src/components/PlaceMarkers.js

@@ -36,7 +36,7 @@ const PlaceMarkers = ({ urls, ...props }: Props) => {
    * @type {function(): *}
    */
   const onFetch = useCallback(() => (
-    _.map(urls, (url) => fetch(url).then((res) => res.json()))
+    _.map(urls, (url) => fetch(url).then((res) => res.json()).then((res) => res.place))
   ), [urls]);
 
   /**

package/src/components/PlaceResultsList.js

@@ -4,50 +4,9 @@ import React, { useMemo } from 'react';
 import { Highlight } from 'react-instantsearch';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import _ from 'underscore';
 import type { Feature } from '../types/Feature';
 import type { Place } from '../types/typesense/Place';
-
-/**
- * Converts the passed place result to a feature.
- *
- * @param result
- *
- * @returns {{
- *   geometry: {coordinates: number[], type: string},
- *   id: number,
- *   type:
- *   string,
- *   properties: {
- *     ccode: *[],
- *     record_id: string,
- *     names: *,
- *     name: string,
- *     id: string,
- *     title: string,
- *     type: string,
- *     uuid: string
- *   }
- * }}
- */
-const toFeature = (result: Place) => ({
-  id: parseInt(result.record_id, 10),
-  type: 'Feature',
-  properties: {
-    id: result.record_id,
-    ccode: [],
-    title: result.name,
-    uuid: result.uuid,
-    record_id: result.record_id,
-    name: result.name,
-    names: _.map(result.names, (toponym) => ({ toponym })),
-    type: result.type
-  },
-  geometry: {
-    type: 'Point',
-    coordinates: result.coordinates.slice().reverse()
-  }
-});
+import TypesenseUtils from '../utils/Typesense';
 
 type HitComponentProps = {
   hit: any,
@@ -60,7 +19,7 @@ const HitComponent = (props: HitComponentProps) => {
 
   const className = useMemo(() => {
     const classNames = [
-      'h-[5.5em]',
+      'h-full',
       'border-b',
       'flex',
       'flex-col',
@@ -68,7 +27,7 @@ const HitComponent = (props: HitComponentProps) => {
     ];
 
     if (props.isHovered) {
-      classNames.add('bg-teal-700/30');
+      classNames.push('bg-teal-700/30');
     }
 
     return classNames.join(' ');
@@ -80,7 +39,7 @@ const HitComponent = (props: HitComponentProps) => {
     >
       <button
         aria-label='Search result'
-        className='py-2 px-3 flex-grow text-left inline-flex flex-col'
+        className='py-2 px-3 flex-grow text-left flex rounded-none flex-col hover:bg-transparent'
         onClick={props.onClick}
         type='button'
       >
@@ -147,7 +106,7 @@ const PlaceResultsList = (props: Props) => {
     return (
       <div
         style={style}
-        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : toFeature(hit))}
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : TypesenseUtils.toFeature(hit))}
         onPointerLeave={() => onHoverChange(undefined)}
       >
         <HitComponent

package/src/components/RelatedItem.js

@@ -47,33 +47,37 @@ const RelatedItemsList = (props: Props) => (
     key={props.id}
     value={props.id}
   >
-    <Accordion.Header>
-      <Accordion.Trigger
-        className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid
-                   rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'
-      >
-        <div>
-          { props.label }
-          { _.isFinite(props.count) && (
-            <span className='ml-1'>
-              ({ props.count })
-            </span>
-          )}
-          { props.error && (
-            <AlertCircle
-              className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'
-            />
-          )}
-          { props.loading && (
-            <LoadAnimation
-              className='text-muted/60 ml-4'
-            />
-          )}
-        </div>
-        <ChevronDown
-          className='accordion-chevron h-4 w-4'
-        />
-      </Accordion.Trigger>
+    <Accordion.Header
+      asChild
+    >
+      <h2>
+        <Accordion.Trigger
+          className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid
+                     rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'
+        >
+          <div>
+            { props.label }
+            { _.isFinite(props.count) && (
+              <span className='ml-1'>
+                ({ props.count })
+              </span>
+            )}
+            { props.error && (
+              <AlertCircle
+                className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'
+              />
+            )}
+            { props.loading && (
+              <LoadAnimation
+                className='text-muted/60 ml-4'
+              />
+            )}
+          </div>
+          <ChevronDown
+            className='accordion-chevron h-4 w-4'
+          />
+        </Accordion.Trigger>
+      </h2>
     </Accordion.Header>
     <Accordion.Content
       className='accordion-content text-sm leading-6'

package/src/components/RelatedItems.js

@@ -81,11 +81,11 @@ const RelatedItems = (props: Props) => {
                     { props.renderHeader(item) }
                   </div>
                 )}
-                <h4
+                <h2
                   className='py-0.5 font-semibold text-lg'
                 >
                   { item.primary_name?.name?.name }
-                </h4>
+                </h2>
                 { props.renderDescription && (
                   <div
                     className='py-0.5 font-light text-sm'

package/src/components/RelatedList.js

@@ -62,7 +62,7 @@ const RelatedList = (props: Props) => {
   if (_.isEmpty(items)) {
     return (
       <div
-        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'
+        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/60 italic'
       >
         { props.emptyMessage }
       </div>

package/src/components/RelatedMedia.js

@@ -60,7 +60,7 @@ const RelatedMedia = (props: Props) => {
   if (_.isEmpty(data?.items) && props.emptyMessage) {
     return (
       <div
-        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'
+        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/60 italic'
       >
         { props.emptyMessage }
       </div>
@@ -87,6 +87,7 @@ const RelatedMedia = (props: Props) => {
           key={id}
         >
           <Thumbnail
+            aria-label={label}
             className='rounded shadow cursor-pointer'
             onClick={() => setManifestUrl(id)}
             thumbnail={_.map(thumbnail, (t) => ({

package/types/components/EventDetails.js.flow

@@ -31,7 +31,7 @@ const EventDetails = (props: Props) => {
     EventsService.fetchOne(baseUrl, props.id, projectIds)
   ), [props.id]);
 
-  const { data: event, loading } = useLoader(onLoad);
+  const { data: { event } = {}, loading } = useLoader(onLoad);
 
   if (loading) {
     return (
@@ -46,7 +46,7 @@ const EventDetails = (props: Props) => {
   return (
     <div>
       <h1
-        className='pr-6 py-1 font-bold text-xl'
+        className='pr-6 py-1 font-bold text-2xl'
       >
         { event.name }
       </h1>

package/types/components/PlaceDetails.js.flow

@@ -33,7 +33,7 @@ const PlaceDetails = (props: Props) => {
     PlacesService.fetchOne(baseUrl, props.id, projectIds)
   ), [props.id]);
 
-  const { data: place } = useLoader(onLoad);
+  const { data: { place } = {} } = useLoader(onLoad);
 
   /**
    * Load the related media contents.

package/types/components/PlaceLayersSelector.js.flow

@@ -79,21 +79,27 @@ const PlaceLayersSelector = (props: Props) => {
               className='flex gap-1.5 items-center'
             >
               <Checkbox.Root
+                asChild
                 className='hover:bg-transparent mb-0.5'
                 id={layer.name}
                 checked={isSelected(layer)}
                 onCheckedChange={() => onChange(layer)}
               >
-                { isSelected(layer) && (
-                  <CheckSquare2
-                    className='w-5 h-5'
-                  />
-                )}
-                { !isSelected(layer) && (
-                  <Square
-                    className='w-5 h-5'
-                  />
-                )}
+                <button
+                  aria-label={layer.name}
+                  type='button'
+                >
+                  { isSelected(layer) && (
+                    <CheckSquare2
+                      className='w-5 h-5'
+                    />
+                  )}
+                  { !isSelected(layer) && (
+                    <Square
+                      className='w-5 h-5'
+                    />
+                  )}
+                </button>
               </Checkbox.Root>
               <label
                 className='cursor-pointer grow'

package/types/components/PlaceMarkers.js.flow

@@ -36,7 +36,7 @@ const PlaceMarkers = ({ urls, ...props }: Props) => {
    * @type {function(): *}
    */
   const onFetch = useCallback(() => (
-    _.map(urls, (url) => fetch(url).then((res) => res.json()))
+    _.map(urls, (url) => fetch(url).then((res) => res.json()).then((res) => res.place))
   ), [urls]);
 
   /**

package/types/components/PlaceResultsList.js.flow

@@ -4,50 +4,9 @@ import React, { useMemo } from 'react';
 import { Highlight } from 'react-instantsearch';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import { FixedSizeList } from 'react-window';
-import _ from 'underscore';
 import type { Feature } from '../types/Feature';
 import type { Place } from '../types/typesense/Place';
-
-/**
- * Converts the passed place result to a feature.
- *
- * @param result
- *
- * @returns {{
- *   geometry: {coordinates: number[], type: string},
- *   id: number,
- *   type:
- *   string,
- *   properties: {
- *     ccode: *[],
- *     record_id: string,
- *     names: *,
- *     name: string,
- *     id: string,
- *     title: string,
- *     type: string,
- *     uuid: string
- *   }
- * }}
- */
-const toFeature = (result: Place) => ({
-  id: parseInt(result.record_id, 10),
-  type: 'Feature',
-  properties: {
-    id: result.record_id,
-    ccode: [],
-    title: result.name,
-    uuid: result.uuid,
-    record_id: result.record_id,
-    name: result.name,
-    names: _.map(result.names, (toponym) => ({ toponym })),
-    type: result.type
-  },
-  geometry: {
-    type: 'Point',
-    coordinates: result.coordinates.slice().reverse()
-  }
-});
+import TypesenseUtils from '../utils/Typesense';
 
 type HitComponentProps = {
   hit: any,
@@ -60,7 +19,7 @@ const HitComponent = (props: HitComponentProps) => {
 
   const className = useMemo(() => {
     const classNames = [
-      'h-[5.5em]',
+      'h-full',
       'border-b',
       'flex',
       'flex-col',
@@ -68,7 +27,7 @@ const HitComponent = (props: HitComponentProps) => {
     ];
 
     if (props.isHovered) {
-      classNames.add('bg-teal-700/30');
+      classNames.push('bg-teal-700/30');
     }
 
     return classNames.join(' ');
@@ -80,7 +39,7 @@ const HitComponent = (props: HitComponentProps) => {
     >
       <button
         aria-label='Search result'
-        className='py-2 px-3 flex-grow text-left inline-flex flex-col'
+        className='py-2 px-3 flex-grow text-left flex rounded-none flex-col hover:bg-transparent'
         onClick={props.onClick}
         type='button'
       >
@@ -147,7 +106,7 @@ const PlaceResultsList = (props: Props) => {
     return (
       <div
         style={style}
-        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : toFeature(hit))}
+        onPointerEnter={() => onHoverChange(hover?.id === id ? hover : TypesenseUtils.toFeature(hit))}
         onPointerLeave={() => onHoverChange(undefined)}
       >
         <HitComponent

package/types/components/RelatedItem.js.flow

@@ -47,33 +47,37 @@ const RelatedItemsList = (props: Props) => (
     key={props.id}
     value={props.id}
   >
-    <Accordion.Header>
-      <Accordion.Trigger
-        className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid
-                   rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'
-      >
-        <div>
-          { props.label }
-          { _.isFinite(props.count) && (
-            <span className='ml-1'>
-              ({ props.count })
-            </span>
-          )}
-          { props.error && (
-            <AlertCircle
-              className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'
-            />
-          )}
-          { props.loading && (
-            <LoadAnimation
-              className='text-muted/60 ml-4'
-            />
-          )}
-        </div>
-        <ChevronDown
-          className='accordion-chevron h-4 w-4'
-        />
-      </Accordion.Trigger>
+    <Accordion.Header
+      asChild
+    >
+      <h2>
+        <Accordion.Trigger
+          className='accordion-trigger border-black/20 border border-t border-b-0 border-l-0 border-r-0 border-solid
+                     rounded-none w-full flex justify-between items-center px-3 py-3 text-sm'
+        >
+          <div>
+            { props.label }
+            { _.isFinite(props.count) && (
+              <span className='ml-1'>
+                ({ props.count })
+              </span>
+            )}
+            { props.error && (
+              <AlertCircle
+                className='inline ml-1.5 h-4 w-4 text-red-600 align-text-bottom'
+              />
+            )}
+            { props.loading && (
+              <LoadAnimation
+                className='text-muted/60 ml-4'
+              />
+            )}
+          </div>
+          <ChevronDown
+            className='accordion-chevron h-4 w-4'
+          />
+        </Accordion.Trigger>
+      </h2>
     </Accordion.Header>
     <Accordion.Content
       className='accordion-content text-sm leading-6'

package/types/components/RelatedItems.js.flow

@@ -81,11 +81,11 @@ const RelatedItems = (props: Props) => {
                     { props.renderHeader(item) }
                   </div>
                 )}
-                <h4
+                <h2
                   className='py-0.5 font-semibold text-lg'
                 >
                   { item.primary_name?.name?.name }
-                </h4>
+                </h2>
                 { props.renderDescription && (
                   <div
                     className='py-0.5 font-light text-sm'

package/types/components/RelatedList.js.flow

@@ -62,7 +62,7 @@ const RelatedList = (props: Props) => {
   if (_.isEmpty(items)) {
     return (
       <div
-        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'
+        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/60 italic'
       >
         { props.emptyMessage }
       </div>

package/types/components/RelatedMedia.js.flow

@@ -60,7 +60,7 @@ const RelatedMedia = (props: Props) => {
   if (_.isEmpty(data?.items) && props.emptyMessage) {
     return (
       <div
-        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/50 italic'
+        className='pt-6 pl-3 pr-6 pb-8 flex items-center justify-center text-muted/60 italic'
       >
         { props.emptyMessage }
       </div>
@@ -87,6 +87,7 @@ const RelatedMedia = (props: Props) => {
           key={id}
         >
           <Thumbnail
+            aria-label={label}
             className='rounded shadow cursor-pointer'
             onClick={() => setManifestUrl(id)}
             thumbnail={_.map(thumbnail, (t) => ({