@macrostrat/column-views 3.11.0 → 3.12.1

package/src/unit-details/age-range.ts

@@ -1,5 +1,6 @@
 import {
   DataField,
+  IntervalProportion,
   IntervalShort,
   IntervalTag,
   type IntervalTagProps,
@@ -8,10 +9,18 @@ import {
 } from "@macrostrat/data-components";
 import { useMacrostratDefs } from "@macrostrat/data-provider";
 import h from "./age-range.module.sass";
-import { formatProportion, formatRange } from "./utils";
+import { formatRange } from "./utils";
 import classNames from "classnames";
 import { useMemo } from "react";
 
+// The interval tag, its proportion and single-age label live in
+// `@macrostrat/data-components`; re-exported under their names here.
+export {
+  AgeLabel,
+  getAge,
+  IntervalProportion as Proportion,
+} from "@macrostrat/data-components";
+
 export function AgeField({ unit, children, ...rest }) {
   const [_b_age, _t_age, _unit] = getAgeRange(unit);
 
@@ -46,30 +55,6 @@ export function AgeRange({
   });
 }
 
-export function AgeLabel({
-  age,
-  maximumFractionDigits = 2,
-  minimumFractionDigits = 0,
-  className,
-}: {
-  age: number;
-  className?: string;
-  maximumFractionDigits?: number;
-  minimumFractionDigits?: number;
-}) {
-  /** Component to display a single age value with unit conversion from
-   * Ma to ka or Ga as appropriate.
-   */
-  const [value, unit] = getAge(age);
-
-  const _value = value.toLocaleString("en-US", {
-    maximumFractionDigits,
-    minimumFractionDigits,
-  });
-
-  return h(Value, { value: _value, unit, className });
-}
-
 export function Duration({
   value,
   maximumFractionDigits = 2,
@@ -179,11 +164,11 @@ export function IntervalProportions({
   let p1: any = null;
 
   if (_showProps !== false) {
-    p1 = h(Proportion, { value: t_prop });
+    p1 = h(IntervalProportion, { value: t_prop });
 
     if (i0 !== i1 || b_prop !== 0 || t_prop !== 1) {
       // We have a single interval with undefined proportions
-      p0 = h(Proportion, { value: b_prop });
+      p0 = h(IntervalProportion, { value: b_prop });
     }
 
     if (i0 === i1 && (b_prop !== 0 || t_prop !== 1)) {
@@ -221,19 +206,6 @@ function getProportion(age: number, interval: IntervalShort): number | null {
   return (interval.b_age - age) / (interval.b_age - interval.t_age);
 }
 
-function Proportion({ value }) {
-  let content = null;
-  if (value == 0) {
-    content = "base";
-  } else if (value == 1) {
-    content = "top";
-  } else {
-    content = formatProportion(value * 100) + "%";
-  }
-
-  return h("span.proportion", content);
-}
-
 export function getAgeRange(_unit) {
   let b_age = _unit.b_age;
   let t_age = _unit.t_age;
@@ -251,21 +223,3 @@ export function getAgeRange(_unit) {
 
   return [b_age, t_age, unit];
 }
-
-export function getAge(value) {
-  /** Get the age value in Ma, ka, or Ga as appropriate */
-  let unit = "Ma";
-  if (value < 0.8) {
-    unit = "ka";
-    value *= 1000;
-    if (value < 5) {
-      unit = "yr";
-      value *= 1000;
-    }
-  } else if (value > 1000) {
-    unit = "Ga";
-    value /= 1000;
-  }
-
-  return [value, unit];
-}

package/src/units/composite.ts

@@ -118,6 +118,8 @@ type ICompositeUnitProps = BaseUnitProps & {
   showLabelColumn?: boolean;
   noteComponent?: React.FC<any>;
   shouldRenderNote?: (d: any) => boolean;
+  /** Suppress the label for a unit drawn thinner than this many pixels */
+  labelSuppressHeight?: number;
 };
 
 interface CompositeUnitProps {
@@ -159,6 +161,13 @@ export function AnnotatedUnitsColumn(props: ICompositeUnitProps) {
   return null;
 }
 
+/** A unit drawn thinner than this gets no label. The notes column can place
+ * a label away from its unit and run a leader line back, so a thin unit is
+ * labelable in principle — but below a pixel or two there is nothing on the
+ * page to lead back to, and a dense column spends its labels on units the
+ * reader cannot see. */
+const DEFAULT_LABEL_SUPPRESS_HEIGHT = 2;
+
 export function SectionLabelsColumn(props: ICompositeUnitProps) {
   // Section with "squishy" time scale
   const {
@@ -167,6 +176,7 @@ export function SectionLabelsColumn(props: ICompositeUnitProps) {
     labelOffset = 30,
     noteComponent,
     shouldRenderNote,
+    labelSuppressHeight = DEFAULT_LABEL_SUPPRESS_HEIGHT,
   } = props;
 
   const { totalHeight, axisType } = useMacrostratColumnData();
@@ -198,6 +208,7 @@ export function SectionLabelsColumn(props: ICompositeUnitProps) {
           divisions: unitsToLabel,
           paddingLeft: labelOffset,
           width,
+          minimumHeight: labelSuppressHeight,
           noteComponent,
           shouldRenderNote,
           scale: _compositeScale,

package/dist/age-model-overlay.cjs

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const h$1 = require("@macrostrat/hyper");
-const ageModelOverlay_module = require("./age-model-overlay.module.sass.cjs");
-const uiComponents = require("@macrostrat/ui-components");
-const dynamicScales = require("./prepare-units/dynamic-scales.cjs");
-const store = require("./data-provider/store.cjs");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
-const h = h__default.default.styled(ageModelOverlay_module);
-function BoundaryAgeModelOverlay() {
-  const col_id = store.useMacrostratUnits()?.[0]?.col_id;
-  const scale = store.useCompositeScale();
-  const ageModel = uiComponents.useAPIResult(
-    "https://dev.macrostrat.org/api/v2/age_model",
-    { col_id },
-    (res) => res.success.data
-  );
-  if (ageModel == null) {
-    return null;
-  }
-  return h(
-    "div.boundary-age-model",
-    ageModel.map((surface) => {
-      const height = scale(surface.model_age);
-      return h("div.boundary-age-model-surface", {
-        key: surface.boundary_id,
-        style: { top: `${height}px` }
-      });
-    })
-  );
-}
-function ComputedSurfacesOverlay() {
-  const units = store.useMacrostratUnits();
-  const surfaces = dynamicScales.buildColumnSurfaces(units);
-  const scale = store.useCompositeScale();
-  return h(
-    "div.boundary-age-model",
-    surfaces.map((surface) => {
-      const height = scale(surface.age);
-      return h("div.boundary-age-model-surface", {
-        key: surface.index,
-        style: { top: `${height}px` }
-      });
-    })
-  );
-}
-exports.BoundaryAgeModelOverlay = BoundaryAgeModelOverlay;
-exports.ComputedSurfacesOverlay = ComputedSurfacesOverlay;
-//# sourceMappingURL=age-model-overlay.cjs.map

package/dist/age-model-overlay.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"age-model-overlay.cjs","sources":["../src/age-model-overlay.ts"],"sourcesContent":["/** An in-development overlay for a column's age model.\n *\n * Age model info:\n *       {\n *         \"boundary_id\": 8049,\n *         \"col_id\": 432,\n *         \"section_id\": 3104,\n *         \"interval_id\": 268,\n *         \"interval_name\": \"Calymmian\",\n *         \"age_bottom\": 1600,\n *         \"age_top\": 1400,\n *         \"rel_position\": 0.85,\n *         \"model_age\": 1430,\n *         \"boundary_status\": \"absolute\",\n *         \"boundary_type\": \"\",\n *         \"boundary_position\": null,\n *         \"unit_below\": 11541,\n *         \"unit_above\": 0,\n *         \"ref_id\": 217\n *       },\n *\n * */\n\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./age-model-overlay.module.sass\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useCompositeScale, useMacrostratUnits } from \"./data-provider\";\nimport { buildColumnSurfaces } from \"./prepare-units/dynamic-scales\";\nimport { ExtUnit } from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nconst h = hyper.styled(styles);\n\ninterface AgeModelSurface {\n  boundary_id: number;\n  col_id: number;\n  section_id: number;\n  interval_id: number;\n  interval_name: string;\n  age_bottom: number;\n  age_top: number;\n  rel_position: number;\n  model_age: number;\n  boundary_status: \"absolute\" | \"relative\" | \"modeled\";\n  boundary_type: string;\n  boundary_position: null | number;\n  unit_below: number;\n  unit_above: number;\n  ref_id: number;\n}\n\nexport function BoundaryAgeModelOverlay() {\n  const col_id = (useMacrostratUnits() as ExtUnit[])?.[0]?.col_id;\n  const scale = useCompositeScale();\n\n  const ageModel = useAPIResult(\n    \"https://dev.macrostrat.org/api/v2/age_model\",\n    { col_id },\n    (res) => res.success.data,\n  );\n\n  if (ageModel == null) {\n    return null;\n  }\n\n  return h(\n    \"div.boundary-age-model\",\n    ageModel.map((surface) => {\n      const height = scale(surface.model_age);\n\n      return h(\"div.boundary-age-model-surface\", {\n        key: surface.boundary_id,\n        style: { top: `${height}px` },\n      });\n    }),\n  );\n}\n\nexport function ComputedSurfacesOverlay() {\n  /** Overlay showing age surfaces. This is like the boundary age model overlay but\n   * it is computed on the fly from unit tops and bottoms.\n   */\n  const units = useMacrostratUnits() as UnitLong[];\n  const surfaces = buildColumnSurfaces(units);\n  const scale = useCompositeScale();\n\n  return h(\n    \"div.boundary-age-model\",\n    surfaces.map((surface) => {\n      const height = scale(surface.age);\n      return h(\"div.boundary-age-model-surface\", {\n        key: surface.index,\n        style: { top: `${height}px` },\n      });\n    }),\n  );\n}\n"],"names":["hyper","styles","useMacrostratUnits","useCompositeScale","useAPIResult","buildColumnSurfaces"],"mappings":";;;;;;;;;AA8BA,MAAM,IAAIA,WAAAA,QAAM,OAAOC,sBAAM;AAoBtB,SAAS,0BAA0B;AACxC,QAAM,SAAUC,MAAAA,uBAAqC,CAAC,GAAG;AACzD,QAAM,QAAQC,MAAAA,kBAAA;AAEd,QAAM,WAAWC,aAAAA;AAAAA,IACf;AAAA,IACA,EAAE,OAAA;AAAA,IACF,CAAC,QAAQ,IAAI,QAAQ;AAAA,EAAA;AAGvB,MAAI,YAAY,MAAM;AACpB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,IAAI,CAAC,YAAY;AACxB,YAAM,SAAS,MAAM,QAAQ,SAAS;AAEtC,aAAO,EAAE,kCAAkC;AAAA,QACzC,KAAK,QAAQ;AAAA,QACb,OAAO,EAAE,KAAK,GAAG,MAAM,KAAA;AAAA,MAAK,CAC7B;AAAA,IACH,CAAC;AAAA,EAAA;AAEL;AAEO,SAAS,0BAA0B;AAIxC,QAAM,QAAQF,MAAAA,mBAAA;AACd,QAAM,WAAWG,cAAAA,oBAAoB,KAAK;AAC1C,QAAM,QAAQF,MAAAA,kBAAA;AAEd,SAAO;AAAA,IACL;AAAA,IACA,SAAS,IAAI,CAAC,YAAY;AACxB,YAAM,SAAS,MAAM,QAAQ,GAAG;AAChC,aAAO,EAAE,kCAAkC;AAAA,QACzC,KAAK,QAAQ;AAAA,QACb,OAAO,EAAE,KAAK,GAAG,MAAM,KAAA;AAAA,MAAK,CAC7B;AAAA,IACH,CAAC;AAAA,EAAA;AAEL;;;"}

package/dist/age-model-overlay.d.ts

@@ -1,24 +0,0 @@
-/** An in-development overlay for a column's age model.
- *
- * Age model info:
- *       {
- *         "boundary_id": 8049,
- *         "col_id": 432,
- *         "section_id": 3104,
- *         "interval_id": 268,
- *         "interval_name": "Calymmian",
- *         "age_bottom": 1600,
- *         "age_top": 1400,
- *         "rel_position": 0.85,
- *         "model_age": 1430,
- *         "boundary_status": "absolute",
- *         "boundary_type": "",
- *         "boundary_position": null,
- *         "unit_below": 11541,
- *         "unit_above": 0,
- *         "ref_id": 217
- *       },
- *
- * */
-export declare function BoundaryAgeModelOverlay(): import('react').DOMElement<any, Element> | null;
-export declare function ComputedSurfacesOverlay(): import('react').DOMElement<import('react').DOMAttributes<Element>, Element>;

package/dist/age-model-overlay.js

@@ -1,48 +0,0 @@
-import h$1 from "@macrostrat/hyper";
-import h$2 from "./age-model-overlay.module.sass.js";
-import { useAPIResult } from "@macrostrat/ui-components";
-import { buildColumnSurfaces } from "./prepare-units/dynamic-scales.js";
-import { useMacrostratUnits, useCompositeScale } from "./data-provider/store.js";
-const h = h$1.styled(h$2);
-function BoundaryAgeModelOverlay() {
-  const col_id = useMacrostratUnits()?.[0]?.col_id;
-  const scale = useCompositeScale();
-  const ageModel = useAPIResult(
-    "https://dev.macrostrat.org/api/v2/age_model",
-    { col_id },
-    (res) => res.success.data
-  );
-  if (ageModel == null) {
-    return null;
-  }
-  return h(
-    "div.boundary-age-model",
-    ageModel.map((surface) => {
-      const height = scale(surface.model_age);
-      return h("div.boundary-age-model-surface", {
-        key: surface.boundary_id,
-        style: { top: `${height}px` }
-      });
-    })
-  );
-}
-function ComputedSurfacesOverlay() {
-  const units = useMacrostratUnits();
-  const surfaces = buildColumnSurfaces(units);
-  const scale = useCompositeScale();
-  return h(
-    "div.boundary-age-model",
-    surfaces.map((surface) => {
-      const height = scale(surface.age);
-      return h("div.boundary-age-model-surface", {
-        key: surface.index,
-        style: { top: `${height}px` }
-      });
-    })
-  );
-}
-export {
-  BoundaryAgeModelOverlay,
-  ComputedSurfacesOverlay
-};
-//# sourceMappingURL=age-model-overlay.js.map

package/dist/age-model-overlay.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"age-model-overlay.js","sources":["../src/age-model-overlay.ts"],"sourcesContent":["/** An in-development overlay for a column's age model.\n *\n * Age model info:\n *       {\n *         \"boundary_id\": 8049,\n *         \"col_id\": 432,\n *         \"section_id\": 3104,\n *         \"interval_id\": 268,\n *         \"interval_name\": \"Calymmian\",\n *         \"age_bottom\": 1600,\n *         \"age_top\": 1400,\n *         \"rel_position\": 0.85,\n *         \"model_age\": 1430,\n *         \"boundary_status\": \"absolute\",\n *         \"boundary_type\": \"\",\n *         \"boundary_position\": null,\n *         \"unit_below\": 11541,\n *         \"unit_above\": 0,\n *         \"ref_id\": 217\n *       },\n *\n * */\n\nimport hyper from \"@macrostrat/hyper\";\nimport styles from \"./age-model-overlay.module.sass\";\nimport { useAPIResult } from \"@macrostrat/ui-components\";\nimport { useCompositeScale, useMacrostratUnits } from \"./data-provider\";\nimport { buildColumnSurfaces } from \"./prepare-units/dynamic-scales\";\nimport { ExtUnit } from \"./prepare-units\";\nimport { UnitLong } from \"@macrostrat/api-types\";\nconst h = hyper.styled(styles);\n\ninterface AgeModelSurface {\n  boundary_id: number;\n  col_id: number;\n  section_id: number;\n  interval_id: number;\n  interval_name: string;\n  age_bottom: number;\n  age_top: number;\n  rel_position: number;\n  model_age: number;\n  boundary_status: \"absolute\" | \"relative\" | \"modeled\";\n  boundary_type: string;\n  boundary_position: null | number;\n  unit_below: number;\n  unit_above: number;\n  ref_id: number;\n}\n\nexport function BoundaryAgeModelOverlay() {\n  const col_id = (useMacrostratUnits() as ExtUnit[])?.[0]?.col_id;\n  const scale = useCompositeScale();\n\n  const ageModel = useAPIResult(\n    \"https://dev.macrostrat.org/api/v2/age_model\",\n    { col_id },\n    (res) => res.success.data,\n  );\n\n  if (ageModel == null) {\n    return null;\n  }\n\n  return h(\n    \"div.boundary-age-model\",\n    ageModel.map((surface) => {\n      const height = scale(surface.model_age);\n\n      return h(\"div.boundary-age-model-surface\", {\n        key: surface.boundary_id,\n        style: { top: `${height}px` },\n      });\n    }),\n  );\n}\n\nexport function ComputedSurfacesOverlay() {\n  /** Overlay showing age surfaces. This is like the boundary age model overlay but\n   * it is computed on the fly from unit tops and bottoms.\n   */\n  const units = useMacrostratUnits() as UnitLong[];\n  const surfaces = buildColumnSurfaces(units);\n  const scale = useCompositeScale();\n\n  return h(\n    \"div.boundary-age-model\",\n    surfaces.map((surface) => {\n      const height = scale(surface.age);\n      return h(\"div.boundary-age-model-surface\", {\n        key: surface.index,\n        style: { top: `${height}px` },\n      });\n    }),\n  );\n}\n"],"names":["hyper","styles"],"mappings":";;;;;AA8BA,MAAM,IAAIA,IAAM,OAAOC,GAAM;AAoBtB,SAAS,0BAA0B;AACxC,QAAM,SAAU,uBAAqC,CAAC,GAAG;AACzD,QAAM,QAAQ,kBAAA;AAEd,QAAM,WAAW;AAAA,IACf;AAAA,IACA,EAAE,OAAA;AAAA,IACF,CAAC,QAAQ,IAAI,QAAQ;AAAA,EAAA;AAGvB,MAAI,YAAY,MAAM;AACpB,WAAO;AAAA,EACT;AAEA,SAAO;AAAA,IACL;AAAA,IACA,SAAS,IAAI,CAAC,YAAY;AACxB,YAAM,SAAS,MAAM,QAAQ,SAAS;AAEtC,aAAO,EAAE,kCAAkC;AAAA,QACzC,KAAK,QAAQ;AAAA,QACb,OAAO,EAAE,KAAK,GAAG,MAAM,KAAA;AAAA,MAAK,CAC7B;AAAA,IACH,CAAC;AAAA,EAAA;AAEL;AAEO,SAAS,0BAA0B;AAIxC,QAAM,QAAQ,mBAAA;AACd,QAAM,WAAW,oBAAoB,KAAK;AAC1C,QAAM,QAAQ,kBAAA;AAEd,SAAO;AAAA,IACL;AAAA,IACA,SAAS,IAAI,CAAC,YAAY;AACxB,YAAM,SAAS,MAAM,QAAQ,GAAG;AAChC,aAAO,EAAE,kCAAkC;AAAA,QACzC,KAAK,QAAQ;AAAA,QACb,OAAO,EAAE,KAAK,GAAG,MAAM,KAAA;AAAA,MAAK,CAC7B;AAAA,IACH,CAAC;AAAA,EAAA;AAEL;"}

package/dist/age-model-overlay.module.sass.cjs

@@ -1,12 +0,0 @@
-"use strict";
-const h$1 = require("@macrostrat/hyper");
-const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
-const h__default = /* @__PURE__ */ _interopDefault(h$1);
-const styles = {
-  "boundary-age-model": "_boundary-age-model_16scl_1",
-  "boundary-age-model-surface": "_boundary-age-model-surface_16scl_8"
-};
-let h = h__default.default.styled(styles);
-Object.assign(h, styles);
-module.exports = h;
-//# sourceMappingURL=age-model-overlay.module.sass.cjs.map

package/dist/age-model-overlay.module.sass.cjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"age-model-overlay.module.sass.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/age-model-overlay.module.sass.js

@@ -1,11 +0,0 @@
-import h$1 from "@macrostrat/hyper";
-const styles = {
-  "boundary-age-model": "_boundary-age-model_16scl_1",
-  "boundary-age-model-surface": "_boundary-age-model-surface_16scl_8"
-};
-let h = h$1.styled(styles);
-Object.assign(h, styles);
-export {
-  h as default
-};
-//# sourceMappingURL=age-model-overlay.module.sass.js.map

package/dist/age-model-overlay.module.sass.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"age-model-overlay.module.sass.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/src/age-model-overlay.module.sass

@@ -1,11 +0,0 @@
-.boundary-age-model
-  top: 0
-  left: 0
-  position: absolute
-  width: 100%
-
-.boundary-age-model-surface
-  left: 0
-  right: 0
-  position: absolute
-  border-top: 1px solid lightgreen

package/src/age-model-overlay.ts

@@ -1,96 +0,0 @@
-/** An in-development overlay for a column's age model.
- *
- * Age model info:
- *       {
- *         "boundary_id": 8049,
- *         "col_id": 432,
- *         "section_id": 3104,
- *         "interval_id": 268,
- *         "interval_name": "Calymmian",
- *         "age_bottom": 1600,
- *         "age_top": 1400,
- *         "rel_position": 0.85,
- *         "model_age": 1430,
- *         "boundary_status": "absolute",
- *         "boundary_type": "",
- *         "boundary_position": null,
- *         "unit_below": 11541,
- *         "unit_above": 0,
- *         "ref_id": 217
- *       },
- *
- * */
-
-import hyper from "@macrostrat/hyper";
-import styles from "./age-model-overlay.module.sass";
-import { useAPIResult } from "@macrostrat/ui-components";
-import { useCompositeScale, useMacrostratUnits } from "./data-provider";
-import { buildColumnSurfaces } from "./prepare-units/dynamic-scales";
-import { ExtUnit } from "./prepare-units";
-import { UnitLong } from "@macrostrat/api-types";
-const h = hyper.styled(styles);
-
-interface AgeModelSurface {
-  boundary_id: number;
-  col_id: number;
-  section_id: number;
-  interval_id: number;
-  interval_name: string;
-  age_bottom: number;
-  age_top: number;
-  rel_position: number;
-  model_age: number;
-  boundary_status: "absolute" | "relative" | "modeled";
-  boundary_type: string;
-  boundary_position: null | number;
-  unit_below: number;
-  unit_above: number;
-  ref_id: number;
-}
-
-export function BoundaryAgeModelOverlay() {
-  const col_id = (useMacrostratUnits() as ExtUnit[])?.[0]?.col_id;
-  const scale = useCompositeScale();
-
-  const ageModel = useAPIResult(
-    "https://dev.macrostrat.org/api/v2/age_model",
-    { col_id },
-    (res) => res.success.data,
-  );
-
-  if (ageModel == null) {
-    return null;
-  }
-
-  return h(
-    "div.boundary-age-model",
-    ageModel.map((surface) => {
-      const height = scale(surface.model_age);
-
-      return h("div.boundary-age-model-surface", {
-        key: surface.boundary_id,
-        style: { top: `${height}px` },
-      });
-    }),
-  );
-}
-
-export function ComputedSurfacesOverlay() {
-  /** Overlay showing age surfaces. This is like the boundary age model overlay but
-   * it is computed on the fly from unit tops and bottoms.
-   */
-  const units = useMacrostratUnits() as UnitLong[];
-  const surfaces = buildColumnSurfaces(units);
-  const scale = useCompositeScale();
-
-  return h(
-    "div.boundary-age-model",
-    surfaces.map((surface) => {
-      const height = scale(surface.age);
-      return h("div.boundary-age-model-surface", {
-        key: surface.index,
-        style: { top: `${height}px` },
-      });
-    }),
-  );
-}