#291 Add timestamps to leaf items

src/components/ParamSection/CommitDialog/ComparisonList.tsx

@@ -6,7 +6,7 @@ import { isLeaf, unwrapParamData, getData } from "@/utils/data";
 import { getDataDiff } from "@/utils/dataDiff";
 import { commitHistoryAtom, latestDataAtom } from "@/atoms/api";
 import { editedDataAtom } from "@/atoms/paramList";
-import GroupItemContent from "../GroupItemContent";
+import ItemContent from "../ItemContent";
 import CollapseItem from "../CollapseItem";
 import LeafItemContent from "./LeafItemContent";
 
@@ -70,13 +70,19 @@ function DataListItem({ name, data, status }: DataListItemProps) {
       disablePadding
     >
       {isLeaf(innerData) ? (
-        <LeafItemContent name={name} leaf={innerData} backgroundColor={backgroundColor} />
+        <LeafItemContent
+          name={name}
+          className={className}
+          timestamp={lastUpdated}
+          leaf={innerData}
+          backgroundColor={backgroundColor}
+        />
       ) : (
         <CollapseItem
           backgroundColor={backgroundColor}
           defaultOpen={true}
           itemContent={
-            <GroupItemContent name={name} className={className} timestamp={lastUpdated} />
+            <ItemContent name={name} className={className} timestamp={lastUpdated} />
           }
         >
           <List disablePadding sx={sublistSx}>
@@ -135,11 +141,7 @@ function DataDiffListItem({ name: nameOrUndefined, dataDiff }: DataDiffListItemP
           <CollapseItem
             defaultOpen={true}
             itemContent={
-              <GroupItemContent
-                name={name}
-                className={className}
-                timestamp={lastUpdated}
-              />
+              <ItemContent name={name} className={className} timestamp={lastUpdated} />
             }
           >
             <List disablePadding sx={sublistSx}>

src/components/ParamSection/CommitDialog/LeafItemContent.tsx

@@ -1,20 +1,19 @@
-import { Box, Typography } from "@mui/material";
+import { Typography } from "@mui/material";
 import { Leaf } from "@/types";
 import { leafToString } from "@/utils/data";
+import ItemContent from "../ItemContent";
 
 const leafItemContentSx = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flex: 1,
   pl: "24px",
-  pr: 2,
-  minHeight: "28px",
 };
 
 type LeafItemContentProps = {
   /** Name to display. */
   name: string;
+  /** Class name to display, if any. */
+  className: string | null;
+  /** Timestamp to display, if any. */
+  timestamp: string | null;
   /** Leaf value to display. */
   leaf: Leaf;
   /** Background color (any valid color CSS). */
@@ -24,13 +23,19 @@ type LeafItemContentProps = {
 /** Item content for a leaf in the ComparisonList component. */
 export default function LeafItemContent({
   name,
+  className,
+  timestamp,
   leaf,
   backgroundColor,
 }: LeafItemContentProps) {
   return (
-    <Box sx={{ ...leafItemContentSx, backgroundColor }}>
-      <Typography>{name}</Typography>
+    <ItemContent
+      name={name}
+      className={className}
+      timestamp={timestamp}
+      extraSx={{ ...leafItemContentSx, backgroundColor }}
+    >
       <Typography align="right">{leafToString(leaf, false)}</Typography>
-    </Box>
+    </ItemContent>
   );
 }

src/components/ParamSection/GroupItemContent.tsx

@@ -15,16 +15,12 @@ const nameContainerSx = {
   columnGap: 1.25,
 };
 
-const timestampSx = {
-  whiteSpace: "nowrap",
-};
-
 type ParamItemContentProps = {
   /** Name to display. */
   name: string;
   /** Class name to display, if any. */
   className: string | null;
-  /** Timestamp to display. */
+  /** Timestamp to display, if any. */
   timestamp: string | null;
 };
 
@@ -38,17 +34,13 @@ export default function GroupItemContent({
     <Box sx={itemContentSx}>
       <Box sx={nameContainerSx}>
         <Typography>{name}</Typography>
-        {className !== null && (
+        {(className !== null || timestamp !== null) && (
           <Typography variant="body2" color="text.secondary">
-            {className}
+            {className !== null ? className : ""}
+            {timestamp !== null ? ` (${timestamp})` : ""}
           </Typography>
         )}
       </Box>
-      {timestamp !== null && (
-        <Typography variant="body2" color="text.secondary" align="right" sx={timestampSx}>
-          {timestamp}
-        </Typography>
-      )}
     </Box>
   );
 }

src/components/ParamSection/ItemContent.tsx

@@ -0,0 +1,53 @@
+import { SxProps, Box, Typography } from "@mui/material";
+
+const itemContentSx = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  flex: 1,
+  pr: 2,
+  minHeight: "28px",
+};
+
+const nameContainerSx = {
+  display: "flex",
+  alignItems: "center",
+  columnGap: 1.25,
+};
+
+type ParamItemContentProps = {
+  /** Name to display. */
+  name: string;
+  /** Class name to display, if any. */
+  className: string | null;
+  /** Timestamp to display, if any. */
+  timestamp: string | null;
+  /** Extra styles. */
+  extraSx?: SxProps;
+  /** Children to include on the right of this item. */
+  children?: React.ReactNode;
+};
+
+/** Conent of an item in a parameter list. */
+export default function ItemContent({
+  name,
+  className,
+  timestamp,
+  extraSx,
+  children,
+}: ParamItemContentProps) {
+  return (
+    <Box sx={{ ...itemContentSx, ...extraSx }}>
+      <Box sx={nameContainerSx}>
+        <Typography>{name}</Typography>
+        {(className !== null || timestamp !== null) && (
+          <Typography variant="body2" color="text.secondary">
+            {className !== null ? className : ""}
+            {timestamp !== null ? ` (${timestamp})` : ""}
+          </Typography>
+        )}
+      </Box>
+      {children}
+    </Box>
+  );
+}

src/components/ParamSection/LeafItemContent.tsx

@@ -16,17 +16,7 @@ import {
 } from "@/utils/data";
 import { originalDataAtom } from "@/atoms/api";
 import { roundAtom, editModeAtom, editedDataAtom } from "@/atoms/paramList";
-
-const leafItemContentSx = {
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "space-between",
-  flex: 1,
-  pl: "24px",
-  pr: 2,
-  minHeight: "28px",
-  background: "white",
-};
+import ItemContent from "./ItemContent";
 
 type LeafItemReadModeContentProps = {
   /** Leaf value to display. */
@@ -226,27 +216,46 @@ function LeafItemEditModeContent({ editedLeaf, path }: LeafItemEditModeContentPr
   );
 }
 
+const leafItemContentSx = {
+  pl: "24px",
+  background: "white",
+};
+
 type LeafItemContentProps = {
   /** Name to display. */
   name: string;
+  /** Class name to display, if any. */
+  className: string | null;
+  /** Timestamp to display, if any. */
+  timestamp: string | null;
   /** Leaf value to display, or the edited leaf value in edit mode. */
   leaf: Leaf;
   /** Path to the data this item represents. */
   path: Path;
 };
 
 /** Item content for a Leaf. */
-export default function LeafItemContent({ name, leaf, path }: LeafItemContentProps) {
+export default function LeafItemContent({
+  name,
+  className,
+  timestamp,
+  leaf,
+  path,
+}: LeafItemContentProps) {
   const [editMode] = useAtom(editModeAtom);
 
   return (
-    <Box sx={leafItemContentSx}>
-      <Typography>{name}</Typography>
+    <ItemContent
+      name={name}
+      className={className}
+      timestamp={timestamp}
+      extraSx={leafItemContentSx}
+    >
       {editMode ? (
         <LeafItemEditModeContent editedLeaf={leaf} path={path} />
       ) : (
         <LeafItemReadModeContent leaf={leaf} />
       )}
-    </Box>
+    </ItemContent>
   );
 }

src/components/ParamSection/ParamList.tsx

@@ -5,8 +5,8 @@ import { Path } from "@/types";
 import { isLeaf, unwrapParamData, getData } from "@/utils/data";
 import { originalDataAtom } from "@/atoms/api";
 import { editModeAtom, editedDataAtom } from "@/atoms/paramList";
+import ItemContent from "./ItemContent";
 import LeafItemContent from "./LeafItemContent";
-import GroupItemContent from "./GroupItemContent";
 import CollapseItem from "./CollapseItem";
 
 const rootDataAtom = atom((get) => {
@@ -59,12 +59,18 @@ function ParamListItem({ path }: ParamListItemProps) {
       disablePadding
     >
       {isLeaf(innerData) ? (
-        <LeafItemContent name={name} leaf={innerData} path={path} />
+        <LeafItemContent
+          name={name}
+          className={className}
+          timestamp={lastUpdated}
+          leaf={innerData}
+          path={path}
+        />
       ) : (
         <CollapseItem
           defaultOpen={path.length === 0}
           itemContent={
-            <GroupItemContent name={name} className={className} timestamp={lastUpdated} />
+            <ItemContent name={name} className={className} timestamp={lastUpdated} />
           }
         >
           {

src/components/ParamSection/ParamSection.tsx

@@ -5,7 +5,7 @@ import ParamList from "./ParamList";
 const paramSectionSx = {
   display: "flex",
   flexDirection: "column",
-  flexBasis: "40rem",
+  flexBasis: "45rem",
   overflow: "hidden",
   borderLeft: 1,
   borderRight: 1,

src/utils/timestamp.ts

@@ -15,12 +15,8 @@ function dateFromTimestampOrString(timestampOrString: number | string) {
  */
 export function formatDate(timestampOrString: number | string) {
   return dateFromTimestampOrString(timestampOrString).toLocaleString(undefined, {
-    year: "2-digit",
-    month: "2-digit",
-    day: "2-digit",
-    hour: "2-digit",
-    minute: "2-digit",
-    second: "2-digit",
+    dateStyle: "short",
+    timeStyle: "medium",
   });
 }