handle clicks

Author: davidsklar99

pages/lex/timescales/+Page.ts

@@ -15,7 +15,6 @@ export function Page() {
     const [clickedInterval, setClickedInterval] = useState(null);
     const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/timescales?all")?.success.data;
 
-    console.log("clickedInterval", clickedInterval);
     useEffect(() => {
       if (!clickedInterval) return;
 
@@ -35,7 +34,7 @@ export function Page() {
 
       fetchInterval();
     }, [clickedInterval]);
-    
+
     if (res == null) return h("div", "Loading...");
 
     const handleChange = (event) => {
@@ -99,7 +98,15 @@ export function Page() {
             },
           }),
         ]), 
-        h(Timescale, { length: timescaleWidth, levels: [1,5], ageRange: [age[0], age[1]], absoluteAgeScale: true, onClick: handleClick })
+        h('div.timescale', 
+          h(Timescale, { 
+            length: timescaleWidth, 
+            levels: [1,5], 
+            ageRange: [age[0], age[1]], 
+            absoluteAgeScale: true, 
+            onClick: handleClick 
+          }
+        ))
       ]),
       h(Divider),
       h('div.timescale-list', filtered.map((data) => TimescaleItem({ data }))),

pages/lex/timescales/@id/+Page.client.ts

@@ -7,12 +7,14 @@ import { ContentPage } from "~/layouts";
 import { usePageContext } from 'vike-react/usePageContext';
 import { Timescale } from "@macrostrat/timescale";
 import { titleCase } from "../../index";
+import { useState, useEffect } from "react";
 
 
 export function Page() {
     const pageContext = usePageContext();
     const id = parseInt(pageContext.urlParsed.pathname.split("/")[3]);
     const res = useAPIResult(SETTINGS.apiV2Prefix + "/defs/timescales?all")?.success.data;
+    const [clickedInterval, setClickedInterval] = useState(null);
 
     if (res == null) return h("div", "Loading...");
 
@@ -22,15 +24,33 @@ export function Page() {
     if (timeRes == null) return h("div", "Timescale not found");
 
     const { min_age, max_age, timescale } = timeRes;
-    const width = window.screen.width;
-    const timescaleWidth = width * .6;
+
+    const handleClick = (timescale) => {
+        console.log("Clicked timescale:", timescale);
+        /*
+        const parent = timescale.target.parentElement;
+        let selected;
+
+        // container clicked
+        const containerClickedData = parent.className.split(" ")[1];
+
+        if(containerClickedData === "interval-label") {
+          const labelClickedData = parent.parentElement.parentElement.className.split(" ")[1];
+          selected = labelClickedData
+        } else {
+          selected = containerClickedData
+        }
+
+        setClickedInterval(selected);
+        */
+    }
 
     return h(ContentPage, [
         h(PageBreadcrumbs, { title: "#" + id }),
         h('div.timescale-content', [
             h('h1', titleCase(timescale)),
             h('h3', max_age + " - " +  min_age + " Ma"),
-            h(Timescale, { levels: [0,5], ageRange: [min_age, max_age], orientation: "vertical" }),
+            h('div.timescale', h(Timescale, { levels: [0,5], ageRange: [min_age, max_age], orientation: "vertical"})),
         ])
     ]);
 }

pages/lex/timescales/@id/main.scss

@@ -16,4 +16,4 @@ tspan {
 
 .visx-line {
     stroke: var(--text-color);
-}
+}

pages/lex/timescales/main.module.scss

@@ -70,4 +70,8 @@ h3, h2, h1 {
 
 ul, li { 
   margin: 0;
+}
+
+.timescale {
+  cursor: pointer;
 }