feat(data overlay): add foreground background control plus orientation change in the UI and add RTDOSE support (#5007)

platform/ui-next/src/components/DataRow/DataRow.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useRef } from 'react';
 import { Button } from '../../components/Button/Button';
 import {
   DropdownMenu,
@@ -57,7 +57,7 @@ import { cn } from '../../lib/utils';
  * @property {() => void} onColor - Callback when color change is requested
  */
 interface DataRowProps {
-  number: number;
+  number: number | null;
   disableEditing: boolean;
   description: string;
   details?: { primary: string[]; secondary: string[] };
@@ -208,15 +208,18 @@ export const DataRow: React.FC<DataRowProps> = ({
         <div className="bg-primary/20 pointer-events-none absolute inset-0 opacity-0 transition-opacity group-hover:opacity-100"></div>
 
         {/* Number Box */}
-        <div
-          className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-black text-base ${
-            isSelected ? 'bg-highlight text-black' : 'bg-muted text-muted-foreground'
-          } overflow-hidden`}
-        >
-          {number}
-        </div>
+        {number !== null && (
+          <div
+            className={`flex h-7 max-h-7 w-7 flex-shrink-0 items-center justify-center rounded-l border-r border-black text-base ${
+              isSelected ? 'bg-highlight text-black' : 'bg-muted text-muted-foreground'
+            } overflow-hidden`}
+          >
+            {number}
+          </div>
+        )}
 
-        {/* Color Circle (Optional) */}
+        {/* add some space if there is not segment index */}
+        {number === null && <div className="ml-1 h-7"></div>}
         {colorHex && (
           <div className="flex h-7 w-5 items-center justify-center">
             <span