Skip to content

Commit 8b69c4b

Browse files
aidemsinedaidemsined
authored
v0.18.1 (#332)
2 parents 50b6668 + 276127f commit 8b69c4b

25 files changed

+383
-147
lines changed

‎docs/contributing.md

Lines changed: 5 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,14 @@
11
# Contributing
22

3-
## React + TypeScript + Vite {#react-typescript-vite}
3+
**NOTE:** If you're just looking to run the app, [using the wheel](https://github.com/tenstorrent/ttnn-visualizer/blob/dev/docs/getting-started.md) is recommended as it is very simple to install and run.
44

5-
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
5+
## Running the app from source
66

7-
Currently, two official plugins are available:
8-
9-
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
10-
uses [Babel](https://babeljs.io/) for Fast Refresh
11-
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast
12-
Refresh
13-
14-
## Expanding the ESLint configuration
15-
16-
If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
17-
18-
- Configure the top-level `parserOptions` property like this:
19-
20-
```js
21-
export default {
22-
// other rules...
23-
parserOptions: {
24-
ecmaVersion: 'latest',
25-
sourceType: 'module',
26-
project: ['./tsconfig.json', './tsconfig.node.json'],
27-
tsconfigRootDir: __dirname,
28-
},
29-
}
30-
```
31-
32-
- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked`
33-
or `plugin:@typescript-eslint/strict-type-checked`
34-
- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
35-
- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and
36-
add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
7+
### Environment
378

38-
## Running the app
9+
Copy the provided `.env.sample` file to `.env`. The values from the sample should work as is but `VITE_API_ROOT` is required to be able to communicate with the backend.
3910

40-
### Environment
4111

42-
Copy the provided `.env.sample` file to `.env` and change any necessary options. See the section on options
43-
for more details on the available configuration options.
4412

4513
### Frontend
4614

@@ -82,11 +50,7 @@ Starting with hot reload:
8250
npm run flask:start-debug
8351
```
8452

85-
access on localhost:8000/
86-
87-
### Development
88-
89-
Copy report contents to `backend/data/active` - IE - `backend/data/active/db.sqlite`
53+
When both the frontend and backend are running you can access the app on [http://localhost:5173](http://localhost:5173) or whatever **Local** uri is printed in your terminal where you ran `npm run dev`.
9054

9155
## Troubleshooting
9256

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "ttnn-visualzer",
33
"private": true,
4-
"version": "0.17.3",
4+
"version": "0.18.1",
55
"type": "module",
66
"scripts": {
77
"dev": "vite",

‎pyproject.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
[project]
22
name = "ttnn_visualizer"
33
authors = []
4-
version = "0.17.3"
4+
version = "0.18.1"
55
description = "TT Visualizer"
66
readme = "README.md"
77
requires-python = ">=3.12"

‎src/components/BufferDetails.tsx

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import classNames from 'classnames';
66
import { Link } from 'react-router-dom';
77
import { Operation, OperationDescription, Tensor } from '../model/APIData';
8-
import { toHex } from '../functions/math';
8+
import { toHex, toReadableShape, toReadableType } from '../functions/math';
99
import ROUTES from '../definitions/routes';
1010
import 'styles/components/BufferDetails.scss';
1111
import getDeallocationOperation from '../functions/getDeallocationOperation';
@@ -31,6 +31,11 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
3131
<>
3232
<table className='ttnn-table analysis-table'>
3333
<tbody>
34+
<tr>
35+
<th>Tensor Id</th>
36+
<td>{tensor.id}</td>
37+
</tr>
38+
3439
<tr>
3540
<th>Last used</th>
3641
<td>
@@ -71,9 +76,14 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
7176
<td>{tensor.device_id ?? 'n/a'}</td>
7277
</tr>
7378

79+
<tr>
80+
<th>Shape</th>
81+
<td>{toReadableShape(shape)}</td>
82+
</tr>
83+
7484
<tr>
7585
<th>DataType</th>
76-
<td>{dtype}</td>
86+
<td>{toReadableType(dtype)}</td>
7787
</tr>
7888

7989
<tr>
@@ -91,11 +101,6 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
91101
))
92102
: null}
93103

94-
<tr>
95-
<th>Shape</th>
96-
<td>{shape}</td>
97-
</tr>
98-
99104
{tensor.comparison ? (
100105
<>
101106
<tr>
@@ -142,7 +147,7 @@ function getLastOperation(lastOperationId: number, operations: Operation[], tens
142147

143148
return lastOperation ? (
144149
<Link to={`${ROUTES.OPERATIONS}/${lastOperation.id}`}>
145-
{lastOperation?.id} {lastOperation.name}
150+
{lastOperation?.id} {lastOperation.name} ({lastOperation.operationFileIdentifier})
146151
</Link>
147152
) : null;
148153
}

‎src/components/Layout.tsx

Lines changed: 74 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,17 @@
33
// SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
44

55
import { Outlet } from 'react-router-dom';
6-
import { Classes, Tooltip } from '@blueprintjs/core';
6+
import { Classes, Icon, Tooltip } from '@blueprintjs/core';
77
import { Helmet } from 'react-helmet-async';
8-
import { useAtomValue } from 'jotai';
8+
import { useAtom } from 'jotai';
99
import { ToastContainer, cssTransition } from 'react-toastify';
1010
import 'react-toastify/dist/ReactToastify.min.css';
1111
import classNames from 'classnames';
12+
import { IconNames } from '@blueprintjs/icons';
13+
import { useEffect } from 'react';
1214
import { activePerformanceTraceAtom, activeReportAtom } from '../store/app';
1315
import MainNavigation from './MainNavigation';
16+
import { useGetDeviceOperationListPerf, useSession } from '../hooks/useAPI';
1417

1518
const BounceIn = cssTransition({
1619
enter: `Toastify--animate Toastify__bounce-enter`,
@@ -24,8 +27,19 @@ const MAX_TITLE_LENGTH = 20;
2427

2528
function Layout() {
2629
const appVersion = import.meta.env.APP_VERSION;
27-
const activeReport = useAtomValue(activeReportAtom);
28-
const activePerformanceTrace = useAtomValue(activePerformanceTraceAtom);
30+
const [activeReport, setActiveReport] = useAtom(activeReportAtom);
31+
const [activePerformanceTrace, setActivePerformanceTrace] = useAtom(activePerformanceTraceAtom);
32+
const { data: session } = useSession(activeReport, activePerformanceTrace);
33+
34+
useEffect(() => {
35+
if (session?.active_report) {
36+
setActiveReport(session.active_report?.report_name ?? null);
37+
setActivePerformanceTrace(session.active_report?.profile_name ?? null);
38+
}
39+
}, [session, setActiveReport, setActivePerformanceTrace]);
40+
41+
const useGetDeviceOperationListPerfResult = useGetDeviceOperationListPerf();
42+
const isInSync = useGetDeviceOperationListPerfResult.length > 0;
2943

3044
return (
3145
<div className={Classes.DARK}>
@@ -38,35 +52,69 @@ function Layout() {
3852

3953
<header className='app-header'>
4054
<nav className='nav-container'>
41-
<p className='version'>v{appVersion}</p>
55+
<div className='title'>
56+
<h1>TT-NN Visualizer</h1>
57+
<sup className='version'>v{appVersion}</sup>
58+
</div>
4259
<MainNavigation />
4360
</nav>
4461

4562
<div className='current-data'>
46-
{activeReport && (
47-
<Tooltip
48-
content={activeReport}
49-
className={classNames('title', {
50-
'is-lengthy': activeReport.length > MAX_TITLE_LENGTH,
51-
})}
52-
>
53-
<span>
63+
{activeReport &&
64+
(activeReport.length > MAX_TITLE_LENGTH ? (
65+
<Tooltip
66+
content={activeReport}
67+
className={classNames('title', {
68+
'is-lengthy': activeReport.length > MAX_TITLE_LENGTH,
69+
})}
70+
>
71+
<span>
72+
<strong>Report:</strong> {activeReport}
73+
</span>
74+
</Tooltip>
75+
) : (
76+
<>
5477
<strong>Report:</strong> {activeReport}
55-
</span>
56-
</Tooltip>
57-
)}
78+
</>
79+
))}
5880

59-
{activePerformanceTrace && (
60-
<Tooltip
61-
content={activePerformanceTrace}
62-
className={classNames('title', {
63-
'is-lengthy': activePerformanceTrace.length > MAX_TITLE_LENGTH,
64-
})}
65-
>
66-
<span>
81+
{activePerformanceTrace &&
82+
(activePerformanceTrace.length > MAX_TITLE_LENGTH ? (
83+
<Tooltip
84+
content={activePerformanceTrace}
85+
className={classNames('title', {
86+
'is-lengthy': activePerformanceTrace.length > MAX_TITLE_LENGTH,
87+
})}
88+
>
89+
<span>
90+
<strong>Performance:</strong> {activePerformanceTrace}
91+
</span>
92+
</Tooltip>
93+
) : (
94+
<>
6795
<strong>Performance:</strong> {activePerformanceTrace}
68-
</span>
69-
</Tooltip>
96+
</>
97+
))}
98+
{activeReport && activePerformanceTrace && (
99+
<span>
100+
{isInSync ? (
101+
<strong>
102+
<Icon
103+
icon={IconNames.TickCircle}
104+
className='intent-ok'
105+
/>{' '}
106+
Profiler and perf reports syncronized
107+
</strong>
108+
) : (
109+
<strong>
110+
<Icon
111+
icon={IconNames.ISSUE}
112+
className='intent-not-ok'
113+
/>{' '}
114+
Profiler and perf reports can&apos;t be synchronized
115+
</strong>
116+
)}
117+
</span>
70118
)}
71119
</div>
72120
</header>

‎src/components/ListItem.tsx

Lines changed: 12 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44

55
import React from 'react';
66
import classNames from 'classnames';
7-
import { Icon, IconName, Intent } from '@blueprintjs/core';
7+
import { Icon, IconName, Intent, Tag, TagProps } from '@blueprintjs/core';
88
import HighlightedText from './HighlightedText';
99
import '../scss/components/ListItem.scss';
1010

@@ -14,6 +14,7 @@ interface ListItemProps {
1414
icon: IconName;
1515
iconColour?: keyof typeof ICON_COLOURS;
1616
intent?: Intent;
17+
tags?: TagProps[];
1718
children?: React.ReactNode;
1819
}
1920

@@ -29,6 +30,7 @@ const ListItem: React.FC<ListItemProps> = ({
2930
icon,
3031
iconColour = 'none',
3132
intent = Intent.NONE,
33+
tags,
3234
children,
3335
}) => {
3436
return (
@@ -45,12 +47,16 @@ const ListItem: React.FC<ListItemProps> = ({
4547
filter={filterQuery}
4648
/>
4749

48-
{/* <Button title='Operation tensor report' minimal small icon={IconNames.GRAPH} /> */}
49-
{/* <Button title='Stack trace' minimal small icon={IconNames.CODE} /> */}
50-
{/* <GoldenTensorComparisonIndicator value={op.goldenGlobal} /> */}
51-
{/* <GoldenTensorComparisonIndicator value={op.goldenLocal} /> */}
52-
5350
{children}
51+
52+
{tags?.map((tag) => (
53+
<Tag
54+
key={tag.htmlTitle}
55+
className={tag.className}
56+
>
57+
{tag.htmlTitle}
58+
</Tag>
59+
))}
5460
</div>
5561
);
5662
};

‎src/components/OperationGraphComponent.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -167,7 +167,7 @@ const OperationGraph: React.FC<{
167167
}
168168
});
169169

170-
// keeping this for now in case we resurect this soon
170+
// keeping this for now in case we resurrect this soon
171171
// networkRef.current.on('dragEnd', () => {
172172
// if (networkRef.current) {
173173
// const centerPosition = networkRef.current.getViewPosition();
@@ -322,7 +322,7 @@ const OperationGraph: React.FC<{
322322
</h2>
323323
<Button
324324
className='navigate-button'
325-
rightIcon={IconNames.ArrowRight}
325+
rightIcon={IconNames.SEGMENTED_CONTROL}
326326
intent={Intent.PRIMARY}
327327
onClick={() => navigate(`/operations/${currentOperationId}`)}
328328
>

0 commit comments

Comments
 (0)