@sybilion/uilib 1.2.24 → 1.3.0

package/src/components/ui/ChartAreaInteractive/overlays/PinOverlay/PinOverlay.tsx

@@ -4,7 +4,6 @@ import { useEffect, useRef, useState } from 'react';
 import { BaseChartWrapper } from '#uilib/components/ui/Chart/components';
 import { BaseChartWrapperProps } from '#uilib/components/ui/Chart/components/BaseChartWrapper';
 import { useDebounceCallback } from '#uilib/hooks/useDebounceCallback';
-import useDragElem, { Delta } from '#uilib/hooks/useDragElem';
 import { ChevronsLeftRight } from 'lucide-react';
 
 import CAS from '../../ChartAreaInteractive.styl';
@@ -23,7 +22,7 @@ export function PinOverlay({
   baseChartProps,
   pinMonth,
   onPinMonthChange,
-  onPreviewMonthChange,
+  onPreviewMonthChange: _onPreviewMonthChange,
   className,
 }: PinOverlayProps) {
   const { chartData } = baseChartProps;
@@ -32,12 +31,9 @@ export function PinOverlay({
   const pinPlaceholderRef = useRef<HTMLDivElement>(null);
   const pinContainerRef = useRef<HTMLDivElement>(null);
 
-  const [isDraggingPin, setIsDraggingPin] = useState(false);
-  const [isPinAnimating, setIsPinAnimating] = useState(true);
   const [isPinHovered, setIsPinHovered] = useState(false);
 
   const pinPosRef = useRef<number>(0);
-  const containerRectRef = useRef<DOMRect | null>(null);
   const currPinMonthRef = useRef<string | undefined>(pinMonth);
 
   const debouncedOnPinMonthChange = useDebounceCallback(
@@ -61,7 +57,6 @@ export function PinOverlay({
     }
   };
 
-  // Get full month and year for pin position to send to parent component
   const getPinMonthAndYear = (position?: number) => {
     if (!chartData.length) return null;
 
@@ -79,7 +74,6 @@ export function PinOverlay({
     }
   };
 
-  // Handle chart click to move pin to specific position
   const snapPinToPosition = (
     eventX: number,
     needMonthUpdate: boolean = true,
@@ -91,7 +85,6 @@ export function PinOverlay({
     const effectiveLeft = pinContainerRect.left;
     const effectiveWidth = pinContainerRect.width;
 
-    // Calculate relative position within plotted area
     const relativeX = eventX - effectiveLeft;
     const rawPercentage =
       effectiveWidth > 0 ? (relativeX / effectiveWidth) * 100 : 0;
@@ -100,7 +93,6 @@ export function PinOverlay({
       Math.min(100, isNaN(rawPercentage) ? 0 : rawPercentage),
     );
 
-    // Snap to nearest data point
     const totalPoints = chartData.length;
     if (totalPoints > 1) {
       const nearestIndex = Math.round((percentage / 100) * (totalPoints - 1));
@@ -110,12 +102,10 @@ export function PinOverlay({
       setPinPosition(isNaN(snappedPercentage) ? 0 : snappedPercentage);
 
       if (needMonthUpdate) {
-        // Update news for all months (historical and forecast)
         const monthAndYear = getPinMonthAndYear();
         if (monthAndYear) {
           const isNewMonth = monthAndYear !== currPinMonthRef.current;
           if (isNewMonth) currPinMonthRef.current = monthAndYear;
-          // When immediate (e.g. dragEnd), always notify parent so showFutureOutlook is correct
           if (immediateMonthUpdate) {
             onPinMonthChange?.(monthAndYear);
           } else if (isNewMonth) {
@@ -126,11 +116,9 @@ export function PinOverlay({
     }
   };
 
-  // Update pin position when pinMonth prop changes
   useEffect(() => {
     if (!pinMonth || !chartData.length) return;
 
-    // Find the data point index for the given month
     const dataPointIndex = chartData.findIndex(point => {
       const date = new Date(point.date);
       const month = date.toLocaleDateString('en-US', { month: 'short' });
@@ -147,59 +135,10 @@ export function PinOverlay({
     }
   }, [pinMonth, chartData]);
 
-  useDragElem({
-    elem: [chartRef],
-    onDragStart: () => {
-      setIsDraggingPin(true);
-
-      containerRectRef.current =
-        pinContainerRef.current?.getBoundingClientRect() || null;
-    },
-    onDrag: (delta: Delta) => {
-      if (pinRef.current) {
-        const containerRect = containerRectRef.current;
-        if (!containerRect) return;
-
-        const pinCurrentLeft = (pinPosRef.current / 100) * containerRect.width;
-
-        const leftLimit = -pinCurrentLeft;
-        const rightLimit = containerRect.width - pinCurrentLeft;
-
-        const clampedDeltaX = Math.max(
-          leftLimit,
-          Math.min(rightLimit, delta.x),
-        );
-
-        setIsPinAnimating(false);
-        pinRef.current.style.transform = `translateX(${clampedDeltaX}px)`;
-
-        // Calculate preview month based on current drag position
-        if (onPreviewMonthChange && chartData.length > 0) {
-          const newPositionPixels = pinCurrentLeft + clampedDeltaX;
-          const newPercentage = (newPositionPixels / containerRect.width) * 100;
-          const clampedPercentage = Math.max(0, Math.min(100, newPercentage));
-          const previewMonth = getPinMonthAndYear(clampedPercentage);
-
-          if (previewMonth) {
-            onPreviewMonthChange(previewMonth);
-          }
-        }
-      }
-    },
-    onDragEnd: (e: PointerEvent) => {
-      setIsDraggingPin(false);
-      setTimeout(() => setIsPinAnimating(true), 200);
-      if (pinRef.current) pinRef.current.style.transform = '';
-      // Snap first so onPinMonthChange runs before we clear preview (avoids showFutureOutlook fallback)
-      snapPinToPosition(e.clientX, true, true);
-      if (onPreviewMonthChange) {
-        onPreviewMonthChange(undefined);
-      }
-    },
-  });
-
-  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {
-    if ((e.target as HTMLElement).tagName !== 'svg') return;
+  const onChartClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    if (e.button !== 0) return;
+    const target = e.target as HTMLElement;
+    if (!target.closest?.('svg')) return;
     snapPinToPosition(e.clientX, true, false);
   };
 
@@ -220,7 +159,6 @@ export function PinOverlay({
           </div>
         </div>
       </div>
-      {/* Hover placeholder for easier pin access - on top of everything */}
       <div
         className={S.pinPlaceholder}
         style={{ left: `${pinPosRef.current}%` }}
@@ -236,12 +174,10 @@ export function PinOverlay({
       className={cn(
         className,
         S.root,
-        isDraggingPin && S.pinDragging,
-        isPinAnimating && S.pinAnimating,
+        S.pinAnimating,
         isPinHovered && S.pinHovered,
       )}
-      onPointerDown={onPointerDown}
-      // onClick={e => snapPinToPosition(e.clientX)}
+      onClick={onChartClick}
       ref={chartRef}
     >
       <BaseChartWrapper

package/src/components/ui/ChartAreaInteractive/overlays/ThresholdsOverlay/ThresholdsOverlay.hooks.ts

@@ -127,6 +127,7 @@ export function useThresholdButton({
 
   const handleDragStart = useCallback(
     (e: PointerEvent) => {
+      e.stopPropagation();
       initialValueRef.current = initialValue;
       startYRef.current = e.clientY;
       setIsDragging(true);

package/src/components/ui/ChartAreaInteractive/overlays/useChartYRange.ts

@@ -42,10 +42,9 @@ export function useChartYRange({
       Object.entries(point).forEach(([key, value]) => {
         if (key === 'date') return;
 
-        // When selectedForecastId is provided, scale only from selected forecast + its quantile band
-        // (exclude historical, other forecasts, and other forecasts' quantile values)
+        // When selectedForecastId is provided, scale from historical + selected forecast + its
+        // quantile band (exclude other forecasts and their quantile values only).
         if (forecastId !== undefined) {
-          if (key === 'historical') return;
           if (key.startsWith('forecast_') && key !== `forecast_${forecastId}`)
             return;
           // Exclude q{quantile}_{otherAnalysisId} - only include selected forecast's quantiles

package/src/components/ui/Chat/ChatSheet/ChatSelector.styl

@@ -18,7 +18,9 @@
 .deleteBtn
   flex-shrink 0
   border-radius 50px
-  opacity 0.3
+  opacity 0
+  pointer-events none
 
 .wrapper:hover .deleteBtn
   opacity 1
+  pointer-events auto

package/src/components/ui/Chat/ChatSheet/ChatSelector.tsx

@@ -54,7 +54,7 @@ export function ChatSelector({
         (firstMessage.text.length > 30 ? '...' : '')
       );
     }
-    return `Chat ${chat.session_id}`;
+    return 'New chat';
   };
 
   return (

package/src/components/ui/DropdownMenu/DropdownMenu.tsx

@@ -44,6 +44,7 @@ function DropdownMenuTrigger({ ...props }: DropdownMenuTriggerProps) {
 function DropdownMenuContent({
   className,
   sideOffset = 4,
+  collisionPadding = 8,
   elevation = 'sm',
   ...props
 }: DropdownMenuContentProps) {
@@ -52,6 +53,7 @@ function DropdownMenuContent({
       <DropdownMenuPrimitive.Content
         data-slot="dropdown-menu-content"
         sideOffset={sideOffset}
+        collisionPadding={collisionPadding}
         className={cn(S.content, S[`elevation-${elevation}`], className)}
         {...props}
       />
@@ -201,11 +203,13 @@ function DropdownMenuSubTrigger({
 
 function DropdownMenuSubContent({
   className,
+  collisionPadding = 8,
   ...props
 }: DropdownMenuSubContentProps) {
   return (
     <DropdownMenuPrimitive.SubContent
       data-slot="dropdown-menu-sub-content"
+      collisionPadding={collisionPadding}
       className={cn(S.subContent, className)}
       {...props}
     />

package/src/components/ui/Page/PageColumns/PageColumns.tsx

@@ -8,7 +8,7 @@ export function PageColumns({
   className,
 }: {
   columns: React.ReactNode[];
-  fill: 'left' | 'right' | 'all';
+  fill?: 'left' | 'right' | 'all';
   className?: string;
 }) {
   return (

package/src/components/ui/TimeRangeControls/TimeRangeControls.tsx

@@ -14,22 +14,25 @@ import {
 
 import { TIME_RANGES } from './TimeRangeControls.constants';
 import S from './TimeRangeControls.styl';
-import { TimeRange } from './TimeRangeControls.types';
+
+function toggleValueForTimeRange(timeRange: string): string {
+  return (TIME_RANGES as readonly string[]).includes(timeRange)
+    ? timeRange
+    : '';
+}
+
+export type TimeRangeControlsProps = {
+  timeRange: string;
+  onTimeRangeChange: (range: string) => void;
+  loading?: boolean;
+};
 
 export const TimeRangeControls = memo(
-  ({
-    timeRange,
-    onTimeRangeChange,
-    loading,
-  }: {
-    timeRange: TimeRange;
-    onTimeRangeChange: (range: string) => void;
-    loading?: boolean;
-  }) => (
+  ({ timeRange, onTimeRangeChange, loading }: TimeRangeControlsProps) => (
     <div className={S.timeRangeContainer}>
       <ToggleGroup
         type="single"
-        value={timeRange}
+        value={toggleValueForTimeRange(timeRange)}
         onValueChange={onTimeRangeChange}
         variant="outline"
         disabled={loading}
@@ -56,13 +59,9 @@ export const TimeRangeSelect = memo(
     timeRange,
     onTimeRangeChange,
     loading,
-  }: {
-    timeRange: TimeRange;
-    onTimeRangeChange: (range: string) => void;
-    loading: boolean;
-  }) => (
+  }: TimeRangeControlsProps & { loading: boolean }) => (
     <Select
-      value={timeRange}
+      value={toggleValueForTimeRange(timeRange) || undefined}
       onValueChange={onTimeRangeChange}
       disabled={loading}
     >

package/src/components/ui/WorldMap/WorldMap.styl

@@ -0,0 +1,11 @@
+@import './mapAspect.mixin.styl'
+
+.worldMap
+  display block
+  width 100%
+  height 100%
+  mapAspect()
+  object-fit contain
+  object-position center
+  pointer-events none
+  user-select none

package/src/components/ui/WorldMap/WorldMap.styl.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'worldMap': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

package/src/components/ui/WorldMap/WorldMap.tsx

@@ -0,0 +1,22 @@
+import cn from 'classnames';
+
+import S from './WorldMap.styl';
+import mapBgUrl from './map.svg';
+
+export type WorldMapProps = {
+  className?: string;
+};
+
+export function WorldMap({ className }: WorldMapProps) {
+  const src = mapBgUrl as unknown as string;
+
+  return (
+    <img
+      alt=""
+      className={cn(S.worldMap, className)}
+      decoding="async"
+      draggable={false}
+      src={src}
+    />
+  );
+}

package/src/components/ui/WorldMap/index.ts

@@ -0,0 +1,2 @@
+export { WorldMap } from './WorldMap';
+export type { WorldMapProps } from './WorldMap';