v0.22.0 (#381)

.env.sample

@@ -3,7 +3,7 @@
 VITE_API_ROOT=http://localhost:8000/api
 
 # Backend
-HOST=0.0.0.0
+HOST=localhost
 PORT=8000
 DEV_SERVER_PORT=5173
 DEV_SERVER_HOST=localhost

backend/ttnn_visualizer/csv_queries.py

@@ -565,14 +565,16 @@ class OpsPerformanceReportQueries:
         "input_0_memory",
         "inner_dim_block_size",
         "output_subblock_h",
-        "output_subblock_w"
+        "output_subblock_w",
+        "advice",
     ]
 
     DEFAULT_SIGNPOST = None
     DEFAULT_IGNORE_SIGNPOSTS = None
     DEFAULT_MIN_PERCENTAGE = 0.5
     DEFAULT_ID_RANGE = None
     DEFAULT_NO_ADVICE = False
+    DEFAULT_TRACING_MODE = False
 
     @classmethod
     def generate_report(cls, session):
@@ -587,6 +589,7 @@ def generate_report(cls, session):
             cls.DEFAULT_ID_RANGE,
             csv_output_file,
             cls.DEFAULT_NO_ADVICE,
+            cls.DEFAULT_TRACING_MODE,
         )
 
         report = []
@@ -596,9 +599,14 @@ def generate_report(cls, session):
                 reader = csv.reader(csvfile, delimiter=",")
                 next(reader, None)
                 for row in reader:
-                    report.append({
-                        column: row[index] for index, column in enumerate(cls.REPORT_COLUMNS)
-                    })
+                    processed_row = {
+                        column: row[index] for index, column in enumerate(cls.REPORT_COLUMNS) if index < len(row)
+                    }
+                    if "advice" in processed_row and processed_row["advice"]:
+                        processed_row["advice"] = processed_row["advice"].split(" • ")
+                    else:
+                        processed_row["advice"] = []
+                    report.append(processed_row)
         except csv.Error as e:
             raise DataFormatError() from e
         finally:

backend/ttnn_visualizer/requirements.txt

@@ -16,7 +16,7 @@ wheel
 build
 PyYAML==6.0.2
 python-dotenv==1.0.1
-tt-perf-report==1.0.0
+tt-perf-report==1.0.3
 
 # Dev dependencies
 mypy

backend/ttnn_visualizer/settings.py

@@ -50,7 +50,7 @@ class DefaultConfig(object):
     GUNICORN_WORKER_CLASS = os.getenv("GUNICORN_WORKER_CLASS", "gevent")
     GUNICORN_WORKERS = os.getenv("GUNICORN_WORKERS", "1")
     PORT = os.getenv("PORT", "8000")
-    HOST = "0.0.0.0"
+    HOST = "localhost"
     DEV_SERVER_PORT = "5173"
     DEV_SERVER_HOST = "localhost"
 

docs/getting-started.md

@@ -60,7 +60,7 @@ using `pip install release_name.whl`.
 
 ## Running the application
 
-After installation run `ttnn-visualizer` to start the application. If the app does not open automatically in your browser you can navigate to `http://0.0.0.0:8000`.
+After installation run `ttnn-visualizer` to start the application. If the app does not open automatically in your browser you can navigate to `http://localhost:8000`.
 
 ### Docker
 

package.json

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

pyproject.toml

@@ -1,7 +1,7 @@
 [project]
 name = "ttnn_visualizer"
 authors = []
-version = "0.21.1"
+version = "0.22.0"
 description = "TT Visualizer"
 readme = "README.md"
 requires-python = ">=3.12"
@@ -22,7 +22,7 @@ dependencies = [
     "flask-sqlalchemy==3.1.1",
     "PyYAML==6.0.2",
     "python-dotenv==1.0.1",
-    "tt-perf-report==1.0.0"
+    "tt-perf-report==1.0.3"
 ]
 
 classifiers = [

src/components/Collapsible.tsx

@@ -38,7 +38,7 @@ const Collapsible: React.FC<React.PropsWithChildren<CollapsibleProps>> = ({
 
     const icon = isOpenState ? IconNames.CARET_UP : IconNames.CARET_DOWN;
     return (
-        <div className={`collapsible-component ${collapseClassName}`}>
+        <div className={classNames('collapsible-component', collapseClassName)}>
             <div className='collapsible-controls'>
                 {children && (
                     <Button

src/components/ListItem.tsx

@@ -4,9 +4,10 @@
 
 import React from 'react';
 import classNames from 'classnames';
-import { Icon, IconName, Intent, Tag, TagProps } from '@blueprintjs/core';
+import { Icon, IconName, Intent, TagProps } from '@blueprintjs/core';
 import HighlightedText from './HighlightedText';
 import '../scss/components/ListItem.scss';
+import MemoryTag from './MemoryTag';
 
 interface ListItemProps {
     filterName: string;
@@ -49,14 +50,7 @@ const ListItem: React.FC<ListItemProps> = ({
 
             {children}
 
-            {tags?.map((tag) => (
-                <Tag
-                    key={tag.htmlTitle}
-                    className={tag.className}
-                >
-                    {tag.htmlTitle}
-                </Tag>
-            ))}
+            {tags?.map((tag) => <MemoryTag memory={tag.htmlTitle} />)}
         </div>
     );
 };

src/components/MemoryTag.tsx

@@ -0,0 +1,11 @@
+import { Tag } from '@blueprintjs/core';
+
+interface MemoryTagProps {
+    memory: string | undefined;
+}
+
+const MemoryTag = ({ memory }: MemoryTagProps) => {
+    const memoryType = memory?.toLowerCase() || '';
+    return <Tag className={`tag-${memoryType}`}>{memory}</Tag>;
+};
+export default MemoryTag;

src/components/OperationList.tsx

@@ -102,12 +102,22 @@ const OperationList = () => {
         setHasScrolledToBottom(el.scrollTop + el.offsetHeight >= el.scrollHeight);
     };
 
+    const operationsWithRange = useMemo(() => {
+        if (fetchedOperations && selectedOperationRange) {
+            return fetchedOperations.filter(
+                (op) => op.id >= selectedOperationRange[0] && op.id <= selectedOperationRange[1],
+            );
+        }
+
+        return fetchedOperations;
+    }, [fetchedOperations, selectedOperationRange]);
+
     useMemo(() => {
-        if (fetchedOperations) {
-            let operations = [...fetchedOperations];
+        if (operationsWithRange) {
+            let operations = [...operationsWithRange];
 
             if (filterQuery) {
-                operations = fetchedOperations?.filter((operation) =>
+                operations = operationsWithRange?.filter((operation) =>
                     getOperationFilterName(operation).toLowerCase().includes(filterQuery.toLowerCase()),
                 );
             }
@@ -134,7 +144,7 @@ const OperationList = () => {
         }
 
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [fetchedOperations, filterQuery, shouldSortByID, shouldSortDuration, perfData, selectedOperationRange]);
+    }, [operationsWithRange, filterQuery, shouldSortByID, shouldSortDuration, perfData, selectedOperationRange]);
 
     useEffect(() => {
         const initialOperationId = location.state?.previousOperationId;
@@ -251,8 +261,8 @@ const OperationList = () => {
 
                 {!isLoading && (
                     <p className='result-count'>
-                        {fetchedOperations && filterQuery
-                            ? `Showing ${numberOfOperations} of ${fetchedOperations.length} operations`
+                        {operationsWithRange && filterQuery
+                            ? `Showing ${numberOfOperations} of ${operationsWithRange.length} operations`
                             : `Showing ${numberOfOperations} operations`}
                     </p>
                 )}

src/components/RangeSlider.tsx

@@ -55,6 +55,11 @@ function Range() {
     const isPerformanceRoute = location.pathname === ROUTES.PERFORMANCE;
     const shouldDisableOpRange = isOperationDetails || isPerformanceRoute;
 
+    const resetSliders = () => {
+        setSelectedOperationRange(operationRange);
+        setSelectedPerformanceRange(perfRange);
+    };
+
     useEffect(() => {
         if (operationRange) {
             setOperationRange(operationRange);
@@ -194,11 +199,11 @@ function Range() {
                     )}
 
                     <div className='inputs'>
-                        {perfMin && perfMax && (
+                        {perfRange && (
                             <Tooltip content='Reset range'>
                                 <Button
                                     icon={IconNames.RESET}
-                                    onClick={() => setSelectedPerformanceRange([perfMin, perfMax])}
+                                    onClick={() => (isInSync ? resetSliders() : setSelectedPerformanceRange(perfRange))}
                                     disabled={!isPerformanceRoute}
                                     small
                                 />
@@ -260,11 +265,11 @@ function Range() {
                     </div>
                 )}
 
-                {opMin && opMax && (
+                {operationRange && (
                     <Tooltip content='Reset range'>
                         <Button
                             icon={IconNames.RESET}
-                            onClick={() => setSelectedOperationRange([opMin, opMax])}
+                            onClick={() => (isInSync ? resetSliders() : setSelectedOperationRange(operationRange))}
                             disabled={shouldDisableOpRange}
                             small
                         />

src/components/TensorList.tsx

@@ -8,7 +8,7 @@ import classNames from 'classnames';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { Button, ButtonGroup, Checkbox, Icon, Intent, MenuItem, PopoverPosition, Tooltip } from '@blueprintjs/core';
 import { IconNames } from '@blueprintjs/icons';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { MultiSelect } from '@blueprintjs/select';
 import SearchField from './SearchField';
 import LoadingSpinner from './LoadingSpinner';
@@ -17,7 +17,7 @@ import ROUTES from '../definitions/Routes';
 import { Tensor } from '../model/APIData';
 import { BufferType, BufferTypeLabel } from '../model/BufferType';
 import Collapsible from './Collapsible';
-import { expandedTensorsAtom } from '../store/app';
+import { expandedTensorsAtom, selectedOperationRangeAtom } from '../store/app';
 import ListItem from './ListItem';
 import '@blueprintjs/select/lib/css/blueprint-select.css';
 import 'styles/components/ListView.scss';
@@ -44,9 +44,24 @@ const TensorList = () => {
     const [bufferTypeFilters, setBufferTypeFilters] = useState<BufferType[]>([]);
     const [showHighConsumerTensors, setShowHighConsumerTensors] = useState(false);
     const [expandedTensors, setExpandedTensors] = useAtom(expandedTensorsAtom);
+    const selectedOperationRange = useAtomValue(selectedOperationRangeAtom);
 
     const { data: operations, isLoading: isOperationsLoading } = useOperationsList();
-    const { data: fetchedTensors, error, isLoading: isTensorsLoading } = useTensors(true);
+    const { data: fetchedTensors, error, isLoading: isTensorsLoading } = useTensors();
+
+    const tensorsWithRange = useMemo(() => {
+        if (fetchedTensors && selectedOperationRange) {
+            return fetchedTensors.filter(
+                (tensor) =>
+                    (tensor.producers.some((producer) => producer >= selectedOperationRange[0]) &&
+                        tensor.producers.some((producer) => producer <= selectedOperationRange[1])) ||
+                    (tensor.consumers.some((consumer) => consumer >= selectedOperationRange[0]) &&
+                        tensor.consumers.some((consumer) => consumer <= selectedOperationRange[1])),
+            );
+        }
+
+        return fetchedTensors;
+    }, [fetchedTensors, selectedOperationRange]);
 
     // TODO: Figure out an initial scroll position based on last used tensor
     const virtualizer = useVirtualizer({
@@ -96,11 +111,11 @@ const TensorList = () => {
     };
 
     useMemo(() => {
-        if (fetchedTensors && operations) {
-            let tensors = [...fetchedTensors];
+        if (tensorsWithRange && operations) {
+            let tensors = [...tensorsWithRange];
 
             if (filterQuery) {
-                tensors = fetchedTensors?.filter((tensor) =>
+                tensors = tensorsWithRange?.filter((tensor) =>
                     getTensorFilterName(tensor).toLowerCase().includes(filterQuery.toLowerCase()),
                 );
             }
@@ -117,7 +132,7 @@ const TensorList = () => {
 
             setFilteredTensorList(tensors);
         }
-    }, [operations, fetchedTensors, filterQuery, bufferTypeFilters, showHighConsumerTensors]);
+    }, [operations, tensorsWithRange, filterQuery, bufferTypeFilters, showHighConsumerTensors]);
 
     useEffect(() => {
         const initialTensorId = location.state?.previousOperationId;
@@ -164,7 +179,7 @@ const TensorList = () => {
                         <Button
                             onClick={() => setShowHighConsumerTensors(!showHighConsumerTensors)}
                             rightIcon={IconNames.ISSUE}
-                            disabled={!fetchedTensors?.some((tensor) => tensor.consumers.length > MAX_NUM_CONSUMERS)}
+                            disabled={!tensorsWithRange?.some((tensor) => tensor.consumers.length > MAX_NUM_CONSUMERS)}
                             intent={Intent.DANGER}
                             outlined={showHighConsumerTensors}
                         >
@@ -207,7 +222,7 @@ const TensorList = () => {
                     </Tooltip>
 
                     <MultiSelect
-                        items={fetchedTensors ? getBufferTypeFilterOptions(fetchedTensors) : []}
+                        items={tensorsWithRange ? getBufferTypeFilterOptions(tensorsWithRange) : []}
                         placeholder='Buffer type filter...'
                         // Type requires this but it seems pointless
                         onItemSelect={(selectedType) => updateBufferTypeFilter(selectedType)}
@@ -233,8 +248,8 @@ const TensorList = () => {
 
                 {!isTensorsLoading && !isOperationsLoading ? (
                     <p className='result-count'>
-                        {fetchedTensors && filterQuery
-                            ? `Showing ${numberOfTensors} of ${fetchedTensors.length} tensors`
+                        {tensorsWithRange && filterQuery
+                            ? `Showing ${numberOfTensors} of ${tensorsWithRange.length} tensors`
                             : `Showing ${numberOfTensors} tensors`}
                     </p>
                 ) : null}
@@ -289,10 +304,6 @@ const TensorList = () => {
                                                             ? [
                                                                   {
                                                                       htmlTitle: BufferTypeLabel[tensor.buffer_type],
-                                                                      className:
-                                                                          tensor.buffer_type === BufferType.L1
-                                                                              ? 'tag-l1'
-                                                                              : 'tag-dram',
                                                                   },
                                                               ]
                                                             : undefined