collapsable gap insights

GlobalFishingWatch · Sep 16, 2024 · 3c64496 · 3c64496
1 parent 9a5979d
commit 3c64496
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git 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 ? (
         <InsightError error={error as ParsedAPIError} />
       ) : (
-        <span>{gapsTitle}</span>
+        <Collapsable
+          open={isExpanded}
+          className={styles.collapsable}
+          labelClassName={styles.collapsableLabel}
+          label={gapsTitle}
+          onToggle={(isOpen) => isOpen !== isExpanded && setIsExpanded(!isExpanded)}
+        >
+          {vessels && vessels?.length > 0 && (
+            <ul>
+              {vessels.map((vessel) => {
+                const vesselId = getVesselId(vessel)
+                const isExpandedVessel = expandedVesselIds.includes(vesselId)
+                return (
+                  <li>
+                    <Collapsable
+                      id={vesselId}
+                      open={isExpandedVessel}
+                      className={styles.collapsable}
+                      labelClassName={styles.collapsableLabel}
+                      label={getVesselProperty(vessel, 'nShipname')}
+                      onToggle={(isOpen, id) => {
+                        setExpandedVesselIds((expandedIds) => {
+                          return isOpen && id
+                            ? [...expandedIds, id]
+                            : expandedIds.filter((vesselId) => vesselId !== id)
+                        })
+                      }}
+                    >
+                      {eventsByVessel[vesselId].map((event) => {
+                        return event.aisOff.join(',')
+                      })}
+                    </Collapsable>
+                  </li>
+                )
+              })}
+            </ul>
+          )}
+        </Collapsable>
       )}
     </div>
   )

diff --git 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 (
-    <details open={open} className={cx(styles.details, className)} onToggle={onToggle}>
-      <summary className={styles.summary}>
-        <span className={styles.label}>{label}</span>
+    <details id={id} open={open} className={styles.details} onToggle={handleToggle}>
+      <summary className={cx(styles.summary, className)}>
+        <span className={cx(styles.label, labelClassName)}>{label}</span>
         <Icon className={styles.icon} icon="arrow-down" />
       </summary>
       {children}