ui-spacetimechart: fix blank stories

The space time chart stories were sometimes not loading properly,
showing a blank page.

Two issues:

- All stories were passing className='absolute inset-0' to SpaceTimeChart.
  However, SpaceTimeChart was combining these classes with 'relative'.
  As a result, the browser would roll a dice and pick either 'absolute'
  or 'relative'. When 'relative' is picked first, 'inset-0' has no
  effect because…
- All stories except one were using a wrapper div with
  className="inset-0". This had no effect because this div is neither
  absolute nor relative.

As a result, half the time the chart would have a zero height.

Fix this by:

- Adding absolute positioning to the wrapper div.
- Setting the height of the SpaceTimeChart instead of mixing up
  conflicting positioning classes.

Signed-off-by: Simon Ser <[email protected]>

Author: emersion

ui-spacetimechart/src/stories/additional-data.stories.tsx

@@ -188,9 +188,9 @@ const Wrapper = ({ swapAxis, spaceScaleType }: WrapperProps) => {
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className={cx('inset-0 absolute p-0 m-0', state.panning && 'cursor-grabbing')}
+        className={cx('h-full p-0 m-0', state.panning && 'cursor-grabbing')}
         operationalPoints={OPERATIONAL_POINTS}
         swapAxis={swapAxis}
         spaceOrigin={0}

ui-spacetimechart/src/stories/base-rendering.stories.tsx

@@ -50,20 +50,22 @@ const Wrapper = ({
     : PATHS;
 
   return (
-    <SpaceTimeChart
-      className="inset-0 absolute"
-      operationalPoints={operationalPoints}
-      spaceOrigin={0}
-      spaceScales={spaceScales}
-      timeOrigin={+new Date('2024/04/02')}
-      timeScale={60000 / xZoomLevel}
-      xOffset={xOffset}
-      yOffset={yOffset}
-    >
-      {paths.map((path) => (
-        <PathLayer key={path.id} path={path} color={path.color} />
-      ))}
-    </SpaceTimeChart>
+    <div className="absolute inset-0">
+      <SpaceTimeChart
+        className="h-full"
+        operationalPoints={operationalPoints}
+        spaceOrigin={0}
+        spaceScales={spaceScales}
+        timeOrigin={+new Date('2024/04/02')}
+        timeScale={60000 / xZoomLevel}
+        xOffset={xOffset}
+        yOffset={yOffset}
+      >
+        {paths.map((path) => (
+          <PathLayer key={path.id} path={path} color={path.color} />
+        ))}
+      </SpaceTimeChart>
+    </div>
   );
 };
 

ui-spacetimechart/src/stories/custom-styles.stories.tsx

@@ -48,9 +48,9 @@ const Wrapper = ({ color1, color2, color3, spaceScaleType }: WrapperProps) => {
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className={cx('inset-0 absolute p-0 m-0', state.panning && 'cursor-grabbing')}
+        className={cx('h-full p-0 m-0', state.panning && 'cursor-grabbing')}
         operationalPoints={OPERATIONAL_POINTS}
         spaceOrigin={0}
         spaceScales={OPERATIONAL_POINTS.slice(0, -1).map((point, i) => ({

ui-spacetimechart/src/stories/horizontal-zoom.stories.tsx

@@ -5,6 +5,7 @@ import type { Meta } from '@storybook/react';
 import { clamp } from 'lodash';
 
 import '@osrd-project/ui-core/dist/theme.css';
+import '@osrd-project/ui-spacetimechart/dist/theme.css';
 
 import { OPERATIONAL_POINTS, PATHS } from './lib/paths';
 import { PathLayer } from '../components/PathLayer';
@@ -80,7 +81,7 @@ const SpaceTimeHorizontalZoomWrapper = ({
       }}
     >
       <SpaceTimeChart
-        className="inset-0 absolute h-full"
+        className="h-full"
         spaceOrigin={0}
         xOffset={state.xOffset}
         yOffset={state.yOffset}

ui-spacetimechart/src/stories/layers.stories.tsx

@@ -107,9 +107,9 @@ const Wrapper = () => {
   const [cursorTime, setCursorTime] = useState<number>(0);
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className="inset-0 absolute overflow-hidden p-0 m-0"
+        className="h-full overflow-hidden p-0 m-0"
         operationalPoints={OPERATIONAL_POINTS}
         spaceOrigin={0}
         spaceScales={OPERATIONAL_POINTS.slice(0, -1).map((point, i) => ({

ui-spacetimechart/src/stories/measuring.stories.tsx

@@ -38,12 +38,9 @@ const Wrapper = ({ spaceScaleType, enableSnapping }: WrapperProps) => {
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className={cx(
-          'inset-0 absolute overflow-hidden p-0 m-0',
-          state.panTarget && 'cursor-grabbing'
-        )}
+        className={cx('h-full overflow-hidden p-0 m-0', state.panTarget && 'cursor-grabbing')}
         enableSnapping={enableSnapping}
         operationalPoints={OPERATIONAL_POINTS}
         spaceOrigin={0}

ui-spacetimechart/src/stories/options.stories.tsx

@@ -76,12 +76,9 @@ const Wrapper = ({
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className={cx(
-          'inset-0 absolute overflow-hidden p-0 m-0',
-          state.panning && 'cursor-grabbing'
-        )}
+        className={cx('h-full overflow-hidden p-0 m-0', state.panning && 'cursor-grabbing')}
         enableSnapping={enableSnapping}
         hideGrid={hideGrid}
         hidePathsLabels={hidePathsLabels}

ui-spacetimechart/src/stories/paths-interactions.stories.tsx

@@ -59,10 +59,10 @@ const Wrapper = ({
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
         className={cx(
-          'inset-0 absolute p-0 m-0',
+          'h-full p-0 m-0',
           state.panTarget && 'cursor-grabbing',
           state.hoveredPathId && 'cursor-pointer'
         )}

ui-spacetimechart/src/stories/performances.stories.tsx

@@ -94,9 +94,9 @@ const Wrapper = ({
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
-        className={cx('inset-0 absolute p-0 m-0', state.panning && 'cursor-grabbing')}
+        className={cx('h-full p-0 m-0', state.panning && 'cursor-grabbing')}
         operationalPoints={operationalPoints}
         spaceOrigin={0}
         spaceScales={operationalPoints.slice(0, -1).map((point, i) => ({

ui-spacetimechart/src/stories/scroll-navigation.stories.tsx

@@ -47,10 +47,10 @@ const Wrapper = ({ spaceScaleType }: WrapperProps) => {
   });
 
   return (
-    <div className="inset-0">
+    <div className="absolute inset-0">
       <SpaceTimeChart
         className={cx(
-          'inset-0 absolute p-0 m-0',
+          'h-full p-0 m-0',
           state.panTarget && 'cursor-grabbing',
           state.hoveredPathId && 'cursor-pointer'
         )}