tooltip / map cleanup

nofurtherinformation · nofurtherinformation · commit 61c500a6f493 · 2024-03-29T14:59:54.000-05:00
diff --git a/components/Map/Map.tsx b/components/Map/Map.tsx
@@ -5,7 +5,7 @@ import { Provider, useSelector } from "react-redux"
 import { MapboxOverlay, MapboxOverlayProps } from "@deck.gl/mapbox/typed"
 import GlMap, { NavigationControl, useControl } from "react-map-gl"
 import "mapbox-gl/dist/mapbox-gl.css"
-import React, { useMemo, useRef } from "react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
 import { MVTLayer } from "@deck.gl/geo-layers/typed"
 import DropdownMenuDemo from "components/Dropdown/Dropdown"
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
@@ -40,27 +40,22 @@ const BreakText: React.FC<{ breaks: number[]; index: number; colors: number[][]
 const Tooltip: React.FC<{ dataService: DataService }> = ({ dataService }) => {
   const tooltip = useAppSelector((state) => state.map.tooltip)
   const { x, y, id } = tooltip || {}
+  // @ts-ignore
+  const data = dataService.tooltipResults[id]
+  const [_updateTrigger, setUpdateTrigger] = useState<boolean>(true)
 
-  const data = useMemo(() => {
-    if (!id) {
-      return []
-    }
-    const output = config.map((d) => {
-      const dataOutput = {
-        header: d.name,
-      } as any
-      const data = dataService.data[d.filename]?.[id]
-      if (data) {
-        d.columns.forEach((c) => {
-          dataOutput[c.name] = data[c.column]
-        })
+  useEffect(() => {
+    const main = async () => {
+      if (!id) {
+        return
       }
-      return dataOutput
-    })
-    return output
+      const tooltipData = await dataService.getTooltipValues(id)
+      setUpdateTrigger((v) => !v)
+    }
+    main()
   }, [id])
 
-  if (!x || !y || !id) {
+  if (!x || !y) {
     return null
   }
 
@@ -72,22 +67,26 @@ const Tooltip: React.FC<{ dataService: DataService }> = ({ dataService }) => {
         top: y + 10,
       }}
     >
-      {data.map((d, i) => {
-        const keys = Object.keys(d).filter((k) => k !== "header")
-        // nice skeumorphic shadow
-        return (
-          <p className="pb-2" key={i}>
-            <b>{d.header}</b>
-            <ul>
-              {keys.map((k,i) => (
-                <li key={i}>
-                  {k}: {d[k]}
-                </li>
-              ))}
-            </ul>
-          </p>
-        )
-      })}
+      {/* @ts-ignore */}
+      {data ? (
+        data.map((d: any, i: number) => {
+          const keys = Object.keys(d).filter((k) => k !== "header")
+          return (
+            <p className="pb-2" key={i}>
+              <b>{d.header}</b>
+              <ul>
+                {keys.map((k, i) => (
+                  <li key={i}>
+                    {k}: {d[k]}
+                  </li>
+                ))}
+              </ul>
+            </p>
+          )
+        })
+      ) : (
+        <p>Loading...</p>
+      )}
     </div>
   )
 }
@@ -134,8 +133,12 @@ export const Map = () => {
       updateTriggers: {
         getFillColor: [isReady, currentColumnSpec?.column, currentDataSpec?.filename, colorFunc],
       },
+      onClick: (info: any) => {
+        console.log(info)
+      },
       onHover: (info: any) => {
-        if (info?.x && info?.y && info?.object) {
+        const isFiltered = currentFilter && info.object?.properties?.GEOID?.startsWith(currentFilter) === false
+        if (info?.x && info?.y && info?.object && !isFiltered) {
           dispatch(setTooltipInfo({ x: info.x, y: info.y, id: info.object?.properties?.GEOID }))
         } else {
           dispatch(setTooltipInfo(null))
@@ -157,7 +160,7 @@ export const Map = () => {
   const handleSetColumn = (col: string | number) => dispatch(setCurrentColumn(col))
   const handleChangeData = (data: string) => dispatch(setCurrentData(data))
   const handleSetFilter = (filter: string) => dispatch(setCurrentFilter(filter))
-  
+
   return (
     <div style={{ width: "100vw", height: "100vh", position: "relative", top: 0, left: 0 }}>
       <div style={{ position: "absolute", bottom: "2rem", right: "1rem", zIndex: 1000 }}>
@@ -170,16 +173,9 @@ export const Map = () => {
           </p>
         </div>
       </div>
-      {/* <button style={{
-        position:'fixed',
-        top: 0,
-        left: 0,
-        zIndex: 500,
-        background:'red'
-      }} onClick={testfn}>TEST FN</button> */}
       <div className="absolute left-4 top-4 z-50">
         <DropdownMenuDemo>
-          <div className="p-4 max-w-[100vw]">
+          <div className="max-w-[100vw] p-4">
             <p>Choose Data</p>
             <hr />
             {config.map((c, i) => (
diff --git a/utils/data/service.ts b/utils/data/service.ts
@@ -16,6 +16,7 @@ export class DataService {
   db?: AsyncDuckDB
   baseURL: string = window.location.origin
   conn?: AsyncDuckDBConnection
+  tooltipResults: any = {}
 
   constructor(completeCallback?: (s: string) => void, config: DataConfig[] = defaultConfig) {
     this.config = config
@@ -79,27 +80,37 @@ export class DataService {
     }
   }
 
-  async runQuery(query: string) {
+  async runQuery(query: string, freshConn?: boolean) {
     await this.initDb()
     try {
-      return await runQuery({
-        conn: this.conn!,
+      const conn = freshConn ? await this.db!.connect() : this.conn!
+      const r =  await runQuery({
+        conn,
         query,
       })
+      if (freshConn) {
+        await conn.close()
+      }
+      return r
     } catch (e) {
       console.error(e)
       return []
     }
   }
-  async getQuantiles(column: string | number, table: string, n: number): Promise<Array<number>> {
+  async getQuantiles(column: string | number, table: string, n: number, idCol: string, filter?: string): Promise<Array<number>> {
     // breakpoints to use for quantile breaks
     // eg. n=5 - 0.2, 0.4, 0.6, 0.8 - 4 breaks
     // eg. n=4 - 0.25, 0.5, 0.75 - 3 breaks
     const quantileFractions = Array.from({ length: n - 1 }, (_, i) => (i + 1) / n)
-    const query = `SELECT 
+    let query = `SELECT 
       ${quantileFractions.map((f, i) => `approx_quantile("${column}", ${f}) as break${i}`)}
-      FROM ${this.getFromQueryString(table)};
+      FROM ${this.getFromQueryString(table)}
     `
+    if (filter) {
+      query += ` WHERE "${idCol}" LIKE '${filter}%';`
+    } else {
+      query += ";"
+    }
     const result = await this.runQuery(query)
     if (!result || result.length === 0) {
       console.error(`No results for quantile query: ${query}`)
@@ -114,7 +125,8 @@ export class DataService {
     reversed: boolean,
     column: string | number,
     table: string,
-    n: number
+    n: number,
+    filter?: string
   ) {
     // @ts-ignore
     const d3Colors = d3[colorScheme]?.[n]
@@ -133,15 +145,21 @@ export class DataService {
     if (reversed) {
       rgbColors.reverse()
     }
-    const quantiles = await this.getQuantiles(column, table, n)
-    const query = `
+    const quantiles = await this.getQuantiles(column, table, n, idColumn, filter)
+    let query = `
       SELECT "${column}", "${idColumn}",
       CASE 
         ${quantiles.map((q, i) => `WHEN "${column}" < ${q} THEN [${rgbColors[i]}]`).join("\n")}
+        WHEN "${column}" IS NULL THEN [120,120,120,0]
         ELSE [${rgbColors[rgbColors.length - 1]}]
         END as color
-        FROM ${this.getFromQueryString(table)};
+        FROM ${this.getFromQueryString(table)}
     `
+    if (filter) {
+      query += ` WHERE "${idColumn}" LIKE '${filter}%';`
+    } else {
+      query += ";"
+    }
     // @ts-ignore
     const colorValues = await this.runQuery(query)
     const colorMap = {}
@@ -156,41 +174,40 @@ export class DataService {
     }
   }
 
-  ingestData(data: Array<any>, config: DataConfig, dataStore: any) {
-    console.log(config, data[0])
-    for (let i = 0; i < data.length; i++) {
-      const row = data[i]
-      if (!row?.[config.id]) {
-        console.error(`Row ${i} in ${config.filename} is missing a valid id`)
+  async getTooltipValues(
+    id: string
+  ) {
+    if (this.tooltipResults[id]) {
+      return this.tooltipResults[id]
+    }
+    let data: any[] = []
+    for (let i = 0; i < this.config.length; i++) {
+      const c = this.config[i]
+      if (!c) {
         continue
       }
-      let id = `${row[config.id]}`
-      // if (id.length === 10) {
-      //   id = `0${id}`
-      // }
-      dataStore[id] = {
-        ...row,
-        id,
-      }
-      // @ts-ignore
-    }
-    console.log("All done!")
-    if (this.completeCallback) {
-      this.completeCallback(config.filename)
-    }
-    this.complete.push(config.filename)
-  }
-  async fetchData(config: DataConfig) {
-    if (this.complete.includes(config.filename)) {
-      return
-    }
-    await this.initDb()
-    const dataStore = this.data[config.filename]
-    if (this.data[config.filename]) {
-      // console.error(`Data store already exists for ${config.filename}`);
-      return
+
+      const query = `SELECT "${c.columns.map(spec => spec.column).join('","')}" FROM ${this.getFromQueryString(c.filename)} WHERE "${c.id}" = '${id}'`
+      const result = await this.runQuery(query, true)
+      data.push(result[0])
     }
-    this.data[config.filename] = {}
+    const mappedTooltipContent = this.config.map((c,i) => {
+      const dataOutput = {
+      header: c.name,
+      }
+      if (!data[i]) {
+        return dataOutput
+      }
+      const columns = JSON.parse(JSON.stringify(data![i]))
+      if (columns) {
+        c.columns.forEach((col) => {
+          // @ts-ignore
+          dataOutput[col.name] = columns[col.column]
+        })
+      }
+      return dataOutput
+    })
+    this.tooltipResults[id] = mappedTooltipContent
   }
 
   setCompleteCallback(cb: (s: string) => void) {
diff --git a/utils/hooks/useD3Color.ts b/utils/hooks/useD3Color.ts
@@ -1,3 +1,4 @@
+import { current } from "@reduxjs/toolkit"
 import * as d3 from "d3"
 import { useEffect, useMemo, useState } from "react"
 import tinycolor from "tinycolor2"
@@ -36,7 +37,7 @@ export const useMapColor: ColorHook = ({
   currentFilter,
 }) => {
   const [out, setOut] = useState<any>({
-    colorFunc: () => [120, 120, 120, 0],
+    colorFunc: () => [0, 0, 0, 0],
     breaks: [],
     colors: [],
   })
@@ -50,16 +51,16 @@ export const useMapColor: ColorHook = ({
         column,
         table,
         // @ts-ignore
-        breaksSchema.nBins || 5
+        breaksSchema.nBins || 5,
+        currentFilter
       )
-
       const colorFunc = (_id: string | number) => {
         const id = _id.toString()
         if (currentFilter?.length && id.startsWith(currentFilter) === false) {
           return [120, 120, 120, 0]
         }
         // @ts-ignore
-        return colorMap?.[+id] || [120, 120, 120, 0]
+        return colorMap?.[id] || [120, 120, 120, 0]
       }
       setOut({
         colorFunc,
@@ -68,6 +69,6 @@ export const useMapColor: ColorHook = ({
       })
     }
     main()
-  }, [table, column, colorScheme, JSON.stringify(breaksSchema.type)])
+  }, [table, column, colorScheme, JSON.stringify(breaksSchema.type), currentFilter])
   return out
 }
