fixup! front: infra editor make slopes and curves optional values

Author: Wadjetz

front/src/applications/editor/components/EditorForm.tsx

@@ -89,7 +89,7 @@ function EditorForm<T extends Omit<EditorEntity, 'objType'> & { objType: string
       setFormData({
         ...data.properties,
         slopes: data.properties.slopes ?? [],
-        curves: data.properties.curves ?? []
+        curves: data.properties.curves ?? [],
       });
     }
   }, [data.properties.length]);

front/src/applications/editor/components/LinearMetadata/FormComponent.tsx

@@ -23,9 +23,9 @@ import {
 } from 'common/IntervalsDataViz/data';
 import { LinearMetadataItem } from 'common/IntervalsDataViz/types';
 import { LinearMetadataDataviz } from 'common/IntervalsDataViz/dataviz';
-import { useModal } from '../../../../common/BootstrapSNCF/ModalSNCF';
+import { useModal } from 'common/BootstrapSNCF/ModalSNCF';
 import HelpModal from './HelpModal';
-import { tooltipPosition, notEmpty } from '../../../../common/IntervalsDataViz/utils';
+import { tooltipPosition, notEmpty } from 'common/IntervalsDataViz/utils';
 
 import { LinearMetadataTooltip } from './tooltip';
 import { FormBeginEndWidget } from './FormBeginEndWidget';
@@ -108,6 +108,7 @@ export const FormComponent: React.FC<FieldProps> = (props) => {
 
   const customOnChange = useCallback(
     (newData: Array<LinearMetadataItem>) => {
+      // Remove item without value, it will be recreated by the fixLinearMetadataItems function
       onChange(newData.filter((e) => (valueField ? !isNil(e[valueField]) : true)));
     },
     [onChange, valueField]

front/src/common/IntervalsDataViz/IntervalItem.tsx

@@ -56,21 +56,25 @@ const IntervalItem = <T extends { [key: string]: string | number }>({
       valueText = `${interval[field]}`;
     }
   }
+
+  const isNoData =
+    !!field &&
+    (segment === undefined || segment[field] === undefined || segment[field] === emptyValue);
+  const isHasData =
+    !!field &&
+    segment !== undefined &&
+    segment[field] !== undefined &&
+    segment[field] !== emptyValue;
+  const fieldValue = !!field && segment !== undefined && segment[field];
+  const isDataZero = fieldValue === 0;
+
   return (
     <div
       className={cx(
         'item',
         highlighted.includes(segment.index) && 'highlighted',
-        field &&
-          segment !== undefined &&
-          segment[field] !== undefined &&
-          segment[field] !== emptyValue &&
-          'with-data',
-        field &&
-          (segment === undefined ||
-            segment[field] === undefined ||
-            segment[field] === emptyValue) &&
-          'no-data',
+        isHasData && 'with-data',
+        isNoData && 'no-data',
         !field && isNilObject(segment, ['begin', 'end', 'index']) && 'no-data'
       )}
       style={{
@@ -147,6 +151,9 @@ const IntervalItem = <T extends { [key: string]: string | number }>({
         <span className="value" style={{ height: '100%' }} />
       )}
 
+      {isNoData && <div className="no-data-line" style={computeStyleForDataValue(0, min, max)} />}
+      {isDataZero && <div className="zero-line" style={computeStyleForDataValue(0, min, max)} />}
+
       {/* Create a div for the resize */}
       {data[segment.index] && segment.end === data[segment.index].end && (
         <div

front/src/common/IntervalsDataViz/dataviz.tsx

@@ -3,7 +3,7 @@ import { head, last, maxBy, minBy } from 'lodash';
 import cx from 'classnames';
 
 import { AdditionalDataItem } from 'common/IntervalsEditor/types';
-import { preventDefault, computeStyleForDataValue, getPositionFromMouseEvent } from './utils';
+import { preventDefault, getPositionFromMouseEvent } from './utils';
 import {
   cropForDatavizViewbox,
   cropOperationPointsForDatavizViewbox,
@@ -366,10 +366,6 @@ export const LinearMetadataDataviz = <T extends { [key: string]: any }>({
           (viewBox === null || viewBox[1] === last(data)?.end) && 'end-visible'
         )}
       >
-        {/* Display the 0 axis if it's necessary */}
-        {min < 0 && max > 0 && (
-          <div className="axis-zero" style={computeStyleForDataValue(0, min, max)} />
-        )}
         {/* Display the Y axis if there is one */}
         {field && min !== max && !options.fullHeightItem && (
           <SimpleScale className="scale-y" begin={min} end={max} />

front/src/common/IntervalsDataViz/style.scss

@@ -153,20 +153,24 @@ $resize-width: 3px;
             flex-direction: row;
             align-items: flex-end;
             justify-content: flex-end;
+            position: relative;
 
-            &.no-data {
-              background-color: mixw($color, 0.9);
-              background-image: repeating-linear-gradient(
-                45deg,
-                $color-nodata,
-                $color-nodata 1px,
-                transparent 2px,
-                transparent 10px
-              );
-
-              &.highlighted {
-                background-color: $color-highlight;
-              }
+            .zero-line {
+              position: absolute !important;
+              width: 100%;
+              right: 0;
+              left: 0;
+              z-index: 1;
+              border-bottom: 1px solid $color;
+            }
+
+            .no-data-line {
+              position: absolute !important;
+              width: 100%;
+              right: 0;
+              left: 0;
+              z-index: 1;
+              border-bottom: 1px dashed var(--orange);
             }
 
             &.with-data {
@@ -178,6 +182,10 @@ $resize-width: 3px;
               div.value {
                 background-color: $color-highlight;
               }
+
+              .zero-line {
+                border-bottom-color: $color-highlight;
+              }
             }
 
             div.value {
@@ -269,13 +277,6 @@ $resize-width: 3px;
           }
         }
 
-        .axis-zero {
-          position: absolute !important;
-          width: 100%;
-          border-bottom: 1px solid red;
-          z-index: 1;
-        }
-
         .scale {
           display: flex;
           justify-content: space-between;