@macrostrat/column-views 3.6.1 → 3.8.0

package/src/correlation-chart/stories/correlation-chart.stories.ts

@@ -1,228 +0,0 @@
-import { Meta } from "@storybook/react-vite";
-import "@macrostrat/style-system";
-import { useCorrelationLine } from "./utils";
-import {
-  ColumnCorrelationMap,
-  ColumnCorrelationProvider,
-  MergeSectionsMode,
-  useCorrelationMapStore,
-} from "../..";
-import { hyperStyled } from "@macrostrat/hyper";
-import {
-  MacrostratDataProvider,
-  fetchUnits,
-  useMacrostratFetch,
-} from "@macrostrat/data-provider";
-
-import styles from "./stories.module.sass";
-import { CorrelationChart, CorrelationChartProps } from "../main";
-import { ErrorBoundary, useAsyncMemo } from "@macrostrat/ui-components";
-import { OverlaysProvider } from "@blueprintjs/core";
-import { EnvironmentColoredUnitComponent } from "../../units";
-import { scaleLinear, scalePow } from "d3-scale";
-import { MacrostratInteractionProvider } from "@macrostrat/data-components";
-
-const mapboxToken = import.meta.env.VITE_MAPBOX_API_TOKEN;
-
-const h = hyperStyled(styles);
-
-function CorrelationStoryUI({
-  focusedLine,
-  setFocusedLine,
-  columnID,
-  setColumn,
-  selectedUnit,
-  setSelectedUnit,
-  inProcess,
-  projectID,
-  ...rest
-}: any) {
-  const domain = "https://dev.macrostrat.org";
-  return h(
-    MacrostratDataProvider,
-    { baseURL: domain + "/api/v2" },
-    h(
-      MacrostratInteractionProvider,
-      { linkDomain: domain },
-      h(
-        ColumnCorrelationProvider,
-        {
-          focusedLine,
-          columns: null,
-          projectID,
-          onSelectColumns(cols, line) {
-            setFocusedLine(line);
-          },
-        },
-        h("div.correlation-ui", [
-          h("div.correlation-container", h(CorrelationDiagramWrapper, rest)),
-          h("div.right-column", [
-            h(ColumnCorrelationMap, {
-              accessToken: mapboxToken,
-              className: "correlation-map",
-              //showLogo: false,
-            }),
-          ]),
-        ]),
-      ),
-    ),
-  );
-}
-
-function CorrelationDiagramWrapper(props: Omit<CorrelationChartProps, "data">) {
-  /** This state management is a bit too complicated, but it does kinda sorta work */
-
-  const fetch = useMacrostratFetch();
-
-  // Sync focused columns with map
-  const focusedColumns = useCorrelationMapStore(
-    (state) => state.focusedColumns,
-  );
-
-  const columnUnits = useAsyncMemo(async () => {
-    const col_ids = focusedColumns.map((col) => col.properties.col_id);
-    return await fetchUnits(col_ids, fetch);
-  }, [focusedColumns]);
-
-  return h("div.correlation-diagram", [
-    h(
-      ErrorBoundary,
-      h(OverlaysProvider, [
-        h(CorrelationChart, { data: columnUnits, ...props }),
-      ]),
-    ),
-  ]);
-}
-
-export default {
-  title: "Column views/Correlation chart",
-  component: CorrelationStoryUI,
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: "Correlation chart for Macrostrat columns",
-      },
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  args: {
-    focusedLine: "-100,45 -90,50",
-    columnSpacing: 0,
-    columnWidth: 100,
-    collapseSmallUnconformities: true,
-    targetUnitHeight: 20,
-  },
-  argTypes: {
-    selectedUnit: {
-      control: {
-        type: "number",
-      },
-    },
-    t_age: {
-      control: {
-        type: "number",
-      },
-    },
-    b_age: {
-      control: {
-        type: "number",
-      },
-    },
-    columnSpacing: {
-      control: {
-        type: "number",
-      },
-    },
-    columnWidth: {
-      control: {
-        type: "number",
-      },
-    },
-    mergeSections: {
-      options: ["all", "overlapping", null],
-      control: { type: "radio" },
-    },
-    pixelScale: {
-      control: {
-        type: "number",
-      },
-    },
-    collapseSmallUnconformities: {
-      control: {
-        type: "boolean",
-      },
-    },
-    minSectionHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    targetUnitHeight: {
-      control: {
-        type: "number",
-      },
-    },
-    showLabelColumn: {
-      control: {
-        type: "boolean",
-      },
-    },
-    maxInternalColumns: {
-      control: {
-        type: "number",
-      },
-    },
-    projectID: {
-      control: {
-        type: "number",
-      },
-    },
-  },
-} as Meta<typeof CorrelationStoryUI>;
-
-function Template(args) {
-  return h(CorrelationStoryUI, {
-    ...args,
-    ...useCorrelationLine(),
-  });
-}
-
-export const Primary = Template.bind({});
-
-export const ColoredByEnvironment = Template.bind({});
-ColoredByEnvironment.args = {
-  unitComponent: EnvironmentColoredUnitComponent,
-};
-
-export const RestrictedAgeRange = Template.bind({});
-RestrictedAgeRange.args = {
-  t_age: 100,
-  b_age: 300,
-  focusedLine: "-114.29,42.74 -104.59,39.21",
-};
-
-export const WithFixedScale = Template.bind({});
-WithFixedScale.args = {
-  scale: scaleLinear().domain([0, 2500]).range([0, 1000]),
-};
-
-export const WithPowerScale = Template.bind({});
-WithPowerScale.args = {
-  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
-};
-
-export const WithPowerScaleMerged = Template.bind({});
-WithPowerScaleMerged.args = {
-  scale: scalePow().exponent(0.3).domain([0, 2500]).range([0, 1000]),
-  mergeSections: MergeSectionsMode.ALL,
-};
-
-export const eODPCorrelationChart = Template.bind({});
-eODPCorrelationChart.args = {
-  focusedLine: "-125,38 -120,32",
-  projectID: 3,
-};

package/src/correlation-chart/stories/namibia-correlation.stories.ts

@@ -1,151 +0,0 @@
-import "@macrostrat/style-system";
-import { MergeSectionsMode, UnitComponent } from "../..";
-import { Meta } from "@storybook/react-vite";
-
-import h from "./stories.module.sass";
-import { CorrelationChart } from "../main";
-import { BaseUnit } from "@macrostrat/api-types";
-import { useGeologicPattern } from "@macrostrat/column-components";
-
-export default {
-  title: "Column views/Correlation chart",
-  component: CorrelationChart,
-  parameters: {
-    layout: "fullscreen",
-    docs: {
-      description: {
-        component: "Correlation chart for Macrostrat columns",
-      },
-      story: {
-        inline: false,
-        iframeHeight: 500,
-      },
-    },
-  },
-  args: {},
-} as Meta<typeof CorrelationChart>;
-
-const nosib = {
-  b_age: 900,
-  t_age: 800,
-  name: "Nosib",
-  color: "#ffd4ba",
-};
-
-const namUnits: (BaseUnit | BaseUnit[])[] = [
-  [
-    nosib,
-    { b_age: 746, t_age: 720, name: "Chuos", color: "#d0b4ff" },
-    {
-      b_age: 720,
-      t_age: 600,
-      name: "Otavi",
-      color: "dodgerblue",
-    },
-  ],
-  [
-    nosib,
-    {
-      b_age: 740,
-      t_age: 600,
-      name: "Swakop",
-      color: "#aaa",
-    },
-  ],
-  [
-    nosib,
-    {
-      b_age: 670,
-      t_age: 580,
-      name: "Witvlei",
-      color: "#fffc4e",
-    },
-  ],
-  [
-    {
-      b_age: 610,
-      t_age: 575,
-      name: "Zebra Series",
-      color: "#fdbcf0",
-    },
-    {
-      b_age: 660,
-      t_age: 610,
-      name: "Naukluft complex",
-      color: "#fdbcbc",
-    },
-  ],
-  {
-    b_age: 550,
-    t_age: 520,
-    name: "Nama",
-    color: "#baf1a7",
-  },
-  // {
-  //   unit_id: 0,
-  //   b_age: 900,
-  //   t_age: 0,
-  //   unit_name: "",
-  //   column: 8,
-  // },
-];
-
-export function NamibiaCorrelationChart() {
-  return h(
-    "div",
-    {
-      style: {
-        "--column-unit-font-size": "14px",
-        "--column-unit-font-style": "bold",
-        "--column-text-color": "white",
-      },
-    },
-    [
-      h(CorrelationChart, {
-        id: 432,
-        data: namUnits.map((u, i) => {
-          let units: any = null;
-          if (Array.isArray(u)) {
-            units = u.map((u) => buildUnit(u, i));
-          } else {
-            units = [buildUnit(u, i)];
-          }
-          return {
-            columnID: i,
-            units,
-          };
-        }),
-        columnSpacing: 10,
-        t_age: 450,
-        b_age: 850,
-        //width: 400,
-        //columnWidth: 400,
-        pixelScale: 2,
-        //showLabelColumn: false,
-        mergeSections: MergeSectionsMode.ALL,
-        unitComponent: ProvidedColorUnitComponent,
-      }),
-    ],
-  );
-}
-
-function buildUnit(unit, i) {
-  return {
-    unit_id: i,
-    col_id: i,
-    ...unit,
-    unit_name: unit.name,
-  };
-}
-
-function ProvidedColorUnitComponent(props) {
-  /** A unit component that is colored by its own properties. */
-
-  const fill = useGeologicPattern(props.division.patternID);
-
-  return h(UnitComponent, {
-    fill,
-    backgroundColor: props.division.color ?? null,
-    ...props,
-  });
-}

package/src/correlation-chart/stories/stories.module.sass

@@ -1,18 +0,0 @@
-.column-ui
-  height: 100%
-  width: 100%
-  overflow: scroll
-
-.correlation-container
-  padding: 2em calc(350px + 2em) 2em 2em
-  width: fit-content
-
-.right-column
-  width: 350px
-  position: fixed
-  top: 0
-  right: 0
-  padding: 1em
-
-.column-selector-map, .correlation-map
-  height: 350px

package/src/correlation-chart/stories/utils.ts

@@ -1,24 +0,0 @@
-import { useArgs } from "storybook/preview-api";
-import { useCallback } from "react";
-import { parseLineFromString, stringifyLine } from "../hash-string";
-
-export function useCorrelationLine() {
-  const [{ focusedLine, selectedUnit }, updateArgs] = useArgs();
-  const setFocusedLine = (line) => {
-    updateArgs({ focusedLine: stringifyLine(line) });
-  };
-
-  const setSelectedUnit = useCallback(
-    (selectedUnit) => {
-      updateArgs({ selectedUnit });
-    },
-    [updateArgs],
-  );
-
-  return {
-    focusedLine: parseLineFromString(focusedLine),
-    setFocusedLine,
-    selectedUnit,
-    setSelectedUnit,
-  };
-}

package/src/unit-details/identifiers.ts

@@ -1,67 +0,0 @@
-import { isClickable, ItemInteractionProps } from "@macrostrat/data-components";
-import h from "./panel.module.sass";
-import { ReactNode } from "react";
-import classNames from "classnames";
-
-export function ClickableText({
-  className,
-  ...rest
-}: {
-  className?: string;
-  children: ReactNode;
-} & ItemInteractionProps) {
-  /** An optionally clickable text element */
-  const clickable = isClickable(rest);
-  const tag = clickable ? "a" : "span";
-  return h(tag, { className: classNames(className, { clickable }), ...rest });
-}
-
-export function Identifier({
-  id,
-  className,
-  ...rest
-}: {
-  id: number | string;
-  className?: string;
-} & ItemInteractionProps) {
-  /** An item that displays a numeric identifier, optionally clickable */
-  return h(
-    ClickableText,
-    {
-      className: classNames("identifier", className),
-      ...rest,
-    },
-    id,
-  );
-}
-
-export type UnitInfo = {
-  unitID: number;
-  colID?: number;
-  name?: string;
-};
-
-export function UnitIdentifier({
-  unitID,
-  colID,
-  name,
-  ...interactionProps
-}: UnitInfo & ItemInteractionProps) {
-  if (name != null) {
-    return h(
-      ClickableText,
-      {
-        className: "unit-name",
-        ...interactionProps,
-      },
-      name,
-    );
-  }
-
-  return h(Identifier, {
-    className: "unit-id",
-    key: unitID,
-    id: unitID,
-    ...interactionProps,
-  });
-}