v0.18.1 (#332)

docs/contributing.md

@@ -1,46 +1,14 @@
 # Contributing
 
-## React + TypeScript + Vite {#react-typescript-vite}
+**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.
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+## Running the app from source
 
-Currently, two official plugins are available:
-
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md)
-  uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast
-  Refresh
-
-## Expanding the ESLint configuration
-
-If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
-
-- Configure the top-level `parserOptions` property like this:
-
-```js
-export default {
-    // other rules...
-    parserOptions: {
-        ecmaVersion: 'latest',
-        sourceType: 'module',
-        project: ['./tsconfig.json', './tsconfig.node.json'],
-        tsconfigRootDir: __dirname,
-    },
-}
-```
-
-- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked`
-  or `plugin:@typescript-eslint/strict-type-checked`
-- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
-- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and
-  add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list
+### Environment
 
-## Running the app
+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.
 
-### Environment
 
-Copy the provided `.env.sample` file to `.env` and change any necessary options. See the section on options
-for more details on the available configuration options.
 
 ### Frontend
 
@@ -82,11 +50,7 @@ Starting with hot reload:
 npm run flask:start-debug
 ```
 
-access on localhost:8000/
-
-### Development
-
-Copy report contents to `backend/data/active` - IE - `backend/data/active/db.sqlite`
+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`.
 
 ## Troubleshooting
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ttnn-visualzer",
   "private": true,
-  "version": "0.17.3",
+  "version": "0.18.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "ttnn_visualizer"
 authors = []
-version = "0.17.3"
+version = "0.18.1"
 description = "TT Visualizer"
 readme = "README.md"
 requires-python = ">=3.12"

src/components/BufferDetails.tsx

@@ -5,7 +5,7 @@
 import classNames from 'classnames';
 import { Link } from 'react-router-dom';
 import { Operation, OperationDescription, Tensor } from '../model/APIData';
-import { toHex } from '../functions/math';
+import { toHex, toReadableShape, toReadableType } from '../functions/math';
 import ROUTES from '../definitions/routes';
 import 'styles/components/BufferDetails.scss';
 import getDeallocationOperation from '../functions/getDeallocationOperation';
@@ -31,6 +31,11 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
         <>
             <table className='ttnn-table analysis-table'>
                 <tbody>
+                    <tr>
+                        <th>Tensor Id</th>
+                        <td>{tensor.id}</td>
+                    </tr>
+
                     <tr>
                         <th>Last used</th>
                         <td>
@@ -71,9 +76,14 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
                         <td>{tensor.device_id ?? 'n/a'}</td>
                     </tr>
 
+                    <tr>
+                        <th>Shape</th>
+                        <td>{toReadableShape(shape)}</td>
+                    </tr>
+
                     <tr>
                         <th>DataType</th>
-                        <td>{dtype}</td>
+                        <td>{toReadableType(dtype)}</td>
                     </tr>
 
                     <tr>
@@ -91,11 +101,6 @@ function BufferDetails({ tensor, operations, className }: BufferDetailsProps) {
                           ))
                         : null}
 
-                    <tr>
-                        <th>Shape</th>
-                        <td>{shape}</td>
-                    </tr>
-
                     {tensor.comparison ? (
                         <>
                             <tr>
@@ -142,7 +147,7 @@ function getLastOperation(lastOperationId: number, operations: Operation[], tens
 
     return lastOperation ? (
         <Link to={`${ROUTES.OPERATIONS}/${lastOperation.id}`}>
-            {lastOperation?.id} {lastOperation.name}
+            {lastOperation?.id} {lastOperation.name} ({lastOperation.operationFileIdentifier})
         </Link>
     ) : null;
 }

src/components/Layout.tsx

@@ -3,14 +3,17 @@
 // SPDX-FileCopyrightText: © 2024 Tenstorrent AI ULC
 
 import { Outlet } from 'react-router-dom';
-import { Classes, Tooltip } from '@blueprintjs/core';
+import { Classes, Icon, Tooltip } from '@blueprintjs/core';
 import { Helmet } from 'react-helmet-async';
-import { useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import { ToastContainer, cssTransition } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.min.css';
 import classNames from 'classnames';
+import { IconNames } from '@blueprintjs/icons';
+import { useEffect } from 'react';
 import { activePerformanceTraceAtom, activeReportAtom } from '../store/app';
 import MainNavigation from './MainNavigation';
+import { useGetDeviceOperationListPerf, useSession } from '../hooks/useAPI';
 
 const BounceIn = cssTransition({
     enter: `Toastify--animate Toastify__bounce-enter`,
@@ -24,8 +27,19 @@ const MAX_TITLE_LENGTH = 20;
 
 function Layout() {
     const appVersion = import.meta.env.APP_VERSION;
-    const activeReport = useAtomValue(activeReportAtom);
-    const activePerformanceTrace = useAtomValue(activePerformanceTraceAtom);
+    const [activeReport, setActiveReport] = useAtom(activeReportAtom);
+    const [activePerformanceTrace, setActivePerformanceTrace] = useAtom(activePerformanceTraceAtom);
+    const { data: session } = useSession(activeReport, activePerformanceTrace);
+
+    useEffect(() => {
+        if (session?.active_report) {
+            setActiveReport(session.active_report?.report_name ?? null);
+            setActivePerformanceTrace(session.active_report?.profile_name ?? null);
+        }
+    }, [session, setActiveReport, setActivePerformanceTrace]);
+
+    const useGetDeviceOperationListPerfResult = useGetDeviceOperationListPerf();
+    const isInSync = useGetDeviceOperationListPerfResult.length > 0;
 
     return (
         <div className={Classes.DARK}>
@@ -38,35 +52,69 @@ function Layout() {
 
             <header className='app-header'>
                 <nav className='nav-container'>
-                    <p className='version'>v{appVersion}</p>
+                    <div className='title'>
+                        <h1>TT-NN Visualizer</h1>
+                        <sup className='version'>v{appVersion}</sup>
+                    </div>
                     <MainNavigation />
                 </nav>
 
                 <div className='current-data'>
-                    {activeReport && (
-                        <Tooltip
-                            content={activeReport}
-                            className={classNames('title', {
-                                'is-lengthy': activeReport.length > MAX_TITLE_LENGTH,
-                            })}
-                        >
-                            <span>
+                    {activeReport &&
+                        (activeReport.length > MAX_TITLE_LENGTH ? (
+                            <Tooltip
+                                content={activeReport}
+                                className={classNames('title', {
+                                    'is-lengthy': activeReport.length > MAX_TITLE_LENGTH,
+                                })}
+                            >
+                                <span>
+                                    <strong>Report:</strong> {activeReport}
+                                </span>
+                            </Tooltip>
+                        ) : (
+                            <>
                                 <strong>Report:</strong> {activeReport}
-                            </span>
-                        </Tooltip>
-                    )}
+                            </>
+                        ))}
 
-                    {activePerformanceTrace && (
-                        <Tooltip
-                            content={activePerformanceTrace}
-                            className={classNames('title', {
-                                'is-lengthy': activePerformanceTrace.length > MAX_TITLE_LENGTH,
-                            })}
-                        >
-                            <span>
+                    {activePerformanceTrace &&
+                        (activePerformanceTrace.length > MAX_TITLE_LENGTH ? (
+                            <Tooltip
+                                content={activePerformanceTrace}
+                                className={classNames('title', {
+                                    'is-lengthy': activePerformanceTrace.length > MAX_TITLE_LENGTH,
+                                })}
+                            >
+                                <span>
+                                    <strong>Performance:</strong> {activePerformanceTrace}
+                                </span>
+                            </Tooltip>
+                        ) : (
+                            <>
                                 <strong>Performance:</strong> {activePerformanceTrace}
-                            </span>
-                        </Tooltip>
+                            </>
+                        ))}
+                    {activeReport && activePerformanceTrace && (
+                        <span>
+                            {isInSync ? (
+                                <strong>
+                                    <Icon
+                                        icon={IconNames.TickCircle}
+                                        className='intent-ok'
+                                    />{' '}
+                                    Profiler and perf reports syncronized
+                                </strong>
+                            ) : (
+                                <strong>
+                                    <Icon
+                                        icon={IconNames.ISSUE}
+                                        className='intent-not-ok'
+                                    />{' '}
+                                    Profiler and perf reports can&apos;t be synchronized
+                                </strong>
+                            )}
+                        </span>
                     )}
                 </div>
             </header>

src/components/ListItem.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, IconName, Intent } from '@blueprintjs/core';
+import { Icon, IconName, Intent, Tag, TagProps } from '@blueprintjs/core';
 import HighlightedText from './HighlightedText';
 import '../scss/components/ListItem.scss';
 
@@ -14,6 +14,7 @@ interface ListItemProps {
     icon: IconName;
     iconColour?: keyof typeof ICON_COLOURS;
     intent?: Intent;
+    tags?: TagProps[];
     children?: React.ReactNode;
 }
 
@@ -29,6 +30,7 @@ const ListItem: React.FC<ListItemProps> = ({
     icon,
     iconColour = 'none',
     intent = Intent.NONE,
+    tags,
     children,
 }) => {
     return (
@@ -45,12 +47,16 @@ const ListItem: React.FC<ListItemProps> = ({
                 filter={filterQuery}
             />
 
-            {/* <Button title='Operation tensor report' minimal small icon={IconNames.GRAPH} /> */}
-            {/* <Button title='Stack trace' minimal small icon={IconNames.CODE} /> */}
-            {/* <GoldenTensorComparisonIndicator value={op.goldenGlobal} /> */}
-            {/* <GoldenTensorComparisonIndicator value={op.goldenLocal} /> */}
-
             {children}
+
+            {tags?.map((tag) => (
+                <Tag
+                    key={tag.htmlTitle}
+                    className={tag.className}
+                >
+                    {tag.htmlTitle}
+                </Tag>
+            ))}
         </div>
     );
 };

src/components/OperationGraphComponent.tsx

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