fix: option comparison in change calculations

apps/web/core/utils/change/change.ts

@@ -390,13 +390,17 @@ export function aggregateChanges({
     const tripleChanges: TripleChange[] = [];
     const relationChanges: RelationChange[] = [];
 
+    const processedAttributes = new Set<string>();
+
     const afterTriplesForEntity = afterTriplesByEntityId[entityId] ?? {};
     const beforeTriplesForEntity = beforeTriplesByEntityId[entityId] ?? {};
     const afterRelationsForEntity = afterRelationsByEntityId[entityId] ?? {};
     const beforeRelationsForEntity = beforeRelationsByEntityId[entityId] ?? {};
 
     if (afterEntityIds.includes(entityId)) {
       for (const afterTriple of Object.values(afterTriplesForEntity)) {
+        if (processedAttributes.has(afterTriple.attributeId)) continue;
+
         const beforeTriple: Triple | null = beforeTriplesForEntity[afterTriple.attributeId] ?? null;
         const beforeValue = beforeTriple ? beforeTriple.value : null;
         const before = AfterTripleDiff.diffBefore(afterTriple.value, beforeValue);
@@ -411,9 +415,13 @@ export function aggregateChanges({
           before,
           after,
         });
+
+        processedAttributes.add(afterTriple.attributeId);
       }
 
       for (const beforeTriple of Object.values(beforeTriplesForEntity)) {
+        if (processedAttributes.has(beforeTriple.attributeId)) continue;
+
         const afterTriple: Triple | null = afterTriplesForEntity[beforeTriple.attributeId] ?? null;
         const afterValue = afterTriple ? afterTriple.value : null;
         const before = BeforeTripleDiff.diffBefore(beforeTriple.value, afterValue);
@@ -428,6 +436,8 @@ export function aggregateChanges({
           before,
           after,
         });
+
+        processedAttributes.add(beforeTriple.attributeId);
       }
 
       for (const relations of Object.values(afterRelationsForEntity)) {
@@ -555,6 +565,8 @@ export function aggregateChanges({
     };
   });
 
+  console.log({ aggregatedChanges });
+
   return aggregatedChanges;
 }
 

apps/web/core/utils/change/get-triple-change.ts

@@ -10,17 +10,19 @@ export const AfterTripleDiff = {
       return null;
     }
 
-    if (afterValue.value !== beforeValue.value) {
+    if (afterValue.value !== beforeValue.value || !equal(afterValue.options, beforeValue.options)) {
       return {
         value: beforeValue.value,
         valueName: null,
+        options: beforeValue.options,
         type: 'UPDATE',
       };
     }
 
     return {
       value: beforeValue.value,
       valueName: null,
+      options: beforeValue.options,
       type: 'REMOVE',
     };
   },
@@ -29,21 +31,24 @@ export const AfterTripleDiff = {
       return {
         value: afterValue.value,
         valueName: null,
+        options: afterValue.options,
         type: 'ADD',
       };
     }
 
-    if (afterValue.value !== beforeValue.value) {
+    if (afterValue.value !== beforeValue.value || !equal(afterValue.options, beforeValue.options)) {
       return {
         value: afterValue.value,
         valueName: null,
+        options: afterValue.options,
         type: 'UPDATE',
       };
     }
 
     return {
       value: afterValue.value,
       valueName: null,
+      options: afterValue.options,
       type: 'ADD',
     };
   },
@@ -56,6 +61,7 @@ export const BeforeTripleDiff = {
       return {
         value: beforeValue.value,
         valueName: null,
+        options: beforeValue.options,
         type: 'REMOVE',
       };
     }
@@ -82,7 +88,7 @@ export const BeforeTripleDiff = {
     if (afterValue === null) {
       return null;
     }
-    // @TODO: verify these changes. Why was it previously beforeValue?
+
     if (beforeValue.value !== afterValue.value || !equal(beforeValue.options, afterValue.options)) {
       return {
         value: afterValue.value,
@@ -93,8 +99,8 @@ export const BeforeTripleDiff = {
     }
 
     return {
-      value: beforeValue.value,
-      options: beforeValue.options,
+      value: afterValue.value,
+      options: afterValue.options,
       valueName: null,
       type: 'UPDATE',
     };
@@ -118,16 +124,18 @@ export function getBeforeTripleChange(
     return null;
   }
 
-  if (value.value !== remoteValue.value) {
+  if (value.value !== remoteValue.value || !equal(value.options, remoteValue.options)) {
     return {
       value: remoteValue.value,
+      options: remoteValue.options,
       valueName: null,
       type: 'UPDATE',
     };
   }
 
   return {
     value: remoteValue.value,
+    options: remoteValue.options,
     valueName: null,
     type: 'REMOVE',
   };
@@ -147,21 +155,24 @@ export function getAfterTripleChange(value: Triple['value'], remoteValue: Triple
   if (remoteValue === null) {
     return {
       value: value.value,
+      options: value.options,
       valueName: null,
       type: 'ADD',
     };
   }
 
-  if (value.value !== remoteValue.value) {
+  if (value.value !== remoteValue.value || !equal(value.options, remoteValue.options)) {
     return {
       value: value.value,
+      options: value.options,
       valueName: null,
       type: 'UPDATE',
     };
   }
 
   return {
     value: value.value,
+    options: value.options,
     valueName: null,
     type: 'ADD',
   };

apps/web/partials/diff/changed-entity.tsx

@@ -582,64 +582,64 @@ export const DateTimeDiff = ({ mode, before, after }: DateTimeProps) => {
   const renderedDateTime: DateTimeType = (mode === 'before' ? beforeDateTime : afterDateTime) as DateTimeType;
   const highlightClassName = mode === 'before' ? 'rounded bg-errorTertiary' : 'bg-successTertiary rounded';
 
-  if (!equal(before.options, after.options)) {
-    return (
-      <p className="py-2 text-sm text-grey-04">
-        Browse format · <span className={highlightClassName}>{formattedDate}</span>
-      </p>
-    );
-  }
-
   return (
-    <div className="flex items-start gap-4">
-      <div className="flex w-[164px] items-center gap-3">
-        <div className="flex w-full flex-[4] flex-col items-center">
-          <p className={cx(beforeDateTime?.year !== afterDateTime?.year && highlightClassName, dateFieldClassNames)}>
-            {renderedDateTime.year}
-          </p>
-        </div>
-        <span className="flex flex-[1] items-center text-grey-02">/</span>
-        <div className="flex w-full flex-[2] flex-col">
-          <p className={cx(beforeDateTime?.month !== afterDateTime?.month && highlightClassName, dateFieldClassNames)}>
-            {renderedDateTime.month.padStart(2, '0')}
-          </p>
+    <>
+      <div className="flex items-start gap-4">
+        <div className="flex w-[164px] items-center gap-3">
+          <div className="flex w-full flex-[4] flex-col items-center">
+            <p className={cx(beforeDateTime?.year !== afterDateTime?.year && highlightClassName, dateFieldClassNames)}>
+              {renderedDateTime.year}
+            </p>
+          </div>
+          <span className="flex flex-[1] items-center text-grey-02">/</span>
+          <div className="flex w-full flex-[2] flex-col">
+            <p
+              className={cx(beforeDateTime?.month !== afterDateTime?.month && highlightClassName, dateFieldClassNames)}
+            >
+              {renderedDateTime.month.padStart(2, '0')}
+            </p>
+          </div>
+          <span className="w-full flex-[1] text-grey-02">/</span>
+          <div className="flex flex-[2] flex-col items-center">
+            <p className={cx(beforeDateTime?.day !== afterDateTime?.day && highlightClassName, dateFieldClassNames)}>
+              {renderedDateTime.day.padStart(2, '0')}
+            </p>
+          </div>
         </div>
-        <span className="w-full flex-[1] text-grey-02">/</span>
-        <div className="flex flex-[2] flex-col items-center">
-          <p className={cx(beforeDateTime?.day !== afterDateTime?.day && highlightClassName, dateFieldClassNames)}>
-            {renderedDateTime.day.padStart(2, '0')}
+        <div className="flex items-center">
+          <Minus color="grey-03" />
+          <Spacer width={18} />
+          <div className="flex items-center gap-1">
+            <p className={cx(beforeDateTime?.hour !== afterDateTime?.hour && highlightClassName, timeClassNames)}>
+              {renderedDateTime.hour.padStart(2, '0')}
+            </p>
+            <span>:</span>
+            <p className={cx(beforeDateTime?.minute !== afterDateTime?.minute && highlightClassName, timeClassNames)}>
+              {renderedDateTime.minute.padStart(2, '0')}
+            </p>
+          </div>
+          <p
+            className={cx(
+              (!before || !after || Number(beforeDateTime?.hour) < 12 !== Number(afterDateTime?.hour) < 12) &&
+                highlightClassName,
+              'uppercase',
+              timeClassNames
+            )}
+          >
+            {renderedDateTime.meridiem}
           </p>
         </div>
       </div>
-      <div className="flex items-center">
-        <Minus color="grey-03" />
-        <Spacer width={18} />
-        <div className="flex items-center gap-1">
-          <p className={cx(beforeDateTime?.hour !== afterDateTime?.hour && highlightClassName, timeClassNames)}>
-            {renderedDateTime.hour.padStart(2, '0')}
-          </p>
-          <span>:</span>
-          <p className={cx(beforeDateTime?.minute !== afterDateTime?.minute && highlightClassName, timeClassNames)}>
-            {renderedDateTime.minute.padStart(2, '0')}
-          </p>
-        </div>
-        <p
-          className={cx(
-            (!before || !after || Number(beforeDateTime?.hour) < 12 !== Number(afterDateTime?.hour) < 12) &&
-              highlightClassName,
-            'uppercase',
-            timeClassNames
-          )}
-        >
-          {renderedDateTime.meridiem}
+      {!equal(before.options, after.options) && (
+        <p className="py-2 text-sm text-grey-04">
+          Browse format · <span className={highlightClassName}>{formattedDate}</span>
         </p>
-      </div>
-    </div>
+      )}
+    </>
   );
 };
 
 const dateFieldClassNames = `w-full text-center text-body tabular-nums`;
-const labelClassNames = `text-footnote text-grey-04`;
 const timeClassNames = `w-[21px] tabular-nums p-0 m-0 text-body`;
 
 type ChipProps = {