Updated column selection preview

Author: davenquinn

packages/column-views/src/column.module.sass

@@ -11,6 +11,7 @@
   .column
     display: flex
     flex-direction: row
+    position: relative
 
     .age-axis-label
       writing-mode: vertical-lr

packages/column-views/src/selection-popover.ts

@@ -25,7 +25,7 @@ export function UnitDetailsPopover({
     },
     h(
       Popover,
-      { content, isOpen: true, usePortal: false, boundary },
+      { content, isOpen: true, usePortal: false, boundary, position: "right" },
       h("span.popover-target")
     )
   );
@@ -52,13 +52,26 @@ export function LegendPanelHeader({ title, id, onClose }) {
 }
 
 export function UnitSelectionPopover(props) {
+  const { position } = props;
   const unit = useSelectedUnit();
   if (unit == null) {
     return null;
   }
 
   return h(
     "div.unit-popover-container",
-    h(UnitDetailsPopover, h(JSONView, { data: unit, showRoot: false }))
+    h(
+      UnitDetailsPopover,
+      {
+        style: {
+          position: "absolute",
+          top: position?.y,
+          width: position?.width,
+          left: position?.x,
+          height: position?.height,
+        },
+      },
+      h(JSONView, { data: unit, showRoot: false })
+    )
   );
 }

packages/column-views/src/units/boxes.ts

@@ -25,7 +25,7 @@ import styles from "./boxes.module.sass";
 
 const h = hyper.styled(styles);
 
-interface RectBounds {
+export interface RectBounds {
   x: number;
   y: number;
   width: number;
@@ -115,9 +115,6 @@ function Unit(props: UnitProps) {
       ref,
       ...bounds,
       fill,
-      onMouseOver() {
-        console.log(d);
-      },
       onClick,
     }),
     h.if(selected)("rect.selection-overlay", bounds),
@@ -135,7 +132,6 @@ function useUnitSelectionManager(
 
   const onClick = useCallback(
     (evt: Event) => {
-      console.log(ref.current, evt);
       selectUnit(ref.current, evt);
     },
     [unit, ref, selectUnit]

packages/column-views/stories/column.stories.ts

@@ -18,6 +18,7 @@ import { PatternProvider } from "@macrostrat/column-components/stories/base-sect
 import "@macrostrat/style-system";
 import { UnitSelectionPopover } from "../src/selection-popover";
 import { createRef, DOMElement, useEffect, useState } from "react";
+import { RectBounds } from "../src/units/boxes";
 
 const h = hyper.styled(styles);
 
@@ -144,17 +145,10 @@ export function WithBasicUnitSelection() {
   );
 }
 
-interface ItemPosition {
-  x: number;
-  y: number;
-  width: number;
-  height: number;
-}
-
 export function WithUnitSelectionPopover() {
   const ref = createRef<HTMLElement>();
   // Selected item position
-  const [position, setPosition] = useState<ItemPosition | null>(null);
+  const [position, setPosition] = useState<RectBounds | null>(null);
 
   useEffect(() => {
     if (position == null) return;
@@ -183,7 +177,7 @@ export function WithUnitSelectionPopover() {
       },
     },
     h(BasicColumn, { id: 432, showLabelColumn: true, columnRef: ref }, [
-      h(UnitSelectionPopover),
+      h(UnitSelectionPopover, { position }),
     ])
   );
 }