|
| 1 | +import { |
| 2 | + getUnitHeightRange, |
| 3 | + IUnit, |
| 4 | + useMacrostratColumnData, |
| 5 | +} from "@macrostrat/column-views"; |
| 6 | +import hyper from "@macrostrat/hyper"; |
| 7 | +import { PBDBCollection, useFossilData } from "./provider"; |
| 8 | +import { useMacrostratUnits } from "../../data-provider"; |
| 9 | +import { ColumnNotes } from "../../notes"; |
| 10 | +import { useMemo } from "react"; |
| 11 | +import styles from "./index.module.sass"; |
| 12 | +import { useColumn } from "@macrostrat/column-components"; |
| 13 | + |
| 14 | +const h = hyper.styled(styles); |
| 15 | + |
| 16 | +interface FossilItemProps { |
| 17 | + note: { |
| 18 | + data: PBDBCollection[]; |
| 19 | + unit?: IUnit; |
| 20 | + }; |
| 21 | + spacing?: { |
| 22 | + below?: number; |
| 23 | + above?: number; |
| 24 | + }; |
| 25 | + width?: number; |
| 26 | + height?: number; |
| 27 | + color?: string; |
| 28 | +} |
| 29 | + |
| 30 | +function FossilInfo(props: FossilItemProps) { |
| 31 | + const { note, spacing } = props; |
| 32 | + const { data, unit } = note; |
| 33 | + |
| 34 | + let d1 = data; |
| 35 | + |
| 36 | + let tooMany = null; |
| 37 | + if (data.length > 5) { |
| 38 | + const n = data.length - 5; |
| 39 | + d1 = data.slice(0, 5); |
| 40 | + tooMany = h("li.too-many", `and ${n} more`); |
| 41 | + } |
| 42 | + |
| 43 | + return h("ul.fossil-collections", [ |
| 44 | + d1.map((d) => { |
| 45 | + return h("li.collection", [h(PBDBCollectionLink, { collection: d })]); |
| 46 | + }), |
| 47 | + tooMany, |
| 48 | + ]); |
| 49 | +} |
| 50 | + |
| 51 | +function PBDBCollectionLink({ collection }: { collection: PBDBCollection }) { |
| 52 | + return h( |
| 53 | + "a.link-id", |
| 54 | + { |
| 55 | + href: `https://paleobiodb.org/classic/basicCollectionSearch?collection_no=${collection.cltn_id}`, |
| 56 | + }, |
| 57 | + collection.cltn_name |
| 58 | + ); |
| 59 | +} |
| 60 | + |
| 61 | +const matchingUnit = (dz) => (d) => d.unit_id == dz.unit_id; |
| 62 | + |
| 63 | +export function PBDBFossilsColumn({ columnID, color = "magenta" }) { |
| 64 | + const data = useFossilData({ col_id: columnID }); |
| 65 | + const units = useMacrostratUnits(); |
| 66 | + const { axisType } = useMacrostratColumnData(); |
| 67 | + |
| 68 | + const notes: any[] = useMemo(() => { |
| 69 | + if (data == null || units == null) return []; |
| 70 | + let unitRefData = Array.from(data.values()) |
| 71 | + .map((d) => { |
| 72 | + return { |
| 73 | + data: d, |
| 74 | + unit: units.find(matchingUnit(d[0])), |
| 75 | + }; |
| 76 | + }) |
| 77 | + .filter((d) => d.unit != null); |
| 78 | + |
| 79 | + unitRefData.sort((a, b) => { |
| 80 | + const v1 = units.indexOf(a.unit); |
| 81 | + const v2 = units.indexOf(b.unit); |
| 82 | + return v1 > v2; |
| 83 | + }); |
| 84 | + |
| 85 | + return unitRefData.map((d) => { |
| 86 | + const { unit, data } = d; |
| 87 | + console.log(unit); |
| 88 | + const heightRange = getUnitHeightRange(unit, axisType); |
| 89 | + |
| 90 | + console.log(heightRange); |
| 91 | + |
| 92 | + return { |
| 93 | + top_height: heightRange[1], |
| 94 | + height: heightRange[0], |
| 95 | + data, |
| 96 | + unit, |
| 97 | + id: unit.unit_id, |
| 98 | + }; |
| 99 | + }); |
| 100 | + }, [data, units]); |
| 101 | + |
| 102 | + const width = 500; |
| 103 | + const paddingLeft = 40; |
| 104 | + |
| 105 | + const noteComponent = useMemo(() => { |
| 106 | + return (props) => { |
| 107 | + return h(FossilInfo, { |
| 108 | + color, |
| 109 | + ...props, |
| 110 | + }); |
| 111 | + }; |
| 112 | + }, [width, color]); |
| 113 | + |
| 114 | + if (data == null || units == null) return null; |
| 115 | + |
| 116 | + return h( |
| 117 | + "div.dz-spectra", |
| 118 | + h(ColumnNotes, { |
| 119 | + width, |
| 120 | + paddingLeft, |
| 121 | + notes, |
| 122 | + noteComponent, |
| 123 | + }) |
| 124 | + ); |
| 125 | +} |
0 commit comments