Skip to content

Commit

Permalink
fix environmental tooltip
Browse files Browse the repository at this point in the history
  • Loading branch information
@j8seangel
j8seangel committed May 13, 2024
1 parent e254ff6 commit d87213d
Show file tree
Hide file tree
Showing 7 changed files with 45 additions and 40 deletions.
18 changes: 9 additions & 9 deletions apps/fishing-map/features/map/popups/EnvironmentLayers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@ import { format } from 'd3-format'
import { Icon } from '@globalfishingwatch/ui-components'
import { HEATMAP_STATIC_PROPERTY_ID } from '@globalfishingwatch/layer-composer'
import { DataviewType } from '@globalfishingwatch/api-types'
import { FourwingsHeatmapPickingObject } from '@globalfishingwatch/deck-layers'
import styles from './Popup.module.css'

type ContextTooltipRowProps = {
// TODO:deck review typing here
features: any[]
features: FourwingsHeatmapPickingObject[]
showFeaturesDetails: boolean
}

Expand All @@ -28,13 +28,16 @@ function EnvironmentTooltipSection({
return (
<Fragment>
{features.map((feature, index) => {
console.log('🚀 ~ {features.map ~ feature:', feature)
const isHeatmapFeature =
feature.type === DataviewType.HeatmapAnimated ||
feature.type === DataviewType.HeatmapStatic
feature.subcategory === DataviewType.HeatmapAnimated ||
feature.subcategory === DataviewType.HeatmapStatic
const value =
feature.type === DataviewType.HeatmapAnimated
feature.subcategory === DataviewType.HeatmapAnimated
? feature.value
: feature.properties?.[HEATMAP_STATIC_PROPERTY_ID]

const unit = feature.sublayers?.[0]?.unit
return (
<div key={`${feature.title}-${index}`} className={styles.popupSection}>
<Icon
Expand All @@ -46,10 +49,7 @@ function EnvironmentTooltipSection({
{showFeaturesDetails && <h3 className={styles.popupSectionTitle}>{feature.title}</h3>}
<div className={styles.row}>
<span className={styles.rowText}>
{parseEnvironmentalValue(value)}{' '}
{/* TODO will need to not pick from temporalgrid once user polygons support units */}
{feature?.unit && <span>{feature.temporalgrid?.unit}</span>}
{feature.unit && <span>{feature.unit}</span>}
{parseEnvironmentalValue(value)} {unit && <span>{unit}</span>}
</span>
</div>
</div>
Expand Down
50 changes: 26 additions & 24 deletions apps/fishing-map/features/map/popups/PopupWrapper.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ import ActivityTooltipRow from './ActivityLayers'
import EncounterTooltipRow from './EncounterTooltipRow'
import ContextTooltipSection from './ContextLayers'
import VesselEventsLayers from './VesselEventsLayers'
import EnvironmentTooltipSection from './EnvironmentLayers'

const overflowMiddlware: Middleware = {
name: 'overflow',
Expand Down Expand Up @@ -187,30 +188,31 @@ function PopupWrapper({ interaction, type = 'hover', className = '', onClose }:
)
}
// TODO: deck restore this popup
// case DataviewCategory.Environment: {
// const contextEnvironmentalFeatures = features.filter(
// (feature) =>
// feature.type === DataviewType.Context ||
// feature.type === DataviewType.UserContext
// )
// const environmentalFeatures = features.filter(
// (feature) =>
// feature.type !== DataviewType.Context &&
// feature.type !== DataviewType.UserContext
// )
// return (
// <Fragment key={featureCategory}>
// <ContextTooltipSection
// features={contextEnvironmentalFeatures}
// showFeaturesDetails={type === 'click'}
// />
// <EnvironmentTooltipSection
// features={environmentalFeatures}
// showFeaturesDetails={type === 'click'}
// />
// </Fragment>
// )
// }
case DataviewCategory.Environment: {
// TODO:deck review if this is needed
// const contextEnvironmentalFeatures = features.filter(
// (feature) =>
// feature.type === DataviewType.Context ||
// feature.type === DataviewType.UserContext
// )
// const environmentalFeatures = features.filter(
// (feature) =>
// feature.type !== DataviewType.Context &&
// feature.type !== DataviewType.UserContext
// )
return (
<Fragment key={featureCategory}>
{/* <ContextTooltipSection
features={contextEnvironmentalFeatures}
showFeaturesDetails={type === 'click'}
/> */}
<EnvironmentTooltipSection
features={features as SliceExtendedFourwingsPickingObject[]}
showFeaturesDetails={type === 'click'}
/>
</Fragment>
)
}
case DataviewCategory.Context: {
// const defaultContextFeatures = features.filter(
// (feature) => feature.type === DataviewType.Context
Expand Down
1 change: 1 addition & 0 deletions libs/deck-layer-composer/src/resolvers/fourwings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export const resolveDeckFourwingsLayerProps: DeckResolverFunction<FourwingsLayer
startTime,
endTime,
category: dataview.category!,
subcategory: dataview.config?.type!,
static: dataview.config?.type === DataviewType.HeatmapStatic,
sublayers,
comparisonMode,
Expand Down
5 changes: 2 additions & 3 deletions libs/deck-layers/src/layers/fourwings/fourwings.types.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { DataviewCategory } from '@globalfishingwatch/api-types'
import { ColorRampsIds } from '../../utils'
import { BaseLayerProps } from '../../types'
import { HEATMAP_HIGH_RES_ID, HEATMAP_ID, POSITIONS_ID } from './fourwings.config'
import {
FourwingsHeatmapPickingInfo,
Expand Down Expand Up @@ -39,10 +39,9 @@ export type FourwingsDeckSublayer = {
vesselGroups?: string | string[]
}

export type BaseFourwingsLayerProps = {
export type BaseFourwingsLayerProps = BaseLayerProps & {
startTime: number
endTime: number
category: DataviewCategory
sublayers: FourwingsDeckSublayer[]
tilesUrl?: string
}
Expand Down
8 changes: 4 additions & 4 deletions libs/deck-layers/src/layers/fourwings/heatmap/FourwingsHeatmapLayer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,12 @@ import {
rgbaStringToObject,
rgbaToDeckColor,
} from '../../../utils'
import { FourwingsPickingObject } from '../fourwings.types'
import { EMPTY_CELL_COLOR, aggregateCell, getIntervalFrames } from './fourwings-heatmap.utils'
import {
FourwingsComparisonMode,
FourwingsHeatmapLayerProps,
FourwingsHeatmapPickingInfo,
FourwingsHeatmapPickingObject,
} from './fourwings-heatmap.types'

export class FourwingsHeatmapLayer extends CompositeLayer<FourwingsHeatmapLayerProps> {
Expand Down Expand Up @@ -46,7 +46,7 @@ export class FourwingsHeatmapLayer extends CompositeLayer<FourwingsHeatmapLayerP
availableIntervals,
bufferedStart: tilesCache.bufferedStart,
})
const object: FourwingsPickingObject = {
const object: FourwingsHeatmapPickingObject = {
...(info.object || ({} as FourwingsFeature)),
layerId: this.root.id,
id: id,
Expand All @@ -60,12 +60,12 @@ export class FourwingsHeatmapLayer extends CompositeLayer<FourwingsHeatmapLayerP
comparisonMode,
}
if (info.object) {
object.sublayers = object.sublayers.flatMap((sublayer, i) =>
object.sublayers = object.sublayers?.flatMap((sublayer, i) =>
info.object?.properties?.aggregatedValues?.[i]
? { ...sublayer, value: info.object?.properties?.aggregatedValues?.[i] }
: []
)
if (!object.sublayers.length) {
if (!object.sublayers?.length) {
return { ...info, object: undefined }
}
}
Expand Down
1 change: 1 addition & 0 deletions libs/deck-layers/src/layers/fourwings/heatmap/FourwingsHeatmapStaticLayer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,7 @@ export class FourwingsHeatmapStaticLayer extends CompositeLayer<FourwingsHeatmap
info.object.properties.values = [[info.object.properties.count]]
}
info.object.layerId = this.root.id
info.object.sublayers = this.props.sublayers
info.object.category = this.props.category
info.object.subcategory = this.props.subcategory
// TODO:deck fix this typing and create FourwingsStaticPickingInfo
Expand Down
2 changes: 2 additions & 0 deletions libs/deck-layers/src/layers/fourwings/heatmap/fourwings-heatmap.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,12 @@ export type FourwingsHeatmapPickingObject = FourwingsFeature<
> &
BasePickingObject & {
title: string
color?: string
tile: { x: number; y: number; z: number }
startTime: number
endTime: number
interval: FourwingsInterval
value?: number
sublayers: FourwingsDeckSublayer[]
comparisonMode?: FourwingsComparisonMode
}
Expand Down

0 comments on commit d87213d

Please sign in to comment.