[feat] Create a Dashboard page to provide a better onboarding experience

aim/web/api/dashboards/pydantic_models.py

@@ -10,6 +10,7 @@ class DashboardOut(BaseModel):
     name: str
     description: str = None
     app_id: Optional[UUID] = None
+    app_type: Optional[str] = None
     updated_at: datetime = 'Wed, 01 Jan 2021 16:12:07 GMT'
     created_at: datetime = 'Wed, 01 Jan 2021 16:12:07 GMT'
 

aim/web/api/dashboards/serializers.py

@@ -15,6 +15,7 @@ def dashboard_response_serializer(dashboard_object, session):
         'name': dashboard_object.name,
         'description': dashboard_object.description,
         'app_id': app.uuid if app else None,
+        'app_type': app.type if app else None,
         'updated_at': dashboard_object.updated_at,
         'created_at': dashboard_object.created_at
     }

aim/web/api/projects/pydantic_models.py

@@ -10,7 +10,7 @@ class ProjectApiOut(BaseModel):
 
 
 class ProjectParamsOut(BaseModel):
-    params: Dict
+    params: Optional[Dict] = None
     metric: Optional[Dict[str, list]] = None
     images: Optional[Dict[str, list]] = None
     texts: Optional[Dict[str, list]] = None
@@ -22,6 +22,7 @@ class ProjectParamsOut(BaseModel):
 class ProjectActivityApiOut(BaseModel):
     num_experiments: int
     num_runs: int
+    num_archived_runs: int
     activity_map: Dict[str, int] = {"2021-01-01": 54}
 
 

aim/web/api/projects/views.py

@@ -46,15 +46,19 @@ async def project_activity_api(x_timezone_offset: int = Header(default=0),
         raise HTTPException(status_code=404)
 
     num_runs = 0
+    num_archived_runs = 0
     activity_counter = Counter()
     for run in factory.runs():
         creation_time = run.created_at - timedelta(minutes=x_timezone_offset)
         activity_counter[creation_time.strftime('%Y-%m-%dT%H:00:00')] += 1
         num_runs += 1
+        if run.archived:
+            num_archived_runs += 1
 
     return {
         'num_experiments': len(factory.experiments()),
         'num_runs': num_runs,
+        'num_archived_runs': num_archived_runs,
         'activity_map': dict(activity_counter),
     }
 
@@ -118,7 +122,8 @@ async def update_pinned_metrics_api(request_data: ProjectPinnedSequencesApiIn):
 
 
 @projects_router.get('/params/', response_model=ProjectParamsOut, response_model_exclude_defaults=True)
-async def project_params_api(sequence: Optional[Tuple[str, ...]] = Query(())):
+async def project_params_api(sequence: Optional[Tuple[str, ...]] = Query(()),
+                             exclude_params: Optional[bool] = False):
     project = Project()
 
     if not project.exists():
@@ -131,10 +136,12 @@ async def project_params_api(sequence: Optional[Tuple[str, ...]] = Query(())):
             raise HTTPException(status_code=400, detail=str(e))
     else:
         sequence = project.repo.available_sequence_types()
-
-    response = {
-        'params': project.repo.collect_params_info(),
-    }
+    if exclude_params:
+        response = {}
+    else:
+        response = {
+            'params': project.repo.collect_params_info(),
+        }
     response.update(**project.repo.collect_sequence_info(sequence))
     return response
 

aim/web/api/runs/pydantic_models.py

@@ -84,8 +84,8 @@ class RunInfoOut(BaseModel):
 
 
 class RunSearchRunView(BaseModel):
-    params: dict
-    traces: List[TraceOverview]
+    params: Optional[dict]
+    traces: Optional[List[TraceOverview]]
     props: PropsView
 
 

aim/web/api/runs/utils.py

@@ -227,7 +227,9 @@ async def metric_search_result_streamer(traces: SequenceCollection,
 async def run_search_result_streamer(runs: SequenceCollection,
                                      limit: int,
                                      skip_system: bool,
-                                     report_progress: Optional[bool] = True) -> bytes:
+                                     report_progress: Optional[bool] = True,
+                                     exclude_params: Optional[bool] = False,
+                                     exclude_traces: Optional[bool] = False) -> bytes:
     try:
         run_count = 0
         last_reported_progress_time = time.time()
@@ -247,11 +249,13 @@ async def run_search_result_streamer(runs: SequenceCollection,
             run = run_trace_collection.run
             run_dict = {
                 run.hash: {
-                    'params': get_run_params(run, skip_system=skip_system),
-                    'traces': run.collect_sequence_info(sequence_types='metric'),
                     'props': get_run_props(run)
                 }
             }
+            if not exclude_params:
+                run_dict[run.hash]['params'] = get_run_params(run, skip_system=skip_system)
+            if not exclude_traces:
+                run_dict[run.hash]['traces'] = run.collect_sequence_info(sequence_types='metric')
 
             encoded_tree = encode_tree(run_dict)
             yield collect_streamable_data(encoded_tree)

aim/web/api/runs/views.py

@@ -59,6 +59,8 @@ async def run_search_api(q: Optional[str] = '',
                          offset: Optional[str] = None,
                          skip_system: Optional[bool] = True,
                          report_progress: Optional[bool] = True,
+                         exclude_params: Optional[bool] = False,
+                         exclude_traces: Optional[bool] = False,
                          x_timezone_offset: int = Header(default=0),):
     from aim.sdk.sequence_collection import QueryRunSequenceCollection
     repo = get_project_repo()
@@ -72,7 +74,9 @@ async def run_search_api(q: Optional[str] = '',
                                       report_mode=QueryReportMode.PROGRESS_TUPLE,
                                       timezone_offset=x_timezone_offset)
 
-    streamer = run_search_result_streamer(runs, limit, skip_system, report_progress)
+    streamer = run_search_result_streamer(runs, limit,
+                                          skip_system, report_progress,
+                                          exclude_params, exclude_traces)
     return StreamingResponse(streamer)
 
 

aim/web/ui/src/components/CodeBlock/CodeBlock.tsx

@@ -1,11 +1,9 @@
 import React from 'react';
 
-import { useMonaco } from '@monaco-editor/react';
-
 import CopyToClipBoard from 'components/CopyToClipBoard/CopyToClipBoard';
 import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
 
-import { getMonacoConfig } from 'config/monacoConfig/monacoConfig';
+import useCodeHighlighter from 'hooks/useCodeHighlighter';
 
 import { ICodeBlockProps } from 'types/components/CodeBlock/CodeBlock';
 
@@ -16,40 +14,22 @@ function CodeBlock({
   className = '',
   language = 'python',
 }: ICodeBlockProps): React.FunctionComponentElement<React.ReactNode> {
-  const monaco = useMonaco();
-  const preRef = React.useRef<HTMLPreElement>(null);
-
-  const monacoConfig: Record<string | number | symbol, any> =
-    React.useMemo(() => {
-      return getMonacoConfig();
-    }, []);
-
-  React.useEffect(() => {
-    monacoConfig.theme.config.colors = {
-      ...monacoConfig.theme.config.colors,
-      'editor.background': '#f2f3f4',
-    };
-    if (monaco && preRef.current) {
-      monaco.editor.colorizeElement(preRef.current, { theme: language });
-      monaco.editor.defineTheme(
-        monacoConfig.theme.name,
-        monacoConfig.theme.config,
-      );
-      monaco.editor.setTheme(monacoConfig.theme.name);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [monaco]);
+  const { elementRef } = useCodeHighlighter(language);
 
   return (
     <ErrorBoundary>
       <div className={`CodeBlock ${className} `}>
-        <pre className='ScrollBar__hidden' data-lang={language} ref={preRef}>
+        <pre
+          className='ScrollBar__hidden'
+          data-lang={language}
+          ref={elementRef}
+        >
           {code}
         </pre>
         <ErrorBoundary>
           <CopyToClipBoard
             className='CodeBlock__copy__button'
-            contentRef={preRef}
+            contentRef={elementRef}
           />
         </ErrorBoundary>
       </div>

aim/web/ui/src/components/ReleaseNoteItem/ReleaseNoteItem.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+
+/**
+ * @description The IReleaseNoteItemProps interface.
+ */
+export interface IReleaseNoteItemProps
+  extends Partial<React.HTMLProps<HTMLAnchorElement>> {
+  /**
+   * @description The info of the release note
+   * @type string
+   * @example '[feat] Add support for new metrics'
+   */
+  info: string;
+  /**
+   * @description tag name of the release note
+   * @type string
+   * @example 'v3.13.0'
+   */
+  tagName: string;
+}

aim/web/ui/src/components/ReleaseNoteItem/ReleaseNoteItem.scss

@@ -0,0 +1,45 @@
+@use 'src/styles/abstracts' as *;
+
+.ReleaseNoteItem {
+  display: flex;
+  padding-left: 18px;
+  margin-bottom: $space-sm;
+  position: relative;
+  text-decoration: none;
+  p {
+    word-break: break-word;
+  }
+  &__tagName {
+    color: $primary-color;
+    font-weight: 600;
+  }
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 3px;
+    width: 7px;
+    height: 7px;
+    z-index: 1;
+    border-radius: $border-radius-circle;
+    background-color: $primary-color;
+  }
+  &::after {
+    content: '';
+    position: absolute;
+    left: 3px;
+    top: 3px;
+    height: 100%;
+    width: 1px;
+    background-color: $pico-20;
+  }
+  &:last-child {
+    margin-bottom: 0;
+  }
+
+  &:hover {
+    text-decoration: underline;
+    text-decoration-color: $text-color;
+    cursor: pointer;
+  }
+}

aim/web/ui/src/components/ReleaseNoteItem/ReleaseNoteItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import { Text } from 'components/kit';
+
+import { IReleaseNoteItemProps } from './ReleaseNoteItem.d';
+
+import './ReleaseNoteItem.scss';
+
+function ReleaseNoteItem({
+  info,
+  tagName,
+  ...rest
+}: IReleaseNoteItemProps): React.FunctionComponentElement<React.ReactNode> {
+  return (
+    <a target='_blank' className='ReleaseNoteItem' rel='noreferrer' {...rest}>
+      <Text component='p' size={12}>
+        <span className='ReleaseNoteItem__tagName'>{tagName}</span>
+        {info}
+      </Text>
+    </a>
+  );
+}
+
+export default React.memo(ReleaseNoteItem);

aim/web/ui/src/components/Table/Table.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import { isEmpty, isEqual, isNil } from 'lodash-es';
 import { useResizeObserver } from 'hooks';
+import _ from 'lodash-es';
 
 import { Button, Icon, Text } from 'components/kit';
 import ControlPopover from 'components/ControlPopover/ControlPopover';
@@ -743,6 +744,14 @@ const Table = React.forwardRef(function Table(
     }
   }, [appName, sameValueColumns, hiddenColumns]);
 
+  const selectedRunsQuery: string = React.useMemo(() => {
+    if (!_.isEmpty(selectedRows)) {
+      return `run.hash in [${_.uniq(
+        Object.values(selectedRows)?.map((row: any) => `"${row.runHash}"`),
+      ).join(',')}]`;
+    }
+  }, [selectedRows]);
+
   // The right check is !props.isInfiniteLoading && (isLoading || isNil(rowData))
   // but after setting isInfiniteLoading to true, the rowData becomes null, unnecessary renders happening
   // @TODO sanitize this point
@@ -947,7 +956,7 @@ const Table = React.forwardRef(function Table(
               <div>
                 <CompareSelectedRunsPopover
                   appName={appName}
-                  selectedRows={selectedRows}
+                  query={selectedRunsQuery}
                 />
               </div>
             </div>

aim/web/ui/src/components/kit/DataList/DataList.d.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export interface IDataListProps {
   tableRef: React.RefObject<any>;
   tableData: any;
@@ -9,4 +11,6 @@ export interface IDataListProps {
   rowHeight?: number;
   height?: string;
   tableClassName?: string;
+  toolbarItems?: React.FunctionComponentElement<React.ReactNode>[];
+  disableMatchBar?: boolean;
 }

aim/web/ui/src/components/kit/DataList/DataList.scss

@@ -5,6 +5,12 @@
   flex-direction: column;
   width: 100%;
   max-height: 100%;
+  &__toolbarItems {
+    height: 2rem;
+    margin-left: $space-md;
+    display: flex;
+    align-items: center;
+  }
   &__textsTable {
     border: $border-grey;
     border-radius: $border-radius-md;
@@ -55,7 +61,7 @@
 
       &-cell {
         position: relative;
-        min-height: 28px;
+        min-height: 24px;
         max-height: 300px;
         padding: 0 $space-unit;
         border-right: unset;