fix: Make sure SZ tooltip doesn't resize viewport

transitmatters · Jul 17, 2023 · f5797e3 · f5797e3
1 parent f2c90ae
commit f5797e3
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 14 deletions.
diff --git a/common/components/maps/LineMap.tsx b/common/components/maps/LineMap.tsx
@@ -33,9 +33,11 @@ export type SegmentRenderOptions = {
   labels?: SegmentLabel[];
 };
 
+export type TooltipSide = 'left' | 'right' | 'top';
+
 type TooltipRenderer = (props: {
   segmentLocation: SegmentLocation<true>;
-  isHorizontal: boolean;
+  side: TooltipSide;
 }) => React.ReactNode;
 
 type TooltipOptions = {
@@ -247,9 +249,12 @@ export const LineMap: React.FC<LineMapProps> = ({
   };
 
   const renderTooltip = () => {
+    const tooltipX = tooltipViewportCoordinates?.x;
+    const tooltipOnRightSide = tooltipX && tooltipX / window.innerWidth <= 0.5;
+    const tooltipSide = isHorizontal ? 'top' : tooltipOnRightSide ? 'right' : 'left';
     const tooltipContents =
       tooltipSegmentLocation &&
-      tooltip?.render({ segmentLocation: tooltipSegmentLocation, isHorizontal });
+      tooltip?.render({ segmentLocation: tooltipSegmentLocation, side: tooltipSide });
     if (tooltipViewportCoordinates && tooltipContents) {
       const { x, y } = viewportCoordsToContainer(tooltipViewportCoordinates);
       return (
@@ -258,7 +263,12 @@ export const LineMap: React.FC<LineMapProps> = ({
           style={{
             left: x,
             top: y,
-            transform: isHorizontal ? `translateY(-100%) translateX(-50%)` : `translateY(-50%)`,
+            transform:
+              tooltipSide === 'top'
+                ? `translate(-50%, -100%)`
+                : tooltipSide === 'left'
+                ? `translate(-100%, -50%)`
+                : `translateY(-50%)`,
           }}
         >
           {tooltipContents}

diff --git a/modules/slowzones/map/SlowZonesMap.tsx b/modules/slowzones/map/SlowZonesMap.tsx
@@ -6,7 +6,7 @@ import { LineMap, createDefaultDiagramForLine } from '../../../common/components
 import type { SlowZoneResponse, SpeedRestriction } from '../../../common/types/dataPoints';
 import type { SlowZonesLineName } from '../types';
 
-import type { SegmentLabel } from '../../../common/components/maps/LineMap';
+import type { SegmentLabel, TooltipSide } from '../../../common/components/maps/LineMap';
 import { getSlowZoneOpacity } from '../../../common/utils/slowZoneUtils';
 import { useDelimitatedRoute } from '../../../common/utils/router';
 import { segmentSlowZones } from './segment';
@@ -120,21 +120,19 @@ export const SlowZonesMap: React.FC<SlowZonesMapProps> = ({
 
   const renderSlowZonesTooltip = (options: {
     segmentLocation: SegmentLocation<true>;
-    isHorizontal: boolean;
+    side: TooltipSide;
   }) => {
     const {
       segmentLocation: { fromStationId, toStationId },
-      isHorizontal,
+      side,
     } = options;
     const slowSegment = segments.find(
       (seg) =>
         seg.segmentLocation.fromStationId === fromStationId &&
         seg.segmentLocation.toStationId === toStationId
     );
     if (slowSegment) {
-      return (
-        <SlowZonesTooltip isHorizontal={isHorizontal} segment={slowSegment} color={line.color} />
-      );
+      return <SlowZonesTooltip side={side} segment={slowSegment} color={line.color} />;
     }
 
     return null;

diff --git a/modules/slowzones/map/SlowZonesTooltip.module.css b/modules/slowzones/map/SlowZonesTooltip.module.css
@@ -5,8 +5,9 @@
     --tooltip-background: white;
 }
 
-.vertical {
+.reverseVertical {
     flex-direction: row;
+    flex-direction: row-reverse;
 }
 
 .horizontal {
@@ -24,6 +25,10 @@
     border-right: 8px solid white;
 }
 
+.triangleReverse {
+    transform: scaleX(-1);
+}
+
 .triangleHorizontal {
     width: 0;
     height: 0;

diff --git a/modules/slowzones/map/SlowZonesTooltip.tsx b/modules/slowzones/map/SlowZonesTooltip.tsx
@@ -5,6 +5,7 @@ import { getParentStationForStopId } from '../../../common/utils/stations';
 
 import { BasicWidgetDataLayout } from '../../../common/components/widgets/internal/BasicWidgetDataLayout';
 import { DeltaTimeWidgetValue } from '../../../common/types/basicWidgets';
+import type { TooltipSide } from '../../../common/components/maps/LineMap';
 import type { SlowZoneResponse, SpeedRestriction } from '../../../common/types/dataPoints';
 import { prettyDate } from '../../../common/utils/date';
 
@@ -16,8 +17,8 @@ import styles from './SlowZonesTooltip.module.css';
 
 interface SlowZonesTooltipProps {
   segment: SlowZonesSegment;
-  isHorizontal: boolean;
   color: string;
+  side: TooltipSide;
 }
 
 const getOrderedStationNames = (slowZones: ByDirection<SlowZoneResponse[]>) => {
@@ -44,11 +45,13 @@ const getOrderedStationNames = (slowZones: ByDirection<SlowZoneResponse[]>) => {
 
 export const SlowZonesTooltip: React.FC<SlowZonesTooltipProps> = (props) => {
   const {
-    isHorizontal,
+    side,
     color,
     segment: { slowZones, speedRestrictions },
   } = props;
 
+  const isHorizontal = side === 'top';
+
   const { fromStationName, toStationName } = useMemo(
     () => getOrderedStationNames(slowZones)!,
     [slowZones]
@@ -125,9 +128,18 @@ export const SlowZonesTooltip: React.FC<SlowZonesTooltipProps> = (props) => {
   return (
     <div
       style={{ '--tooltip-accent-color': color } as React.CSSProperties}
-      className={classNames(styles.slowZonesTooltip, isHorizontal && styles.horizontal)}
+      className={classNames(
+        styles.slowZonesTooltip,
+        isHorizontal && styles.horizontal,
+        side === 'left' && styles.reverseVertical
+      )}
     >
-      <div className={isHorizontal ? styles.triangleHorizontal : styles.triangle}></div>
+      <div
+        className={classNames(
+          isHorizontal ? styles.triangleHorizontal : styles.triangle,
+          side === 'left' && styles.triangleReverse
+        )}
+      ></div>
       <div className={classNames(styles.content, 'shadow-dataBox')}>
         <div className={classNames(styles.title)}>
           {fromStationName} — {toStationName}