Updated expanded view. Some style fixes.

src/components/common/FilterLink.tsx

@@ -1,6 +1,6 @@
 import { HTMLAttributes, ReactNode, useState } from 'react';
 import Link from 'next/link';
-import { Icon, Row } from '@umami/react-zen';
+import { Icon, Row, Text } from '@umami/react-zen';
 import { useMessages, useNavigation } from '@/components/hooks';
 import { ExternalLink } from '@/components/icons';
 
@@ -31,9 +31,11 @@ export function FilterLink({ type, value, label, externalUrl, icon }: FilterLink
       {icon}
       {!value && `(${label || formatMessage(labels.unknown)})`}
       {value && (
-        <Link href={updateParams({ [type]: `eq.${value}` })} replace>
-          {label || value}
-        </Link>
+        <Text title={label || value} truncate>
+          <Link href={updateParams({ [type]: `eq.${value}` })} replace>
+            {label || value}
+          </Link>
+        </Text>
       )}
       {externalUrl && showLink && (
         <a href={externalUrl} target="_blank" rel="noreferrer noopener">

src/components/common/SideMenu.tsx

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import {
   Text,
   Heading,
@@ -7,15 +8,16 @@ import {
   Row,
   Column,
   NavMenuGroup,
+  NavMenuProps,
 } from '@umami/react-zen';
 import Link from 'next/link';
 
-export interface SideMenuProps {
+export interface SideMenuProps extends NavMenuProps {
   items: { label: string; items: { id: string; label: string; icon?: any; path: string }[] }[];
   title?: string;
   selectedKey?: string;
   allowMinimize?: boolean;
-  children?: React.ReactNode;
+  children?: ReactNode;
 }
 
 export function SideMenu({
@@ -24,6 +26,7 @@ export function SideMenu({
   selectedKey,
   allowMinimize,
   children,
+  ...props
 }: SideMenuProps) {
   return (
     <Column
@@ -42,12 +45,12 @@ export function SideMenu({
           <Heading size="1">{title}</Heading>
         </Row>
       )}
-      <NavMenu muteItems={false} gap="6">
-        {items?.map(({ label, items }) => {
+      <NavMenu muteItems={false} gap="6" {...props}>
+        {items?.map(({ label, items }, index) => {
           return (
             <NavMenuGroup
               title={label}
-              key={label}
+              key={`${label}${index}`}
               gap="1"
               allowMinimize={allowMinimize}
               marginBottom="3"

src/components/messages.ts

@@ -94,6 +94,7 @@ export const labels = defineMessages({
   entry: { id: 'label.entry', defaultMessage: 'Entry' },
   exit: { id: 'label.exit', defaultMessage: 'Exit' },
   referrers: { id: 'label.referrers', defaultMessage: 'Referrers' },
+  screen: { id: 'label.screen', defaultMessage: 'Screen' },
   screens: { id: 'label.screens', defaultMessage: 'Screens' },
   browsers: { id: 'label.browsers', defaultMessage: 'Browsers' },
   os: { id: 'label.os', defaultMessage: 'OS' },
@@ -301,6 +302,7 @@ export const labels = defineMessages({
   lastSeen: { id: 'label.last-seen', defaultMessage: 'Last seen' },
   firstSeen: { id: 'label.first-seen', defaultMessage: 'First seen' },
   properties: { id: 'label.properties', defaultMessage: 'Properties' },
+  channel: { id: 'label.channel', defaultMessage: 'Channel' },
   channels: { id: 'label.channels', defaultMessage: 'Channels' },
   sources: { id: 'label.sources', defaultMessage: 'Sources' },
   medium: { id: 'label.medium', defaultMessage: 'Medium' },
@@ -355,7 +357,6 @@ export const labels = defineMessages({
   audience: { id: 'label.audience', defaultMessage: 'Audience' },
   invalidUrl: { id: 'label.invalid-url', defaultMessage: 'Invalid URL' },
   environment: { id: 'label.environment', defaultMessage: 'Environment' },
-  weekly: { id: 'label.weekly', defaultMessage: 'Weekly' },
 });
 
 export const messages = defineMessages({

src/components/metrics/MetricLabel.tsx

@@ -115,14 +115,20 @@ export function MetricLabel({ type, data }: MetricLabelProps) {
         />
       );
 
-    case 'grouped':
+    case 'domain':
       if (label === 'Other') {
         return `(${formatMessage(labels.other)})`;
       } else {
+        const name = GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name;
+
+        if (!name) {
+          return null;
+        }
+
         return (
           <Row alignItems="center" gap="3">
             <Favicon domain={label} />
-            {GROUPED_DOMAINS.find(({ domain }) => domain === label)?.name}
+            {name}
           </Row>
         );
       }

src/components/metrics/MetricsExpandedTable.tsx

@@ -70,7 +70,11 @@ export function MetricsExpandedTable({
           {items && (
             <DataTable data={items}>
               <DataColumn id="label" label={title} width="2fr" align="start">
-                {row => <MetricLabel type={type} data={row} />}
+                {row => (
+                  <Row overflow="hidden">
+                    <MetricLabel type={type} data={row} />
+                  </Row>
+                )}
               </DataColumn>
               <DataColumn id="visitors" label={formatMessage(labels.visitors)} align="end">
                 {row => row?.['visitors']?.toLocaleString()}

src/components/metrics/MetricsTable.tsx

@@ -55,8 +55,8 @@ export function MetricsTable({
     return [];
   }, [data, dataFilter, limit, type]);
 
-  const renderLabel = (data: any) => {
-    return <MetricLabel type={type} data={data} />;
+  const renderLabel = (row: any) => {
+    return <MetricLabel type={type} data={row} />;
   };
 
   return (