Fishing map/timebar fixes (#2922)

GlobalFishingWatch · Nov 15, 2024 · e8082d9 · e8082d9
2 parents 0ba2986 + 2b2e2cf
commit e8082d9
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 17 deletions.
diff --git a/libs/deck-layers/src/layers/vessel/vessel.utils.ts b/libs/deck-layers/src/layers/vessel/vessel.utils.ts
@@ -121,7 +121,7 @@ export const getSegmentsFromData = memoize(
     return segments
   },
   (data, params) => {
-    return `${data?.length}-${JSON.stringify(params || {})}`
+    return `${data?.startIndices?.join(',')}-${JSON.stringify(params || {})}`
   }
 )
 

diff --git a/libs/timebar/src/charts/tracks-events.module.css b/libs/timebar/src/charts/tracks-events.module.css
@@ -1,4 +1,7 @@
 .Events {
+  --loiteringIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12"><path fill="%23CFA9F9" fill-rule="nonzero" stroke="%23163F89" stroke-width=".5" d="m15.6 6-5.17 5.3H6L.7 6 6 .7h4.43L15.6 6Zm-2.2 0L9.58 2.17H6.61L2.81 6l3.8 3.82h2.97L13.4 6Z"/></svg>');
+  --encounterIcon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12"><path fill="%23FAE9A0" fill-rule="evenodd" stroke="%23163F89" stroke-width=".5" d="M.7 6 6 .7h5.3L16.83 6l-5.53 5.3H6z"/></svg>');
+
   position: absolute;
 }
 

diff --git a/libs/timebar/src/charts/tracks-events.tsx b/libs/timebar/src/charts/tracks-events.tsx
@@ -2,8 +2,6 @@ import React, { useContext, useMemo } from 'react'
 import cx from 'classnames'
 import { useSetAtom } from 'jotai'
 import TimelineContext, { TimelineScale, TrackGraphOrientation } from '../timelineContext'
-import EncounterIcon from '../icons/events-shapes/encounter.svg'
-import LoiteringIcon from '../icons/events-shapes/loitering.svg'
 import {
   TimebarChartData,
   TimebarChartItem,
@@ -134,19 +132,7 @@ const TracksEvents = ({
     useTrackColor,
   ])
 
-  return (
-    <div
-      className={styles.Events}
-      style={
-        {
-          '--encounterIcon': `url(${EncounterIcon})`,
-          '--loiteringIcon': `url(${LoiteringIcon})`,
-        } as React.CSSProperties
-      }
-    >
-      {trackEvents}
-    </div>
-  )
+  return <div className={styles.Events}>{trackEvents}</div>
 }
 
 export default TracksEvents
diff --git a/libs/timebar/src/components/timeline-handler.tsx b/libs/timebar/src/components/timeline-handler.tsx
@@ -22,7 +22,7 @@ const Handler = (props: HandlerProps) => (
     })}
     style={{ left: props.dragging === true ? props.mouseX || 0 : props.x }}
   >
-    <Icon icon="drag" />
+    <Icon icon="drag-timebar" />
   </button>
 )
 

diff --git a/libs/ui-components/src/icon/icon.config.ts b/libs/ui-components/src/icon/icon.config.ts
@@ -33,6 +33,7 @@ const icons = [
   'dots',
   'download',
   'drag',
+  'drag-timebar',
   'draw',
   'draw-points',
   'edit-off',

diff --git a/libs/ui-components/src/icon/icons/drag-timebar.svg b/libs/ui-components/src/icon/icons/drag-timebar.svg