fix(core): Address 3D reconstruction and Android compatibility issues and clean up 4D data mode (#4762)

platform/docs/docs/platform/services/ui/ui-modal-service.md

@@ -15,7 +15,6 @@ be centered, and not draggable. They're commonly used when:
 If you're curious about the DOs and DON'Ts of dialogs and modals, check out this
 article: ["Best Practices for Modals / Overlays / Dialog Windows"][ux-article]
 
-customComponent: The modal service allows users to provide their own Modal UI using the customComponents.
 
 
 <div style={{padding:"56.25% 0 0 0", position:"relative"}}>
@@ -38,12 +37,17 @@ is expected to support, [check out it's interface in `@ohif/core`][interface]
 | Implementation                     | Consumer  |
 | ---------------------------------- | --------- |
 | [Modal Provider][modal-provider]\* | Modal.jsx |
-| customComponent | user extensions via setServiceImplementation({customComponent: Modal}) |
-
-`*` - Denotes maintained by OHIF
+| customComponent | user extensions via `setServiceImplementation({customComponent: Modal})` |
 
 
 
+### Custom Component
+If you would like to customize the modal component that OHIF uses, you can register your own
+component with the `customComponent` property.
+
+```js
+setServiceImplementation({customComponent: Modal})
+```
 
 
 > 3rd Party implementers may be added to this table via pull requests.

platform/docs/src/pages/components/NumericMetaShowcase.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Numeric from '../../../../ui-next/src/components/Numeric';
 import Icons from '../../../../ui-next/src/components/Icons';
 import ShowcaseRow from './ShowcaseRow';
@@ -7,6 +7,9 @@ import ShowcaseRow from './ShowcaseRow';
  * NumericShowcase component displays Numeric variants and examples
  */
 export default function NumericShowcase() {
+  const [controlledValue, setControlledValue] = useState(0);
+  const [controlledValues, setControlledValues] = useState([0, 100] as [number, number]);
+
   return (
     <div className="space-y-8">
       {/* Basic Number Input */}
@@ -14,19 +17,26 @@ export default function NumericShowcase() {
         title="Numeric - Number Input"
         description="Basic number input with min, max and a label"
         code={`
-<Numeric.Container mode="number" min={0} max={10} onChange={onChange}>
+<Numeric.Container mode="number" min={0} max={10} onChange={val => console.debug('Value changed:', val)}>
   <div className="flex flex-row items-center space-x-2">
     <Numeric.Label>Width</Numeric.Label>
     <Numeric.NumberInput />
   </div>
 </Numeric.Container>
 
-<Numeric.Container mode="number" min={0} max={100} onChange={onChange}>
-  <Numeric.Label className="text-secondary-foreground text-sm font-bold">Bolder</Numeric.Label>
+<Numeric.Container mode="number" className="space-y-1" min={0} max={100} onChange={val => console.debug('Value changed:', val)}>
+  <Numeric.Label className="text-muted-foreground text-sm font-bold">Bolder</Numeric.Label>
   <Numeric.NumberInput className="w-12" />
 </Numeric.Container>
 
-<Numeric.Container mode="number" className="flex flex-row items-center justify-between" onChange={onChange} min={0} value={123465789} max={10000000000000}>
+<Numeric.Container
+  mode="number"
+  className="flex flex-row items-center justify-between"
+  onChange={val => console.debug('Value changed:', val)}
+  min={0}
+  value={123465789}
+  max={10000000000000}
+>
   <Numeric.Label className="flex flex-row items-center">
     <Icons.Add />
     With Icon
@@ -82,18 +92,37 @@ export default function NumericShowcase() {
         title="Numeric - Single Range"
         description="Single range slider with optional number input"
         code={`
-<Numeric.Container mode="singleRange" min={0} max={100} step={1} value={50} onChange={onChange}>
+// For controlled component
+const [controlledValue, setControlledValue] = useState(0);
+
+<Numeric.Container mode="singleRange" min={0} max={100} onChange={val => console.debug('Value changed:', val)}>
   <Numeric.Label>Brightness</Numeric.Label>
   <Numeric.SingleRange showNumberInput />
 </Numeric.Container>
 
-<Numeric.Container mode="singleRange" min={-50} max={50} step={1} value={0} className="flex flex-row items-center" onChange={onChange}>
+<Numeric.Container
+  mode="singleRange"
+  min={-50}
+  max={50}
+  step={1}
+  defaultValue={0}
+  className="flex flex-row items-center"
+  onChange={val => console.debug('Value changed:', val)}
+>
   <Numeric.Label showValue>Contrast</Numeric.Label>
   <Numeric.SingleRange />
 </Numeric.Container>
 
-<Numeric.Container mode="singleRange" min={0} max={100} step={1} value={50} className="flex flex-row items-center space-x-2" onChange={onChange}>
-  <Numeric.Label>Something Else </Numeric.Label>
+<Numeric.Container
+  mode="singleRange"
+  min={0}
+  max={100}
+  step={1}
+  value={controlledValue}
+  className="flex flex-row items-center space-x-2"
+  onChange={val => setControlledValue(val as number)}
+>
+  <Numeric.Label>Controlled State (Parent) </Numeric.Label>
   <Numeric.SingleRange showNumberInput />
 </Numeric.Container>`}
       >
@@ -102,8 +131,6 @@ export default function NumericShowcase() {
             mode="singleRange"
             min={0}
             max={100}
-            step={1}
-            value={50}
             onChange={val => console.debug('Value changed:', val)}
           >
             <Numeric.Label>Brightness</Numeric.Label>
@@ -115,7 +142,7 @@ export default function NumericShowcase() {
             min={-50}
             max={50}
             step={1}
-            value={0}
+            defaultValue={0}
             className="flex flex-row items-center"
             onChange={val => console.debug('Value changed:', val)}
           >
@@ -128,11 +155,11 @@ export default function NumericShowcase() {
             min={0}
             max={100}
             step={1}
-            value={50}
+            value={controlledValue}
             className="flex flex-row items-center space-x-2"
-            onChange={val => console.debug('Value changed:', val)}
+            onChange={val => setControlledValue(val as number)}
           >
-            <Numeric.Label>Something Else </Numeric.Label>
+            <Numeric.Label>Controlled State (Parent) </Numeric.Label>
             <Numeric.SingleRange showNumberInput />
           </Numeric.Container>
         </div>
@@ -143,18 +170,44 @@ export default function NumericShowcase() {
         title="Numeric - Double Range"
         description="Double range slider for selecting a range of values"
         code={`
-<Numeric.Container mode="doubleRange" min={0} max={100} step={1} values={[30, 70]} onChange={onChange}>
+// For controlled component
+const [controlledValues, setControlledValues] = useState<[number, number]>([0, 100]);
+
+<Numeric.Container
+  mode="doubleRange"
+  min={0}
+  max={100}
+  step={1}
+  className="space-y-1"
+  onChange={vals => console.debug('Values changed:', vals)}
+>
   <Numeric.Label showValue>Window Width/Level</Numeric.Label>
   <Numeric.DoubleRange />
 </Numeric.Container>
 
-<Numeric.Container mode="doubleRange" min={0} max={100} step={1} values={[30, 70]}>
+<Numeric.Container
+  mode="doubleRange"
+  min={0}
+  max={100}
+  step={1}
+  defaultValues={[30, 70]}
+  className="space-y-1"
+  onChange={vals => console.debug('Values changed:', vals)}
+>
   <Numeric.Label>Window Width/Level</Numeric.Label>
   <Numeric.DoubleRange showNumberInputs />
 </Numeric.Container>
 
-<Numeric.Container mode="doubleRange" min={0} max={100} step={1} values={[30, 70]} className="flex flex-row items-center space-x-2" onChange={onChange}>
-  <Numeric.Label>Inline double slider</Numeric.Label>
+<Numeric.Container
+  mode="doubleRange"
+  min={0}
+  max={100}
+  step={1}
+  values={controlledValues}
+  className="flex flex-row items-center space-x-2"
+  onChange={vals => setControlledValues(vals as [number, number])}
+>
+  <Numeric.Label>Controlled State (Parent) </Numeric.Label>
   <Numeric.DoubleRange />
 </Numeric.Container>`}
       >
@@ -164,7 +217,6 @@ export default function NumericShowcase() {
             min={0}
             max={100}
             step={1}
-            values={[30, 70]}
             className="space-y-1"
             onChange={vals => console.debug('Values changed:', vals)}
           >
@@ -177,8 +229,9 @@ export default function NumericShowcase() {
             min={0}
             max={100}
             step={1}
-            values={[30, 70]}
+            defaultValues={[30, 70]}
             className="space-y-1"
+            onChange={vals => console.debug('Values changed:', vals)}
           >
             <Numeric.Label>Window Width/Level</Numeric.Label>
             <Numeric.DoubleRange showNumberInputs />
@@ -189,11 +242,11 @@ export default function NumericShowcase() {
             min={0}
             max={100}
             step={1}
-            values={[30, 70]}
+            values={controlledValues}
             className="flex flex-row items-center space-x-2"
-            onChange={vals => console.debug('Values changed:', vals)}
+            onChange={vals => setControlledValues(vals as [number, number])}
           >
-            <Numeric.Label>Inline double slider</Numeric.Label>
+            <Numeric.Label>Controlled State (Parent) </Numeric.Label>
             <Numeric.DoubleRange />
           </Numeric.Container>
         </div>
@@ -204,17 +257,35 @@ export default function NumericShowcase() {
         title="Numeric - Combined Examples"
         description="Different modes and configurations working together"
         code={`
-<Numeric.Container mode="number" min={0} max={10} step={0.1}>
+<Numeric.Container
+  mode="number"
+  min={0}
+  max={10}
+  step={0.1}
+  className="space-y-1"
+>
   <Numeric.Label>Zoom Factor</Numeric.Label>
   <Numeric.NumberInput />
 </Numeric.Container>
 
-<Numeric.Container mode="singleRange" min={0} max={360} step={1}>
+<Numeric.Container
+  mode="singleRange"
+  min={0}
+  max={360}
+  step={1}
+  className="space-y-1"
+>
   <Numeric.Label showValue>Rotation</Numeric.Label>
   <Numeric.SingleRange showNumberInput />
 </Numeric.Container>
 
-<Numeric.Container mode="doubleRange" min={-1000} max={3000} values={[1000, 2000]} step={10}>
+<Numeric.Container
+  mode="doubleRange"
+  min={-1000}
+  max={3000}
+  step={10}
+  className="space-y-1"
+>
   <Numeric.Label showValue>CT Window</Numeric.Label>
   <Numeric.DoubleRange showNumberInputs />
 </Numeric.Container>`}
@@ -246,7 +317,6 @@ export default function NumericShowcase() {
             mode="doubleRange"
             min={-1000}
             max={3000}
-            values={[1000, 2000]}
             step={10}
             className="space-y-1"
           >