Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

RC #251 - Peripleo components #252

Merged
merged 109 commits into from
Mar 8, 2024
Merged
Changes from 1 commit
Commits
Show all changes
109 commits
Select commit Hold shift + click to select a range
6588d5e
Minimal 'CoreDataPlace' widget example
rsimon Jan 27, 2024
91f0579
Added component to index.js
rsimon Jan 27, 2024
720e7d3
Attempts to fix build issues
rsimon Jan 27, 2024
75fdb3a
Added missing @peripleo deps + changed from interface to type
rsimon Jan 30, 2024
924b73f
Various import fixes
rsimon Jan 30, 2024
f45f162
Build tweaks
rsimon Jan 31, 2024
429fe76
First working configuration (yay)
rsimon Jan 31, 2024
6b510c3
Cleanup: moved CSS into component
rsimon Jan 31, 2024
fe4d5dd
Core data place details sidebar component scaffold (partial)
rsimon Jan 31, 2024
f6a8e0d
Added related items section to place details panel
rsimon Jan 31, 2024
5edfee6
Added separate story for media gallery
rsimon Jan 31, 2024
17d7da5
Virtualized TypeSense search results list
rsimon Jan 31, 2024
3a8dbac
RC #251 - Reformatting CoreDataPlace component; Adding Peripleo and M…
Feb 1, 2024
f3d95cd
Merge branch 'master' of https://github.com/performant-software/react…
Feb 1, 2024
ce804d1
RC #251 - Adding MapUtils component; Creating bounding box function
Feb 2, 2024
d2066c9
Merge branch 'core-data-sidebar' of https://github.com/performant-sof…
Feb 2, 2024
5d6b7c7
RC $251 - Regenerating yarn.lock
Feb 2, 2024
cc9bdc1
RC #251 - Refactoring CoreData/Peripleo components into separate pack…
Feb 2, 2024
3c01a74
RC #251 - Publishing v1.2.0-beta.1
Feb 5, 2024
2a4e902
RC #251 - Removing "@peripleo/peripleo" dependency from "core-data"
Feb 5, 2024
e8204a6
RC #251 - Removing "@peripleo/peripleo" dependency from geospatial pa…
Feb 5, 2024
8bba1e1
RC #251 - Testing adding "resolve.conditionNames" attribute to webpac…
Feb 5, 2024
2da18af
RC #251 - Publishing v1.2.0-beta.2
Feb 5, 2024
9dae459
RC #251 - Testing adding conditionNames to geospatial webpack.config
Feb 5, 2024
71c5432
RC #251 - Publishing v1.2.0-beta.3
Feb 5, 2024
320a790
RC #251 - Testing adding conditionNames to core-data webpack.config
Feb 5, 2024
c9e9e97
RC #251 - Publishing v1.2.0-beta.4
Feb 5, 2024
ee8a251
RC #251 - Adding custom webpack config to Storybook
Feb 5, 2024
4134249
RC #251 - Publishing v1.2.0-beta.5
Feb 5, 2024
70573d5
RC #251 - Testing adding "conditionNames" to core-data and geospatial…
Feb 5, 2024
33c6665
RC #251 - Adding custom webpack config to /.storybook/main.js to work…
Feb 5, 2024
9dff1ae
RC #251 - Adding comment to main.js for Peripleo work-around
Feb 5, 2024
e452197
Merge branch 'rs/core-data-search-result-list' of https://github.com/…
Feb 5, 2024
936d695
RC #251 - Adding TailwindCSS and PostCSS dependencies
Feb 6, 2024
33df9bc
RC #251 - Adding i18n support to "core-data"; Adding component and pr…
Feb 6, 2024
c1e69d8
RC #251 - Adding scoping to CSS; Adding i18n to RelatedItemsList comp…
Feb 6, 2024
d57d70a
RC #251 - Removing scoping on MediaGallery.css
Feb 6, 2024
8eba7a3
RC #251 - Upgrading @peripleo dependencies to the latest version; Rem…
Feb 16, 2024
d67a4bc
RC #251 - Publishing v1.2.0-beta.6
Feb 16, 2024
22ef0c2
RC #251 - Testing adding @peripleo/maplibre as a peer dependency
Feb 16, 2024
f0c7d9c
RC #251 - Publishing v1.2.0-beta.7
Feb 16, 2024
0620204
RC #251 - Publishing v1.2.0-beta.8
Feb 16, 2024
8835ec9
RC #251 - Testing moving @performant-software/geospatial as a peer de…
Feb 16, 2024
b20f2a3
RC #251 - Publishing v1.2.0-beta.9; Testing removing useMap hook from…
Feb 16, 2024
828e5c7
RC #251 - Publishing v1.2.0-beta.10
Feb 19, 2024
d369638
RC #251 - Testing moving @peripleo/maplibre to peer dependency
Feb 21, 2024
4a6ad80
RC #251 - Publishing v1.2.0-beta.11
Feb 21, 2024
f9ae09d
RC #251 - Combining LocationMarker and PlaceMarker components; Removi…
Feb 21, 2024
d127ffb
RC #251 - Publishing v1.2.0-beta.12
Feb 21, 2024
c1e93e5
RC #251 - Testing moving @peripleo/maplibre dependency from peers
Feb 21, 2024
f12e98c
RC #251 - Publishing v1.2.0-beta.13
Feb 21, 2024
28135d9
RC #251 - Testing removing IIIFViewer component
Feb 21, 2024
c5f096b
RC #251 - Publishing v1.2.0-beta.14
Feb 21, 2024
4dcad27
RC #251 - Testing adding "map" prop to PlaceMarker component
Feb 21, 2024
faf7124
RC #251 - Publishing v1.2.0-beta.15
Feb 21, 2024
20f8402
RC #251 - Publishing v1.2.0-beta.16
Feb 21, 2024
dd9cbe0
RC #251 - Removing useMap context from PlaceMarker; Separating out Lo…
Feb 21, 2024
9675fb2
RC #251 - Publishing v1.2.0-beta.17
Feb 21, 2024
527fb7c
RC #251 - Updating PlaceMarker to correctly import LocationMarker
Feb 21, 2024
b2a5167
RC #251 - Moving @peripleo/maplibre to peer dependency
Feb 21, 2024
bfb178b
RC #251 - Publishing v1.2.0-beta.18
Feb 21, 2024
ddb617b
RC #251 - Testing exporting @peripleo/maplibre from geospatial
Feb 21, 2024
8eb1b9a
RC #251 - Publishing v1.2.0-beta.19
Feb 22, 2024
37f0370
RC #251 - Testing re-exporting Peripleo components from geospatial pa…
Feb 22, 2024
3d8dca8
RC #251 - Publishing v1.2.0-beta.20
Feb 22, 2024
6f4d47a
RC #251 - Testing adding @peripleo/maplibre to "externals" in webpack…
Feb 22, 2024
ce9f363
RC #251 - Publishing v1.2.0-beta.21; Adding es and cjs outputs for co…
Feb 22, 2024
43ec948
RC #251 - Publishing v1.2.0-beta.22
Feb 22, 2024
5c00b1e
RC #251 - Updating core-data and geospatial webpack config
Feb 22, 2024
cc6811f
RC #251 - Publishing v1.2.0-beta.23
Feb 22, 2024
4a329e1
RC #251 - Testing adding publicPath to webpack.config.js
Feb 22, 2024
a0b1646
RC #251 - Publishing v1.2.0-beta.24
Feb 22, 2024
bff5265
RC #251 - Updating geospatial webpack.config.js
Feb 22, 2024
9ae3457
RC #251 - Publishing v1.2.0-beta.25; Adding CSS exports to package.json
Feb 22, 2024
c8406e2
RC #251 - Publishing v1.2.0-beta.26
Feb 22, 2024
544f997
RC #251 - Adding CSS exports to package.json
Feb 22, 2024
a835672
RC #251 - Committing Vite changes
Feb 23, 2024
7e27ec1
RC #251 - Fixing import errors; Adding environment variable utility c…
Feb 29, 2024
86ce616
RC #251 - Fixing type imports
Feb 29, 2024
ab5df0c
RC #251 - Adding missing styles to preview.js
Feb 29, 2024
3d0c590
RC #251 - Removing IIIFModal component
Feb 29, 2024
2650578
RC #251 - Updating LazyIIIF to use Clover IIIF Viewer component directly
Feb 29, 2024
022ba18
RC #251 - Adding stories for ImageCarousel component
Feb 29, 2024
3e67561
RC #251 - Updating LocationMarker component to use "useMap" hook dire…
Feb 29, 2024
cba0e55
RC #251 - Removing webpack dependencies from "core-data" and "geospat…
Feb 29, 2024
7d36883
RC #251 - Publishing v1.2.0-beta.28
Feb 29, 2024
0d11d8c
RC #251 - Removing commented code from PlaceMarker.stories.js
Feb 29, 2024
3a703ec
RC #251 - Testing moving Clover IIIF dependency to peerDependencies
Feb 29, 2024
164d780
RC #251 - Publishing v1.2.0-beta.29
Feb 29, 2024
6539390
RC #251 - Adding Vite build to "semantic-ui", "shared", and "user-def…
Feb 29, 2024
f3c4eae
RC #251 - Removing "moment" dependency from "shared" package
Feb 29, 2024
89eb931
RC #251 - Removing unused dependencies
Feb 29, 2024
95f9c56
RC #251 - Updating "controlled-vocabulary" and "visualize" packages t…
Feb 29, 2024
2bba6cc
RC #251 - Publishing v1.2.0-beta.30
Feb 29, 2024
44dee2f
RC #251 - Testing adding "geospatial" package as peer dependency for …
Feb 29, 2024
6be413b
RC #251 - Moving all react-components packages to "peerDependencies"
Feb 29, 2024
8ed9630
RC #251 - Publishing v1.2.0-beta.31
Mar 1, 2024
0541455
RC #251 - Adding package.json descriptions
Mar 1, 2024
e4201a3
RC #251 - Removing logging
Mar 1, 2024
78ab44f
Merge branch 'master' of https://github.com/performant-software/react…
Mar 1, 2024
acfcb59
Merge branch 'master' of https://github.com/performant-software/react…
Mar 4, 2024
43b6ffe
RC #251 - Publishing v2.0.0-beta.0
Mar 5, 2024
3944504
RC #251 - Adding "CLEAN_EXCLUDE" to GitHub deploy workflow
Mar 6, 2024
c9b40b6
RC #251 - Updating formatting of CLEAN_EXCLUDE variable
Mar 6, 2024
aa332f9
RC #251 - Updating GitHub deploy action to latest version
Mar 6, 2024
15881a4
RC #251 - Updating GitHub deploy action to latest version
Mar 6, 2024
528bc67
RC #251 - Updating to only publish to GitHub pages on pushes to "master"
Mar 6, 2024
43be52a
RC #251 - Updating Storybook moment dependency to latest version; Rem…
Mar 8, 2024
7247129
RC #251 - Publishing v2.0.0
Mar 8, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Core data place details sidebar component scaffold (partial)
rsimon committed Jan 31, 2024
commit fe4d5ddf1ea6f2e10b356b4ae56b9be13dc4772e
24,884 changes: 24,884 additions & 0 deletions package-lock.json

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion packages/geospatial/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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>
)

}
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './CoreDataPlaceDetailsPanel';
124 changes: 124 additions & 0 deletions packages/geospatial/src/components/CoreDataTypes.ts
Original file line number Diff line number Diff line change
@@ -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> { }


Original file line number Diff line number Diff line change
@@ -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={[]} />
)
4,423 changes: 2,284 additions & 2,139 deletions yarn.lock

Large diffs are not rendered by default.