show tensor details in legend (#310)

<img width="800" alt="image"
src="https://github.com/user-attachments/assets/e598aa7a-5c5d-40e5-9039-6ec8cdb35cbb"
/>
<img width="800" alt="image"
src="https://github.com/user-attachments/assets/12377bd7-3c41-4537-9599-0fb786e73d0c"
/>

Author: aidemsined

src/components/operation-details/MemoryLegendElement.tsx

@@ -81,6 +81,7 @@ export const MemoryLegendElement: React.FC<{
             <div
                 className={classNames('legend-details', {
                     'extra-info': bufferType || layout,
+                    'shape-info': derivedTensor,
                 })}
             >
                 <div className='format-numbers monospace'>{prettyPrintAddress(chunk.address, memSize)}</div>
@@ -96,6 +97,11 @@ export const MemoryLegendElement: React.FC<{
                         {layout && <span className='monospace'>{DeviceOperationLayoutTypes[layout]}</span>}
                     </div>
                 )}
+                {derivedTensor && (
+                    <div className='shape-info-slot'>
+                        {derivedTensor.shape} &nbsp; {derivedTensor.dtype}
+                    </div>
+                )}
             </div>
         </Component>
     );

src/model/APIData.ts

@@ -7,8 +7,6 @@ import { RemoteConnection, RemoteFolder } from '../definitions/RemoteConnection'
 import { MemoryConfig } from '../functions/parseMemoryConfig';
 
 export interface TensorData extends Tensor {
-    shape: string;
-    dtype: string;
     layout: string;
     memory_config: MemoryConfig | null;
     device_id: number | null;

src/model/Graph.ts

@@ -21,6 +21,8 @@ export interface Tensor {
     producerNames: string[];
     consumerNames: string[];
     memory_config: MemoryConfig | null;
+    shape: string;
+    dtype: string;
 }
 
 export interface HistoricalTensor extends Tensor {

src/scss/components/MemoryLegendElement.scss

@@ -36,12 +36,20 @@
 
     .legend-details {
         display: inline-grid;
-        grid-template-columns: 0.7fr 1.2fr 0.75fr 1fr;
+        grid-template-columns: 0.2fr 1.2fr 0.5fr 1fr 2fr;
         gap: 15px;
         text-align: left;
 
         &.extra-info {
-            grid-template-columns: 0.7fr 1.2fr 0.75fr 1fr 2fr;
+            grid-template-columns: 0.2fr 1.2fr 0.5fr 1fr 2fr;
+        }
+
+        &.shape-info {
+            grid-template-columns: 0.2fr 1.2fr 0.5fr 1fr 2fr;
+        }
+
+        &.extra-info.shape-info {
+            grid-template-columns: 0.2fr 1.2fr 0.5fr 1fr 2fr 3fr;
         }
     }