-
- setSelectedRange([parseInt(value, 10), selectedRange[1]])}
- fill={false}
- disabled={isOperationDetails}
- small
- />
-
- setSelectedRange([selectedRange[0], parseInt(value, 10)])}
- fill={false}
- disabled={isOperationDetails}
- small
- />
-
+ {selectedPerformanceRange && (
+
+
+
+ {
+ setSelectedPerformanceRange([
+ parseInt(value, 10) || perfMin!,
+ selectedPerformanceRange[1],
+ ]);
+ setIsUserPerfChange(true);
+ }}
+ fill={false}
+ disabled={!isPerformanceRoute}
+ small
+ />
+ {
+ setSelectedPerformanceRange([
+ selectedPerformanceRange[0],
+ parseInt(value, 10) || perfMax!,
+ ]);
+ setIsUserPerfChange(true);
+ }}
+ fill={false}
+ disabled={!isPerformanceRoute}
+ small
+ />
+
+
+
+ {perfMin && perfMax && selectedPerformanceRange && (
+
+
{
+ setSelectedPerformanceRange(value);
+ setIsUserPerfChange(true);
+ }}
+ min={perfMin}
+ max={perfMax}
+ labelStepSize={getStepSize(perfMax)}
+ disabled={!isPerformanceRoute}
+ labelRenderer={(id, options) =>
+ getPerformanceLabel(id, perfData, options?.isHandleTooltip)
+ }
+ />
+ Performance
+
+ )}
+
+
+ {perfMin && perfMax && (
+
+
+ )}
+
+
+ )}
- {/*
- {perfAxis?.map((tick, index) => (
-
- {tick}
+ {selectedOperationRange && (
+
+
+ {
+ setSelectedOperationRange([
+ parseInt(value, 10) || opMin!,
+ selectedOperationRange[1],
+ ]);
+ setIsUserOpChange(true);
+ }}
+ fill={false}
+ disabled={shouldDisableOpRange}
+ small
+ />
+ {
+ setSelectedOperationRange([
+ selectedOperationRange[0],
+ parseInt(value, 10) || opMax!,
+ ]);
+ setIsUserOpChange(true);
+ }}
+ fill={false}
+ disabled={shouldDisableOpRange}
+ small
+ />
- ))}
-
*/}
-
-
setSelectedRange(value)}
- min={min}
- max={max}
- labelStepSize={stepSize}
- disabled={isOperationDetails}
- labelRenderer={(id, options) => getOperationLabel(id, operations, options?.isHandleTooltip)}
- />
-
+
+ )}
+
+ {opMin && opMax && selectedOperationRange && (
+
+
{
+ setSelectedOperationRange(value);
+ setIsUserOpChange(true);
+ }}
+ min={opMin}
+ max={opMax}
+ labelStepSize={getStepSize(opMax)}
+ disabled={shouldDisableOpRange}
+ labelRenderer={(id, options) => getOperationLabel(id, operations, options?.isHandleTooltip)}
+ />
+ Operations
+
+ )}
-
-
-
+ {opMin && opMax && (
+
+
+ )}
- ) : null;
+ ) : (
+
+ );
}
const getStepSize = (max: number) => (RANGE_STEP > max ? 1 : Math.ceil(max / RANGE_STEP));
@@ -128,4 +287,10 @@ const getOperationLabel = (selectedId: number, operations?: OperationDescription
: selectedId.toString();
};
+const getPerformanceLabel = (selectedId: number, data?: RowData[], isTooltip?: boolean): string => {
+ const matchingRow = data?.find((r) => r.ORIGINAL_ID === selectedId);
+
+ return matchingRow && isTooltip ? `${matchingRow.ORIGINAL_ID}\xA0${matchingRow['OP CODE']}` : selectedId.toString();
+};
+
export default Range;
diff --git a/src/components/npe/NPECongestionHeatMap.tsx b/src/components/npe/NPECongestionHeatMap.tsx
new file mode 100644
index 00000000..160c5f57
--- /dev/null
+++ b/src/components/npe/NPECongestionHeatMap.tsx
@@ -0,0 +1,178 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { PopoverPosition, Tooltip } from '@blueprintjs/core';
+import { calculateLinkCongestionColor } from './drawingApi';
+import { TimestepData } from '../../model/NPEModel';
+
+interface NPEHeatMapProps {
+ timestepList: TimestepData[];
+}
+
+const NPECongestionHeatMap: React.FC
= ({ timestepList }) => {
+ const canvasRef = useRef(null);
+ const [canvasWidth, setCanvasWidth] = useState(window.innerWidth);
+ useEffect(() => {
+ const handleResize = () => setCanvasWidth(window.innerWidth);
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+ const canvasHeight = 30;
+
+ const [tooltip, setTooltip] = useState<{ x: number; y: number; text: React.JSX.Element } | null>(null);
+
+ const congestionMapPerTimestamp = useMemo(() => {
+ return {
+ worst: timestepList.map((timestep) => {
+ const value = Math.max(-1, ...timestep.link_demand.map((route) => route[3]));
+ return { value, color: calculateLinkCongestionColor(value) };
+ }),
+
+ utilization: timestepList.map((timestep) => ({
+ value: timestep.avg_link_util,
+ color: calculateLinkCongestionColor(timestep.avg_link_util),
+ })),
+
+ demand: timestepList.map((timestep) => ({
+ value: timestep.avg_link_demand,
+ color: calculateLinkCongestionColor(timestep.avg_link_demand),
+ })),
+ };
+ }, [timestepList]);
+
+ useEffect(() => {
+ const canvas = canvasRef.current;
+ const ctx = canvas?.getContext('2d');
+
+ if (!canvas || !ctx) {
+ return;
+ }
+
+ ctx.clearRect(0, 0, canvas.width, canvas.height);
+ const chunkWidth = canvas.width / congestionMapPerTimestamp.worst.length;
+ congestionMapPerTimestamp.worst.forEach(({ color }, index) => {
+ ctx.fillStyle = color;
+ ctx.fillRect(index * chunkWidth, 0, chunkWidth, canvas.height / 3);
+ });
+ congestionMapPerTimestamp.utilization.forEach(({ color }, index) => {
+ ctx.fillStyle = color;
+ ctx.fillRect(index * chunkWidth, canvas.height / 3, chunkWidth, (canvas.height / 3) * 2);
+ });
+ congestionMapPerTimestamp.demand.forEach(({ color }, index) => {
+ ctx.fillStyle = color;
+ ctx.fillRect(index * chunkWidth, (canvas.height / 3) * 2, chunkWidth, canvas.height);
+ });
+ }, [congestionMapPerTimestamp, canvasWidth, canvasHeight]);
+
+ const handleMouseMove = (event: React.MouseEvent) => {
+ const canvas = canvasRef.current;
+ if (canvas) {
+ const rect = canvas.getBoundingClientRect();
+ const mouseX = event.clientX - rect.left;
+ const chunkWidth = rect.width / congestionMapPerTimestamp.worst.length;
+ const hoveredIndex = Math.floor(mouseX / chunkWidth);
+
+ if (hoveredIndex > -1) {
+ const x = mouseX;
+
+ setTooltip({
+ x,
+ y: 0,
+ text: (
+
+
+ {' '}
+ Max Demand:{' '}
+ {congestionMapPerTimestamp.worst[hoveredIndex].value > -1
+ ? congestionMapPerTimestamp.worst[hoveredIndex].value.toFixed(2)
+ : 'N/A'}
+
+
+ {' '}
+ Avg Utilization: {congestionMapPerTimestamp.utilization[hoveredIndex].value.toFixed(2)}
+
+
+ {' '}
+ Avg Demand: {congestionMapPerTimestamp.demand[hoveredIndex].value.toFixed(2)}
+
+
+
+
+ {Object.keys(npeData.common_info).map((key) => (
+
+ {key}:
+ {/* @ts-expect-error ts-migrate(2531) */}
+ {formatMetadata(npeData.common_info[key])}
+
+ ))}
+
+
+
+ Timestamp:
+ {selectedTimestep}
+
+
+ Active transfers:
+ {transfers.length}
+
+
+
+ {!isPlaying && (
+
+ )}
+ {isPlaying && (
+
+ )}
+ 20 ? npeData.timestep_data.length / 20 : 1}
+ value={selectedTimestep}
+ onChange={(value: number) => handleScrubberChange(value)}
+ />
+
+
+
+
+
+ {Array.from({ length: width }).map((_, x) =>
+ Array.from({ length: height }).map((__, y) => (
+ // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
+
showActiveTransfers(null)}
+ style={{
+ gridColumn: x + 1,
+ gridRow: y + 1,
+ width: `${tensixSize}px`,
+ height: `${tensixSize}px`,
+ border: '1px solid black',
+ }}
+ key={`${x}-${y}`}
+ />
+ )),
+ )}
+
+
+ {transfers.map((transfer) => (
+ <>
+ {transfer?.src && (
+
+ )}
+ {transfer.dst.map((dst) => (
+
+ ))}
+
+ ))}
+
+ {links?.link_demand.map((route, index) => (
+
+ ))}
+
+
+ {transferListSelectionRendering.map((row, rowIndex) =>
+ row.map((transfersForNoc, colIndex) => (
+
+ )),
+ )}
+
+ {highlightedTransfer !== null && (
+
+ {highlightedTransfer?.route.map((point) => (
+
+ ))}
+
+ )}
+
+
+ {Object.keys(groupedTransfersByNoCID).length !== 0 && (
+ <>
+
+ Active transfers through {selectedNode?.coords.join('-')}
+
+ {Object.entries(groupedTransfersByNoCID).map(([nocId, localTransferList]) => (
+
+
NOC ID: {nocId}
+ {localTransferList.map((transfer) => (
+
setHighlightedTransfer(transfer)}
+ // eslint-disable-next-line jsx-a11y/mouse-events-have-key-events
+ onMouseOut={() => setHighlightedTransfer(null)}
+ >
+
+ {transfer.id}
+
+
+ {transfer.src.join('-')}
+ {' '}
+ {' '}
+
+ {transfer.dst.length === 1
+ ? transfer.dst[0].join('-')
+ : `${transfer.dst[0].join('-')} - ${transfer.dst[transfer.dst.length - 1].join('-')}`}
+
+
+
{formatSize(transfer.total_bytes)}B
+
{transfer.noc_event_type}
+
injection rate: {transfer.injection_rate.toFixed(2)}
+
+ ))}
+
+ ))}
+
+ )}
+
+
+
+ );
+};
+
+export default NPEView;
diff --git a/src/components/npe/TensixTransferRenderer.tsx b/src/components/npe/TensixTransferRenderer.tsx
new file mode 100644
index 00000000..16704200
--- /dev/null
+++ b/src/components/npe/TensixTransferRenderer.tsx
@@ -0,0 +1,80 @@
+import React, { Fragment } from 'react';
+import { LinkPoints } from './drawingApi';
+import { NoCID } from '../../model/NPEModel';
+
+interface SVGTensixRendererProps {
+ width: number;
+ height: number;
+ data: LinkPoints[];
+ isMulticolor?: boolean;
+ style?: React.CSSProperties;
+}
+
+const TensixTransferRenderer: React.FC
= ({
+ width,
+ height,
+ data,
+ isMulticolor = false,
+ style,
+}: SVGTensixRendererProps) => {
+ const strokeLength = 5;
+ const dashMap: Map = new Map();
+ const dashArray: Map = new Map();
+ data.forEach((line) => {
+ if (!dashMap.has(line.nocId)) {
+ dashMap.set(line.nocId, 1);
+ } else {
+ const cnt = dashMap.get(line.nocId)!;
+ dashMap.set(line.nocId, cnt + 1);
+ }
+ });
+ dashMap.forEach((cnt, nocId) => {
+ dashArray.set(nocId, [strokeLength, (cnt - 1) * strokeLength]);
+ });
+
+ return (
+
+ );
+};
+
+export default TensixTransferRenderer;
diff --git a/src/components/npe/drawingApi.ts b/src/components/npe/drawingApi.ts
new file mode 100644
index 00000000..770a0cdf
--- /dev/null
+++ b/src/components/npe/drawingApi.ts
@@ -0,0 +1,230 @@
+import { NoCID } from '../../model/NPEModel';
+
+export const NODE_SIZE = 50;
+
+const NOC_CENTER = { x: 25, y: NODE_SIZE - 25 };
+const CENTER_DISPERSION = 5; // dispersion from the starting point
+const NOC_0_X_OFFSET = -CENTER_DISPERSION;
+const NOC_0_Y_OFFSET = -CENTER_DISPERSION;
+const NOC_1_X_OFFSET = CENTER_DISPERSION;
+const NOC_1_Y_OFFSET = CENTER_DISPERSION;
+const CORE_CENTER = { x: NODE_SIZE - 10, y: 10 };
+const CORE_DISPERSION = 2;
+
+export const NOC_CONFIGURATION = {
+ noc0: { x: NOC_CENTER.x + NOC_0_X_OFFSET, y: NOC_CENTER.y + NOC_0_Y_OFFSET },
+ noc1: { x: NOC_CENTER.x + NOC_1_X_OFFSET, y: NOC_CENTER.y + NOC_1_Y_OFFSET },
+ core: { x: CORE_CENTER.x, y: CORE_CENTER.y },
+};
+
+export interface LinkPoints {
+ x1: number;
+ y1: number;
+ x2: number;
+ y2: number;
+ arrow: { p1: string; p2: string; p3: string };
+ transform: string;
+ color?: string;
+ colors?: string[];
+ nocId: NoCID;
+}
+
+const colorList: string[] = [
+ '#FFFFFF', // White
+ '#FF0000', // Red
+ '#0000FF', // Blue
+ '#FFFF00', // Yellow
+ '#FF00FF', // Fuchsia
+ '#FF4500', // OrangeRed
+ 'rgb(91,131,19)',
+ '#9400D3', // DarkViolet
+ '#FFD700', // Gold
+ '#1E90FF', // DodgerBlue
+ '#007500', // LimeGreen
+ '#FF69B4', // HotPink
+ '#BA55D3', // MediumOrchid
+ '#7FFF00', // Chartreuse
+ '#B22222', // FireBrick
+];
+
+function* colorGenerator(): IterableIterator {
+ let i = 0;
+ while (true) {
+ yield colorList[i]!;
+ i = (i + 1) % colorList.length;
+ }
+}
+
+const getNextColor = colorGenerator();
+const routeColorMap = new Map();
+export const getRouteColor = (transferId: number): string => {
+ if (!routeColorMap.has(transferId)) {
+ routeColorMap.set(transferId, getNextColor.next().value);
+ }
+ return routeColorMap.get(transferId) || '#ffffff';
+};
+
+export const getLinkPoints = (nocId: NoCID, color?: string): LinkPoints => {
+ let x1: number = 0;
+ let x2: number = 0;
+ let y1: number = 0;
+ let y2: number = 0;
+
+ let arrowHeadHeight = 9;
+ let arrowHeadWidth = 9;
+
+ let transform = '';
+ let angle = 0;
+
+ let arrowOffset = 0;
+ let arrow = { p1: '', p2: '', p3: '' };
+ // const arrowSecondary = { p1: '', p2: '', p3: '' };
+
+ switch (nocId) {
+ case NoCID.NOC1_NORTH:
+ // up out
+ arrowOffset = 0;
+ x1 = NOC_CENTER.x + NOC_1_X_OFFSET;
+ y1 = NOC_CENTER.y + NOC_1_Y_OFFSET;
+ x2 = NOC_CENTER.x + NOC_1_X_OFFSET;
+ y2 = 0;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 + arrowHeadHeight + arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 + arrowHeadHeight + arrowOffset}`,
+ p3: `${x2},${y2 + arrowOffset}`,
+ };
+ break;
+
+ case NoCID.NOC1_WEST:
+ // left out
+ arrowOffset = 0;
+
+ x1 = NOC_CENTER.x + NOC_1_X_OFFSET;
+ x2 = 0;
+ y1 = NOC_CENTER.y + NOC_1_Y_OFFSET;
+ y2 = NOC_CENTER.y + NOC_1_Y_OFFSET;
+ arrow = {
+ p1: `${x2 + arrowHeadHeight + arrowOffset},${y2 - arrowHeadWidth / 2}`,
+ p2: `${x2 + arrowHeadHeight + arrowOffset},${y2 + arrowHeadWidth / 2}`,
+ p3: `${x2 + arrowOffset},${y2}`,
+ };
+
+ break;
+
+ case NoCID.NOC0_SOUTH:
+ // down out
+ arrowOffset = 2;
+ x1 = NOC_CENTER.x + NOC_0_X_OFFSET;
+ x2 = NOC_CENTER.x + NOC_0_X_OFFSET;
+ y1 = NOC_CENTER.y + NOC_0_Y_OFFSET;
+ y2 = NODE_SIZE;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 - arrowHeadHeight - arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 - arrowHeadHeight - arrowOffset}`,
+ p3: `${x2},${y2 - arrowOffset}`,
+ };
+
+ break;
+
+ case NoCID.NOC0_EAST:
+ // right out
+ arrowOffset = 2;
+ x1 = NOC_CENTER.x + NOC_0_X_OFFSET;
+ x2 = NODE_SIZE;
+ y1 = NOC_CENTER.y + NOC_0_Y_OFFSET;
+ y2 = NOC_CENTER.y + NOC_0_Y_OFFSET;
+ arrow = {
+ p1: `${x2 - arrowHeadHeight - arrowOffset},${y2 - arrowHeadWidth / 2}`,
+ p2: `${x2 - arrowHeadHeight - arrowOffset},${y2 + arrowHeadWidth / 2}`,
+ p3: `${x2 - arrowOffset},${y2}`,
+ };
+ break;
+ case NoCID.NOC0_OUT:
+ arrowHeadWidth = 7;
+ arrowHeadHeight = 7;
+ arrowOffset = 2;
+ x1 = NOC_CENTER.x + NOC_0_X_OFFSET - CORE_DISPERSION;
+ x2 = CORE_CENTER.x + NOC_0_X_OFFSET - CORE_DISPERSION;
+ y1 = NOC_CENTER.y + NOC_0_Y_OFFSET - CORE_DISPERSION;
+ y2 = CORE_CENTER.y + NOC_0_Y_OFFSET - CORE_DISPERSION;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p3: `${x2},${y2 - arrowOffset}`,
+ };
+ angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 90;
+ transform = `rotate(${angle} ${x2} ${y2})`;
+
+ break;
+ case NoCID.NOC0_IN:
+ arrowHeadWidth = 7;
+ arrowHeadHeight = 7;
+ arrowOffset = 2;
+ x1 = CORE_CENTER.x + NOC_0_X_OFFSET + CORE_DISPERSION;
+ x2 = NOC_CENTER.x + NOC_0_X_OFFSET + CORE_DISPERSION;
+ y2 = NOC_CENTER.y + NOC_0_Y_OFFSET + CORE_DISPERSION;
+ y1 = CORE_CENTER.y + NOC_0_Y_OFFSET + CORE_DISPERSION;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p3: `${x2},${y2 - arrowOffset}`,
+ };
+ angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 90;
+ transform = `rotate(${angle} ${x2} ${y2})`;
+ break;
+ case NoCID.NOC1_OUT:
+ arrowHeadWidth = 7;
+ arrowHeadHeight = 7;
+ arrowOffset = 0;
+ x1 = NOC_CENTER.x + NOC_1_X_OFFSET - CORE_DISPERSION;
+ x2 = CORE_CENTER.x + NOC_1_X_OFFSET - CORE_DISPERSION;
+ y1 = NOC_CENTER.y + NOC_1_Y_OFFSET - CORE_DISPERSION;
+ y2 = CORE_CENTER.y + NOC_1_Y_OFFSET - CORE_DISPERSION;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p3: `${x2},${y2 - arrowOffset}`,
+ };
+ angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 90;
+
+ transform = `rotate(${angle} ${x2} ${y2})`;
+
+ break;
+ case NoCID.NOC1_IN:
+ arrowHeadWidth = 7;
+ arrowHeadHeight = 7;
+ arrowOffset = 0;
+ x1 = CORE_CENTER.x + NOC_1_X_OFFSET + CORE_DISPERSION;
+ x2 = NOC_CENTER.x + NOC_1_X_OFFSET + CORE_DISPERSION;
+ y2 = NOC_CENTER.y + NOC_1_Y_OFFSET + CORE_DISPERSION;
+ y1 = CORE_CENTER.y + NOC_1_Y_OFFSET + CORE_DISPERSION;
+ arrow = {
+ p1: `${x2 - arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p2: `${x2 + arrowHeadWidth / 2},${y2 + arrowHeadHeight - arrowOffset}`,
+ p3: `${x2},${y2 - arrowOffset}`,
+ };
+ angle = (Math.atan2(y2 - y1, x2 - x1) * 180) / Math.PI + 90;
+
+ transform = `rotate(${angle} ${x2} ${y2})`;
+
+ break;
+ default:
+ // console.warn('Unknown link type', nocId);
+ break;
+ }
+ return { x2, y2, x1, y1, arrow, transform, color, nocId } as LinkPoints;
+};
+export const calculateLinkCongestionColor = (value: number, min: number = 0, isHC: boolean = false): string => {
+ if (value === -1) {
+ return `rgb(100, 100, 100)`;
+ }
+ const max = 150;
+ const normalizedVal = Math.min(value, max);
+ const ratio = (normalizedVal - min) / (max - min);
+ const intensity = Math.round(ratio * 255);
+ if (isHC) {
+ return `rgb(${intensity},${intensity},${255 - intensity})`;
+ }
+
+ return `rgb(${intensity}, ${255 - intensity}, 0)`;
+};
diff --git a/src/components/operation-details/DeviceOperationsFullRender.tsx b/src/components/operation-details/DeviceOperationsFullRender.tsx
index 1502b63e..aaa9be52 100644
--- a/src/components/operation-details/DeviceOperationsFullRender.tsx
+++ b/src/components/operation-details/DeviceOperationsFullRender.tsx
@@ -3,18 +3,21 @@
// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
import React, { Fragment, JSX, useCallback } from 'react';
-import { Icon, Intent } from '@blueprintjs/core';
+import { Icon, Intent, Tooltip } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
import { useAtomValue } from 'jotai/index';
import classNames from 'classnames';
-import { DeviceOperationTypes, Node, NodeType } from '../../model/APIData';
+import { DeviceOperationTypes, Node, NodeType, Tensor } from '../../model/APIData';
import 'styles/components/DeviceOperationFullRender.scss';
import { MemoryLegendElement } from './MemoryLegendElement';
import { OperationDetails } from '../../model/OperationDetails';
import { selectedAddressAtom } from '../../store/app';
-import Collapsible from '../Collapsible';
+import Collapsible, { COLLAPSIBLE_EMPTY_CLASS } from '../Collapsible';
import { AllocationDetails, processMemoryAllocations } from '../../functions/processMemoryAllocations';
-import { formatSize, toReadableShape } from '../../functions/math';
+import { formatSize, prettyPrintAddress, toReadableShape } from '../../functions/math';
+import { getBufferColor, getTensorColor } from '../../functions/colorGenerator';
+
+// TODO: this component definitely needs to be broken down into smaller components
const DeviceOperationsFullRender: React.FC<{
deviceOperations: Node[];
@@ -24,21 +27,96 @@ const DeviceOperationsFullRender: React.FC<{
const selectedAddress = useAtomValue(selectedAddressAtom);
const { memoryAllocationList, peakMemoryLoad } = processMemoryAllocations(deviceOperations);
- const formatDeviceOpParameters = (node: Node) => {
- if (node.node_type === NodeType.tensor) {
- return (
-
- Tensor {node.params.tensor_id} {toReadableShape(node.params.shape)}
-
- );
- }
- if (node.node_type === NodeType.circular_buffer_deallocate_all) {
- return '';
- }
- return node.node_type;
- };
+ const formatDeviceOpParameters = useCallback(
+ (node: Node) => {
+ const bufferDetails = (buffer: Node, tensorId?: number) => {
+ const { allocation } = buffer;
+ let tensorSquare = null;
+ const address =
+ allocation?.params.address === undefined ? undefined : parseInt(allocation.params.address, 10);
+ if (address !== undefined || tensorId !== undefined) {
+ const tensor: Tensor | undefined =
+ address !== undefined
+ ? details.tensorListByAddress.get(address)
+ : Object.values(details.tensorListByAddress).find((t) => t.id === tensorId);
+ tensorSquare = (
+
+ );
+ }
+ return (
+
+
+ {tensorSquare} {address !== undefined && `${prettyPrintAddress(address, 0)}`}
+
+
+ {formatSize(parseInt(buffer.params.size, 10))}
+ {buffer.params.type}
+
+ );
+ };
+ if (node.node_type === NodeType.tensor) {
+ const buffers = node.buffer?.map((buffer) => <>{bufferDetails(buffer, node.params.tensor_id)});
+
+ const tensor = details.tensorList.find((t) => t.id === parseInt(node.params.tensor_id.toString(), 10));
+ const square =
+ (tensor && (
+
+ )) ||
+ null;
+ const producer = tensor?.operationIdentifier || '';
+ return buffers ? (
+
+ {buffers}
+ {producer}
+
+ }
+ position='top'
+ >
+
+ {square} Tensor {node.params.tensor_id} {toReadableShape(node.params.shape)}
+
+
+ ) : (
+
+ {square} Tensor {node.params.tensor_id} {toReadableShape(node.params.shape)}
+
+ );
+ }
+ if (node.node_type === NodeType.circular_buffer_deallocate_all) {
+ return '';
+ }
+ return node.node_type;
+ },
+ [details],
+ );
const preprocessConnections = useCallback((ops: Node[]) => {
+ const captureStart = ops.find((op) => op.node_type === NodeType.capture_start);
const operations: Node[] = ops.map((op) => ({ ...op, inputs: [], outputs: [] }));
const getConnectedNodes = (node: Node): Node[] => {
return node.connections
@@ -59,22 +137,67 @@ const DeviceOperationsFullRender: React.FC<{
}
return [];
});
+
// connect end to start
- getConnectedNodes(op).forEach((node) => {
- if (node.node_type === NodeType.function_end) {
- node.operation = op;
+ getConnectedNodes(op).forEach((n) => {
+ if (n.node_type === NodeType.function_end) {
+ n.operation = op;
+ }
+ });
+ } else if (op.node_type === NodeType.buffer) {
+ const connectedNodes = getConnectedNodes(op);
+ connectedNodes.forEach((n) => {
+ if (n.node_type === NodeType.tensor) {
+ n.params.device_id = op.params.device_id;
+ if (!n.buffer) {
+ n.buffer = [];
+ }
+ const deviceId = (op.params.device_id as number) || 0;
+ n.buffer[deviceId] = op;
+ }
+ });
+ } else if (op.node_type === NodeType.buffer_allocate) {
+ const connectedNodes = getConnectedNodes(op);
+ connectedNodes.forEach((n) => {
+ if (n.node_type === NodeType.buffer) {
+ const deviceId = (op.params.device_id as number) || 0;
+ const bufferDeviceId = (n.params.device_id as number) || 0;
+ if (deviceId === bufferDeviceId) {
+ n.allocation = op;
+ }
+ // n.params.device_id = op.params.device_id;
+ // if (!n.allocation) {
+ // n.allocation = [];
+ // }
+ // n.allocation.push(op);
}
});
} else if (op.node_type !== NodeType.function_end && op.node_type !== NodeType.capture_start) {
// inputs reversed
const connectedNodes = getConnectedNodes(op);
- connectedNodes.forEach((node) => {
- if (node.node_type === NodeType.function_start) {
- node.inputs.push(op);
+ connectedNodes.forEach((n) => {
+ if (n.node_type === NodeType.function_start) {
+ n.inputs.push(op);
}
});
}
});
+ operations
+ .filter((op) => op.node_type === NodeType.function_start)
+ .filter((op) => !captureStart?.connections.includes(op.id))
+ .forEach((op) => {
+ op.outputs.forEach((n) => {
+ if (n.node_type === NodeType.tensor) {
+ if (n.params.device_id !== undefined) {
+ // KEEPING in case device id arrays confirmed
+ // op.params.derived_device_id = [
+ // ...new Set(op.params.derived_device_id || [n.params.device_id]),
+ // ];
+ op.params.device_id = n.params.device_id;
+ }
+ }
+ });
+ });
return operations;
}, []);
@@ -116,12 +239,17 @@ const DeviceOperationsFullRender: React.FC<{
intent={Intent.SUCCESS}
icon={IconNames.CUBE_ADD}
/>
+ {/* DEBUGGING */}
+ {/* {node.operation?.params.device_id} */}
{opName} (
{node.operation?.inputs.map((arg) => (
+ {/* */}
+ {/* id: {arg.id} {node.connections.join(',')} */}
+ {/* */}
{formatDeviceOpParameters(arg)}
))}
@@ -131,6 +259,9 @@ const DeviceOperationsFullRender: React.FC<{
className='params'
key={arg.id}
>
+ {/* */}
+ {/* id: {arg.id} {node.connections.join(',')} */}
+ {/* */}
{formatDeviceOpParameters(arg)}
))}
@@ -145,7 +276,7 @@ const DeviceOperationsFullRender: React.FC<{
label={label}
isOpen
collapseClassName={classNames('device-operation function-container', {
- COLLAPSIBLE_EMPTY_CLASS: !hasContent,
+ [COLLAPSIBLE_EMPTY_CLASS]: !hasContent,
})}
>
{innerContent}
@@ -174,12 +305,16 @@ const DeviceOperationsFullRender: React.FC<{
const buffer = node.params;
operationContent = (
);
- } else if (nodeType === NodeType.buffer) {
- const buffer = node.params;
- operationContent = (
-
- );
+ // KEEPING
+ // } else if (nodeType === NodeType.buffer) {
+ // const buffer = node.params;
+ // operationContent = (
+ //
+ // );
} else if (nodeType === NodeType.buffer_deallocate) {
const buffer = node.params;
operationContent = (
> = ({
- title,
- memoryInfo,
- children,
-}) => {
+const DeviceOperationNode: React.FC<
+ React.PropsWithChildren<{
+ title: string;
+ memoryInfo?: JSX.Element;
+ _node: Node;
+ }>
+> = ({ title, memoryInfo, _node, children }) => {
return (
- {title} {memoryInfo}
+ {title}
+ {/* DEBUGGING */}
+ {/* */}
+ {/* (id: {_node.id}) {_node.connections.join(',')} */}
+ {/* */}
+ {memoryInfo}
{children}
diff --git a/src/components/operation-details/DeviceOperationsGraphComponent.tsx b/src/components/operation-details/DeviceOperationsGraphComponent.tsx
index 0fb15552..fc7121d3 100644
--- a/src/components/operation-details/DeviceOperationsGraphComponent.tsx
+++ b/src/components/operation-details/DeviceOperationsGraphComponent.tsx
@@ -73,6 +73,7 @@ const GraphComponent: React.FC = ({ data, open, onClose })
));
return (
<>
+ ID: {node.id}
{tensorSquare}
{formatOperationName(node)}
@@ -99,7 +100,7 @@ const GraphComponent: React.FC = ({ data, open, onClose })
return {
id: node.id,
- label: formatOperationName(node),
+ label: `${node.id} ${formatOperationName(node)}`,
shape: 'box',
// level,
};
diff --git a/src/components/performance/PerfTable.tsx b/src/components/performance/PerfTable.tsx
index f547133f..da45356f 100644
--- a/src/components/performance/PerfTable.tsx
+++ b/src/components/performance/PerfTable.tsx
@@ -7,6 +7,7 @@ import React, { FC, useMemo, useState } from 'react';
import '../../scss/components/PerfTable.scss';
import { Switch } from '@blueprintjs/core';
import { IconNames } from '@blueprintjs/icons';
+import { useAtomValue } from 'jotai';
import { formatSize, toSecondsPretty } from '../../functions/math';
import {
color_row,
@@ -19,6 +20,7 @@ import {
} from '../../functions/perfFunctions';
import { Cell, MathFidelity, ProcessedRow, RowData } from '../../definitions/PerfTable';
import { useOptoPerfIdFiltered } from '../../hooks/useAPI';
+import { selectedPerformanceRangeAtom } from '../../store/app';
const analyze_matmul = (row: RowData) => {
const input_0_from_dram = String(row.INPUT_0_MEMORY || '').includes('DRAM');
@@ -267,6 +269,7 @@ export const PerformanceReport: FC = ({ data, minPercent
const [provideMatmulAdvice, setProvideMatmulAdvice] = useState(false);
const [hiliteHighDispatch, setHiliteHighDispatch] = useState(false);
const [isMultiDevice, setIsMultiDevice] = useState(false);
+ const selectedRange = useAtomValue(selectedPerformanceRangeAtom);
const opIdsMap = useOptoPerfIdFiltered();
const processedRows = useMemo(() => {
@@ -386,6 +389,16 @@ export const PerformanceReport: FC = ({ data, minPercent
);
};
+ const getFilteredRows = () => {
+ return selectedRange && processedRows.length > 0
+ ? processedRows.filter((row) => {
+ const rowId = parseInt(String(row?.ID?.raw_value), 10);
+
+ return rowId >= selectedRange[0] && rowId <= selectedRange[1];
+ })
+ : processedRows;
+ };
+
return (
<>
= ({ data, minPercent
- {processedRows.map((row, i) => (
+ {getFilteredRows().map((row, i) => (
{visibleHeaders.map((h) => (
diff --git a/src/definitions/Routes.ts b/src/definitions/Routes.ts
index 7afc1d6d..93b3b54e 100644
--- a/src/definitions/Routes.ts
+++ b/src/definitions/Routes.ts
@@ -10,6 +10,7 @@ const ROUTES = Object.freeze({
STYLEGUIDE: '/styleguide',
GRAPHTREE: '/graphtree',
PERFORMANCE: '/performance',
+ NPE: '/npe',
});
export default ROUTES;
diff --git a/src/hooks/useAPI.tsx b/src/hooks/useAPI.tsx
index fcba62fc..e389051c 100644
--- a/src/hooks/useAPI.tsx
+++ b/src/hooks/useAPI.tsx
@@ -9,6 +9,7 @@ import { useQuery } from 'react-query';
import Papa, { ParseResult } from 'papaparse';
import { useMemo } from 'react';
import { useAtomValue } from 'jotai';
+import { NumberRange } from '@blueprintjs/core';
import axiosInstance from '../libs/axiosInstance';
import {
Buffer,
@@ -30,7 +31,7 @@ import isValidNumber from '../functions/isValidNumber';
import { getUniqueDeviceIDs, mergeMultideviceRows } from '../functions/perfFunctions';
import { RowData } from '../definitions/PerfTable';
import { isDeviceOperation } from '../functions/filterOperations';
-import { selectedRangeAtom } from '../store/app';
+import { selectedOperationRangeAtom } from '../store/app';
const parseFileOperationIdentifier = (stackTrace: string): string => {
const regex = /File\s+"(?:.+\/)?([^/]+)",\s+line\s+(\d+)/;
@@ -214,11 +215,11 @@ const fetchDevices = async () => {
return meta;
};
-const fetchPerformanceDataRaw = async (): Promise> => {
+const fetchPerformanceDataRaw = async (): Promise>> => {
const { data } = await axiosInstance.get('/api/profiler/perf-results/raw');
- return new Promise>((resolve, reject) => {
- Papa.parse(data, {
+ return new Promise((resolve, reject) => {
+ Papa.parse>(data, {
complete: (results) => resolve(results),
error: (error: Error) => reject(error),
header: true,
@@ -233,7 +234,7 @@ interface MetaData {
interface FetchDeviceLogRawResult {
deviceMeta: MetaData;
- deviceLog: ParseResult;
+ deviceLog: ParseResult[]>;
}
const fetchDeviceLogRaw = async (): Promise => {
@@ -257,7 +258,7 @@ const fetchDeviceLogRaw = async (): Promise => {
.split(/,\s{1,2}/)
.join(','); // headers without spaces
const processedCsv = [headers, ...csv].join('\n');
- Papa.parse(processedCsv, {
+ Papa.parse[]>(processedCsv, {
header: true,
complete: (deviceLog) => resolve({ deviceMeta, deviceLog }),
error: (error: Error) => reject(error),
@@ -265,23 +266,21 @@ const fetchDeviceLogRaw = async (): Promise => {
});
};
-export const useOperationsList = (useRange?: boolean) => {
- const range = useAtomValue(selectedRangeAtom);
-
- const response = useQuery({
+export const useOperationsList = () =>
+ useQuery({
queryFn: () => fetchOperations(),
queryKey: ['get-operations'],
retry: false,
});
- return useMemo(() => {
- if (useRange && response.data && range) {
- response.data = response.data.filter((operation) => operation.id >= range[0] && operation.id <= range[1]);
- }
+export const useOperationListRange = (): NumberRange | null => {
+ const response = useOperationsList();
- return response;
+ return useMemo(
+ () => (response.data ? [response.data?.[0].id, response.data?.[response.data.length - 1].id] : null),
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [range, response.isLoading]);
+ [response.isLoading],
+ );
};
export const useOperationDetails = (operationId: number | null) => {
@@ -428,14 +427,14 @@ export interface DeviceOperationMapping {
}
export const useNormalizedPerformance = (): RowData[] => {
- const { data } = usePerformance();
+ const response = usePerformance();
return useMemo(() => {
- if (!data?.data || data.data.length === 0) {
+ if (!response?.data?.data || response?.data.data.length === 0) {
return [];
}
// @ts-expect-error this should be just fine
- let df: RowData[] = (data.data.slice() as RowData[]).filter(
+ let df: RowData[] = (response.data.data.slice() as RowData[]).filter(
(r) => !r['OP CODE']?.includes('(torch)') && !(r['OP CODE'] === ''),
);
@@ -454,8 +453,10 @@ export const useNormalizedPerformance = (): RowData[] => {
}
return df;
- }, [data]);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [response.isLoading]);
};
+
export const useGetDeviceOperationListPerf = () => {
const deviceOperations: DeviceOperationMapping[] = useGetDeviceOperationsList();
const data = useNormalizedPerformance();
@@ -515,6 +516,19 @@ export const useOptoPerfIdFiltered = () => {
);
};
+export const usePerformanceRange = (): NumberRange | null => {
+ const response = useNormalizedPerformance();
+
+ return useMemo(
+ () =>
+ response?.length
+ ? ([response[0].ORIGINAL_ID, response[response.length - 1].ORIGINAL_ID] as NumberRange)
+ : null,
+
+ [response],
+ );
+};
+
// Not currently used
export const useReportMeta = () => {
return useQuery('get-report-config', fetchReportMeta);
@@ -571,7 +585,7 @@ export const fetchTensors = async (deviceId?: number | null): Promise
};
export const useTensors = (useRange?: boolean, deviceId?: number | null) => {
- const range = useAtomValue(selectedRangeAtom);
+ const range = useAtomValue(selectedOperationRangeAtom);
const response = useQuery({
queryFn: () => fetchTensors(deviceId),
@@ -590,7 +604,7 @@ export const useTensors = (useRange?: boolean, deviceId?: number | null) => {
return response;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [range, response.isLoading]);
+ }, [range, response.isLoading, useRange]);
};
export const useDevices = () => {
@@ -619,7 +633,7 @@ export const useNextBuffer = (address: number | null, consumers: number[], query
};
export const useBuffers = (bufferType: BufferType, useRange?: boolean) => {
- const range = useAtomValue(selectedRangeAtom);
+ const range = useAtomValue(selectedOperationRangeAtom);
const response = useQuery({
queryFn: () => fetchAllBuffers(bufferType),
@@ -633,7 +647,7 @@ export const useBuffers = (bufferType: BufferType, useRange?: boolean) => {
return response;
// eslint-disable-next-line react-hooks/exhaustive-deps
- }, [range, response.isLoading]);
+ }, [range, response.isLoading, useRange]);
};
export const useDeviceLog = () => {
diff --git a/src/main.tsx b/src/main.tsx
index 6b44a3f2..0a4c9e26 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -21,6 +21,7 @@ import BufferSummary from './routes/BufferSummary';
import { SocketProvider } from './libs/SocketProvider';
import GraphView from './routes/GraphView';
import Performance from './routes/Performance';
+import NPE from './routes/NPE';
const router = createBrowserRouter([
{
@@ -60,6 +61,10 @@ const router = createBrowserRouter([
path: ROUTES.PERFORMANCE,
element: ,
},
+ {
+ path: ROUTES.NPE,
+ element: ,
+ },
],
},
]);
diff --git a/src/model/APIData.ts b/src/model/APIData.ts
index 1ecc954f..2ec8d215 100644
--- a/src/model/APIData.ts
+++ b/src/model/APIData.ts
@@ -216,6 +216,7 @@ interface DeviceOperationParams {
type: DeviceOperationTypes;
core_range_set: string;
device_id?: number | string;
+ derived_device_id?: number[];
}
export interface Node {
@@ -226,6 +227,8 @@ export interface Node {
inputs: Node[];
outputs: Node[];
operation?: Node;
+ buffer?: Node[];
+ allocation?: Node;
}
export interface DeviceOperation {
diff --git a/src/model/NPEModel.ts b/src/model/NPEModel.ts
new file mode 100644
index 00000000..b45632a9
--- /dev/null
+++ b/src/model/NPEModel.ts
@@ -0,0 +1,59 @@
+export interface CommonInfo {
+ device_name: string;
+ cycles_per_timestep: number;
+ congestion_model_name: string;
+ num_rows: number;
+ num_cols: number;
+}
+
+type row = number;
+type col = number;
+type NoCTransferId = number;
+export type NoCType = 'NOC0' | 'NOC1';
+
+// export type NoCID = 'NOC1_NORTH' | 'NOC0_SOUTH' | 'NOC0_EAST' | 'NOC1_WEST';
+export enum NoCID {
+ NOC1_NORTH = 'NOC1_NORTH',
+ NOC0_SOUTH = 'NOC0_SOUTH',
+ NOC0_EAST = 'NOC0_EAST',
+ NOC1_WEST = 'NOC1_WEST',
+ NOC0_IN = 'NOC0_IN',
+ NOC0_OUT = 'NOC0_OUT',
+ NOC1_IN = 'NOC1_IN',
+ NOC1_OUT = 'NOC1_OUT',
+}
+
+export interface NoCTransfer {
+ id: NoCTransferId;
+ src: [row, col];
+ dst: [[row, col]];
+ total_bytes: number;
+ noc_event_type: '';
+ noc_type: NoCType;
+ injection_rate: number;
+ start_cycle: number;
+ end_cycle: number;
+ route: [row, col, NoCID][];
+}
+
+export interface LinkUtilization {
+ row: row;
+ column: col;
+ noc_id: NoCID;
+ utilization: number;
+}
+
+export interface TimestepData {
+ start_cycle: number;
+ end_cycle: number;
+ active_transfers: NoCTransferId[];
+ link_demand: [row, col, NoCID, number][]; // LinkUtilization[];
+ avg_link_demand: number;
+ avg_link_util: number;
+}
+
+export interface NPEData {
+ common_info: CommonInfo;
+ noc_transfers: NoCTransfer[];
+ timestep_data: TimestepData[];
+}
diff --git a/src/model/OperationDetails.ts b/src/model/OperationDetails.ts
index 98fcb346..0c55e6d8 100644
--- a/src/model/OperationDetails.ts
+++ b/src/model/OperationDetails.ts
@@ -147,23 +147,12 @@ export class OperationDetails implements Partial {
core_range_set: node.params.core_range_set,
colorVariance: deviceOp.id,
});
- deviceOp.events.push(node.node_type);
}
}
}
if (node.node_type === NodeType.circular_buffer_deallocate_all) {
- const deviceOpNode = deviceOpList.at(-1);
- if (deviceOpNode) {
- const deviceOp = this.deviceOperations
- .slice()
- .reverse()
- .find((op) => op.name === deviceOpNode.params.name);
-
- if (deviceOp) {
- deviceOp.events.push(node.node_type);
- }
- }
+ // noop
}
if (node.node_type === NodeType.buffer_allocate) {
const deviceOpNode = deviceOpList.at(-1);
@@ -181,7 +170,6 @@ export class OperationDetails implements Partial {
type: node.params.type,
tensorId: this.getTensorForAddress(parseInt(node.params.address, 10))?.id,
});
- deviceOp.events.push(node.node_type);
}
}
}
@@ -195,23 +183,12 @@ export class OperationDetails implements Partial {
if (deviceOp) {
deviceOp.tensor = { shape: node.params.shape, id: node.params.tensor_id };
- deviceOp.events.push(node.node_type);
}
}
}
if (node.node_type === NodeType.buffer_deallocate) {
- const deviceOpNode = deviceOpList.at(-1);
- if (deviceOpNode) {
- const deviceOp = this.deviceOperations
- .slice()
- .reverse()
- .find((op) => op.name === deviceOpNode.params.name);
-
- if (deviceOp) {
- deviceOp.events.push(node.node_type);
- }
- }
+ // noop
}
});
}
diff --git a/src/routes/GraphView.tsx b/src/routes/GraphView.tsx
index 11dcaaa3..c2ace721 100644
--- a/src/routes/GraphView.tsx
+++ b/src/routes/GraphView.tsx
@@ -2,31 +2,42 @@
//
// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
-import React from 'react';
+import React, { useMemo } from 'react';
import { Helmet } from 'react-helmet-async';
import { useParams } from 'react-router';
+import { useAtomValue } from 'jotai';
import { useOperationsList } from '../hooks/useAPI';
import OperationGraph from '../components/OperationGraphComponent';
import LoadingSpinner from '../components/LoadingSpinner';
import useClearSelectedBuffer from '../functions/clearSelectedBuffer';
+import { selectedOperationRangeAtom } from '../store/app';
const GraphView: React.FC = () => {
- const { data: operationList, isLoading } = useOperationsList(true);
+ const { data: operationList, isLoading } = useOperationsList();
const { operationId } = useParams<{ operationId?: string }>();
+ const selectedOperationRange = useAtomValue(selectedOperationRangeAtom);
useClearSelectedBuffer();
+ const filteredOperationList = useMemo(
+ () =>
+ selectedOperationRange
+ ? operationList?.filter((op) => selectedOperationRange[0] && op.id <= selectedOperationRange[1])
+ : operationList,
+ [operationList, selectedOperationRange],
+ );
+
return (
<>
- {isLoading || !operationList ? (
+ {isLoading || !filteredOperationList ? (
) : (
)}
diff --git a/src/routes/NPE.tsx b/src/routes/NPE.tsx
new file mode 100644
index 00000000..09052292
--- /dev/null
+++ b/src/routes/NPE.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Helmet } from 'react-helmet-async';
+
+import NPEFileLoader from '../components/npe/NPEFileLoader';
+import { NPEData } from '../model/NPEModel';
+import NPEView from '../components/npe/NPEViewComponent';
+
+const NPE: React.FC = () => {
+ const [npeData, setNpeData] = React.useState(null);
+ const onFileLoaded = (data: unknown) => {
+ setNpeData(data as NPEData);
+ };
+
+ return (
+ <>
+
+
+ {npeData && }
+
+ );
+};
+
+// eslint-disable-next-line react-refresh/only-export-components
+export default NPE;
diff --git a/src/routes/Performance.tsx b/src/routes/Performance.tsx
index 5a224a6e..2d6b28f0 100644
--- a/src/routes/Performance.tsx
+++ b/src/routes/Performance.tsx
@@ -27,10 +27,14 @@ export default function Performance() {
const { data: perfData, isLoading: isLoadingPerformance } = usePerformance();
const { data: deviceLog, isLoading: isLoadingDeviceLog } = useDeviceLog();
+ // TODO: Typing here is still a little weird
const data = useMemo(
- () => (perfData?.data ? (perfData.data as RowData[]) : []).filter((row) => row['OP TYPE'] === 'tt_dnn_device'),
+ () =>
+ (perfData?.data ? (perfData.data as Partial[]) : []).filter(
+ (row) => row['OP TYPE'] === 'tt_dnn_device',
+ ),
[perfData?.data],
- );
+ ) as RowData[];
const opCodeOptions = useMemo(
() =>
diff --git a/src/scss/components/MainNavigation.scss b/src/scss/components/MainNavigation.scss
index 71b7ba16..971e249c 100644
--- a/src/scss/components/MainNavigation.scss
+++ b/src/scss/components/MainNavigation.scss
@@ -61,5 +61,20 @@
&.performance-button {
@include button-styles($tt-performance, $tt-performance-active, 'lightning');
}
+
+ &.npe-button {
+ @include button-styles($tt-npe, $tt-npe-active, 'random');
+ }
+
+ small {
+ font-size: 11px;
+ position: absolute;
+ right: 1px;
+ top: 6px;
+ border-radius: 4px;
+ padding-left: 4px;
+ padding-right: 4px;
+ background-color: $tt-grey-2;
+ }
}
}
diff --git a/src/scss/components/NPEComponent.scss b/src/scss/components/NPEComponent.scss
new file mode 100644
index 00000000..cdb28e96
--- /dev/null
+++ b/src/scss/components/NPEComponent.scss
@@ -0,0 +1,92 @@
+@use '../definitions/colours' as *;
+
+.npe {
+ .metadata {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 10px;
+ border-bottom: 1px solid $tt-slate;
+ position: absolute;
+ right: 0;
+ top: 220px;
+ gap: 5px;
+
+ hr {
+ margin-top: 10px;
+ margin-bottom: 10px;
+ }
+ }
+
+ button.timestep {
+ font-size: 10px;
+ padding: 2px;
+ min-width: 10px;
+ min-height: 10px;
+ }
+
+ .chip {
+ margin: 20px;
+ position: relative;
+ }
+
+ .tensix-grid {
+ &.empty {
+ position: absolute;
+ z-index: -1;
+ top: 0;
+ left: 0;
+ }
+
+ display: grid;
+ gap: 1px;
+
+ .tensix {
+ display: flex;
+ flex-direction: column;
+ border: 1px solid transparent;
+ z-index: 1;
+ cursor: pointer;
+ overflow: hidden;
+
+ &:hover {
+ transition: border-color 50ms linear;
+ border-color: $tt-yellow-tint-2;
+ }
+
+ &.active {
+ border-color: $tt-tensix-active;
+ }
+
+ &.empty-tensix {
+ border-color: $tt-slate;
+ }
+
+ &.no-click {
+ border: 1px solid transparent;
+ pointer-events: none;
+
+ &:hover {
+ border: 1px solid $tt-yellow-tint-2;
+ }
+ }
+
+ .transfer-render-ctn {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ }
+
+ &.selected {
+ border-color: $tt-yellow-tint-2;
+ margin: 2px;
+
+ .transfer-render-ctn {
+ inset: -2px;
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/components/RangeSlider.scss b/src/scss/components/RangeSlider.scss
index 97ae8dbe..2b96b436 100644
--- a/src/scss/components/RangeSlider.scss
+++ b/src/scss/components/RangeSlider.scss
@@ -6,35 +6,37 @@ $alt-axis-offset: 10px;
$alt-axis-padding: 20px;
.range-slider {
- display: flex;
- flex-wrap: nowrap;
- gap: 20px;
- align-items: flex-start;
-
.inputs {
display: flex;
- flex-wrap: nowrap;
+ flex-flow: column nowrap;
flex-grow: 0;
flex-shrink: 1;
gap: 5px;
- > .bp5-input-group {
- width: 55px;
+ .group {
+ display: flex;
+ flex-wrap: nowrap;
+
+ > .bp5-input-group {
+ width: 55px;
+ }
}
}
- .slider {
- position: relative;
+ .slider-container {
+ display: flex;
+ flex-flow: column nowrap;
flex-grow: 1;
+ align-items: center;
margin-top: 4px;
}
- .alt-x-axis {
+ .slider {
display: flex;
- width: calc(100% - $alt-axis-offset);
- position: absolute;
- left: $alt-axis-offset;
- top: -#{$alt-axis-padding};
+ flex-wrap: nowrap;
+ gap: 20px;
+ align-items: flex-start;
+ margin-top: 4px;
}
.reset {
diff --git a/src/scss/definitions/_colours.scss b/src/scss/definitions/_colours.scss
index caaebbdf..a2589b14 100644
--- a/src/scss/definitions/_colours.scss
+++ b/src/scss/definitions/_colours.scss
@@ -152,3 +152,5 @@ $tt-tensix-active: #fffc00;
$tt-bg-highlight: $tt-slate-accent;
$tt-ok: #32a467;
$tt-not-ok: #f32b2b;
+$tt-npe: $tt-slate;
+$tt-npe-active: $tt-slate-tint-2;
diff --git a/src/store/app.ts b/src/store/app.ts
index bc5f2807..72520130 100644
--- a/src/store/app.ts
+++ b/src/store/app.ts
@@ -22,7 +22,9 @@ export const selectedAddressAtom = atom(null);
export const selectedTensorAtom = atom(null);
export const operationRangeAtom = atom(null);
-export const selectedRangeAtom = atom(null);
+export const selectedOperationRangeAtom = atom(null);
+export const performanceRangeAtom = atom(null);
+export const selectedPerformanceRangeAtom = atom(null);
// This atom stores the file transfer progress data in localStorage (or sessionStorage)
export const fileTransferProgressAtom = atom({