@kenyaemr/esm-patient-clinical-view-app 5.4.2-pre.2763 → 5.4.2-pre.2765

package/src/maternal-and-child-health/partography/forms/cervix-form.component.tsx

@@ -45,7 +45,7 @@ const CervixForm: React.FC<CervixFormProps> = ({
       hour: '',
       time: '',
       cervicalDilation: '',
-      descent: '5',
+      descent: '',
     },
   });
 
@@ -66,24 +66,25 @@ const CervixForm: React.FC<CervixFormProps> = ({
     };
   }, [existingCervixData]);
 
-  const maxSelectedHour = useMemo(
-    () => (selectedHours && selectedHours.length > 0 ? Math.max(...selectedHours) : -1),
-    [selectedHours],
-  );
+  const usedHours = useMemo(() => {
+    if (!selectedHours || selectedHours.length === 0) {
+      return [];
+    }
+    return selectedHours;
+  }, [selectedHours]);
 
   const hourOptions = useMemo(() => {
     return Array.from({ length: 24 }, (_, i) => {
       const hourValue = String(i).padStart(2, '0');
-      const isDisabled = i <= maxSelectedHour;
+      const isDisabled = usedHours.includes(i);
       const displayText = isDisabled ? `${hourValue} (used)` : hourValue;
-
       return {
         value: hourValue,
         text: displayText,
         disabled: isDisabled,
       };
     });
-  }, [maxSelectedHour]);
+  }, [usedHours]);
 
   const onSubmitForm = async (data: CervixFormData) => {
     if (!data.hour || data.hour === '') {
@@ -99,6 +100,7 @@ const CervixForm: React.FC<CervixFormProps> = ({
         type: 'manual',
         message: 'Time selection is required',
       });
+      console.warn('[CervixForm] Attempted to submit with empty time value:', data);
       return;
     }
 
@@ -178,7 +180,10 @@ const CervixForm: React.FC<CervixFormProps> = ({
     }
 
     clearErrors();
-
+    if (!data.time || data.time.trim() === '') {
+      alert('Time cannot be empty. Please select a valid time.');
+      return;
+    }
     onSubmit({
       hour: hourValue,
       time: data.time,
@@ -286,12 +291,16 @@ const CervixForm: React.FC<CervixFormProps> = ({
                   <NumberInput
                     id="cervical-dilation-input"
                     label="Cervical Dilation (cm) *"
-                    placeholder={`Enter dilation (min: ${validationLimits.cervicalDilationMin}cm, max: 10cm)`}
+                    placeholder="Enter dilation (min: 4cm, max: 10cm)"
                     value={field.value || ''}
-                    onChange={(e, { value }) => field.onChange(String(value))}
-                    min={validationLimits.cervicalDilationMin}
+                    onChange={(e, { value }) => {
+                      // Only allow whole numbers
+                      const intValue = String(value).replace(/[^\d]/g, '');
+                      field.onChange(intValue);
+                    }}
+                    min={4}
                     max={10}
-                    step={0.5}
+                    step={1}
                     invalid={!!fieldState.error}
                     invalidText={fieldState.error?.message}
                   />
@@ -333,7 +342,7 @@ const CervixForm: React.FC<CervixFormProps> = ({
                         ? `Default: 5 (high position), can decrement to lower values`
                         : `Enter descent (1=most descended, 5=high position)`
                     }
-                    value={field.value || '5'}
+                    value={field.value || ''}
                     onChange={(e, { value }) => field.onChange(String(value))}
                     min={1}
                     max={5}

package/src/maternal-and-child-health/partography/forms/drugs-iv-fluids-form.component.tsx

@@ -109,16 +109,12 @@ const DrugsIVFluidsForm: React.FC<DrugsIVFluidsFormProps> = ({ isOpen, onClose,
     if (patient?.uuid) {
       setIsSaving(true);
       try {
-        const result = await saveDrugOrderData(
-          patient.uuid,
-          {
-            drugName: data.drugName,
-            dosage: data.dosage,
-            route: data.route,
-            frequency: data.frequency,
-          },
-          t,
-        );
+        const result = await saveDrugOrderData(patient.uuid, {
+          drugName: data.drugName,
+          dosage: data.dosage,
+          route: data.route,
+          frequency: data.frequency,
+        });
 
         if (result.success) {
           setSaveSuccess(true);

package/src/maternal-and-child-health/partography/forms/fetal-heart-rate-form.component.tsx

@@ -57,22 +57,35 @@ const FetalHeartRateForm: React.FC<FetalHeartRateFormProps> = ({
   });
   const generateHourOptions = () => {
     const options = [];
-    for (let i = 0; i <= 24; i++) {
-      if (i === 0) {
-        options.push({ value: '0.5', label: '30min' });
-      } else {
-        options.push({ value: i.toString(), label: `${i}hr` });
-      }
+    options.push({ value: '0', label: '00' });
+    options.push({ value: '0.5', label: '30min' });
+    for (let i = 1; i <= 24; i++) {
+      options.push({ value: i.toString(), label: `${i}hr` });
       if (i < 24) {
-        const halfHourValue = (i + 0.5).toString();
-        const halfHourLabel = i === 0 ? '1hr' : `${i}hr 30min`;
-        options.push({ value: halfHourValue, label: halfHourLabel });
+        options.push({ value: (i + 0.5).toString(), label: `${i}hr 30min` });
       }
     }
     return options;
   };
 
-  const hourOptions = generateHourOptions();
+  const latestHour = React.useMemo(() => {
+    if (!existingTimeEntries || existingTimeEntries.length === 0) {
+      return null;
+    }
+    // Find the max hour value from existingTimeEntries (hour is already a number)
+    return Math.max(...existingTimeEntries.map((e) => e.hour));
+  }, [existingTimeEntries]);
+
+  // Generate hour options, disabling those before the latest entered hour (float comparison)
+  const hourOptionsWithDisabled = React.useMemo(() => {
+    return generateHourOptions().map((option) => {
+      const hourValue = parseFloat(option.value);
+      return {
+        ...option,
+        disabled: latestHour !== null && hourValue <= latestHour,
+      };
+    });
+  }, [latestHour]);
 
   const handleFormSubmit = async (data: FetalHeartRateFormData) => {
     const hourValue = parseFloat(data.hour);
@@ -213,8 +226,13 @@ const FetalHeartRateForm: React.FC<FetalHeartRateFormProps> = ({
                   value={field.value}
                   onChange={(e) => field.onChange(e.target.value)}>
                   <SelectItem value="" text={t('admissionTime', 'Admission')} />
-                  {hourOptions.map((option) => (
-                    <SelectItem key={option.value} value={option.value} text={option.label} />
+                  {hourOptionsWithDisabled.map((option) => (
+                    <SelectItem
+                      key={option.value}
+                      value={option.value}
+                      text={option.label}
+                      disabled={option.disabled}
+                    />
                   ))}
                 </Select>
               )}
@@ -258,10 +276,15 @@ const FetalHeartRateForm: React.FC<FetalHeartRateFormProps> = ({
                   max={200}
                   step={1}
                   value={field.value}
-                  onChange={(_, state) => field.onChange(state.value)}
+                  onChange={(e) => {
+                    let val = (e.target as HTMLInputElement).value;
+                    val = val.replace(/[^\d]/g, '');
+                    field.onChange(val);
+                  }}
                   invalid={!!fieldState.error}
                   invalidText={fieldState.error?.message}
                   size="lg"
+                  allowEmpty
                 />
               )}
             />

package/src/maternal-and-child-health/partography/forms/time-picker-dropdown.component.tsx

@@ -22,8 +22,6 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
   existingTimeEntries = [],
 }) => {
   const [hours, minutes] = value && value.includes(':') ? value.split(':') : ['', ''];
-
-  // Memoize sorted entries and latest entry to avoid re-sorting on every render
   const latestEntry = useMemo(() => {
     if (!existingTimeEntries || existingTimeEntries.length === 0) {
       return null;
@@ -50,18 +48,24 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
     return currentTimeInMinutes <= latestTimeInMinutes;
   };
 
-  // Memoize options generation so we don't recreate arrays on every render
   const hourOptions = useMemo(() => {
+    if (!latestEntry) {
+      return Array.from({ length: 24 }, (_, i) => {
+        const hour = i.toString().padStart(2, '0');
+        return { value: hour, text: hour, disabled: false, reason: '' };
+      });
+    }
+    const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
     return Array.from({ length: 24 }, (_, i) => {
       const hour = i.toString().padStart(2, '0');
       let isDisabled = false;
       let disableReason = '';
-      if (existingTimeEntries && existingTimeEntries.length > 0 && latestEntry) {
-        const [latestHour] = latestEntry.time.split(':').map(Number);
-        if (i < latestHour) {
-          isDisabled = true;
-          disableReason = 'before latest entry';
-        }
+      if (i < latestHour) {
+        isDisabled = true;
+        disableReason = 'before latest entry';
+      } else if (i === latestHour && latestMinute >= 55) {
+        isDisabled = true;
+        disableReason = 'latest entry full hour';
       }
       const displayText = isDisabled ? `${hour} ${disableReason}` : hour;
       return {
@@ -74,18 +78,24 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
   }, [existingTimeEntries, latestEntry]);
 
   const minuteOptions = useMemo(() => {
+    if (!latestEntry || !hours) {
+      return Array.from({ length: 12 }, (_, i) => {
+        const minute = (i * 5).toString().padStart(2, '0');
+        return { value: minute, text: minute, disabled: false };
+      });
+    }
+    const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
+    const currentHour = parseInt(hours);
     return Array.from({ length: 12 }, (_, i) => {
       const minute = (i * 5).toString().padStart(2, '0');
       let isDisabled = false;
       let disableReason = '';
-      if (hours && existingTimeEntries.length > 0 && latestEntry) {
-        const currentHour = parseInt(hours);
-        const currentMinute = i * 5;
-        const [latestHour, latestMinute] = latestEntry.time.split(':').map(Number);
-        if (currentHour === latestHour && currentMinute <= latestMinute) {
-          isDisabled = true;
-          disableReason = `≤ ${latestMinute} min`;
-        }
+      if (currentHour < latestHour) {
+        isDisabled = true;
+        disableReason = 'before latest entry';
+      } else if (currentHour === latestHour && i * 5 <= latestMinute) {
+        isDisabled = true;
+        disableReason = `≤ ${latestMinute} min`;
       }
       const displayText = isDisabled ? `${minute} ${disableReason}` : minute;
       return { value: minute, text: displayText, disabled: isDisabled };
@@ -181,35 +191,6 @@ const TimePickerDropdown: React.FC<TimePickerDropdownProps> = ({
         </div>
 
         {invalid && invalidText && <div className={styles.errorText}>{invalidText}</div>}
-
-        {latestEntry && (
-          <div className={styles.timeConstraint}>
-            Latest entry: <strong>{latestEntry.time}</strong> - Next measurement must be after this time
-          </div>
-        )}
-
-        {existingTimeEntries.length > 0 && (
-          <div className={styles.usedTimesIndicator}>
-            <strong>Time Restrictions:</strong>
-            <br />
-            <strong>Used Times:</strong> {existingTimeEntries.map((entry) => entry.time).join(', ')}
-            <br />
-            <strong>Blocked Hours:</strong>{' '}
-            {hourOptions
-              .filter((opt) => opt.disabled)
-              .map((opt) => opt.value)
-              .join(', ')}{' '}
-            (grayed out)
-            <br />
-            <small>You can only select times after the latest entry</small>
-          </div>
-        )}
-
-        {value && (
-          <div className={styles.timePreview}>
-            Selected Time: <strong>{value}</strong>
-          </div>
-        )}
       </FormGroup>
     </div>
   );

package/src/maternal-and-child-health/partography/forms/useCervixData.ts

@@ -1,5 +1,5 @@
-import { useCervixData } from '../resources/cervix.resource';
-export function useCervixFormData(patientUuid: string) {
+import { useCervixData, UseCervixDataResult } from '../resources/cervix.resource';
+export function useCervixFormData(patientUuid: string): UseCervixDataResult {
   return useCervixData(patientUuid);
 }
 export type {

package/src/maternal-and-child-health/partography/graphs/cervix-graph.component.tsx

@@ -194,6 +194,7 @@ const CervixGraph: React.FC<CervixGraphProps> = ({
     });
   }
   useEffect(() => {
+    let observer: MutationObserver | null = null;
     const applyChartStyling = () => {
       const chartContainer = document.querySelector(`[data-chart-id="cervix"]`);
       if (chartContainer) {
@@ -217,36 +218,60 @@ const CervixGraph: React.FC<CervixGraphProps> = ({
         svgCircles.forEach((circle) => {
           const circleElement = circle as SVGCircleElement;
           const parentGroup = circleElement.closest('g');
-          if (parentGroup) {
-            const stroke = circleElement.getAttribute('stroke') || circleElement.style.stroke;
-            const fill = circleElement.getAttribute('fill') || circleElement.style.fill;
-
-            if (stroke === getColorForGraph('green') || fill === getColorForGraph('green')) {
-              circleElement.style.display = 'none';
-
-              const cx = parseFloat(circleElement.getAttribute('cx') || '0');
-              const cy = parseFloat(circleElement.getAttribute('cy') || '0');
-              const size = 6;
-
-              const svg = circleElement.ownerSVGElement;
-              if (svg) {
+          let isCervicalDilation = false;
+          if (circleElement.hasAttribute('data-group')) {
+            isCervicalDilation = circleElement.getAttribute('data-group')?.toLowerCase().includes('cervical dilation');
+          }
+          if (!isCervicalDilation && parentGroup) {
+            const groupLabel = parentGroup.getAttribute('aria-label') || parentGroup.getAttribute('data-name') || '';
+            if (groupLabel.toLowerCase().includes('cervical dilation')) {
+              isCervicalDilation = true;
+            }
+          }
+          if (!isCervicalDilation) {
+            const stroke = (circleElement.getAttribute('stroke') || circleElement.style.stroke || '').toLowerCase();
+            const fill = (circleElement.getAttribute('fill') || circleElement.style.fill || '').toLowerCase();
+            isCervicalDilation =
+              stroke.includes('green') ||
+              fill.includes('green') ||
+              stroke.includes('#42be65') ||
+              fill.includes('#42be65') ||
+              stroke.includes('#24a148') ||
+              fill.includes('#24a148') ||
+              stroke.includes('rgb(36, 161, 72)') ||
+              fill.includes('rgb(36, 161, 72)') ||
+              stroke.includes('rgb(66, 190, 101)') ||
+              fill.includes('rgb(66, 190, 101)');
+          }
+          if (isCervicalDilation && parentGroup) {
+            circleElement.style.display = 'none';
+            const cx = parseFloat(circleElement.getAttribute('cx') || '0');
+            const cy = parseFloat(circleElement.getAttribute('cy') || '0');
+            const size = 12;
+            const xColor = '#8a3ffc';
+            const svg = circleElement.ownerSVGElement;
+            if (svg) {
+              // Prevent duplicate Xs
+              if (!parentGroup.querySelector('line[data-x-marker]')) {
                 const line1 = document.createElementNS(SVG_NAMESPACE, 'line');
                 line1.setAttribute('x1', (cx - size).toString());
                 line1.setAttribute('y1', (cy - size).toString());
                 line1.setAttribute('x2', (cx + size).toString());
                 line1.setAttribute('y2', (cy + size).toString());
-                line1.setAttribute('stroke', getColorForGraph('green'));
-                line1.setAttribute('stroke-width', '3');
+                line1.setAttribute('stroke', xColor);
+                line1.setAttribute('stroke-width', '5');
                 line1.setAttribute('stroke-linecap', 'round');
+                line1.setAttribute('data-x-marker', 'true');
 
                 const line2 = document.createElementNS(SVG_NAMESPACE, 'line');
                 line2.setAttribute('x1', (cx + size).toString());
                 line2.setAttribute('y1', (cy - size).toString());
                 line2.setAttribute('x2', (cx - size).toString());
                 line2.setAttribute('y2', (cy + size).toString());
-                line2.setAttribute('stroke', getColorForGraph('green'));
-                line2.setAttribute('stroke-width', '3');
+                line2.setAttribute('stroke', xColor);
+                line2.setAttribute('stroke-width', '5');
                 line2.setAttribute('stroke-linecap', 'round');
+                line2.setAttribute('data-x-marker', 'true');
 
                 parentGroup.appendChild(line1);
                 parentGroup.appendChild(line2);
@@ -258,7 +283,20 @@ const CervixGraph: React.FC<CervixGraphProps> = ({
     };
 
     const timer = setTimeout(applyChartStyling, 100);
-    return () => clearTimeout(timer);
+    const chartContainer = document.querySelector(`[data-chart-id="cervix"]`);
+    if (chartContainer && window.MutationObserver) {
+      observer = new MutationObserver(() => {
+        applyChartStyling();
+      });
+      observer.observe(chartContainer, { childList: true, subtree: true });
+    }
+
+    return () => {
+      clearTimeout(timer);
+      if (observer) {
+        observer.disconnect();
+      }
+    };
   }, [cervixFormData, isLoading]);
 
   const shouldRenderChart = finalChartData.length > 0;

package/src/maternal-and-child-health/partography/graphs/fetal-heart-rate-graph.component.tsx

@@ -16,7 +16,7 @@ import {
 import { Add, ChartColumn, Table as TableIcon } from '@carbon/react/icons';
 import { LineChart } from '@carbon/charts-react';
 import styles from '../partography.scss';
-import { getColorForGraph, generateRange } from '../types';
+import { getColorForGraph, generateRange, defaultFetalHeartRateChartData } from '../types';
 import { usePaginationInfo } from '@openmrs/esm-patient-common-lib';
 
 enum ScaleTypes {
@@ -78,9 +78,9 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
   );
   const getFetalHeartRateStatus = (value: string): { type: string; text: string; color: string } => {
     const numValue = parseInt(value.replace(' bpm', ''));
-    if (numValue < 100) {
-      return { type: 'warm-gray', text: 'Low', color: getColorForGraph('gray') };
-    } else if (numValue >= 100 && numValue <= 180) {
+    if (numValue < 110) {
+      return { type: 'red', text: 'Low', color: getColorForGraph('red') };
+    } else if (numValue >= 110 && numValue <= 160) {
       return { type: 'green', text: 'Normal', color: getColorForGraph('green') };
     } else {
       return { type: 'red', text: 'High', color: getColorForGraph('red') };
@@ -94,9 +94,9 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
     { key: 'status', header: t('status', 'Status') },
   ];
   const getFetalHeartRateColor = (value: number): string => {
-    if (value < 100) {
-      return getColorForGraph('gray');
-    } else if (value >= 100 && value <= 180) {
+    if (value < 110) {
+      return getColorForGraph('red');
+    } else if (value >= 110 && value <= 160) {
       return getColorForGraph('green');
     } else {
       return getColorForGraph('red');
@@ -112,15 +112,7 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
       }));
     }
 
-    return [
-      { hour: 0, value: 140, group: 'Fetal Heart Rate', time: '0', color: getColorForGraph('green') },
-      { hour: 10, value: 140, group: 'Fetal Heart Rate', time: '10', color: getColorForGraph('green') },
-      { hour: 20, value: 140, group: 'Fetal Heart Rate', time: '20', color: getColorForGraph('green') },
-      { hour: 30, value: 140, group: 'Fetal Heart Rate', time: '30', color: getColorForGraph('green') },
-      { hour: 40, value: 140, group: 'Fetal Heart Rate', time: '40', color: getColorForGraph('green') },
-      { hour: 50, value: 140, group: 'Fetal Heart Rate', time: '50', color: getColorForGraph('green') },
-      { hour: 60, value: 140, group: 'Fetal Heart Rate', time: '60', color: getColorForGraph('green') },
-    ];
+    return defaultFetalHeartRateChartData;
   }, [data]);
 
   const chartData = enhancedChartData;
@@ -179,6 +171,28 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
         enabled: true,
       },
     },
+    referenceLines: [
+      {
+        axis: 'left',
+        value: 110,
+        style: {
+          stroke: '#111',
+          strokeWidth: 4,
+          strokeDasharray: '0',
+        },
+        label: '110',
+      },
+      {
+        axis: 'left',
+        value: 160,
+        style: {
+          stroke: '#111',
+          strokeWidth: 4,
+          strokeDasharray: '0',
+        },
+        label: '160',
+      },
+    ],
     color: {
       scale:
         data && data.length > 0
@@ -204,13 +218,13 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
             <h3 className={styles.fetalHeartRateTitle}>Fetal Heart Rate</h3>
             <div className={styles.fetalHeartRateControls}>
               <Tag type="green" title="Normal Range">
-                Normal (100-180)
+                Normal (110-160)
               </Tag>
               <Tag type="red" title="Abnormal Range">
-                Abnormal (&gt;180)
+                Abnormal (&gt;160)
               </Tag>
-              <Tag type="warm-gray" title="Low Range">
-                Low (&lt;100)
+              <Tag type="red" title="Low Range">
+                Low (&lt;110)
               </Tag>
             </div>
           </div>
@@ -290,15 +304,14 @@ const FetalHeartRateGraph: React.FC<FetalHeartRateGraphProps> = ({
                                     : cell.info.header === 'value'
                                     ? (() => {
                                         const numValue = parseInt(cell.value.replace(' bpm', ''));
-
-                                        if (numValue < 100) {
+                                        if (numValue < 110) {
                                           return (
                                             <span className={`${styles.fetalHeartRateValue} ${styles.low}`}>
                                               <span className={styles.arrow}>↓</span>
                                               {cell.value}
                                             </span>
                                           );
-                                        } else if (numValue > 180) {
+                                        } else if (numValue > 160) {
                                           return (
                                             <span className={`${styles.fetalHeartRateValue} ${styles.high}`}>
                                               <span className={styles.arrow}>↑</span>

package/src/maternal-and-child-health/partography/graphs/pulse-bp-graph.component.tsx

@@ -58,7 +58,7 @@ const PULSE_BP_CHART_OPTIONS = {
     filled: true,
   },
   curve: 'curveLinear',
-  height: '400px',
+  height: '600px',
   theme: 'white',
   toolbar: {
     enabled: false,
@@ -74,7 +74,7 @@ const PULSE_BP_CHART_OPTIONS = {
     },
     y: {
       enabled: true,
-      numberOfTicks: 13,
+      numberOfTicks: 7, // Fewer ticks for larger row spacing
     },
   },
   zoomBar: {
@@ -174,6 +174,9 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                 const systolicYPosition = chartMarginTop + ((180 - item.systolicBP) / (180 - 60)) * chartHeight;
                 const diastolicYPosition = chartMarginTop + ((180 - item.diastolicBP) / (180 - 60)) * chartHeight;
 
+                const greenArrowStartY = Math.min(pulseYPosition, diastolicYPosition);
+                const greenArrowEndY = Math.max(pulseYPosition, diastolicYPosition);
+
                 return (
                   <g key={index}>
                     <defs>
@@ -195,7 +198,8 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                         refY="5"
                         orient="auto"
                         markerUnits="strokeWidth">
-                        <polygon points="0,0 10,5 0,10 3,5" fill={getColorForGraph('green')} />
+                        {/* Downward arrow for green (diastolic) */}
+                        <polygon points="0,10 10,5 0,0 3,5" fill={getColorForGraph('green')} />
                       </marker>
                     </defs>
 
@@ -209,11 +213,12 @@ const PulseBPGraph: React.FC<PulseBPGraphProps> = ({ data }) => {
                       markerEnd={`url(#systolic-arrow-${index})`}
                     />
 
+                    {/* Always draw green arrow down, regardless of value */}
                     <line
                       x1={`${bpXPosition}%`}
-                      y1={`${pulseYPosition}%`}
+                      y1={`${greenArrowStartY}%`}
                       x2={`${bpXPosition}%`}
-                      y2={`${diastolicYPosition}%`}
+                      y2={`${greenArrowEndY}%`}
                       stroke={getColorForGraph('green')}
                       strokeWidth="2"
                       markerEnd={`url(#diastolic-arrow-${index})`}