@macrostrat/column-views 3.6.1 → 3.9.0

package/dist/column-views.css

@@ -91,7 +91,7 @@
 
 ._sep_1ibvp_16 {
   color: var(--secondary-color);
-}._column-container_15bga_1, body.light-mode ._column-container_15bga_1 {
+}._column-container_1j8hh_1, body.light-mode ._column-container_1j8hh_1 {
   --column-background-color: var(--background-color, #fff);
   --column-stroke-color: var(--text-emphasized-color, #000);
   --column-text-color: var(--text-emphasized-color, #000);
@@ -103,132 +103,137 @@
  * If dark mode is explicitly enabled, we want to override
  * the media query. */
 @media (prefers-color-scheme: dark) {
-  body:not(.light-mode) ._column-container_15bga_1 {
+  body:not(.light-mode) ._column-container_1j8hh_1 {
     --column-background-color: var(--background-color, #000);
     --column-stroke-color: var(--text-emphasized-color, #fff);
     --column-text-color: var(--text-emphasized-color, #fff);
     color-scheme: dark;
     color: var(--column-text-color);
   }
-  body:not(.light-mode) ._column-container_15bga_1 .timescale {
+  body:not(.light-mode) ._column-container_1j8hh_1 .timescale {
     color: #000;
   }
-  body:not(.light-mode) ._column-container_15bga_1 svg pattern image {
+  body:not(.light-mode) ._column-container_1j8hh_1 svg pattern image {
     filter: invert(100%);
   }
 }
-body.dark-mode ._column-container_15bga_1 {
+body.dark-mode ._column-container_1j8hh_1 {
   --column-background-color: var(--background-color, #000);
   --column-stroke-color: var(--text-emphasized-color, #fff);
   --column-text-color: var(--text-emphasized-color, #fff);
   color-scheme: dark;
   color: var(--column-text-color);
 }
-body.dark-mode ._column-container_15bga_1 .timescale {
+body.dark-mode ._column-container_1j8hh_1 .timescale {
   color: #000;
 }
-body.dark-mode ._column-container_15bga_1 svg pattern image {
+body.dark-mode ._column-container_1j8hh_1 svg pattern image {
   filter: invert(100%);
 }
 
-._column-container_15bga_1 {
+._column-container_1j8hh_1 {
   padding-top: var(--column-padding-top);
   padding-bottom: var(--column-padding-bottom);
   padding-left: var(--column-padding-left);
   padding-right: var(--column-padding-right);
 }
 
-._column-container_15bga_1 .column {
+._column-container_1j8hh_1 .column {
   display: flex;
   flex-direction: row;
   position: relative;
   height: fit-content;
 }
-._column-container_15bga_1 g.lithology-column .column-clip-frame {
+._column-container_1j8hh_1 g.lithology-column .column-clip-frame {
   stroke: none;
 }
-._column-container_15bga_1 .unit {
+._column-container_1j8hh_1 .unit {
   stroke: var(--column-stroke-color);
   stroke-width: 1px;
 }
-._column-container_15bga_1 .selection-overlay {
+._column-container_1j8hh_1 .selection-overlay {
   fill: var(--selection-overlay-color, red);
   fill-opacity: var(--selection-overlay-opacity, 0.5);
 }
-._column-container_15bga_1 g.lithology-column use.frame {
+._column-container_1j8hh_1 .linked-overlay {
+  fill: var(--linked-overlay-color, var(--selection-overlay-color, red));
+  fill-opacity: var(--linked-overlay-opacity, 0.18);
+  pointer-events: none;
+}
+._column-container_1j8hh_1 g.lithology-column use.frame {
   stroke: var(--column-stroke-color);
   stroke-width: 1.5px !important;
   pointer-events: none;
 }
 
-._column-container_15bga_1 .unit-label {
+._column-container_1j8hh_1 .unit-label {
   text-align: center;
 }
 
-._column-container_15bga_1 .col-note-label {
+._column-container_1j8hh_1 .col-note-label {
   font-size: 10px;
   line-height: 9px;
   border-left: none !important;
   margin: 1px 0;
 }
 
-._column-container_15bga_1 g.height-range {
+._column-container_1j8hh_1 g.height-range {
   display: none;
 }
 
-._column-container_15bga_1 .note-inner {
+._column-container_1j8hh_1 .note-inner {
   border: none;
   padding: 1px;
 }
 
-._column-container_15bga_1 .frame rect {
+._column-container_1j8hh_1 .frame rect {
   fill: transparent;
 }
 
-._column-container_15bga_1 .default-buttons {
+._column-container_1j8hh_1 .default-buttons {
   width: 100%;
   margin: 0 -10px;
 }
 
-._column-container_15bga_1 div.section {
+._column-container_1j8hh_1 div.section {
   display: flex;
   flex-direction: row;
 }
 
-._column-container_15bga_1 .section .divisions .unit {
+._column-container_1j8hh_1 .section .divisions .unit {
   cursor: pointer;
 }
 
-._column-container_15bga_1 .timescale {
+._column-container_1j8hh_1 .timescale {
   width: calc((1.5em + 1.5px) * var(--timescale-level-count, 4));
   --timescale-level-size: 1.5em;
 }
 
-._timescale-column_15bga_114 {
+._timescale-column_1j8hh_119 {
   position: relative;
 }
 
-._section-main_15bga_118 {
+._section-main_1j8hh_123 {
   position: relative;
   margin-bottom: -4px;
 }
 
-._section-units-container_15bga_123 {
+._section-units-container_1j8hh_128 {
   position: relative;
 }
 
-._main-column_15bga_127 {
+._main-column_1j8hh_132 {
   position: relative;
 }
 
-._unconformity-labels_15bga_131 {
+._unconformity-labels_1j8hh_136 {
   position: absolute;
   top: 0;
   left: 0;
   pointer-events: none;
 }
 
-._unconformity_15bga_131 {
+._unconformity_1j8hh_136 {
   position: absolute;
   font-family: var(--label-font-family, sans-serif);
   top: 0px;
@@ -236,20 +241,20 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   font-size: 0.8em;
   --unit-font-weight: 400;
 }
-._unconformity_15bga_131._giga_15bga_146 {
+._unconformity_1j8hh_136._giga_1j8hh_151 {
   font-weight: 800;
 }
-._unconformity_15bga_131._mega_15bga_149 {
+._unconformity_1j8hh_136._mega_1j8hh_154 {
   font-weight: 700;
 }
-._unconformity_15bga_131._large_15bga_152 {
+._unconformity_1j8hh_136._large_1j8hh_157 {
   font-weight: 500;
 }
-._unconformity_15bga_131._small_15bga_155 {
+._unconformity_1j8hh_136._small_1j8hh_160 {
   font-weight: 300;
 }
 
-._unconformity-inner_15bga_159 {
+._unconformity-inner_1j8hh_164 {
   position: absolute;
   top: 3px;
   bottom: 3px;
@@ -261,21 +266,21 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   text-align: center;
 }
 
-._unconformity-text_15bga_171 {
+._unconformity-text_1j8hh_176 {
   width: var(--column-width);
   --unit-font-style: normal;
 }
-._unconformity-text_15bga_171 ._prefix_15bga_175 {
+._unconformity-text_1j8hh_176 ._prefix_1j8hh_180 {
   font-weight: 400;
   color: var(--secondary-color);
 }
 
-._timescale-column_15bga_114 ._unconformity-inner_15bga_159 {
+._timescale-column_1j8hh_119 ._unconformity-inner_1j8hh_164 {
   border-left: 1.5px dotted var(--secondary-color);
   left: -3px;
 }
 
-._column-title-row_15bga_185 {
+._column-title-row_1j8hh_190 {
   display: flex;
   flex-direction: row;
   gap: 1em;
@@ -313,7 +318,7 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
 ._legend-json-view_4jzei_30 {
   padding-left: 0;
   margin-left: -0.5em;
-}._legend-panel-header_ue390_1 {
+}._legend-panel-header_arfxf_1 {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -327,74 +332,65 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   min-height: 45px;
   overflow: hidden;
 }
-._legend-panel-header_ue390_1 ._title-container_ue390_15 {
+._legend-panel-header_arfxf_1 ._title-container_arfxf_15 {
   gap: 0.5em;
   align-items: baseline;
   margin: 0;
   flex-grow: 1;
   z-index: 5;
 }
-._legend-panel-header_ue390_1 ._title-container_ue390_15:hover ._hidden-actions-container_ue390_22 {
+._legend-panel-header_arfxf_1 ._title-container_arfxf_15:hover ._hidden-actions-container_arfxf_22 {
   visibility: visible;
 }
-._legend-panel-header_ue390_1 ._title-container_ue390_15 h1, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h2, ._legend-panel-header_ue390_1 ._title-container_ue390_15 h3 {
+._legend-panel-header_arfxf_1 ._title-container_arfxf_15 h1, ._legend-panel-header_arfxf_1 ._title-container_arfxf_15 h2, ._legend-panel-header_arfxf_1 ._title-container_arfxf_15 h3 {
   display: inline;
   margin: 0;
 }
-._legend-panel-header_ue390_1 ._title-container_ue390_15 ._hidden-actions-container_ue390_22 {
+._legend-panel-header_arfxf_1 ._title-container_arfxf_15 ._hidden-actions-container_arfxf_22 {
   visibility: hidden;
 }
-._legend-panel-header_ue390_1 ._title-container_ue390_15 button {
+._legend-panel-header_arfxf_1 ._title-container_arfxf_15 button {
   transform: translateY(0px);
 }
-._legend-panel-header_ue390_1 code {
+._legend-panel-header_arfxf_1 code {
   font-size: 0.9em;
   color: var(--secondary-color);
 }
-._legend-panel-header_ue390_1 ._unit-id_ue390_39:before {
+._legend-panel-header_arfxf_1 ._unit-id_arfxf_39:before {
   content: "#";
   color: var(--secondary-color);
 }
-._legend-panel-header_ue390_1 ._spacer_ue390_43 {
+._legend-panel-header_arfxf_1 ._spacer_arfxf_43 {
   flex: 1;
 }
 
-._unit-details-panel_ue390_47 {
+._unit-details-panel_arfxf_47 {
   display: flex;
   flex-direction: column;
 }
-._unit-details-panel_ue390_47 ._unit-details-content-holder_ue390_51 {
+._unit-details-panel_arfxf_47 ._unit-details-content-holder_arfxf_51 {
   flex: 1;
   overflow-y: scroll;
 }
 
-._unit-details-content_ue390_51 {
+._unit-details-content_arfxf_51 {
   position: relative;
   margin: 1em;
 }
 
-._units-list_ue390_61 ._item_ue390_61:after {
+._units-list_arfxf_61 ._item_arfxf_61:after {
   content: ", ";
 }
-._units-list_ue390_61 ._item_ue390_61:last-child:after {
+._units-list_arfxf_61 ._item_arfxf_61:last-child:after {
   content: "";
 }
 
-._proportion_ue390_68, ._sep_ue390_68, ._no-units_ue390_68, ._strat-name-text_ue390_68 {
+._proportion_arfxf_68, ._sep_arfxf_68, ._no-units_arfxf_68, ._strat-name-text_arfxf_68 {
   color: var(--secondary-color);
   font-style: italic;
 }
 
-._strat-name-id_ue390_73, ._identifier_ue390_73 {
-  font-family: var(--monospace-font);
-  color: var(--secondary-color);
-}
-._strat-name-id_ue390_73::before, ._identifier_ue390_73::before {
-  content: "#";
-  color: var(--tertiary-color);
-}
-
-._color-swatch_ue390_82 {
+._color-swatch_arfxf_73 {
   width: 1em;
   height: 1em;
   border-radius: 0.2em;
@@ -403,24 +399,24 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   display: inline-block;
 }
 
-._refs_ue390_91 {
+._refs_arfxf_82 {
   list-style: none;
   margin: 0;
   padding-left: 0;
 }
 
-._clickable_ue390_97 {
+._clickable_arfxf_88 {
   cursor: pointer;
 }
 
-._hidden-actions-container_ue390_22 {
+._hidden-actions-container_arfxf_22 {
   min-width: 0;
   display: inline-block;
   width: 0;
   position: relative;
 }
 
-._hidden-actions_ue390_22 {
+._hidden-actions_arfxf_22 {
   padding-left: 1em;
   width: fit-content;
   display: flex;
@@ -431,7 +427,7 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   position: relative;
   bottom: 0;
 }
-._hidden-actions_ue390_22 button {
+._hidden-actions_arfxf_22 button {
   color: var(--secondary-color) !important;
 }._boundary-age-model_16scl_1 {
   top: 0;
@@ -463,20 +459,20 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
 ._truncated-list_120po_1 li._too-many_120po_16 {
   color: var(--secondary-color);
   font-style: italic;
-}._page-header_jnc7r_1 {
+}._page-header_17ryg_1 {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   margin-bottom: 1em;
 }
 
-._diagram-container_jnc7r_8 {
+._diagram-container_17ryg_8 {
   flex: 1;
   position: relative;
   min-height: 0;
   display: flex;
 }
-._diagram-container_jnc7r_8._map-inset_jnc7r_14 ._column-selection-map_jnc7r_14 {
+._diagram-container_17ryg_8._map-inset_17ryg_14 ._column-selection-map_17ryg_14 {
   position: absolute;
   top: 1em;
   right: 1em;
@@ -484,21 +480,21 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   width: 12em;
   z-index: 1000;
 }
-._diagram-container_jnc7r_8._map-expanded_jnc7r_22 {
+._diagram-container_17ryg_8._map-expanded_17ryg_22 {
   flex-direction: row;
   gap: 1em;
 }
-._diagram-container_jnc7r_8._map-expanded_jnc7r_22 ._assistant_jnc7r_26 {
+._diagram-container_17ryg_8._map-expanded_17ryg_22 ._assistant_17ryg_26 {
   width: 40em;
   position: relative;
 }
 
-._column-selection-map_jnc7r_14, ._unit-details-panel_jnc7r_31, ._main-area_jnc7r_31 {
+._column-selection-map_17ryg_14, ._unit-details-panel_17ryg_31, ._main-area_17ryg_31 {
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3);
   border-radius: 6px;
 }
 
-._column-selection-map_jnc7r_14 {
+._column-selection-map_17ryg_14 {
   overflow: hidden;
   flex: 1;
   min-height: 12em;
@@ -508,12 +504,12 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   top: 0;
   right: 0;
 }
-._column-selection-map_jnc7r_14 ._correlation-map_jnc7r_46 {
+._column-selection-map_17ryg_14 ._correlation-map_17ryg_46 {
   height: 100%;
   position: relative;
 }
 
-._unit-details-panel_jnc7r_31 {
+._unit-details-panel_17ryg_31 {
   overflow: scroll;
   background: var(--panel-secondary-background-color);
   flex: 2;
@@ -521,7 +517,7 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   max-width: 100%;
 }
 
-._main-area_jnc7r_31 {
+._main-area_17ryg_31 {
   position: relative;
   flex: 1;
   min-height: 0;
@@ -530,7 +526,7 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   background-color: var(--panel-secondary-background-color);
 }
 
-._correlation-diagram_jnc7r_68 {
+._correlation-diagram_17ryg_68 {
   padding: 1em;
   padding-left: 0;
   background-color: var(--panel-secondary-background-color);
@@ -538,57 +534,90 @@ body.dark-mode ._column-container_15bga_1 svg pattern image {
   --column-stroke-color: var(--text-color);
 }
 
-._package_jnc7r_76 {
+._package_17ryg_76 {
   position: relative;
 }
-._package_jnc7r_76 ._package-overlay_jnc7r_79 {
+._package_17ryg_76 ._package-overlay_17ryg_79 {
   position: absolute;
   top: 9px;
   left: 0;
   border: 2px solid red;
 }
-._package_jnc7r_76 ._laterally-extensive-unit_jnc7r_85 ._strat-col-span_jnc7r_85 {
+._package_17ryg_76 ._laterally-extensive-unit_17ryg_85 ._strat-col-span_17ryg_85 {
   position: absolute;
   border: 2px solid red;
 }
-._package_jnc7r_76 ._column-container_jnc7r_89 {
+._package_17ryg_76 ._column-container_17ryg_89 {
   display: flex;
   flex-direction: row;
 }
 
-._map-expanded-button_jnc7r_94 {
+._map-expanded-button_17ryg_94 {
   position: absolute;
   top: 0.5em;
   right: 0.5em;
   z-index: 100;
 }
 
-._main-panel_jnc7r_101 {
+._main-panel_17ryg_101 {
   position: relative;
   height: 100%;
   display: flex;
   flex-direction: column;
 }
 
-._main-chart_jnc7r_108 {
+._main-chart_17ryg_108 {
   position: relative;
+  grid-column: 2;
+  grid-row: 2;
 }
 
-._correlation-chart-inner_jnc7r_112 {
-  display: flex;
-  flex-direction: row;
+._correlation-chart-inner_17ryg_114 {
+  display: grid;
+  grid-template-columns: auto auto;
+  grid-template-rows: auto auto;
   position: relative;
+  width: fit-content;
 }
 
-._age-axis-container_jnc7r_118 {
+._age-axis-container_17ryg_122 {
   display: flex;
   flex-direction: row;
   position: sticky;
   left: 0;
   z-index: 100;
+  grid-column: 1;
+  grid-row: 2;
   padding-left: 1em;
   padding-right: 2px;
   background-color: var(--panel-secondary-background-color);
+}
+
+._column-header-spacer_17ryg_135 {
+  grid-column: 1;
+  grid-row: 1;
+  position: relative;
+}
+
+._column-header-row_17ryg_141 {
+  grid-column: 2;
+  grid-row: 1;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  position: sticky;
+  top: 0;
+  border-bottom: 1px solid var(--column-stroke-color, var(--text-color));
+  background-color: var(--panel-secondary-background-color);
+}
+._column-header-row_17ryg_141 ._column-header-cell_17ryg_152 {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  align-items: stretch;
+  max-height: var(--column-header-max-height, 300px);
+  overflow: hidden;
 }._depositional-age_ngsgr_1 {
   fill: var(--column-stroke-color);
   fill-opacity: 0.25;

package/dist/column.cjs

@@ -15,7 +15,6 @@ const types = require("./prepare-units/types.cjs");
 const store = require("./data-provider/store.cjs");
 const popover = require("./unit-details/popover.cjs");
 const unitSelection = require("./data-provider/unit-selection.cjs");
-const identifiers = require("./unit-details/identifiers.cjs");
 const panel = require("./unit-details/panel.cjs");
 const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
 const classNames__default = /* @__PURE__ */ _interopDefault(classNames);
@@ -37,11 +36,14 @@ function Column(props) {
     pixelScale,
     minPixelScale = 0.2,
     minSectionHeight = 50,
+    windowPadding = 0,
     collapseSmallUnconformities = true,
     allowUnitSelection = false,
     hybridScale,
     scale,
     axisType,
+    isTransitioning,
+    hideLabelsWhileTransitioning,
     ref,
     ...rest
   } = props;
@@ -71,6 +73,7 @@ function Column(props) {
     pixelScale,
     minPixelScale: _minPixelScale,
     minSectionHeight: _minSectionHeight,
+    windowPadding,
     collapseSmallUnconformities,
     // TODO: consider unifying scale and hybridScale options
     scale,
@@ -96,6 +99,8 @@ function Column(props) {
       allowUnitSelection: showUnitPopover || allowUnitSelection,
       onUnitSelected,
       selectedUnit,
+      isTransitioning,
+      hideLabelsWhileTransitioning,
       ref
     },
     column_module.default(ColumnInner, { ageAxisComponent, ...rest }, [
@@ -127,6 +132,8 @@ function ColumnInner(props) {
     timescaleLevels,
     maxInternalColumns,
     onMouseOver,
+    onClickTimescaleInterval,
+    timescaleIntervalStyle,
     ageAxisComponent = ageAxis.CompositeAgeAxis
   } = props;
   const { axisType } = store.useMacrostratColumnData();
@@ -163,7 +170,9 @@ function ColumnInner(props) {
       column_module.default(ageAxisComponent),
       column_module.default.if(_showTimescale)(section.CompositeTimescale, {
         levels: timescaleLevels,
-        unconformityLabels: _timescaleUnconformityLabels
+        unconformityLabels: _timescaleUnconformityLabels,
+        onClickInterval: onClickTimescaleInterval,
+        intervalStyle: timescaleIntervalStyle
       }),
       column_module.default(section.SectionsColumn, {
         unitComponent,
@@ -233,7 +242,7 @@ function ColumnBasicInfo({
   return column_module.default("div.column-info", [
     column_module.default("div.column-title-row", [
       column_module.default("h2", data.col_name),
-      column_module.default.if(showColumnID)("h4", column_module.default(identifiers.Identifier, { id: data.col_id }))
+      column_module.default.if(showColumnID)("h4", column_module.default(dataComponents.Identifier, { id: data.col_id }))
     ]),
     column_module.default(dataComponents.DataField, { row: true, label: "Group", value: data.col_group }),
     column_module.default.if(showReferences)(panel.ReferencesField, {