Merged PR 49004: [9.4] [cherry-pick] Only display tags from the latest execution

Avoid displaying tags that are only present on previous runs since clicking on them filters out all the tests in the view. Tags from older runs also mess up the global tags display (since tags that are global to the latest execution are not considered global anymore unless they are all also present on older runs).

Also includes fixes for some minor issues I noticed:
* Avoid displaying the pointer (hand) cursor when hovering over controls that are not interactive (such as the global tags list and the section that displays historical trends for non-leaf nodes).
* Make styling for some buttons more consistent.

Author: Shyam Namboodiripad

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/App.tsx

@@ -2,7 +2,7 @@
 // The .NET Foundation licenses this file to you under the MIT license.
 
 import { useState } from 'react';
-import { Settings28Regular, FilterDismissRegular, Dismiss20Regular, ArrowDownloadRegular } from '@fluentui/react-icons';
+import { Settings28Regular, FilterDismissRegular, DismissRegular, ArrowDownloadRegular } from '@fluentui/react-icons';
 import { Button, Drawer, DrawerBody, DrawerHeader, DrawerHeaderTitle, Switch, Tooltip } from '@fluentui/react-components';
 import { makeStyles } from '@fluentui/react-components';
 import './App.css';
@@ -40,17 +40,6 @@ const useStyles = makeStyles({
     position: 'absolute',
     top: '1.5rem',
     right: '1rem',
-    cursor: 'pointer',
-    fontSize: '2rem',
-    width: '28px',
-    height: '28px',
-    borderRadius: '6px',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    '&:hover': {
-      backgroundColor: tokens.colorNeutralBackground4,
-    },
   },
   switchLabel: { fontSize: '1rem', paddingTop: '1rem' },
   drawerBody: { paddingTop: '1rem' },
@@ -61,7 +50,7 @@ function App() {
   const { dataset, scoreSummary, selectedTags, clearFilters } = useReportContext();
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
   const { renderMarkdown, setRenderMarkdown } = useReportContext();
-  const { globalTags, filterableTags } = categorizeAndSortTags(dataset);
+  const { globalTags, filterableTags } = categorizeAndSortTags(dataset, scoreSummary.primaryResult.executionName);
 
   const toggleSettings = () => setIsSettingsOpen(!isSettingsOpen);
   const closeSettings = () => setIsSettingsOpen(false);
@@ -122,7 +111,7 @@ function App() {
       <Drawer open={isSettingsOpen} onOpenChange={toggleSettings} position="end">
         <DrawerHeader>
           <DrawerHeaderTitle>Settings</DrawerHeaderTitle>
-          <span className={classes.closeButton} onClick={closeSettings}><Dismiss20Regular /></span>
+          <Button className={classes.closeButton} icon={<DismissRegular />} appearance="subtle" onClick={closeSettings} />
         </DrawerHeader>
         <DrawerBody className={classes.drawerBody}>
           <Switch

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/ScoreNodeHistory.tsx

@@ -96,7 +96,7 @@ export const ScoreNodeHistory = () => {
     const historyData = calculateScoreNodeHistoryData(scoreSummary, summaryNode);
 
     return (<div className={classes.section}>
-        <div className={classes.sectionHeader}>
+        <div className={classes.dismissableSectionHeader}>
             <Button icon={<DismissRegular />} appearance="subtle" onClick={() => selectScenarioLevel(selectedScenarioLevel)} />
             <h3 className={classes.sectionHeaderText}>Pass/Fail Trends for {summaryNode.name}</h3>
         </div>

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/Styles.ts

@@ -48,6 +48,10 @@ export const useStyles = makeStyles({
         right: '0',
         maxWidth: '80rem',
     },
+   dismissableSectionHeader: {
+        display: 'flex',
+        alignItems: 'center',
+    },
     sectionHeader: {
         display: 'flex',
         alignItems: 'center',

src/Libraries/Microsoft.Extensions.AI.Evaluation.Reporting/TypeScript/components/TagsDisplay.tsx

@@ -46,7 +46,8 @@ const useStyles = makeStyles({
     cursor: 'default',
     ':hover': {
       backgroundColor: tokens.colorBrandBackground2,
-      boxShadow: 'none'
+      boxShadow: 'none',
+      cursor: 'default'
     },
     '&.selected': {
       backgroundColor: tokens.colorBrandBackground2
@@ -56,14 +57,15 @@ const useStyles = makeStyles({
 
 export type TagInfo = { tag: string; count: number };
 
-export function categorizeAndSortTags(dataset: Dataset): { 
+export function categorizeAndSortTags(dataset: Dataset, primaryExecutionName: string): { 
   globalTags: TagInfo[];
   filterableTags: TagInfo[];
 } {
   const tagCounts = new Map<string, number>();
-  const totalResults = dataset.scenarioRunResults.length;
+  const primaryResults = dataset.scenarioRunResults.filter(result => result.executionName === primaryExecutionName);
+  const totalResults = primaryResults.length;
 
-  dataset.scenarioRunResults.forEach(result => {
+  primaryResults.forEach(result => {
     if (result.tags) {
       result.tags.forEach(tag => {
         const currentCount = tagCounts.get(tag) || 0;