@xyo-network/react-map 2.26.44

package/src/hooks/useFetchPayloads.tsx

@@ -0,0 +1,57 @@
+import { useAsyncEffect } from '@xylabs/react-shared'
+import { XyoApiError } from '@xyo-network/api'
+import { useArchive } from '@xyo-network/react-archive'
+import { useArchivistApi } from '@xyo-network/react-archivist-api'
+import { useState } from 'react'
+
+import { NetworkXyoLocationHeatmapQuadkeyAnswerPayload } from '../types'
+import { useQuadKeyPayloadsToFeatures } from './useQuadKeyPayloadsToFeatures'
+
+const useFetchPayloads = (hashes?: string[]) => {
+  const { api: ArchivistApi } = useArchivistApi()
+  const { archive } = useArchive()
+  const [apiError, setApiError] = useState<XyoApiError>()
+  const [payloads, setPayloads] = useState<NetworkXyoLocationHeatmapQuadkeyAnswerPayload[]>()
+  const { features, multipleFeatureSets } = useQuadKeyPayloadsToFeatures(payloads)
+  const [notFound, setNotFound] = useState(false)
+  const [inFlight, setInFlight] = useState(false)
+
+  useAsyncEffect(
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    async (mounted) => {
+      if (ArchivistApi && payloads === undefined && hashes?.length && !inFlight) {
+        try {
+          setInFlight(true)
+          const payloads = await Promise.allSettled(hashes.map((hash) => ArchivistApi.archive(archive).payload.hash(hash).get()))
+          if (payloads?.length) {
+            const validPayloads: NetworkXyoLocationHeatmapQuadkeyAnswerPayload[] = []
+            payloads.forEach((result) => {
+              if (result.status === 'fulfilled' && result.value && result.value[0]) {
+                validPayloads.push(result.value[0] as NetworkXyoLocationHeatmapQuadkeyAnswerPayload)
+              } else if (result.status === 'rejected') {
+                setApiError(result.reason)
+              }
+            })
+
+            if (validPayloads.length) {
+              setPayloads(validPayloads)
+            }
+
+            if (validPayloads.length === 0 && apiError === undefined) {
+              setNotFound(true)
+            }
+          }
+        } catch (e) {
+          if (mounted()) {
+            setApiError(e as XyoApiError)
+          }
+        }
+      }
+    },
+    [ArchivistApi, apiError, archive, hashes, inFlight, payloads]
+  )
+
+  return { apiError, features, multipleFeatureSets, notFound }
+}
+
+export { useFetchPayloads }

package/src/hooks/useFindHashes.tsx

@@ -0,0 +1,16 @@
+import { useNetwork, XyoArchivistPreset } from '@xyo-network/react-network'
+
+const parseStaticAnswerHash = () => {
+  return 'c7bbf61f61cfd4a1b2def160c28136fc1d100d39fbdb67b227a2c6e558d9d3a5'
+}
+
+const useFindHashes = () => {
+  const { network } = useNetwork()
+  const exploreMapHashes = (network?.nodes?.find((node) => node.type === 'archivist') as XyoArchivistPreset)?.explorerMapHashes
+  const animatedAnswerHashes = exploreMapHashes?.animatedAnswerHashes || []
+  const staticAnswerHash = exploreMapHashes?.staticAnswerHash || parseStaticAnswerHash()
+
+  return [staticAnswerHash, ...animatedAnswerHashes]
+}
+
+export { useFindHashes }

package/src/hooks/useHeatMapColors.tsx

@@ -0,0 +1,28 @@
+import { useTheme } from '@mui/material'
+
+import { ColorGradientLegendProps, XyoAnimatedHeatMapColorProps } from '../Colors'
+
+const useHeatMapColors = () => {
+  const theme = useTheme()
+  const staticMapColor = '#FFFF75'
+  const highUsageColor = '#FF0000'
+
+  const heatMapColorProps: XyoAnimatedHeatMapColorProps = {
+    highUsageColor,
+    lowUsageColor: '#FFB3B3',
+    staticMapColor,
+  }
+
+  const legendProps: ColorGradientLegendProps = {
+    endColor: highUsageColor,
+    endLabel: 'High',
+    heading: 'Network Usage',
+    startColor: staticMapColor,
+    startLabel: 'Low',
+    textColor: theme.palette.common.white,
+  }
+
+  return { heatMapColorProps, legendProps }
+}
+
+export { useHeatMapColors }

package/src/hooks/useQuadKeyPayloadsToFeatures.tsx

@@ -0,0 +1,48 @@
+import { GeoJson } from '@xyo-network/sdk-geo'
+import { Feature, Geometry } from 'geojson'
+import { useEffect, useState } from 'react'
+
+import { NetworkXyoLocationHeatmapQuadkeyAnswerPayload } from '../types'
+
+const quadKeyToFeature = ({ quadkey, density }: { quadkey: string; density: number }) => {
+  const polygonFeature = new GeoJson(quadkey).polygonFeature()
+  polygonFeature.properties = {
+    count: density,
+    density,
+  }
+  return polygonFeature
+}
+
+const setDensity = (feature: Feature) => {
+  if (feature.properties) {
+    feature.properties.value = feature.properties.density / 5
+  }
+  return feature
+}
+
+const useQuadKeyPayloadsToFeatures = (payloads?: NetworkXyoLocationHeatmapQuadkeyAnswerPayload[] | NetworkXyoLocationHeatmapQuadkeyAnswerPayload) => {
+  const [multipleFeatureSets, setMultipleFeatureSets] = useState<Feature<Geometry>[][]>([[]])
+  const [features, setFeatures] = useState<Feature<Geometry>[]>([])
+
+  useEffect(() => {
+    // Convert Multiple Payloads from Quadkey to GeoJson
+    if (Array.isArray(payloads)) {
+      const payloadsArray = payloads as NetworkXyoLocationHeatmapQuadkeyAnswerPayload[]
+      const mappedFeatures = payloadsArray?.map((payload) => payload.result.map(quadKeyToFeature))
+
+      setMultipleFeatureSets(mappedFeatures.map((features) => features.map(setDensity)))
+    }
+
+    // Convert Single Payload from Quadkey to GeoJson
+    if (payloads && (payloads as NetworkXyoLocationHeatmapQuadkeyAnswerPayload).result) {
+      const singlePayload = payloads as NetworkXyoLocationHeatmapQuadkeyAnswerPayload
+      const mappedFeatures = singlePayload.result.map(quadKeyToFeature)
+
+      setFeatures(mappedFeatures.map(setDensity))
+    }
+  }, [payloads])
+
+  return { features, multipleFeatureSets }
+}
+
+export { useQuadKeyPayloadsToFeatures }

package/src/index.ts

@@ -0,0 +1,9 @@
+export * from './AnimatedHeatMapSettings'
+export * from './Colors'
+export * from './Components'
+export * from './Contexts'
+export * from './hooks'
+export * from './Layers'
+export * from './MapBoxClasses'
+export * from './Settings'
+export * from './types'

package/src/lib/XyoMapBoxBaseProps.ts

@@ -0,0 +1,19 @@
+import { FlexBoxProps } from '@xylabs/react-flexbox'
+import { Feature } from 'geojson'
+import { MapboxOptions } from 'mapbox-gl'
+import { ReactNode } from 'react'
+
+import { XyoMapLayer } from '../Layers'
+
+export interface XyoMapBoxBaseProps extends FlexBoxProps {
+  disableControls?: boolean
+  disableFitToPoints?: boolean
+  features?: Feature[]
+  layers?: XyoMapLayer[]
+  mapBoxOptions?: Partial<MapboxOptions>
+  fitToPointsPadding?: number
+  requestLocation?: boolean
+  zoom?: number
+  legend?: ReactNode
+  accessToken: string
+}

package/src/lib/XyoMapStyle.ts

@@ -0,0 +1,8 @@
+export enum XyoMapStyle {
+  Dark = 'mapbox/dark-v10',
+  Light = 'mapbox/light-v10',
+  Outdoors = 'mapbox/outdoors-v11',
+  Satellite = 'mapbox/satellite-v9',
+  SatelliteStreets = 'mapbox/satellite-streets-v11',
+  Streets = 'mapbox/streets-v11',
+}

package/src/lib/index.ts

@@ -0,0 +1,2 @@
+export * from './XyoMapBoxBaseProps'
+export * from './XyoMapStyle'

package/src/types/NetworkLocationAnswerBase.ts

@@ -0,0 +1,10 @@
+import { XyoPayload } from '@xyo-network/payload'
+import { Feature, Point, Polygon } from 'geojson'
+
+interface NetworkLocationAnswerBase<T> extends XyoPayload {
+  result: T
+}
+
+export type NetworkXyoLocationAnswerPayload = NetworkLocationAnswerBase<{ features: Feature<Point>[] }>
+export type NetworkXyoLocationHeatmapAnswerPayload = NetworkLocationAnswerBase<{ features: Feature<Polygon>[] }>
+export type NetworkXyoLocationHeatmapQuadkeyAnswerPayload = NetworkLocationAnswerBase<{ quadkey: string; density: number }[]>

package/src/types/index.ts

@@ -0,0 +1 @@
+export * from './NetworkLocationAnswerBase'