From 8c6b88738911532349d179d25b6b61a06f817011 Mon Sep 17 00:00:00 2001 From: Daven Quinn Date: Wed, 3 Jul 2024 00:50:42 -0500 Subject: [PATCH 1/3] Remove legacy column files --- src/pages/columns/@column/+onBeforeRender.ts | 4 + .../__archive}/column-renderer-demo.ts | 14 +- src/pages/correlation/column.module.scss | 6 +- src/pages/correlation/columns/column-data.ts | 189 ------------ src/pages/correlation/columns/column-map.ts | 268 ------------------ src/pages/correlation/columns/index.tsx | 44 --- src/pages/correlation/columns/legend.ts | 31 -- src/pages/correlation/columns/main.styl | 76 ----- .../correlation/columns/selection-panel.ts | 54 ---- .../correlation/columns/single-column.ts | 123 -------- 10 files changed, 16 insertions(+), 793 deletions(-) rename src/pages/{correlation/columns => columns/@column/__archive}/column-renderer-demo.ts (97%) delete mode 100644 src/pages/correlation/columns/column-data.ts delete mode 100644 src/pages/correlation/columns/column-map.ts delete mode 100644 src/pages/correlation/columns/index.tsx delete mode 100644 src/pages/correlation/columns/legend.ts delete mode 100644 src/pages/correlation/columns/main.styl delete mode 100644 src/pages/correlation/columns/selection-panel.ts delete mode 100644 src/pages/correlation/columns/single-column.ts diff --git a/src/pages/columns/@column/+onBeforeRender.ts b/src/pages/columns/@column/+onBeforeRender.ts index 1af9801b..96e2e561 100644 --- a/src/pages/columns/@column/+onBeforeRender.ts +++ b/src/pages/columns/@column/+onBeforeRender.ts @@ -57,6 +57,10 @@ export async function onBeforeRender(pageContext) { linkPrefix, project: projectData?.[0], }, + documentProps: { + // The page's + title: columnInfo.col_name, + }, }, }; } diff --git a/src/pages/correlation/columns/column-renderer-demo.ts b/src/pages/columns/@column/__archive/column-renderer-demo.ts similarity index 97% rename from src/pages/correlation/columns/column-renderer-demo.ts rename to src/pages/columns/@column/__archive/column-renderer-demo.ts index 7ebeadbe..8a433752 100644 --- a/src/pages/correlation/columns/column-renderer-demo.ts +++ b/src/pages/columns/@column/__archive/column-renderer-demo.ts @@ -1,11 +1,13 @@ $(document).ready(function () { /* - ISSUES TO SOLVE - -some formations, have themselves as the fisrt 'member', but aren't labeled as members in the db. see #495 - -some formations are ordered wrong. this breaks the UnMergedColun function (because it uses filter) + Macrostrat's first strat column renderer, by Lance Weaver - -UNCONFORMITIES need to be in the db, and displayed with a wavy or dashed line and note! - -fossils, unconforms, and other notes need to be added to db, and displayed in borderless column on right + ISSUES TO SOLVE + -some formations, have themselves as the fisrt 'member', but aren't labeled as members in the db. see #495 + -some formations are ordered wrong. this breaks the UnMergedColun function (because it uses filter) + + -UNCONFORMITIES need to be in the db, and displayed with a wavy or dashed line and note! + -fossils, unconforms, and other notes need to be added to db, and displayed in borderless column on right */ @@ -105,7 +107,7 @@ $(document).ready(function () { createUnmergedColumn(unit, n); }); mergeHtmlCells(); - /* + /* // because the api json data is so unpredictable, this option is problematic data = getRowSpans(data); // prep the data by calculating rowspan values for the html table $.each(data, function( n,unit ) { diff --git a/src/pages/correlation/column.module.scss b/src/pages/correlation/column.module.scss index 6809fa73..de278fa2 100644 --- a/src/pages/correlation/column.module.scss +++ b/src/pages/correlation/column.module.scss @@ -1,7 +1,8 @@ -.column-container :global { +.column-container { --background-color: var(--column-background-color, #fff); --stroke-color: var(--column-stroke-color, #000); } + .column-container :global .column { display: flex; flex-direction: row; @@ -93,7 +94,8 @@ .column-container.dark-mode :global .timescale { color: #000; } -.column-container.dark-mode :global g.inner pattern image { + +.column-container.dark-mode :global g.lithology-column pattern image { filter: invert(80%); } diff --git a/src/pages/correlation/columns/column-data.ts b/src/pages/correlation/columns/column-data.ts deleted file mode 100644 index 0d83f80f..00000000 --- a/src/pages/correlation/columns/column-data.ts +++ /dev/null @@ -1,189 +0,0 @@ -/* - * decaffeinate suggestions: - * DS001: Remove Babel/TypeScript constructor workaround - * DS102: Remove unnecessary code created because of implicit returns - * DS206: Consider reworking classes to avoid initClass - * DS207: Consider shorter variations of null checks - * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md - */ -import { Component, createContext } from "react"; -import { feature } from "topojson-client"; -import h from "@macrostrat/hyper"; -import { withCookies, Cookies } from "react-cookie"; -import { get } from "axios"; -import update from "immutability-helper"; - -const MacrostratColumnContext = createContext({}); - -class APIManager { - constructor(baseURL) { - this.baseURL = baseURL; - } - get = async (route) => { - // Should handle unsuccessful queries - const URI = this.baseURL + route; - const { - data: { - success: { data }, - }, - } = await get(URI); - return data; - }; -} - -const getID = function (col) { - // This maps column objects to IDs - // and transparently passes IDs forward - if (typeof col === "number") { - // We were passed the ID - return col; - } - return col.properties.col_id; -}; - -class MacrostratColumnManager extends Component { - static initClass() { - this.prototype.API = new APIManager("https://dev.macrostrat.org/api/v2"); - this.prototype.state = { - hoveredColumn: null, - columns: [], - columnUnitIndex: {}, - }; - - this.prototype.helpers = { - isSame(col1, col2) { - // Checks if two columns are the same - if (col1 == null) { - return false; - } - if (col2 == null) { - return false; - } - return getID(col1) === getID(col2); - }, - }; - } - - constructor(props) { - super(props); - this.setHoveredColumn = this.setHoveredColumn.bind(this); - this.toggleSelected = this.toggleSelected.bind(this); - this.clearSelection = this.clearSelection.bind(this); - this.isSelected = this.isSelected.bind(this); - this.getUnits = this.getUnits.bind(this); - const { cookies } = this.props; - - // Create `selection` as a set of IDs, which will - // be mapped out to objects when provided - const selectedIDs = cookies.get("selected-columns") || []; - this.state.selection = new Set(selectedIDs); - selectedIDs.map(this.cacheUnitsForColumn); - } - - async getColumnData() { - const data = await this.API.get("/columns?format=topojson&all"); - const { features: columns } = feature(data, data.objects.output); - return this.setState({ columns }); - } - - cacheUnitsForColumn = async (column) => { - const id = getID(column); - const { columnUnitIndex } = this.state; - if (columnUnitIndex[id] != null) { - return; - } - const data = await this.API.get(`/units?col_id=${id}&response=long`); - const c = {}; - c[id] = { $set: data }; - const changeset = { columnUnitIndex: c }; - const state = update(this.state, changeset); - return this.setState(state); - }; - - render() { - const { children } = this.props; - const { toggleSelected, clearSelection, getUnits } = this; - // We store selected IDs but we provide objects - let { selection, ...rest } = this.state; - selection = this.state.columns.filter((col) => { - const id = getID(col); - return this.state.selection.has(id); - }); - - const value = { - ...rest, - selection, - // Could generalize into a `dispatch` function - // https://dev.to/washingtonsteven/reacts-new-context-api-and-actions-446o - actions: { - setHovered: this.setHoveredColumn, - setSelected: this.setSelectedColumn, - clearSelection, - toggleSelected, - }, - helpers: { - ...this.helpers, - isSelected: this.isSelected, - getUnits, - getID, - }, - }; - return h(MacrostratColumnContext.Provider, { value, children }); - } - - componentDidMount() { - return this.getColumnData(); - } - - componentDidUpdate(prevProps, prevState) { - // Update cookie for selection - const { cookies } = this.props; - const { selection } = this.state; - const { selection: oldSelection } = prevState; - if (selection !== oldSelection) { - return cookies.set("selected-columns", selection); - } - } - - setHoveredColumn(col) { - return this.setState({ hoveredColumn: col }); - } - - toggleSelected(col) { - let selection; - const id = getID(col); - if (this.isSelected(id)) { - selection = { $remove: [id] }; - } else { - selection = { $add: [id] }; - this.cacheUnitsForColumn(id); - } - const changeset = { selection }; - const newState = update(this.state, changeset); - return this.setState(newState); - } - - clearSelection() { - const changeset = { selection: { $set: new Set([]) } }; - const newState = update(this.state, changeset); - return this.setState(newState); - } - - isSelected(col) { - const id = getID(col); - return this.state.selection.has(id); - } - - getUnits(col) { - const id = getID(col); - const { columnUnitIndex } = this.state; - return columnUnitIndex[id] || null; - } -} -MacrostratColumnManager.initClass(); - -// Wrap column manager for cookie access -MacrostratColumnManager = withCookies(MacrostratColumnManager); - -const MacrostratColumnConsumer = MacrostratColumnContext.Consumer; -export { MacrostratColumnConsumer, MacrostratColumnManager }; diff --git a/src/pages/correlation/columns/column-map.ts b/src/pages/correlation/columns/column-map.ts deleted file mode 100644 index f851ca3f..00000000 --- a/src/pages/correlation/columns/column-map.ts +++ /dev/null @@ -1,268 +0,0 @@ -/* - * decaffeinate suggestions: - * DS001: Remove Babel/TypeScript constructor workaround - * DS102: Remove unnecessary code created because of implicit returns - * DS206: Consider reworking classes to avoid initClass - * DS207: Consider shorter variations of null checks - * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md - */ -import { Component } from "react"; -import { findDOMNode } from "react-dom"; -import h from "@macrostrat/hyper"; -import { ResizeSensor, Button } from "@blueprintjs/core"; -import { geoOrthographic, geoGraticule10, geoPath } from "d3-geo"; -import { select, event } from "d3-selection"; -import { drag } from "d3-drag"; -import { zoom } from "d3-zoom"; -import { get } from "axios"; -import { feature } from "topojson-client"; -import classNames from "classnames"; -import { MacrostratColumnConsumer } from "./column-data"; -import { SVG } from "@macrostrat/column-components"; - -class ColumnPath__ extends Component { - render() { - const { actions, hoveredColumn, helpers, column } = this.props; - const hovered = helpers.isSame(column, hoveredColumn); - const selected = helpers.isSelected(column); - const className = classNames("column", { hovered, selected }); - return h("path", { - className, - onMouseEnter() { - return actions.setHovered(column); - }, - onMouseLeave() { - return actions.setHovered(); - }, - }); - } - componentDidMount() { - const { column, actions } = this.props; - return select(findDOMNode(this)) - .datum(column) - .on("click", function () { - // This handler can't be in React because - // stopPropagation can't be called before zoom handlers - actions.toggleSelected(column); - // Right now stopPropagation is not called properly - return event.stopPropagation(); - }); - } -} - -const ColumnPath = (props) => { - return h( - MacrostratColumnConsumer, - null, - ({ actions, hoveredColumn, helpers }) => - h(ColumnPath__, { ...props, actions, hoveredColumn, helpers }) - ); -}; - -class ColumnIndexMap__ extends Component { - static initClass() { - this.defaultProps = { - columns: [], - }; - } - constructor(props) { - super(props); - this.setWidth = this.setWidth.bind(this); - this.redrawPaths = this.redrawPaths.bind(this); - const width = window.innerWidth; - this.state = this.computeDerivedState({ width }); - } - - computeDerivedState(newState) { - // Right now we derive the height of the component - // from its width - const { width } = newState; - if (width != null) { - let height = width / 6; - if (height < 200) { - height = 200; - } - const hypot = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)); - const minScale = hypot / 1.9; - newState = { height, minScale, ...newState }; - } - return newState; - } - - setState(newState) { - const state = this.computeDerivedState(newState); - return super.setState(state); - } - - render() { - const { columns, actions, selection } = this.props; - const { width, height } = this.state; - - let clearSelectionButton = null; - if (selection.length > 0) { - clearSelectionButton = h( - Button, - { - className: "clear-selection", - icon: "graph-remove", - onClick() { - return actions.clearSelection(); - }, - }, - "Clear selection" - ); - } - - return h("div#column-index-container", [ - clearSelectionButton, - h( - SVG, - { - id: "column-index-map", - width, - height, - }, - [ - h("g.map-backdrop"), - h( - "g.columns", - columns.map((column) => h(ColumnPath, { column })) - ), - ] - ), - ]); - } - - setWidth() { - return this.setState({ width: window.innerWidth }); - } - - updateProjection(prevProps, prevState) { - if (prevState != null) { - const { width: prevWidth } = prevState; - if (this.state.width === prevWidth) { - return; - } - } - const { width, height, minScale } = this.state; - this.projection - .translate([width / 2, height / 2]) - .scale(minScale) - .clipExtent([ - [0, 0], - [width, height], - ]); - return this.redrawPaths(); - } - - redrawPaths(sel) { - if (this.map == null) { - return; - } - if (sel == null) { - sel = this.map.selectAll("path"); - } - return sel.attr("d", this.path); - } - - componentDidUpdate(prevProps, prevState) { - this.updateProjection(prevProps, prevState); - if (prevProps.columns !== this.props.columns) { - return this.redrawPaths(this.map.selectAll("path.column")); - } - } - - async componentDidMount() { - window.addEventListener("resize", this.setWidth); - const { width, height, minScale } = this.state; - const center = [-75, 33]; - - this.projection = geoOrthographic() - .rotate([-center[0], -center[1]]) - .precision(0.2) - .clipAngle(90); - this.updateProjection(); - - // https://unpkg.com/world-atlas@1/world/110m.json - const el = findDOMNode(this); - this.map = select(el).select("svg#column-index-map"); - - const bkg = this.map.select("g.map-backdrop"); - - // `await` does promises serially for now - let { data } = await get("https://unpkg.com/world-atlas@1/world/50m.json"); - const land50 = feature(data, data.objects.land); - - ({ data } = await get("https://unpkg.com/world-atlas@1/world/110m.json")); - const land110 = feature(data, data.objects.land); - - this.path = geoPath().projection(this.projection); - - const graticule = geoGraticule10(); - - const grat = bkg - .selectAppend("path.graticule") - .datum(graticule) - .call(this.redrawPaths); - - const land = bkg - .selectAppend("path.land") - .datum(land50) - .call(this.redrawPaths); - - const updateData = (val) => () => { - return land.datum(val).call(this.redrawPaths); - }; - - const sens = 0.08; - const dragging = drag() - .subject((d) => { - const r = this.projection.rotate(); - return { - x: r[0] / sens, - y: -r[1] / sens, - }; - }) - .on("drag", () => { - const rotate = this.projection.rotate(); - this.projection.rotate([event.x * sens, -event.y * sens, rotate[2]]); - return this.redrawPaths(); - }) - .on("start", updateData(land110)) - .on("end", updateData(land50)); - - const zoomed = () => { - const { deltaY } = event.sourceEvent; - const currScale = this.projection.scale(); - const newScale = currScale - 2 * deltaY; - if (newScale < minScale) { - return; - } - if (newScale > minScale * 10) { - return; - } - if (newScale === currScale) { - return; - } - this.projection.scale(newScale); - return this.redrawPaths(); - }; - - const zoomBehavior = zoom() - .on("zoom", zoomed) - .on("start", updateData(land110)) - .on("end", updateData(land50)); - - this.map.call(dragging); - return this.map.call(zoomBehavior); - } -} -ColumnIndexMap__.initClass(); - -const ColumnIndexMap = () => { - return h(MacrostratColumnConsumer, null, ({ columns, actions, selection }) => - h(ColumnIndexMap__, { columns, actions, selection }) - ); -}; - -export default ColumnIndexMap; diff --git a/src/pages/correlation/columns/index.tsx b/src/pages/correlation/columns/index.tsx deleted file mode 100644 index f4efbc38..00000000 --- a/src/pages/correlation/columns/index.tsx +++ /dev/null @@ -1,44 +0,0 @@ -import React, { Component } from "react"; - -import { Link } from "react-router-dom"; -import { MacrostratColumnManager } from "./column-data"; -import ColumnIndexMap from "./column-map"; -import { HoveredColumnLegend } from "./legend"; -import { SelectionPanel } from "./selection-panel"; -import "./main.styl"; -/* - * TODO: - * - Cookies for settings - * - Routing for selected sections - */ - -// Get rid of button focus highlighting -// unless desired for accessibility - -class ColumnPage extends Component { - render() { - return ( - <MacrostratColumnManager> - <div id="column-page"> - <ColumnIndexMap /> - <HoveredColumnLegend /> - <div className="header"> - <h1> - <Link to="/">Macrostrat</Link>{" "} - <span className="subtitle">Column Explorer</span> - </h1> - </div> - <SelectionPanel /> - </div> - </MacrostratColumnManager> - ); - } - - componentDidMount() { - // This is a hack to prevent long hash strings from moving - // over from the geologic map side of the app - return (window.location.hash = ""); - } -} - -export default ColumnPage; diff --git a/src/pages/correlation/columns/legend.ts b/src/pages/correlation/columns/legend.ts deleted file mode 100644 index 812006d3..00000000 --- a/src/pages/correlation/columns/legend.ts +++ /dev/null @@ -1,31 +0,0 @@ -/* - * decaffeinate suggestions: - * DS102: Remove unnecessary code created because of implicit returns - * DS207: Consider shorter variations of null checks - * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md - */ -import { Component } from "react"; -import h from "@macrostrat/hyper"; -import classNames from "classnames"; -import { MacrostratColumnConsumer } from "./column-data"; - -class HoveredColumnLegend extends Component { - render() { - const { hoveredColumn } = this.props; - const empty = hoveredColumn == null; - const className = classNames({ empty }, "hovered-column-legend"); - let text = "Hover over a column to display details"; - if (!empty) { - text = hoveredColumn.properties.col_name; - } - return h("h4", { className }, text); - } -} - -// Wrap in context -const HC = (props) => - h(MacrostratColumnConsumer, null, ({ hoveredColumn }) => - h(HoveredColumnLegend, { hoveredColumn, ...props }) - ); - -export { HC as HoveredColumnLegend }; diff --git a/src/pages/correlation/columns/main.styl b/src/pages/correlation/columns/main.styl deleted file mode 100644 index ea57a3e8..00000000 --- a/src/pages/correlation/columns/main.styl +++ /dev/null @@ -1,76 +0,0 @@ -:global - h1 - span.subtitle - color #aaa - - #column-page - margin 0 2em - - body - height 100% - width 100% - - h4.hovered-column-legend - margin-top 0 - color #888 - &.empty - font-weight 400 - - div#column-index-container - position relative - margin 0 -2em - button.clear-selection - position absolute - bottom 1em - right 1em - - svg#column-index-map - background-color: lighten(dodgerblue,70%) - path.graticule - stroke #aaa - stroke-width 1px - stroke-dasharray 1,1 - fill none - - path.land - fill #eee - stroke #aaa - stroke-width 1px - stroke-linecap round - - column_color=lighten(black,10%) - path.column - fill alpha(column_color, 10%) - stroke column_color - stroke-width 1.5px - &.hovered - fill alpha(column_color, 50%) - &.selected - fill alpha(column_color, 80%) - - div.selected-columns-empty - min-height 400px - - div.selected-columns - display flex - max-width 100% - flex-direction row - margin 0 -0.5em - div.column-data - flex 1 - margin 0 0.5em - div.section - margin-bottom 0.5em - border-top 2px solid #888 - max-width 200px - div.unit - border 2px solid #888 - border-top none - .bp5-popover-target - display block - - // Popover to display unit details - div.unit-details - padding 0.5em - max-height 200px - overflow-y scroll diff --git a/src/pages/correlation/columns/selection-panel.ts b/src/pages/correlation/columns/selection-panel.ts deleted file mode 100644 index a35296b3..00000000 --- a/src/pages/correlation/columns/selection-panel.ts +++ /dev/null @@ -1,54 +0,0 @@ -import { Component } from "react"; -import h from "@macrostrat/hyper"; -import { NonIdealState } from "@blueprintjs/core"; -import { MacrostratColumnConsumer } from "./column-data"; -import { ColumnContainer } from "./single-column"; - -class EmptyColumnPanel extends Component { - render() { - return h(NonIdealState, { - title: "No columns selected", - icon: "square", - className: "selected-columns-empty", - description: "Select some columns on the map to get started", - }); - } -} - -class SelectionPanel extends Component { - constructor(props) { - super(props); - this.renderColumn = this.renderColumn.bind(this); - } - - renderColumn(col) { - let __; - const { helpers, columnUnitIndex } = this.props; - const id = helpers.getID(col); - const units = columnUnitIndex[id] || null; - if (units != null) { - __ = [h("h4", col.properties.col_name), h(ColumnContainer, { units })]; - } - if (__ == null) { - __ = h("p", `Loading data for column ${id}`); - } - return h("div.column-data", { key: id }, __); - } - - render() { - const { selection } = this.props; - const sel = [...selection]; // Sets cannot be mapped over - if (sel.length === 0) { - return h(EmptyColumnPanel); - } - - return h("div.selected-columns", null, sel.map(this.renderColumn)); - } -} - -const __ = (props) => - h(MacrostratColumnConsumer, null, ({ selection, helpers, columnUnitIndex }) => - h(SelectionPanel, { selection, helpers, columnUnitIndex, ...props }) - ); - -export { __ as SelectionPanel }; diff --git a/src/pages/correlation/columns/single-column.ts b/src/pages/correlation/columns/single-column.ts deleted file mode 100644 index a0313b58..00000000 --- a/src/pages/correlation/columns/single-column.ts +++ /dev/null @@ -1,123 +0,0 @@ -import { Component } from "react"; -import h from "@macrostrat/hyper"; -import { nest } from "d3-collection"; -import { sum } from "d3-array"; -import { Popover } from "@blueprintjs/core"; - -const groupUnits = function (sectionUnits) { - /* - * Split units in gap-bound packages into nested - * unit groups - */ - const __ = []; - const lastUnit = null; - const group = {}; - for (let unit of Array.from(sectionUnits)) { - // We have a group defined - const { Gp, Fm, Mbr, unit_name } = unit; - //if unit.Gp? - - //if lastUnit? - // #if unit.Gp == lastUnit.Gp - __.push(unit); - } - return __; -}; - -class ColumnContainer extends Component { - constructor(props) { - super(props); - this.sectionSurfaces = this.sectionSurfaces.bind(this); - } - - static initClass() { - this.defaultProps = { - minUnitHeight: 20, - maxUnitHeight: 100, - }; - } - sectionSurfaces(section) { - /* - * Computes surface heights for a gap-bound package - */ - const { maxUnitHeight, minUnitHeight } = this.props; - const units = section.units.map(function (unit) { - const { min_thick, max_thick } = unit; - let thickness = max_thick; - if (thickness < minUnitHeight) { - thickness = minUnitHeight; - } - if (thickness > maxUnitHeight) { - thickness = maxUnitHeight; - } - return { ...unit, thickness }; - }); - - const totalThickness = sum(units, (d) => d.thickness); - - let bottom = totalThickness; - - // Add tops and bottoms to units, then group - // formations and members - return groupUnits( - units.map(function (unit) { - const top = bottom; - bottom = top - unit.thickness; - return { top, bottom, ...unit }; - }) - ); - } - - render() { - let { units } = this.props; - - // Separate column into gap-bound sections - // which should be treated mostly separately - const sections = nest() - .key((d) => d.section_id) - .entries(units) - .map(function (d) { - // Rename entries semantically - let section_id; - ({ key: section_id, values: units } = d); - section_id = parseInt(section_id); - return { section_id, units }; - }); - - const surfaces = sections.map(this.sectionSurfaces); - - return h( - "div.column", - surfaces.map((section) => - h( - "div.section", - section.map(function (unit) { - let { thickness, color, unit_name, Mbr, Fm, Gp } = unit; - if (color == null) { - color = "#eee"; - } - const style = { - minHeight: thickness, - backgroundColor: color, - }; - - return h(Popover, [ - h("div.unit", { style }, [ - h("p", unit_name), - h("p", `Mbr: ${Mbr}`), - h("p", `Fm: ${Fm}`), - h("p", `Gp: ${Gp}`), - ]), - h("div.unit-details", null, [ - h("pre", JSON.stringify(unit, null, 2)), - ]), - ]); - }) - ) - ) - ); - } -} -ColumnContainer.initClass(); - -export { ColumnContainer }; From 46e3a5ebe07beb4bf0734a56f13b26b378651156 Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Wed, 3 Jul 2024 11:12:28 -0500 Subject: [PATCH 2/3] Small changes --- package.json | 4 +-- src/components/unit-details/main.module.sass | 6 ++++ src/pages/correlation/+Page.ts | 1 - .../map-interface/map-page/main.module.styl | 1 - vite.config.ts | 2 +- yarn.lock | 36 +++++++++++++++++-- 6 files changed, 42 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index 0aa44c13..45ba2b8c 100644 --- a/package.json +++ b/package.json @@ -124,9 +124,9 @@ "jose": "^5.1.2", "mapbox-gl": "^2.15.0", "new-github-issue-url": "^1.0.0", - "react": "^18.2.0", + "react": "^18.3.0", "react-cookie": "^3.0.4", - "react-dom": "^18.2.0", + "react-dom": "^18.3.0", "react-intersection-observer": "^9.4.3", "react-redux": "^7.2.0", "react-router": "^6.8.2", diff --git a/src/components/unit-details/main.module.sass b/src/components/unit-details/main.module.sass index f44baabc..9d57cb05 100644 --- a/src/components/unit-details/main.module.sass +++ b/src/components/unit-details/main.module.sass @@ -24,6 +24,12 @@ display: flex justify-content: space-between gap: 1em + border-bottom: 1px solid var(--panel-rule-color) + position: sticky + top: -1em + background-color: var(--panel-secondary-background-color) + margin: -1em -1em 0 + padding: 0.5em 1em code font-size: 0.9em color: var(--secondary-color) diff --git a/src/pages/correlation/+Page.ts b/src/pages/correlation/+Page.ts index 1941fe11..3fea2ff7 100644 --- a/src/pages/correlation/+Page.ts +++ b/src/pages/correlation/+Page.ts @@ -23,7 +23,6 @@ import classNames from "classnames"; import { CorrelationChart } from "./correlation-chart"; import { DarkModeProvider } from "@macrostrat/ui-components"; import { ErrorBoundary } from "@macrostrat/ui-components"; -import { columnGeoJSONRecordToColumnIdentifier } from "./state"; import { UnitSelectionProvider, useSelectedUnit, diff --git a/src/pages/map/map-interface/map-page/main.module.styl b/src/pages/map/map-interface/map-page/main.module.styl index bc9dd402..643b20e9 100644 --- a/src/pages/map/map-interface/map-page/main.module.styl +++ b/src/pages/map/map-interface/map-page/main.module.styl @@ -7,7 +7,6 @@ This stylesheet the overall application page layout. >:last-child margin-bottom: 0 - .panel-container display flex flex-direction: column diff --git a/vite.config.ts b/vite.config.ts index 62b1a440..69b482a7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -78,12 +78,12 @@ const config: UserConfig = { with dots (e.g., locations) are not rewritten to index to allow for client-side routing */ //rewriteAll(), - ssr(), cesium({ cesiumBuildPath, cesiumBuildRootPath: cesiumRoot, }), hyperStyles(), + ssr(), ], envDir: path.resolve(__dirname), build: { diff --git a/yarn.lock b/yarn.lock index 13a27186..3d550d00 100644 --- a/yarn.lock +++ b/yarn.lock @@ -6653,9 +6653,9 @@ __metadata: mapbox-gl: "npm:^2.15.0" new-github-issue-url: "npm:^1.0.0" prettier: "npm:^2.7.1" - react: "npm:^18.2.0" + react: "npm:^18.3.0" react-cookie: "npm:^3.0.4" - react-dom: "npm:^18.2.0" + react-dom: "npm:^18.3.0" react-intersection-observer: "npm:^9.4.3" react-redux: "npm:^7.2.0" react-router: "npm:^6.8.2" @@ -29410,7 +29410,7 @@ __metadata: languageName: node linkType: hard -"react-dom@npm:^16.12.0||^17.0.0||^18, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18, react-dom@npm:^18.2.0": +"react-dom@npm:^16.12.0||^17.0.0||^18, react-dom@npm:^16.8.0 || ^17.0.0 || ^18.0.0, react-dom@npm:^18": version: 18.2.0 resolution: "react-dom@npm:18.2.0" dependencies: @@ -29435,6 +29435,18 @@ __metadata: languageName: node linkType: hard +"react-dom@npm:^18.3.0": + version: 18.3.1 + resolution: "react-dom@npm:18.3.1" + dependencies: + loose-envify: "npm:^1.1.0" + scheduler: "npm:^0.23.2" + peerDependencies: + react: ^18.3.1 + checksum: 10/3f4b73a3aa083091173b29812b10394dd06f4ac06aff410b74702cfb3aa29d7b0ced208aab92d5272919b612e5cda21aeb1d54191848cf6e46e9e354f3541f81 + languageName: node + linkType: hard + "react-draggable@npm:^4.1.0": version: 4.4.6 resolution: "react-draggable@npm:4.4.6" @@ -30221,6 +30233,15 @@ __metadata: languageName: node linkType: hard +"react@npm:^18.3.0": + version: 18.3.1 + resolution: "react@npm:18.3.1" + dependencies: + loose-envify: "npm:^1.1.0" + checksum: 10/261137d3f3993eaa2368a83110466fc0e558bc2c7f7ae7ca52d94f03aac945f45146bd85e5f481044db1758a1dbb57879e2fcdd33924e2dde1bdc550ce73f7bf + languageName: node + linkType: hard + "reactcss@npm:^1.2.0": version: 1.2.3 resolution: "reactcss@npm:1.2.3" @@ -31609,6 +31630,15 @@ __metadata: languageName: node linkType: hard +"scheduler@npm:^0.23.2": + version: 0.23.2 + resolution: "scheduler@npm:0.23.2" + dependencies: + loose-envify: "npm:^1.1.0" + checksum: 10/e8d68b89d18d5b028223edf090092846868a765a591944760942b77ea1f69b17235f7e956696efbb62c8130ab90af7e0949bfb8eba7896335507317236966bc9 + languageName: node + linkType: hard + "schema-utils@npm:^2.6.5": version: 2.7.1 resolution: "schema-utils@npm:2.7.1" From 1d70efbcfdf91a948d5e81aca098a331a0ee2ff4 Mon Sep 17 00:00:00 2001 From: Daven Quinn <code@davenquinn.com> Date: Sun, 7 Jul 2024 00:29:44 -0500 Subject: [PATCH 3/3] Moved correlation diagram to within columns section --- src/components/page-header.ts | 9 ++++++++- src/pages/columns/+Page.ts | 8 ++++++-- src/pages/{ => columns}/correlation/+Page.ts | 2 +- .../{ => columns}/correlation/+config.ts | 2 +- .../correlation/column.module.scss | 0 src/pages/{ => columns}/correlation/column.ts | 4 ++-- .../correlation/correlation-chart.ts | 2 +- .../{ => columns}/correlation/hash-string.ts | 0 .../correlation/main.module.sass | 0 src/pages/{ => columns}/correlation/state.ts | 0 src/pages/{ => columns}/correlation/types.ts | 0 src/pages/maps/+Page.ts | 20 +++++++++---------- 12 files changed, 28 insertions(+), 19 deletions(-) rename src/pages/{ => columns}/correlation/+Page.ts (99%) rename src/pages/{ => columns}/correlation/+config.ts (88%) rename src/pages/{ => columns}/correlation/column.module.scss (100%) rename src/pages/{ => columns}/correlation/column.ts (98%) rename src/pages/{ => columns}/correlation/correlation-chart.ts (98%) rename src/pages/{ => columns}/correlation/hash-string.ts (100%) rename src/pages/{ => columns}/correlation/main.module.sass (100%) rename src/pages/{ => columns}/correlation/state.ts (100%) rename src/pages/{ => columns}/correlation/types.ts (100%) diff --git a/src/components/page-header.ts b/src/components/page-header.ts index 04f3c0fe..13f5f72f 100644 --- a/src/components/page-header.ts +++ b/src/components/page-header.ts @@ -1,7 +1,8 @@ import hyper from "@macrostrat/hyper"; import { MacrostratIcon } from "./macrostrat-icon"; -import { Link } from "./buttons"; +import { DevLinkButton, Link } from "./buttons"; import styles from "./icon.module.sass"; +import { AnchorButton, ButtonGroup } from "@blueprintjs/core"; const h = hyper.styled(styles); @@ -49,3 +50,9 @@ export function Icon(props) { children, ]); } + +export function AssistantLinks({ children }) { + return h("div.float-right.padding.stick-to-top", [ + h(ButtonGroup, { vertical: true, large: true }, [children]), + ]); +} diff --git a/src/pages/columns/+Page.ts b/src/pages/columns/+Page.ts index 07220002..942b0582 100644 --- a/src/pages/columns/+Page.ts +++ b/src/pages/columns/+Page.ts @@ -1,13 +1,17 @@ import h from "@macrostrat/hyper"; import { ContentPage } from "~/layouts"; -import { PageHeader, Link } from "~/components"; -import { Tag } from "@blueprintjs/core"; +import { PageHeader, Link, AssistantLinks, DevLinkButton } from "~/components"; +import { AnchorButton, Tag } from "@blueprintjs/core"; import { usePageProps } from "~/renderer"; export function Page() { const { columnGroups, title, linkPrefix } = usePageProps(); return h(ContentPage, [ + h(AssistantLinks, [ + h(AnchorButton, { href: "/projects", minimal: true }, "Projects"), + h(DevLinkButton, { href: "/columns/correlation" }, "Correlation chart"), + ]), h(PageHeader, { title }), columnGroups.map((d) => h(ColumnGroup, { data: d, key: d.id, linkPrefix })), ]); diff --git a/src/pages/correlation/+Page.ts b/src/pages/columns/correlation/+Page.ts similarity index 99% rename from src/pages/correlation/+Page.ts rename to src/pages/columns/correlation/+Page.ts index b06676cf..bd75395d 100644 --- a/src/pages/correlation/+Page.ts +++ b/src/pages/columns/correlation/+Page.ts @@ -27,7 +27,7 @@ import { UnitSelectionProvider, useSelectedUnit, } from "@macrostrat/column-views"; -import { UnitDescription } from "~/pages/correlation/column"; +import { UnitDescription } from "~/pages/columns/correlation/column"; export function Page() { const startup = useCorrelationDiagramStore((state) => state.startup); diff --git a/src/pages/correlation/+config.ts b/src/pages/columns/correlation/+config.ts similarity index 88% rename from src/pages/correlation/+config.ts rename to src/pages/columns/correlation/+config.ts index 6a127bb9..61f09934 100644 --- a/src/pages/correlation/+config.ts +++ b/src/pages/columns/correlation/+config.ts @@ -10,5 +10,5 @@ export default { }, }, }, - title: "Correlation diagram", + title: "Correlation chart", }; diff --git a/src/pages/correlation/column.module.scss b/src/pages/columns/correlation/column.module.scss similarity index 100% rename from src/pages/correlation/column.module.scss rename to src/pages/columns/correlation/column.module.scss diff --git a/src/pages/correlation/column.ts b/src/pages/columns/correlation/column.ts similarity index 98% rename from src/pages/correlation/column.ts rename to src/pages/columns/correlation/column.ts index 9ea61f64..69a17832 100644 --- a/src/pages/correlation/column.ts +++ b/src/pages/columns/correlation/column.ts @@ -5,7 +5,7 @@ import { useColumn, } from "@macrostrat/column-components"; import { Timescale, TimescaleOrientation } from "@macrostrat/timescale"; -import { JSONView, useDarkMode } from "@macrostrat/ui-components"; +import { useDarkMode } from "@macrostrat/ui-components"; import classNames from "classnames"; import { useContext, useEffect, useMemo, useRef } from "react"; import { AgeAxis, useSelectedUnit } from "@macrostrat/column-views"; @@ -25,7 +25,7 @@ import { LegendPanelHeader, UnitDetailsPopover, } from "~/components/unit-details"; -import { useCorrelationDiagramStore } from "~/pages/correlation/state"; +import { useCorrelationDiagramStore } from "~/pages/columns/correlation/state"; export function MacrostratColumnProvider(props) { // A column provider specialized the Macrostrat API diff --git a/src/pages/correlation/correlation-chart.ts b/src/pages/columns/correlation/correlation-chart.ts similarity index 98% rename from src/pages/correlation/correlation-chart.ts rename to src/pages/columns/correlation/correlation-chart.ts index 8f5cd488..0881ffd8 100644 --- a/src/pages/correlation/correlation-chart.ts +++ b/src/pages/columns/correlation/correlation-chart.ts @@ -9,7 +9,7 @@ import { UnitLong } from "@macrostrat/api-types"; import { GapBoundPackage, SectionRenderData, AgeComparable } from "./types"; import h from "./main.module.sass"; -import { useCorrelationDiagramStore } from "~/pages/correlation/state"; +import { useCorrelationDiagramStore } from "~/pages/columns/correlation/state"; export interface ColumnIdentifier { col_id: number; diff --git a/src/pages/correlation/hash-string.ts b/src/pages/columns/correlation/hash-string.ts similarity index 100% rename from src/pages/correlation/hash-string.ts rename to src/pages/columns/correlation/hash-string.ts diff --git a/src/pages/correlation/main.module.sass b/src/pages/columns/correlation/main.module.sass similarity index 100% rename from src/pages/correlation/main.module.sass rename to src/pages/columns/correlation/main.module.sass diff --git a/src/pages/correlation/state.ts b/src/pages/columns/correlation/state.ts similarity index 100% rename from src/pages/correlation/state.ts rename to src/pages/columns/correlation/state.ts diff --git a/src/pages/correlation/types.ts b/src/pages/columns/correlation/types.ts similarity index 100% rename from src/pages/correlation/types.ts rename to src/pages/columns/correlation/types.ts diff --git a/src/pages/maps/+Page.ts b/src/pages/maps/+Page.ts index d01ace86..f9323702 100644 --- a/src/pages/maps/+Page.ts +++ b/src/pages/maps/+Page.ts @@ -1,23 +1,21 @@ import h from "./main.module.scss"; import { AnchorButton, ButtonGroup } from "@blueprintjs/core"; import { ContentPage } from "~/layouts"; -import { PageHeader, DevLinkButton } from "~/components"; +import { PageHeader, DevLinkButton, AssistantLinks } from "~/components"; import { usePageProps } from "~/renderer"; export function Page() { const { sources } = usePageProps(); return h(ContentPage, [ - h("div.float-right.padding.stick-to-top", [ - h(ButtonGroup, { vertical: true, large: true }, [ - h( - AnchorButton, - { icon: "flows", href: "/maps/ingestion" }, - "Ingestion system" - ), - h(AnchorButton, { icon: "map", href: "/map/sources" }, "Show on map"), - h(DevLinkButton, { href: "/maps/legend" }, "Legend table"), - ]), + h(AssistantLinks, [ + h( + AnchorButton, + { icon: "flows", href: "/maps/ingestion" }, + "Ingestion system" + ), + h(AnchorButton, { icon: "map", href: "/map/sources" }, "Show on map"), + h(DevLinkButton, { href: "/maps/legend" }, "Legend table"), ]), h(PageHeader, { title: "Maps" }), h(