From 0f110184b8d92508c24e21581307fffd21006df3 Mon Sep 17 00:00:00 2001
From: Andy McHugh <andrewbmchugh@gmail.com>
Date: Wed, 11 Sep 2024 23:15:07 +0100
Subject: [PATCH] slider label

The slider label is set from two pathways with the first not
correctly using the timezone. This has now been made consistent.

The slider label wrapping wasn't disallowed but there isn't enough
vertical space to support wrapping. In addition the animation control
button wasn't fully allowed for and the optional 12 hour 'AM/PM' wasn't
fully allowed for. I explored not passing in width and just going for
100%. Whilst it worked the font isn't constant width so it resulted in
the time slider horizontally wobbling as it was dragged around. So I've
kept the fixed width but left space for 'AM/PM'.
---
 CHANGELOG.md                  | 7 +++++++
 package.json                  | 2 +-
 src/components/TimeSlider.tsx | 5 +++--
 3 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3dd0f94..ef01543 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,12 @@
 # Changelog
 
+## 1.16.x
+
+TimeSlider label
+----------------
+Improvements made to the timeSlider timezone application and label positioning to remove artifacts
+seen when not using browser-time or the 24 hour clock.
+
 ## 1.16.4
 
 SVG 'marker' element support
diff --git a/package.json b/package.json
index 6078157..70372bb 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "flow",
-  "version": "1.16.4",
+  "version": "1.16.5",
   "description": "Svg flowchart visualization",
   "scripts": {
     "build": "webpack -c ./webpack.config.ts --env production",
diff --git a/src/components/TimeSlider.tsx b/src/components/TimeSlider.tsx
index b660c8f..13f4532 100644
--- a/src/components/TimeSlider.tsx
+++ b/src/components/TimeSlider.tsx
@@ -26,7 +26,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => {
   const range = 1000;
   const setLabel = props.setLabel;
   const labelWidth = 170;
-  const animControlWidth = props.animControl ? 20 : 0;
+  const animControlWidth = props.animControl ? 35 : 0;
   const sliderWidth = props.windowWidth - labelWidth - animControlWidth;
 
   // Resync value export when disabled
@@ -44,7 +44,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => {
     const sliderScalar = event.target.value / range;
     const time = sliderTime(props.tsData, sliderScalar);
     props.timeSliderScalarRef.current = sliderScalar;
-    props.setLabel(formatter(time).text);
+    props.setLabel(formatter(time, 0, 0, props.timeZone).text);
   }
 
   return (
@@ -53,6 +53,7 @@ export const TimeSliderFactory = (props: TimeSliderProps) => {
         props.styles.wrapper,
         css`
         text-align: left;
+        white-space: nowrap;
         display: flex;
         gap: 5px;
         `