diff --git a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
index 01bff86ef0..75f2dbf64d 100644
--- a/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
+++ b/apps/fishing-map/features/vessel-group-report/insights/VesselGroupReportInsightGaps.tsx
@@ -53,7 +53,44 @@ const VesselGroupReportInsightGap = ({
) : error ? (
) : (
- {gapsTitle}
+ isOpen !== isExpanded && setIsExpanded(!isExpanded)}
+ >
+ {vessels && vessels?.length > 0 && (
+
+ {vessels.map((vessel) => {
+ const vesselId = getVesselId(vessel)
+ const isExpandedVessel = expandedVesselIds.includes(vesselId)
+ return (
+ -
+ {
+ setExpandedVesselIds((expandedIds) => {
+ return isOpen && id
+ ? [...expandedIds, id]
+ : expandedIds.filter((vesselId) => vesselId !== id)
+ })
+ }}
+ >
+ {eventsByVessel[vesselId].map((event) => {
+ return event.aisOff.join(',')
+ })}
+
+
+ )
+ })}
+
+ )}
+
)}
)
diff --git a/libs/ui-components/src/collapsable/Collapsable.tsx b/libs/ui-components/src/collapsable/Collapsable.tsx
index ddb5b1be96..435d16849b 100644
--- a/libs/ui-components/src/collapsable/Collapsable.tsx
+++ b/libs/ui-components/src/collapsable/Collapsable.tsx
@@ -4,19 +4,29 @@ import { Icon } from '../icon'
import styles from './Collapsable.module.css'
interface CollapsableProps {
+ id?: string
open?: boolean
label?: string | ReactNode
children?: string | ReactNode
className?: string
- onToggle?: () => void
+ labelClassName?: string
+ onToggle?: (isOpen: boolean, id?: string) => void
}
export function Collapsable(props: CollapsableProps) {
- const { open = true, label, className, children, onToggle } = props
+ const { id, open = true, label, className, labelClassName, children, onToggle } = props
+
+ const handleToggle = (e: any) => {
+ e.stopPropagation()
+ if (onToggle) {
+ onToggle(e.nativeEvent.newState === 'open', id)
+ }
+ }
+
return (
-
-
- {label}
+
+
+ {label}
{children}