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

@@ -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

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",

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;
         `