Feature: Add historical statistics for PRT and Script Blocking

packages/common/src/mdl.types.ts

@@ -18,5 +18,5 @@ export interface MDLTableData {
   owner: string;
   scriptBlocking: string;
   highlighted?: boolean;
-  highlightedClass?: string;
+  highlightedClass?: (selected: boolean) => string;
 }

packages/common/src/prtToken.types.ts

@@ -29,17 +29,17 @@ interface DecryptedToken {
 
 interface PlaintTextToken {
   uint8Signal: Uint8Array<any>;
-  humanReadableSignal: string;
   ordinal: Uint8Array<any>;
   version: number;
   hmacValid: boolean;
 }
 
 export interface PRTMetadata {
   origin: string;
-  humanReadableSignal: string;
   decryptionKeyAvailable: boolean;
   prtHeader: string;
+  nonZeroUint8Signal: boolean;
+  owner: string;
 }
 
 export type UniquePlainTextToken = PlaintTextToken & {

packages/design-system/src/components/circlePieChart/emptyCirclePieChart.tsx

@@ -22,19 +22,27 @@ import { VictoryPie } from 'victory-pie';
  * Internal dependencies
  */
 import { COLOR_MAP } from '../../theme/colors';
+import Tooltip from './tooltip';
 
-const EmptyCirclePieChart = () => {
+const EmptyCirclePieChart = ({
+  tooltipText = '',
+  showTooltip = false,
+}: {
+  tooltipText?: string;
+  showTooltip?: boolean;
+}) => {
   return (
     <div className="w-full h-full relative">
       <VictoryPie
         padding={0}
-        innerRadius={0}
+        innerRadius={175}
         colorScale={[COLOR_MAP.brightGray.color]}
         data={[{ x: '', y: 100 }]}
       />
-      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center opacity-40 text-2xl leading-4 dark:text-black">
+      <p className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center opacity-40 text-2xl leading-4 dark:text-bright-gray">
         0
       </p>
+      {tooltipText && showTooltip && <Tooltip tooltipText={tooltipText} />}
     </div>
   );
 };

packages/design-system/src/components/circlePieChart/index.tsx

@@ -16,14 +16,15 @@
 /**
  * External dependencies.
  */
-import React from 'react';
+import React, { useState } from 'react';
 import { VictoryPie } from 'victory-pie';
 import classNames from 'classnames';
 
 /**
  * Internal dependencies.
  */
 import EmptyCirclePieChart from './emptyCirclePieChart';
+import Tooltip from './tooltip';
 
 interface CirclePieChartProps {
   centerCount: number;
@@ -32,7 +33,9 @@ interface CirclePieChartProps {
   fallbackText?: string;
   infoIconClassName?: string;
   centerTitleExtraClasses?: string;
+  bottomTitleExtraClasses?: string;
   pieChartExtraClasses?: string;
+  tooltipText?: string;
 }
 
 export const MAX_COUNT = 999;
@@ -42,15 +45,25 @@ const CirclePieChart = ({
   data,
   title,
   centerTitleExtraClasses = '',
+  bottomTitleExtraClasses = '',
   pieChartExtraClasses = '',
+  tooltipText = '',
 }: CirclePieChartProps) => {
+  const [showTooltip, setShowTooltip] = useState(false);
   const centerTitleClasses = centerCount <= MAX_COUNT ? 'text-2xl' : 'text-l';
 
   return (
-    <div className="w-full h-full flex flex-col items-center justify-start">
-      <div className="inline-block align-bottom w-16">
+    <div
+      className="w-full h-full flex flex-col items-center justify-start"
+      onMouseEnter={() => setShowTooltip(true)}
+      onMouseLeave={() => setShowTooltip(false)}
+    >
+      <div className="inline-block align-bottom w-16 relative">
         {centerCount <= 0 ? (
-          <EmptyCirclePieChart />
+          <EmptyCirclePieChart
+            tooltipText={tooltipText}
+            showTooltip={showTooltip}
+          />
         ) : (
           <div className={`w-full h-full relative ${pieChartExtraClasses}`}>
             <VictoryPie
@@ -69,11 +82,16 @@ const CirclePieChart = ({
             >
               {centerCount <= MAX_COUNT ? centerCount : MAX_COUNT + '+'}
             </p>
+            {tooltipText && showTooltip && (
+              <Tooltip tooltipText={tooltipText} />
+            )}
           </div>
         )}
       </div>
       {title && (
-        <div className="flex items-center justify-center gap-1 mt-2 relative">
+        <div
+          className={`flex items-center justify-center gap-1 mt-2 relative ${bottomTitleExtraClasses}`}
+        >
           <p className="text-xs text-center font-semibold leading-relaxed dark:text-bright-gray">
             {title}
           </p>

packages/design-system/src/components/circlePieChart/stories/circlePieChart.stories.tsx

@@ -55,6 +55,7 @@ export const Primary: StoryObj<typeof meta> = {
         color: COLOR_MAP.uncategorized.color,
       },
     ],
+    tooltipText: 'This chart shows the distribution of counts.',
   },
   render: (args) => (
     <div className="w-16">

packages/design-system/src/components/circlePieChart/tooltip.tsx

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2025 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React from 'react';
+
+const Tooltip = ({ tooltipText }: { tooltipText?: string }) => {
+  return (
+    <div className="absolute left-1/2 bottom-0 translate-x-[-50%] translate-y-[110%] bg-black/80 text-white text-xs rounded px-2 py-1 shadow-lg animate-fadeIn z-10 pointer-events-none text-center max-w-xs min-w-[80px] w-max whitespace-pre-line transition-opacity duration-300">
+      {tooltipText}
+    </div>
+  );
+};
+
+export default Tooltip;

packages/design-system/src/components/table/components/tableBody/bodyRow.tsx

@@ -68,24 +68,26 @@ const BodyRow = ({
   const rowKey = getRowObjectKey(row);
   const isHighlighted = row.originalData?.highlighted;
   const scrollToHighlighted = row.originalData?.scrollToHighlighted;
-  const isHighlightedClass =
-    row.originalData?.highlightedClass || 'bg-dirty-pink dark:text-black';
+  const highlightedClass = (selected: boolean) =>
+    row.originalData?.highlightedClass?.(selected) ||
+    'bg-dirty-pink dark:text-black';
+
   const classes = classnames(
     rowKey !== selectedKey &&
       (index % 2
         ? isHighlighted
-          ? isHighlightedClass
+          ? highlightedClass(false)
           : 'bg-anti-flash-white dark:bg-charleston-green'
         : isHighlighted
-        ? isHighlightedClass
+        ? highlightedClass(false)
         : 'bg-white dark:bg-raisin-black'),
     rowKey === selectedKey &&
       (isRowFocused
         ? isHighlighted
-          ? isHighlightedClass
+          ? `${highlightedClass(true)}`
           : 'bg-lavender-sky text-black dark:bg-midnight-slate dark:text-chinese-silver'
         : isHighlighted
-        ? isHighlightedClass
+        ? `${highlightedClass(true)}`
         : 'bg-silver-mist text-black dark:bg-dark-graphite dark:text-chinese-silver')
   );
   const extraClasses = getExtraClasses();

packages/design-system/src/components/table/useTable/types.ts

@@ -82,7 +82,7 @@ export type TableData = (
   | PRTMetadata
 ) & {
   highlighted?: boolean;
-  highlightedClass?: string; // Optional class for highlighting rows
+  highlightedClass?: () => string; // Optional class for highlighting rows
   scrollToHighlighted?: boolean; // Optional flag to scroll to highlighted row
 };
 

packages/design-system/src/components/tabs/index.tsx

@@ -35,17 +35,18 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
     activeTab,
     activeGroup,
     setActiveTab,
+    setActiveGroup,
     groupedTitles,
     titles,
     isTabHighlighted,
     shouldAddSpacer,
     getTabGroup,
     isGroup,
-    loading,
   } = useTabs(({ state, actions }) => ({
     activeTab: state.activeTab,
     activeGroup: state.activeGroup,
     setActiveTab: actions.setActiveTab,
+    setActiveGroup: actions.setActiveGroup,
     groupedTitles: state.groupedTitles,
     titles: state.titles,
     isTabHighlighted: actions.isTabHighlighted,
@@ -57,18 +58,6 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
 
   const timeoutRef = useRef<NodeJS.Timeout | null>(null);
 
-  const [expandedGroup, setExpandedGroup] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (loading) {
-      return;
-    }
-
-    if (activeGroup && expandedGroup === null) {
-      setExpandedGroup(activeGroup);
-    }
-  }, [activeGroup, expandedGroup, loading]);
-
   useEffect(() => {
     return () => {
       if (timeoutRef.current) {
@@ -87,17 +76,15 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
 
       setIsAnimating(true);
 
-      if (expandedGroup === group) {
-        setExpandedGroup(null);
-      } else {
-        setExpandedGroup(group);
+      if (activeGroup !== group) {
+        setActiveGroup(group);
       }
 
       timeoutRef.current = setTimeout(() => {
         setIsAnimating(false);
       }, 300);
     },
-    [expandedGroup, isAnimating]
+    [activeGroup, isAnimating, setActiveGroup]
   );
 
   const handleKeyDown = useCallback(
@@ -108,37 +95,36 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
         if (event.shiftKey) {
           const previousIndex = activeTab - 1;
           if (previousIndex >= 0) {
-            setActiveTab(previousIndex);
-
             const group = getTabGroup(previousIndex);
-            if (expandedGroup !== group) {
-              console.log(group, expandedGroup);
+            if (activeGroup !== group) {
               handleGroupClick(group);
             }
-          } else {
-            setActiveTab(titles.length - 1);
 
+            setActiveTab(previousIndex);
+          } else {
             const group = getTabGroup(titles.length - 1);
-            if (expandedGroup !== group) {
+            if (activeGroup !== group) {
               handleGroupClick(group);
             }
+
+            setActiveTab(titles.length - 1);
           }
         } else {
           const nextIndex = activeTab + 1;
           if (nextIndex < titles.length) {
-            setActiveTab(nextIndex);
-
             const group = getTabGroup(nextIndex);
-            if (expandedGroup !== group) {
+            if (activeGroup !== group) {
               handleGroupClick(group);
             }
-          } else {
-            setActiveTab(0);
 
+            setActiveTab(nextIndex);
+          } else {
             const group = getTabGroup(0);
-            if (expandedGroup !== group) {
+            if (activeGroup !== group) {
               handleGroupClick(group);
             }
+
+            setActiveTab(0);
           }
         }
       }
@@ -148,7 +134,7 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
       titles.length,
       setActiveTab,
       getTabGroup,
-      expandedGroup,
+      activeGroup,
       handleGroupClick,
     ]
   );
@@ -171,7 +157,7 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
         )}
       >
         {Object.entries(groupedTitles).map(([group, data]) => {
-          const isExpanded = expandedGroup === group;
+          const isExpanded = activeGroup === group;
 
           return (
             <div
@@ -245,7 +231,13 @@ const Tabs = ({ showBottomBorder = true, fontSizeClass }: TabsProps) => {
                           )}
                         >
                           <button
-                            onClick={() => setActiveTab(index)}
+                            onClick={() => {
+                              if (group !== activeGroup) {
+                                handleGroupClick(group);
+                              }
+
+                              setActiveTab(index);
+                            }}
                             onKeyDown={handleKeyDown}
                             className="px-1.5 hover:opacity-80 outline-none text-nowrap"
                           >

packages/design-system/src/components/tabs/tests/index.tsx

@@ -35,6 +35,7 @@ const mockUseTabs = useTabs as jest.Mock;
 describe('Tabs', () => {
   it('should render', () => {
     const setActiveTab = jest.fn();
+    const setActiveGroup = jest.fn();
 
     mockUseTabs.mockReturnValue({
       activeTab: 0,
@@ -53,6 +54,7 @@ describe('Tabs', () => {
         ],
       },
       setActiveTab,
+      setActiveGroup,
       isTabHighlighted: jest.fn((tab: number) => (tab === 0 ? 1 : 99)),
       shouldAddSpacer: jest.fn(() => false),
       getTabGroup: jest.fn((tab: number) =>
@@ -83,6 +85,7 @@ describe('Tabs', () => {
 
   it('should handle grouped tabs', () => {
     const setActiveTab = jest.fn();
+    const setActiveGroup = jest.fn();
 
     mockUseTabs.mockReturnValue({
       activeTab: 0,
@@ -111,6 +114,7 @@ describe('Tabs', () => {
         ],
       },
       setActiveTab,
+      setActiveGroup,
       shouldAddSpacer: jest.fn(() => false),
       isTabHighlighted: jest.fn(() => false),
       isGroup: true,
@@ -157,6 +161,7 @@ describe('Tabs', () => {
         ],
       },
       setActiveTab,
+      setActiveGroup,
       shouldAddSpacer: jest.fn(() => false),
       isTabHighlighted: jest.fn(() => false),
     });