Core data place details sidebar component scaffold (partial)

packages/geospatial/package.json

@@ -12,7 +12,9 @@
     "@mapbox/mapbox-gl-draw": "^1.4.3",
     "@peripleo/maplibre": "^0.3.2",
     "@peripleo/peripleo": "^0.3.2",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@turf/turf": "^6.5.0",
+    "lucide-react": "^0.320.0",
     "mapbox-gl": "npm:empty-npm-package@1.0.0",
     "maplibre-gl": "^3.5.2",
     "react-map-gl": "^7.1.6",
@@ -27,4 +29,4 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }
-}
+}

packages/geospatial/src/components/CoreDataPlaceDetailsPanel/CoreDataPlaceDetailsPanel.css

@@ -0,0 +1,37 @@
+.accordion-chevron {
+  transition: transform 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion-trigger[data-state='open'] > .accordion-chevron {
+  transform: rotate(180deg);
+}
+
+.accordion-content {
+  overflow: hidden;
+}
+
+.accordion-content[data-state='open'] {
+  animation: slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+.accordion-content[data-state='closed'] {
+  animation: slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1);
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-accordion-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--radix-accordion-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

packages/geospatial/src/components/CoreDataPlaceDetailsPanel/CoreDataPlaceDetailsPanel.js

@@ -0,0 +1,79 @@
+// @flow
+
+import React, { useMemo, useRef } from 'react';
+import { Image, X } from 'lucide-react';
+import { CoreDataRelatedMedia, UserDefinedField, CoreDataPlace, RelatedItemsData } from '../CoreDataTypes';
+// import { RelatedItemsList } from './RelatedItemsList';
+
+import './CoreDataPlaceDetailsPanel.css';
+
+type CoreDataPlaceDetailsPanelProps = {
+
+  place?: CoreDataPlace;
+
+  related: RelatedItemsData[];
+
+  onClose(): void;
+
+}
+
+export const CoreDataPlaceDetailsPanel = (props: CoreDataPlaceDetailsPanelProps) => {
+
+  const el = useRef<HTMLElement>(null);
+
+  const firstImage = useMemo(() => {
+    const images = props.related.find(i => i.endpoint === 'media_contents' && i.data?.items && i.data.items.length > 0);
+    return images ? (images.data && images.data.items[0].body) : undefined;
+  }, [props.related]);
+
+  const userDefined: UserDefinedField[] = props.place?.user_defined ? Object.values(props.place.user_defined) : [];
+
+  return (
+    <aside
+      ref={el} 
+      className="flex flex-col absolute z-10 h-full w-[280px] bg-white/80 backdrop-blur shadow overflow-y-auto">
+      <button 
+        onClick={props.onClose}
+        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">
+        <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">
+              {userDefined.map(({ 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>
+  )
+
+}

packages/geospatial/src/components/CoreDataPlaceDetailsPanel/index.js

@@ -0,0 +1 @@
+export * from './CoreDataPlaceDetailsPanel';

packages/geospatial/src/components/CoreDataTypes.ts

@@ -0,0 +1,124 @@
+// @flow
+
+import { Annotation, AnnotationPage, FeatureGeometry, Place, PlaceFeatureProperties } from '@peripleo/peripleo';
+
+export interface CoreDataProperties extends PlaceFeatureProperties {
+
+  record_id: string;
+
+  uuid: string;
+
+}
+
+export interface CoreDataPlace extends Place<CoreDataProperties> {
+
+  user_defined?: { [key: string]: UserDefinedField }
+
+}
+
+
+export type RelatedItemsData = {
+
+  endpoint: string;
+
+  ui_label: string;
+
+  default_open?: boolean;
+
+  data?: AnnotationPage<CoreDataAnnotation>;
+
+  error?: Error;
+
+}
+
+export interface CoreDataAnnotation {
+
+  id: string;
+
+  record_id: string;
+
+  uuid: string;
+
+  title: string;
+
+  user_defined: {
+
+    [key: string]: UserDefinedField;
+
+  }
+
+}
+
+export interface UserDefinedField {
+
+  label: string;
+
+  value: string;
+
+}
+
+export interface CoreDataRelatedMedia extends CoreDataAnnotation {
+
+  type: 'MediaContent';
+
+  content_download_url: string;
+
+  content_iiif_url: string;
+
+  content_preview_url: string;
+
+  content_thumbnail_url: string;
+
+  content_url: string;
+
+  manifest_url: string;
+
+}
+
+export interface MediaAnnotation extends Annotation<CoreDataRelatedMedia> { } 
+
+export interface CoreDataRelatedOrganization extends CoreDataAnnotation {
+
+  type: 'Organization';
+
+  biography: string;
+
+}
+
+export interface OrganizationAnnotation extends Annotation<CoreDataRelatedOrganization> { } 
+
+export interface CoreDataRelatedPerson extends CoreDataAnnotation {
+
+  id: string;
+
+  type: 'Person';
+
+  record_id: string;
+
+  title: string;
+
+  biography: string;
+
+}
+
+export interface PersonAnnotation extends Annotation<CoreDataRelatedPerson> { } 
+
+export interface CoreDataRelatedPlace extends CoreDataAnnotation {
+
+  type: 'Place';
+
+  geometry: FeatureGeometry;
+
+}
+
+export interface PlaceAnnotation extends Annotation<CoreDataRelatedPlace> { } 
+
+export interface CoreDataRelatedTaxonomy extends CoreDataAnnotation {
+
+  type: 'Taxonomy';
+
+}
+
+export interface TaxonomyAnnotation extends Annotation<CoreDataRelatedTaxonomy> { } 
+
+

packages/storybook/src/geospatial/CoreDataPlaceDetailsPanel.stories.js

@@ -0,0 +1,34 @@
+import { CoreDataPlaceDetailsPanel } from '../../../geospatial/src/components/CoreDataPlaceDetailsPanel';
+
+export default {
+  title: 'Components/Geospatial/CoreDataPlaceDetailsPanel',
+  component: CoreDataPlaceDetailsPanel
+};
+
+const place = { 
+  '@id': 'https://core-data-cloud-staging-2c51db0617a5.herokuapp.com/core_data/public/places/ad02a467-5852-4b64-a778-5fa57e1c354c', 
+  type: 'Place', 
+  properties: { 
+    ccode: [], 
+    title: 'Sapelo Island',
+    record_id: 4478, 
+    uuid: 'ad02a467-5852-4b64-a778-5fa57e1c354c' 
+  }, 
+  geometry: { 
+    type: 'Point', 
+    coordinates: [-81.2417611, 31.4774455]
+  }, 
+  names: [{ 'toponym': 'Sapelo Island' }],
+  user_defined: { 
+    'c01171e1-cafd-4111-a47a-a93a0b1151d1': { label: 'Description', value: 'Sapelo Island is home to the Gullah/Geechee people, many of whom reside at Hog Hammock on the southern half of the island. The rest of Sapelo is state-owned and managed. Its ecosystem and long history of occupation make Sapelo a site of great ecological, archaeological, cultural, and historical significance.' }, 
+    '09027d53-6ccc-4110-a507-750e2062b994': { label: 'Type', value: 'Island' }, 
+    'dfbd85e9-726b-448b-a77c-d4bafb8199e5': { label: 'Creator', value: 'Emory ECDS' }, 
+    '8611d261-8826-4948-a8c8-85bf695de9cc': { label: 'Subject', value: 'Environmental Research' },
+  } 
+}
+
+export const Default = () => (
+  <CoreDataPlaceDetailsPanel
+    place={place}
+    related={[]} />
+)