Use other string diff algorithm and optimize logs page

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.server.ts

@@ -1,13 +1,14 @@
-import type { PageServerLoad } from "./$types";
+import type { PageServerLoad, Actions } from "./$types";
 import { API_BASE_PREFIX, apiRequest } from "$lib/server/utils";
 import type { ChangeLog, User, Collab } from "$lib/db-schema";
+import DiffMatchPatch from "diff-match-patch";
 
 export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
   const userFilter = url.searchParams.get("logs_filter_user");
   const resourceFilter = url.searchParams.get("logs_filter_resource");
   const operationFilter = url.searchParams.get("logs_filter_operation");
   const currentPage = Number.parseInt(url.searchParams.get("logs_results_page") ?? "1");
-  const resultOffset = (currentPage - 1) * 50;
+  const resultOffset = (currentPage - 1) * 20;
 
   const searchParams = new URLSearchParams();
 
@@ -25,7 +26,7 @@ export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
     searchParams.append("operation", `eq.${operationFilter.toUpperCase()}`);
   }
 
-  const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}&limit=50&offset=${resultOffset}`;
+  const constructedFetchUrl = `${baseFetchUrl}&${searchParams.toString()}&limit=20&offset=${resultOffset}`;
 
   const changeLog: (ChangeLog & { user: { username: User["username"] } })[] = (
     await apiRequest(fetch, constructedFetchUrl, "GET", { returnData: true })
@@ -61,3 +62,46 @@ export const load: PageServerLoad = async ({ parent, fetch, params, url }) => {
     collaborators
   };
 };
+
+export const actions: Actions = {
+  computeDiff: async ({ request, fetch }) => {
+    const data = await request.formData();
+
+    const dmp = new DiffMatchPatch();
+
+    const htmlDiff = (oldValue: string, newValue: string) => {
+      const diff = dmp.diff_main(oldValue, newValue);
+      dmp.diff_cleanupSemantic(diff);
+
+      return diff
+        .map(([op, text]) => {
+          switch (op) {
+            case 1:
+              return `<ins>${text}</ins>`;
+            case -1:
+              return `<del>${text}</del>`;
+            default:
+              return text;
+          }
+        })
+        .join("");
+    };
+
+    const log: ChangeLog = (
+      await apiRequest(
+        fetch,
+        `${API_BASE_PREFIX}/change_log?id=eq.${data.get("id")}&select=old_value,new_value`,
+        "GET",
+        { headers: { Accept: "application/vnd.pgrst.object+json" }, returnData: true }
+      )
+    ).data;
+
+    return {
+      logId: data.get("id"),
+      currentDiff: htmlDiff(
+        JSON.stringify(log.old_value, null, 2),
+        JSON.stringify(log.new_value, null, 2)
+      )
+    };
+  }
+};

web-app/src/routes/(authenticated)/website/[websiteId]/logs/+page.svelte

@@ -2,36 +2,17 @@
   import WebsiteEditor from "$lib/components/WebsiteEditor.svelte";
   import DateTime from "$lib/components/DateTime.svelte";
   import Modal from "$lib/components/Modal.svelte";
-  import type { PageServerData } from "./$types";
-  import diff from "fast-diff";
+  import type { PageServerData, ActionData } from "./$types";
   import { page } from "$app/stores";
   import { tables } from "$lib/db-schema";
   import { previewContent } from "$lib/runes.svelte";
   import DOMPurify from "isomorphic-dompurify";
+  import { enhanceForm } from "$lib/utils";
+  import { enhance } from "$app/forms";
+  import { sending } from "$lib/runes.svelte";
+  import LoadingSpinner from "$lib/components/LoadingSpinner.svelte";
 
-  const { data }: { data: PageServerData } = $props();
-
-  const htmlDiff = (oldValue: string, newValue: string) => {
-    return diff(oldValue, newValue)
-      .map(([type, value]) => {
-        let newString = "";
-
-        switch (type) {
-          case 1:
-            newString += `<ins>${value}</ins>`;
-            break;
-          case 0:
-            newString += `${value}`;
-            break;
-          case -1:
-            newString += `<del>${value}</del>`;
-            break;
-        }
-
-        return newString;
-      })
-      .join("");
-  };
+  const { data, form }: { data: PageServerData; form: ActionData } = $props();
 
   let resources = $state({});
 
@@ -48,16 +29,18 @@
   }
 
   previewContent.value = data.home.main_content;
-
-  let logsSection: HTMLElement;
 </script>
 
+{#if sending.value}
+  <LoadingSpinner />
+{/if}
+
 <WebsiteEditor
   id={data.website.id}
   contentType={data.website.content_type}
   title={data.website.title}
 >
-  <section id="logs" bind:this={logsSection}>
+  <section id="logs">
     <hgroup>
       <h2>
         <a href="#logs">Logs</a>
@@ -153,15 +136,34 @@
 
                   <hgroup>
                     <h3>Log changes</h3>
-                    <p>{table_name} &mdash; {operation}</p>
+                    <p>{table_name} &mdash; {operation} &mdash; User "{username}"</p>
                   </hgroup>
 
-                  <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
-                      htmlDiff(oldValue, newValue),
-                      {
-                        ALLOWED_TAGS: ["ins", "del"]
-                      }
-                    )}</pre>
+                  {#if old_value && new_value}
+                    <h4>Difference</h4>
+                    <form action="?/computeDiff" method="POST" use:enhance={enhanceForm()}>
+                      <input type="hidden" name="id" value={id} />
+                      <button type="submit">Compute diff</button>
+                    </form>
+                    {#if form?.logId === id && form?.currentDiff}
+                      <pre style="white-space: pre-wrap">{@html DOMPurify.sanitize(
+                          form.currentDiff,
+                          { ALLOWED_TAGS: ["ins", "del"] }
+                        )}</pre>
+                    {/if}
+                  {/if}
+
+                  {#if new_value && !old_value}
+                    <h4>New value</h4>
+                    <pre style="white-space: pre-wrap">{@html (DOMPurify.sanitize(newValue),
+                      { ALLOWED_TAGS: ["ins", "del"] })}</pre>
+                  {/if}
+
+                  {#if old_value && !new_value}
+                    <h4>Old value</h4>
+                    <pre style="white-space: pre-wrap">{@html (DOMPurify.sanitize(oldValue),
+                      { ALLOWED_TAGS: ["ins", "del"] })}</pre>
+                  {/if}
                 </Modal>
               </td>
             </tr>
@@ -189,7 +191,7 @@
       {/snippet}
       <p>
         {$page.url.searchParams.get("logs_results_page") ?? 1} / {Math.max(
-          Math.ceil(data.resultChangeLogCount / 50),
+          Math.ceil(data.resultChangeLogCount / 20),
           1
         )}
       </p>
@@ -222,7 +224,7 @@
           type="hidden"
           name="logs_results_page"
           value={Math.min(
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1),
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1),
             Number.parseInt($page.url.searchParams.get("logs_results_page") ?? "1") + 1
           )}
         />
@@ -230,20 +232,20 @@
         <button
           type="submit"
           disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1).toString()}>Next</button
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Next</button
         >
       </form>
       <form method="GET">
         <input
           type="hidden"
           name="logs_results_page"
-          value={Math.max(Math.ceil(data.resultChangeLogCount / 50), 1)}
+          value={Math.max(Math.ceil(data.resultChangeLogCount / 20), 1)}
         />
         {@render commonFilterInputs()}
         <button
           type="submit"
           disabled={($page.url.searchParams.get("logs_results_page") ?? "1") ===
-            Math.max(Math.ceil(data.resultChangeLogCount / 50), 1).toString()}>Last</button
+            Math.max(Math.ceil(data.resultChangeLogCount / 20), 1).toString()}>Last</button
         >
       </form>
     </div>