Skip to content

Commit eb467a3

Browse files
davidsklar99davidsklar99
committed
Add back info drawer
1 parent 276fc16 commit eb467a3

File tree

16 files changed

+1452
-1
lines changed

16 files changed

+1452
-1
lines changed

‎pages/dev/column-editor/column/@col_id/edit/+Page.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import pg, {
88
} from "@macrostrat-web/column-builder";
99
import { PostgrestError } from "@supabase/postgrest-js";
1010
import { useData } from "vike-react/useData";
11-
import { StratColumn } from "#/map/map-interface/components/info-drawer/strat-column";
11+
import { StratColumn } from "./strat-column";
1212

1313
interface EditColumnData {
1414
col_id: string;

‎pages/map/map-interface/components/info-drawer/fossil-collections/collections.tsx‎

Lines changed: 156 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,156 @@
1+
import React from "react";
2+
import { Tabs, Tab } from "@blueprintjs/core";
3+
import { makeOccurrenceTree } from "../../../utils";
4+
import hyper from "@macrostrat/hyper";
5+
import styles from "./main.module.sass";
6+
const h = hyper.styled(styles);
7+
8+
export default function PBDBCollections({ data }) {
9+
if (data == null) return null;
10+
return h(
11+
"div.collections",
12+
data.map((col, ix) => h(FossilCollection, { key: ix, col }))
13+
);
14+
}
15+
16+
function FossilCollection({ col }) {
17+
let occurrenceTree = makeOccurrenceTree(col.occurrences);
18+
return h(
19+
"div.fossil-collection",
20+
<>
21+
<Header col={col} />
22+
<Tabs>
23+
<Tab title="Info" panel={<InfoPanel col={col} />} id="info" />
24+
<Tab
25+
id="occ"
26+
title={`Occurrences (${col.occurrences.length})`}
27+
disabled={col.occurrences.length == 0}
28+
panel={<OccurencesPanel occurrenceTree={occurrenceTree} />}
29+
/>
30+
</Tabs>
31+
</>
32+
);
33+
}
34+
35+
function CollectionNumber({ col }) {
36+
const num = col.oid.replace("col:", "");
37+
return h("div.collection-number", [
38+
h("span.collection-number-prefix", "#"),
39+
h(
40+
"a",
41+
{
42+
href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${num}`,
43+
target: "_blank",
44+
},
45+
num
46+
),
47+
]);
48+
}
49+
50+
function Header({ col }) {
51+
return h("div.pbdb-panel-header", [
52+
h.if(col.nam)("h4", {}, col.nam),
53+
h.if(col.oid)(CollectionNumber, { col }),
54+
]);
55+
}
56+
57+
function InfoPanel(props) {
58+
const { col } = props;
59+
60+
return (
61+
<div>
62+
{col.oei && (
63+
<div className="map-source-attr">
64+
<span className="attr">Age: </span> {col.oei} ({col.lag} - {col.lag}
65+
<span className="age-chip-ma">Ma</span>)
66+
</div>
67+
)}
68+
{col.sgr && (
69+
<div className="map-source-attr">
70+
<span className="attr">Group: </span> {col.sgr}
71+
</div>
72+
)}
73+
{col.sfm && (
74+
<div className="map-source-attr">
75+
<span className="attr">Formation: </span> {col.sfm}
76+
</div>
77+
)}
78+
{col.lt1 && (
79+
<div className="map-source-attr">
80+
<span className="attr">Lithology: </span> {col.la1 ? col.la1 : ""}{" "}
81+
{col.lf1 ? col.lf1 : ""} {col.lt1.replace('"', "")}{" "}
82+
{col.lt2 ? ", " : ""}
83+
{col.la2 ? col.la2 : ""} {col.lf2 ? col.lf2 : ""} {col.lt2}
84+
</div>
85+
)}
86+
{col.env && (
87+
<div className="map-source-attr">
88+
<span className="attr">Environment: </span> {col.env}
89+
</div>
90+
)}
91+
{col.ref && (
92+
<div className="reference map-source-attr">
93+
<span className="attr">Reference: </span>{" "}
94+
<span dangerouslySetInnerHTML={{ __html: col.ref }}></span>
95+
</div>
96+
)}
97+
</div>
98+
);
99+
}
100+
101+
function OccurencesPanel(props) {
102+
const { occurrenceTree } = props;
103+
104+
return (
105+
<div>
106+
<ul className="taxon-list phylum-list">
107+
{occurrenceTree.phyla.map((phylum, pidx) => {
108+
return (
109+
<div key={pidx} className="phyla">
110+
<li>{phylum.phylum}</li>
111+
<ul className="taxon-list">
112+
{phylum.classes.map((cls, clsidx) => {
113+
return (
114+
<div key={clsidx} className="classes">
115+
<li>{cls.nameClass}</li>
116+
<ul className="taxon-list">
117+
{cls.families.map((family, familyidx) => {
118+
return (
119+
<div key={familyidx} className="families">
120+
<li>{family.family}</li>
121+
<ul className="taxon-list genera">
122+
{family.genera.map((genus, genusidx) => {
123+
return (
124+
<li key={genusidx}>
125+
{genus.old_name
126+
? '"' + genus.old_name + '" - '
127+
: ""}
128+
{genus.genusRes ? genus.genusRes : " "}
129+
{genus.display_name1}
130+
<i>
131+
{genus.display_name2
132+
? genus.display_name2
133+
: ""}
134+
{genus.display_name3
135+
? genus.display_name3
136+
: ""}
137+
</i>
138+
</li>
139+
);
140+
})}
141+
</ul>
142+
</div>
143+
);
144+
})}
145+
</ul>
146+
</div>
147+
);
148+
})}
149+
</ul>
150+
</div>
151+
);
152+
})}
153+
</ul>
154+
</div>
155+
);
156+
}

‎pages/map/map-interface/components/info-drawer/fossil-collections/index.ts‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import h from "@macrostrat/hyper";
2+
import { ExpansionPanel } from "@macrostrat/map-interface";
3+
import PBDBCollections from "./collections";
4+
5+
export function FossilCollections(props) {
6+
const { data, expanded } = props;
7+
8+
if (!data || data.length <= 0) {
9+
return null;
10+
}
11+
return h(
12+
ExpansionPanel,
13+
{
14+
className: "regional-panel",
15+
title: "Fossil collections",
16+
helpText: "via PBDB",
17+
expanded,
18+
},
19+
[h(PBDBCollections, { data })]
20+
);
21+
}

‎pages/map/map-interface/components/info-drawer/fossil-collections/main.module.sass‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
2+
div.pbdb-panel-header
3+
background-color: var(--accent-secondary-color)
4+
display: flex
5+
flex-direction: row
6+
justify-content: space-between
7+
align-items: baseline
8+
margin: 0 -10px
9+
padding: 5px 10px
10+
h4
11+
margin: 0
12+
13+
.fossil-collection
14+
margin-bottom: 1em
15+
:global(.bp5-tab-panel)
16+
margin-top: 0px

‎pages/map/map-interface/components/info-drawer/geo-map.ts‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import h from "@macrostrat/hyper";
2+
import { ExpansionPanel } from "@macrostrat/map-interface";
3+
import { IntervalChip } from "../info-blocks";
4+
import {
5+
useAppActions,
6+
useAppState,
7+
useHashNavigate,
8+
} from "#/map/map-interface/app-state";
9+
import { MapReference } from "~/components/map-info";
10+
import LongText from "#/map/map-interface/components/long-text";
11+
12+
function LongTextRenderer(props) {
13+
const { name, text } = props;
14+
return text && text.length ? h(LongText, { name, text }) : null;
15+
}
16+
17+
function GeoMapLines(props) {
18+
const { source } = props;
19+
if (!source.lines || source.lines.length == 0) {
20+
return h("div", [""]);
21+
}
22+
const { lines } = source;
23+
return h("div.map-source-attr", [
24+
h("span.attr", ["Lines "]),
25+
lines.map((line, i) => {
26+
const { name, type, direction, descrip } = line;
27+
return h("div.map-source-line", { key: i }, [
28+
h.if(name)("span.line-attr", [h("span.attr", ["Name: "]), name]),
29+
h.if(type)("span.line-attr", [h("span.attr", ["Type: "]), type]),
30+
h.if(direction)("span.line-attr", [
31+
h("span.attr", ["Direction: "]),
32+
line.direction,
33+
]),
34+
h.if(descrip)("span.line-attr", [
35+
h("span.attr", ["Description: "]),
36+
descrip,
37+
]),
38+
]);
39+
}),
40+
]);
41+
}
42+
43+
function GeologicMapInfo(props) {
44+
const { bedrockExpanded, source } = props;
45+
const runAction = useAppActions();
46+
47+
if (!source) return h("div");
48+
const interval = {
49+
int_name: source.age,
50+
b_age: source.b_int.b_age,
51+
t_age: source.t_int.t_age,
52+
color: "#cccccc",
53+
};
54+
55+
return h(
56+
ExpansionPanel,
57+
{
58+
classes: { root: "regional-panel" },
59+
title: "Geologic map",
60+
helpText: "via providers, Macrostrat",
61+
expanded: bedrockExpanded,
62+
},
63+
[
64+
h("div.map-source-attrs", [
65+
h.if(source.name && source.name.length)("div.map-source-attr", [
66+
h("span.attr", ["Name: "]),
67+
source.name,
68+
]),
69+
h.if(source.age && source.age.length)("div.map-source-attr", [
70+
h("span.attr", ["Age: "]),
71+
h(IntervalChip, {
72+
interval,
73+
}),
74+
]),
75+
h(LongTextRenderer, {
76+
name: "Stratigraphic name(s)",
77+
text: source.strat_name,
78+
}),
79+
h(LongTextRenderer, {
80+
name: "Lithology",
81+
text: source.lith,
82+
}),
83+
h(LongTextRenderer, {
84+
name: "Description",
85+
text: source.descrip,
86+
}),
87+
h(LongTextRenderer, {
88+
name: "Comments",
89+
text: source.comments,
90+
}),
91+
h(GeoMapLines, { source }),
92+
h(MapReference, {
93+
reference: source.ref,
94+
onClickSourceID() {
95+
runAction({
96+
type: "set-focused-map-source",
97+
source_id: source.source_id,
98+
});
99+
},
100+
}),
101+
]),
102+
]
103+
);
104+
}
105+
106+
export { GeologicMapInfo };

0 commit comments

Comments
 (0)