From c5b3da72cdfab3f8b4a73b0e8aef2952decfb8c7 Mon Sep 17 00:00:00 2001
From: sylenien <nikita@openreplay.com>
Date: Wed, 9 Nov 2022 18:03:37 +0100
Subject: [PATCH] fix(ui): fix very long diffs

---
 .../components/Session_/Storage/DiffRow.tsx   | 52 ++++++++++++++++---
 .../components/Session_/Storage/Storage.js    | 15 +++---
 2 files changed, 52 insertions(+), 15 deletions(-)

diff --git a/frontend/app/components/Session_/Storage/DiffRow.tsx b/frontend/app/components/Session_/Storage/DiffRow.tsx
index f34be1b40..3ecb4f615 100644
--- a/frontend/app/components/Session_/Storage/DiffRow.tsx
+++ b/frontend/app/components/Session_/Storage/DiffRow.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import cn from 'classnames';
 
 interface Props {
   shades: Record<string, string>;
@@ -11,7 +12,7 @@ const getCircularReplacer = () => {
   const seen = new WeakSet();
   // @ts-ignore
   return (key, value) => {
-    if (typeof value === "object" && value !== null) {
+    if (typeof value === 'object' && value !== null) {
       if (seen.has(value)) {
         return;
       }
@@ -23,20 +24,57 @@ const getCircularReplacer = () => {
 
 function DiffRow({ diff, path }: Props) {
   const [shorten, setShorten] = React.useState(true);
+  const [shortenOldVal, setShortenOldVal] = React.useState(true);
+  const [shortenNewVal, setShortenNewVal] = React.useState(true);
 
-  const oldValue = diff.item ? JSON.stringify(diff.item.lhs, getCircularReplacer()) : JSON.stringify(diff.lhs, getCircularReplacer());
-  const newValue = diff.item ? JSON.stringify(diff.item.rhs, getCircularReplacer()) : JSON.stringify(diff.rhs, getCircularReplacer());
+  const oldValue = diff.item
+    ? JSON.stringify(diff.item.lhs, getCircularReplacer(), 1)
+    : JSON.stringify(diff.lhs, getCircularReplacer(), 1);
+  const newValue = diff.item
+    ? JSON.stringify(diff.item.rhs, getCircularReplacer(), 1)
+    : JSON.stringify(diff.rhs, getCircularReplacer(), 1);
+
+  const length = path.length;
+  const diffLengths = [oldValue?.length || 0, newValue?.length || 0];
+
+  const pathStr =
+    length > 20 && shorten ? path.slice(0, 5) + '...' + path.slice(length - 10, length) : path;
+
+  const oldValueSafe =
+    diffLengths[0] > 50 && shortenOldVal
+      ? `${oldValue.slice(0, 10)} ... ${oldValue.slice(diffLengths[0] - 25, diffLengths[0])}`
+      : oldValue;
+  const newValueSafe =
+    diffLengths[1] > 50 && shortenNewVal
+      ? `${newValue.slice(0, 10)} ... ${newValue.slice(diffLengths[1] - 25, diffLengths[1])}`
+      : newValue;
 
-  const pathStr = path.length > 15 && shorten ? path.slice(0, 5) + '...' + path.slice(10) : path;
   return (
     <div className="p-1 rounded">
-      <span className={path.length > 15 ? 'cursor-pointer' : ''} onClick={() => setShorten(false)}>
+      <span className={length > 20 ? 'cursor-pointer' : ''} onClick={() => setShorten(!shorten)}>
         {pathStr}
         {': '}
       </span>
-      <span className="line-through text-disabled-text">{oldValue || 'undefined'}</span>
+      <span
+        onClick={() => setShortenOldVal(!shortenOldVal)}
+        className={cn(
+          'line-through text-disabled-text',
+          diffLengths[0] > 50 ? 'cursor-pointer' : ''
+        )}
+      >
+        {oldValueSafe || 'undefined'}
+      </span>
       {' -> '}
-      <span className={`${!newValue ? 'text-red' : 'text-green'}`}>{newValue || 'undefined'}</span>
+      <span
+        onClick={() => setShortenNewVal(!shortenNewVal)}
+        className={cn(
+          'whitespace-pre',
+          newValue ? 'text-red' : 'text-green',
+          diffLengths[1] > 50 ? 'cursor-pointer' : ''
+        )}
+      >
+        {newValueSafe || 'undefined'}
+      </span>
     </div>
   );
 }
diff --git a/frontend/app/components/Session_/Storage/Storage.js b/frontend/app/components/Session_/Storage/Storage.js
index f159ab8ce..22d231fcf 100644
--- a/frontend/app/components/Session_/Storage/Storage.js
+++ b/frontend/app/components/Session_/Storage/Storage.js
@@ -77,14 +77,14 @@ export default class Storage extends React.PureComponent {
 
     if (!stateDiff) {
       return (
-        <div style={{ flex: 1 }} className="flex flex-col p-2 pr-0 font-mono text-disabled-text">
+        <div style={{ flex: 3 }} className="flex flex-col p-2 pr-0 font-mono text-disabled-text">
           No diff
         </div>
       );
     }
 
     return (
-      <div style={{ flex: 1 }} className="flex flex-col p-1 font-mono">
+      <div style={{ flex: 3 }} className="flex flex-col p-1 font-mono">
         {stateDiff.map((d, i) => this.renderDiffs(d, i))}
       </div>
     );
@@ -166,13 +166,12 @@ export default class Storage extends React.PureComponent {
       >
         {src === null ? (
           <div className="font-mono" style={{ flex: 2, marginLeft: '26.5%' }}>
-            {' '}
-            {name}{' '}
+            {name}
           </div>
         ) : (
           <>
             {this.renderDiff(item, prevItem)}
-            <div style={{ flex: 2 }} className="flex pl-10">
+            <div style={{ flex: 2 }} className="flex pl-10 pt-2">
               <JSONTree
                 name={this.ensureString(name)}
                 src={src}
@@ -182,7 +181,7 @@ export default class Storage extends React.PureComponent {
             </div>
           </>
         )}
-        <div style={{ flex: 1 }} className="flex-1 flex gap-2 items-center justify-end self-center">
+        <div style={{ flex: 1 }} className="flex-1 flex gap-2 pt-2 items-center justify-end self-start">
           {typeof item.duration === 'number' && (
             <div className="font-size-12 color-gray-medium">{formatMs(item.duration)}</div>
           )}
@@ -214,11 +213,11 @@ export default class Storage extends React.PureComponent {
             <div className="flex w-full">
               {showStore && <h3 style={{ width: '25%', marginRight: 20 }} className="font-semibold">{'STATE'}</h3>}
               {this.state.showDiffs ? (
-                <h3 style={{ width: '20%'}}  className="font-semibold">
+                <h3 style={{ width: '39%'}}  className="font-semibold">
                   DIFFS
                 </h3>
               ) : null}
-              <h3 style={{ width: '50%' }}  className="font-semibold">{getActionsName(type)}</h3>
+              <h3 style={{ width: '30%' }}  className="font-semibold">{getActionsName(type)}</h3>
               <h3 style={{ paddingRight: 30, marginLeft: 'auto' }}  className="font-semibold">
                 <Tooltip title="Time to execute">
                   TTE