Skip to content

Commit 1a02793

Browse files
davenquinndavenquinn
authored
Merge pull request #296 from UW-Macrostrat/strat_names_test
New Strat Names & Concepts Page
2 parents cfb5e5c + 24c2647 commit 1a02793

File tree

6 files changed

+279
-205
lines changed

6 files changed

+279
-205
lines changed

‎pages/lex/strat-name-concepts/+data.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { fetchAPIData } from "~/_utils/fetch-helpers";
1+
import { apiDomain } from "@macrostrat-web/settings";
22

33
export async function data() {
4-
const res = await fetchAPIData(`/defs/strat_name_concepts`, {
5-
page_size: 20,
6-
last_id: 0,
4+
const url = `${apiDomain}/api/pg/strat_concepts_test?limit=20&concept_id=gt.0&order=concept_id.asc`;
5+
const res = await fetch(url).then((r) => {
6+
return r.json();
77
});
88
return { res };
99
}

‎pages/lex/strat-names/+Page.client.ts‎

Lines changed: 143 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import h from "./main.module.scss";
1+
import h from "./main.module.sass";
22
import { useAPIResult } from "@macrostrat/ui-components";
3-
import { SETTINGS } from "@macrostrat-web/settings";
4-
import { StickyHeader, LinkCard, PageBreadcrumbs } from "~/components";
3+
import { apiV2Prefix, apiDomain } from "@macrostrat-web/settings";
4+
import { StickyHeader, LinkCard, PageBreadcrumbs, Link } from "~/components";
55
import { Card, Switch, Spinner } from "@blueprintjs/core";
66
import { useState, useEffect, useRef } from "react";
77
import { ContentPage } from "~/layouts";
@@ -17,62 +17,42 @@ export function StratPage({ show }) {
1717
console.log("res", res);
1818
const startingID = show
1919
? res[res?.length - 1]?.concept_id
20-
: res[res?.length - 1]?.strat_name_id;
20+
: res[res?.length - 1]?.id;
2121

2222
const [input, setInput] = useState("");
23-
const [showConcepts, setShowConcepts] = useState(show ?? false);
23+
const [showConcepts, setShowConcepts] = useState(show);
24+
const [showNames, setShowNames] = useState(!show);
2425
const [lastID, setLastID] = useState(startingID);
2526
const [data, setData] = useState(res);
27+
const showBoth = showConcepts && showNames;
2628
const pageSize = 20;
2729

28-
const strat_name_vars = {
29-
title: "Strat Names",
30-
item_route: "/strat-names/",
31-
data_route: "strat_names",
32-
like: "strat_name_like",
33-
};
34-
35-
const concept_vars = {
36-
title: "Strat Name Concepts",
37-
item_route: "/strat-name-concepts/",
38-
data_route: "strat_name_concepts",
39-
like: "concept_like",
40-
};
41-
42-
const vars = showConcepts ? concept_vars : strat_name_vars;
43-
44-
const { title, item_route, data_route, like } = vars;
45-
46-
const result = useStratData(lastID, input, pageSize, data_route, like);
47-
48-
console.log(lastID);
49-
console.log("data", data);
50-
30+
const result = useStratData(lastID, input, pageSize, showBoth, showNames);
5131
const prevInputRef = useRef(input);
5232
const prevShowConceptsRef = useRef(showConcepts);
33+
const prevShowNamesRef = useRef(showNames);
34+
console.log("lastID", lastID);
5335

5436
useEffect(() => {
55-
// Only reset if input or showConcepts actually changed from previous render
5637
if (
5738
prevInputRef.current !== input ||
58-
prevShowConceptsRef.current !== showConcepts
39+
prevShowConceptsRef.current !== showConcepts ||
40+
prevShowNamesRef.current !== showNames
5941
) {
60-
// Reset data and lastID to starting ID for current mode
6142
setData([]);
6243
setLastID(0);
6344

6445
prevInputRef.current = input;
6546
prevShowConceptsRef.current = showConcepts;
47+
prevShowNamesRef.current = showNames;
6648
}
67-
}, [input, showConcepts]);
49+
}, [input, showConcepts, showNames]);
6850

6951
useEffect(() => {
7052
if (
7153
result &&
72-
data[data.length - 1]?.[showConcepts ? "concept_id" : "strat_name_id"] !==
73-
result[result.length - 1]?.[
74-
showConcepts ? "concept_id" : "strat_name_id"
75-
]
54+
data[data.length - 1]?.[showConcepts ? "concept_id" : "id"] !==
55+
result[result.length - 1]?.[showConcepts ? "concept_id" : "id"]
7656
) {
7757
setData((prevData) => {
7858
return [...prevData, ...result];
@@ -88,91 +68,154 @@ export function StratPage({ show }) {
8868

8969
return h(ContentPage, [
9070
h(StickyHeader, { className: "header" }, [
91-
h(PageBreadcrumbs, { title }),
71+
h(PageBreadcrumbs, {
72+
title:
73+
showNames && showConcepts
74+
? "Strat Names & Concepts"
75+
: showNames
76+
? "Strat Names"
77+
: "Strat Concepts",
78+
}),
9279
h("div.header-description", [
93-
h(
94-
Card,
95-
{
96-
className: !showConcepts ? "selected" : "unselected",
97-
onClick: () => {
98-
if (showConcepts) {
99-
setShowConcepts(false);
100-
setLastID(0);
101-
setData([]);
102-
}
80+
h("div.card-container", [
81+
h("div", {
82+
className: "status " + (showNames ? "active" : "inactive"),
83+
}),
84+
h(
85+
Card,
86+
{
87+
className:
88+
"strat-name-card " +
89+
(!showNames || showConcepts ? "clickable" : ""),
90+
onClick: () => {
91+
if (!showNames || showConcepts) {
92+
setShowNames(!showNames);
93+
setLastID(0);
94+
setData([]);
95+
}
96+
},
10397
},
104-
},
105-
[
106-
h("strong", "Strat Names: "),
107-
h("span", "names of rock units, organized hierarchically"),
108-
]
109-
),
110-
h(
111-
Card,
112-
{
113-
className: showConcepts ? "selected" : "unselected",
114-
onClick: () => {
115-
if (!showConcepts) {
116-
setShowConcepts(true);
117-
setLastID(0);
118-
setData([]);
119-
}
98+
[
99+
h("strong", "Strat Names: "),
100+
h("span", "names of rock units, organized hierarchically"),
101+
]
102+
),
103+
]),
104+
h("div.card-container", [
105+
h("div", {
106+
className: "status " + (showConcepts ? "active" : "inactive"),
107+
}),
108+
h(
109+
Card,
110+
{
111+
className:
112+
"strat-concept-card " +
113+
(showNames || !showConcepts ? "clickable" : ""),
114+
onClick: () => {
115+
if (showNames || !showConcepts) {
116+
setShowConcepts(!showConcepts);
117+
setLastID(0);
118+
setData([]);
119+
}
120+
},
120121
},
121-
},
122-
[
123-
h("strong", "Strat Concepts: "),
124-
h(
125-
"span",
126-
"capture relationships between differently-named rock units"
127-
),
128-
]
129-
),
130-
]),
131-
h(Card, { className: "filter" }, [
132-
h(SearchBar, {
133-
placeholder: "Filter by name...",
134-
onChange: handleChange,
135-
}),
136-
h(Switch, {
137-
label: "Include concepts",
138-
checked: showConcepts,
139-
onChange: (e) => {
140-
setShowConcepts(e.target.checked);
141-
setLastID(0);
142-
setData([]);
143-
},
144-
}),
122+
[
123+
h("strong", "Strat Concepts: "),
124+
h(
125+
"span",
126+
"capture relationships between differently-named rock units"
127+
),
128+
]
129+
),
130+
]),
145131
]),
132+
h(SearchBar, {
133+
placeholder: "Filter by name...",
134+
onChange: handleChange,
135+
}),
146136
]),
147137
h(
148138
"div.strat-list",
149139
h(
150140
"div.strat-items",
151-
data.map((data) => h(StratItem, { data, item_route }))
141+
data.map((data) => h(StratItem, { data }))
152142
)
153143
),
154-
LoadMoreTrigger({ data, setLastID, pageSize, result, showConcepts }),
144+
LoadMoreTrigger({ data, setLastID, pageSize, result, showBoth, showNames }),
155145
]);
156146
}
157147

158-
function StratItem({ data, item_route }) {
159-
const { name, concept_id, strat_name, strat_name_id } = data;
148+
function StratItem({ data }) {
149+
const { concept_id, id } = data;
150+
const isConcept = !id;
160151

161152
return h(
162153
LinkCard,
163-
{ href: `/lex/${item_route}/` + (concept_id ?? strat_name_id) },
164-
name ?? strat_name ?? "Unnamed"
154+
{
155+
href: `/lex/${
156+
isConcept ? "strat-name-concepts/" + concept_id : "strat-names/" + id
157+
}`,
158+
className: isConcept ? "strat-concept-card" : "strat-name-card",
159+
},
160+
isConcept ? ConceptBody({ data }) : StratBody({ data })
165161
);
166162
}
167163

168-
function useStratData(lastID, input, pageSize, data_route, like) {
169-
const url = `${SETTINGS.apiV2Prefix}/defs/${data_route}?page_size=${pageSize}&last_id=${lastID}&${like}=${input}`;
164+
function StratBody({ data }) {
165+
const { name, concept_id, concept_name } = data;
166+
167+
return h("div.strat-body", [
168+
h("strong", name),
169+
h.if(concept_id)(
170+
Link,
171+
{
172+
className: "concept-tag",
173+
href: `/lex/strat-name-concepts/${concept_id}`,
174+
},
175+
concept_name
176+
),
177+
]);
178+
}
179+
180+
function ConceptBody({ data }) {
181+
const { name, strat_ids, strat_names } = data;
182+
183+
const ids = strat_ids?.split(",");
184+
const names = strat_names?.split(",");
185+
186+
return h("div.concept-body", [
187+
h("strong", name),
188+
h("div.concept-strats", [
189+
ids?.map((id, index) =>
190+
h(
191+
Link,
192+
{ className: "strat-tag", href: `/lex/strat-names/${id}` },
193+
names[index]
194+
)
195+
),
196+
]),
197+
]);
198+
}
199+
200+
function useStratData(lastID, input, pageSize, showBoth, showNames) {
201+
const url1 = `${apiDomain}/api/pg/strat_names_test?limit=${pageSize}&id=gt.${lastID}&order=id.asc&name=ilike.*${input}*`;
202+
const url2 = `${apiDomain}/api/pg/strat_concepts_test?limit=${pageSize}&concept_id=gt.${lastID}&order=concept_id.asc&name=ilike.*${input}*`;
203+
const url3 = `${apiDomain}/api/pg/strat_combined_test?limit=${pageSize}&combined_id=gt.${lastID}&order=combined_id.asc&name=ilike.*${input}*`;
204+
const url = showBoth ? url3 : showNames ? url1 : url2;
170205

171206
const result = useAPIResult(url);
172-
return result?.success?.data;
207+
208+
return result;
173209
}
174210

175-
function LoadMoreTrigger({ data, setLastID, pageSize, result, showConcepts }) {
211+
function LoadMoreTrigger({
212+
data,
213+
setLastID,
214+
pageSize,
215+
result,
216+
showBoth,
217+
showNames,
218+
}) {
176219
const ref = useRef(null);
177220

178221
useEffect(() => {
@@ -182,9 +225,10 @@ function LoadMoreTrigger({ data, setLastID, pageSize, result, showConcepts }) {
182225
if (entry.isIntersecting) {
183226
if (data.length > 0) {
184227
const id1 = data[data.length - 1]?.concept_id;
185-
const id2 = data[data.length - 1]?.strat_name_id;
228+
const id2 = data[data.length - 1]?.id;
229+
const id3 = data[data.length - 1]?.combined_id;
186230

187-
setLastID(showConcepts ? id1 : id2);
231+
setLastID(showBoth ? id3 : showNames ? id2 : id1);
188232
}
189233
}
190234
});

‎pages/lex/strat-names/+data.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import { fetchAPIData } from "~/_utils/fetch-helpers";
1+
import { apiDomain } from "@macrostrat-web/settings";
22

33
export async function data() {
4-
const res = await fetchAPIData(`/defs/strat_names`, {
5-
page_size: 20,
6-
last_id: 0,
4+
const url = `${apiDomain}/api/pg/strat_names_test?limit=20&id=gt.0&order=id.asc`;
5+
const res = await fetch(url).then((r) => {
6+
return r.json();
77
});
88
return { res };
99
}

0 commit comments

Comments
 (0)