Add ASN.1 differ

Author: somidad

.vscode/settings.json

@@ -13,6 +13,7 @@
     ".editorconfig": true,
     ".eslint*": true,
     ".npmrc": true,
-    ".prettier*": true
+    ".prettier*": true,
+    "out": true
   }
 }

electron.vite.config.ts

@@ -13,6 +13,7 @@ export default defineConfig({
     resolve: {
       alias: {
         '@renderer': resolve('src/renderer/src'),
+        '@/components': resolve('src/renderer/src/components'),
         '@': resolve('src/')
       }
     },

resources/diff.pug

@@ -0,0 +1,63 @@
+//- Preprocessing
+each patch in patchList
+  - patch.moduleName = patch.moduleName1 ? patch.moduleName1 : patch.moduleName2
+  - patch.assignmentName = patch.assignmentName1 ? patch.assignmentName1 : patch.assignmentName2
+  - patch.labelText = patch.change == 'modified' ? '±' : patch.change == 'added' ? '+' : patch.change == 'removed' ? '-' : ''
+
+html
+  head
+    title Diff !{specOld} → !{specNew}
+    link(rel='stylesheet' type='text/css' href='https://cdn.jsdelivr.net/npm/diff2html/bundles/css/diff2html.min.css')
+    link(rel='stylesheet' href='https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css')
+    style.
+      html. body {
+        height: 100%;
+      }
+      /* Prevent contents goiong outside */
+      .ui.grid {
+        height: 100%;
+        margin: 0;
+      }
+      aside, main {
+        height: 100%;
+        overflow-y: scroll;
+      }
+      /* Hide diff2html unnecessary part */
+      .d2h-file-header {
+        display: none;
+      }
+
+  body
+    div(class='ui grid')
+      aside(class='four wide column')
+        h1(class='ui header') !{specOld} → !{specNew}
+        ol(class='ui list')
+          each patch in patchList
+            li(value=patch.labelText)
+              a(href='#'+patch.moduleName+'.'+patch.assignmentName) !{patch.assignmentName}
+
+      main(class='twelve wide column')
+        each patch in patchList
+          section(id=patch.moduleName+'.'+patch.assignmentName class=patch.change)
+            h2(class='ui header')
+              | !{patch.labelText}
+              |
+              if patch.change == 'modified'
+                | !{patch.assignmentName1}
+                div(class='ui label') !{patch.moduleName1}
+                | → !{patch.assignmentName2}
+                div(class='ui label') !{patch.moduleName2}
+              else
+                | !{patch.assignmentName}
+                div(class='ui label') !{patch.moduleName}
+            div !{patch.patchHtml}
+
+        div(class='column right aligned')
+          | Powered by
+          |
+          a(href='https://github.com/3gpp-network/lib3rd') lib3rd
+          | .
+          |
+          | Report an
+          |
+          a(href='https://github.com/3gpp-network/lib3rd/issues') issue

src/lib/message.ts

@@ -15,6 +15,8 @@ export const Channels = {
   IeListReport: z.literal('ieListReport'),
   FormatRequest: z.literal('formatRequest'),
   FormatReport: z.literal('formatReport'),
+  DiffRequest: z.literal('diffRequest'),
+  DiffReport: z.literal('diffReport'),
   SaveLocationRequest: z.literal('saveLocationRequest'),
   SaveLocationResponse: z.literal('saveLocationResponse'),
   OpenFolderRequest: z.literal('openFolderRequest'),
@@ -90,9 +92,26 @@ export const FormatReport = Message.merge(
   })
 )
 
+export const DiffRequest = Message.merge(
+  z.object({
+    channel: Channels.DiffRequest,
+    oldResourceId: z.string(),
+    newResourceId: z.string()
+  })
+)
+
+export const DiffReport = Message.merge(
+  z.object({
+    channel: Channels.DiffReport,
+    saveLocation: z.string().optional(),
+    success: z.boolean()
+  })
+)
+
 export const SaveLocationRequest = Message.merge(
   z.object({
-    channel: Channels.SaveLocationRequest
+    channel: Channels.SaveLocationRequest,
+    extension: z.enum(['xlsx', 'html'])
   })
 )
 

src/main/globals.d.ts

@@ -0,0 +1,4 @@
+declare module '*?raw' {
+  const content: string
+  export default content
+}

src/main/index.ts

@@ -52,12 +52,18 @@ function createWindow(worker: Worker): void {
     if (messageParseResult.success) {
       const { dest, channel } = messageParseResult.data
       if (dest === 'main') {
-        if (SaveLocationRequest.safeParse(msg).success) {
+        const saveLocationRequestParseResult = SaveLocationRequest.safeParse(msg)
+        if (saveLocationRequestParseResult.success) {
+          const { extension } = saveLocationRequestParseResult.data
+          const filetype =
+            extension === 'xlsx' ? 'Spreadsheet file' : extension === 'html' ? 'Web page file' : ''
           const saveLocation = dialog.showSaveDialogSync({
-            filters: [{ name: 'Spreadsheet file', extensions: ['xlsx'] }]
+            filters: [{ name: filetype, extensions: [extension] }]
           })
           const saveLocationWithExtension =
-            saveLocation && !saveLocation.endsWith('.xlsx') ? `${saveLocation}.xlsx` : saveLocation
+            saveLocation && !saveLocation.endsWith(`.${extension}`)
+              ? `${saveLocation}.${extension}`
+              : saveLocation
           worker.postMessage({
             src: 'main',
             dest: 'worker',

src/main/worker.ts

@@ -1,6 +1,8 @@
 import { parentPort as port, workerData as _workerData } from 'worker_threads'
 import { z } from 'zod'
 import {
+  DiffReport,
+  DiffRequest,
   FormatReport,
   FormatRequest,
   IeListReport,
@@ -18,14 +20,18 @@ import { getHeapStatistics } from 'v8'
 import { debounce } from '../lib/debounce'
 import { Resource } from '../lib/resource'
 import { WorkerState } from '../lib/workerState'
+import { asn1 } from 'lib3rd'
+import diffTemplate from '../../resources/diff.pug?raw'
 import { Modules } from 'lib3rd/dist/asn1/classes/modules'
 import { Definitions } from 'lib3rd/dist/ran3/classes/definitions'
 import { Workbook } from 'exceljs'
 import { getWorkbook } from 'lib3rd/dist/common/spreadsheet'
 import { cloneDeep } from 'lodash'
+import { writeFileSync } from 'fs'
 
 const resourceList: Resource[] = []
 let formatted: Workbook | undefined
+let renderedDiff: string | undefined
 
 if (!port) {
   throw Error('Worker parent port error')
@@ -61,6 +67,16 @@ function reportFormatComplete(success: boolean, saveLocation: string | undefined
   } satisfies z.infer<typeof FormatReport>)
 }
 
+function reportDiffComplete(success: boolean, saveLocation: string | undefined) {
+  port?.postMessage({
+    src: 'worker',
+    dest: 'renderer',
+    channel: 'diffReport',
+    success,
+    saveLocation
+  } satisfies z.infer<typeof DiffReport>)
+}
+
 function reportWorkerState(state: z.infer<typeof WorkerState>) {
   port?.postMessage({
     src: 'worker',
@@ -198,7 +214,40 @@ port.on('message', (msg: unknown) => {
     port?.postMessage({
       src: 'worker',
       dest: 'main',
-      channel: 'saveLocationRequest'
+      channel: 'saveLocationRequest',
+      extension: 'xlsx'
+    } satisfies z.infer<typeof SaveLocationRequest>)
+    return
+  }
+
+  const diffRequestParseResult = DiffRequest.safeParse(msg)
+  if (diffRequestParseResult.success) {
+    reportWorkerState('busy')
+    const { oldResourceId, newResourceId } = diffRequestParseResult.data
+    const oldResource = resourceList.find(({ id }) => id === oldResourceId)
+    if (!(oldResource?.resource instanceof Modules)) {
+      reportWorkerState('idle')
+      return
+    }
+    const newResource = resourceList.find(({ id }) => id === newResourceId)
+    if (!(newResource?.resource instanceof Modules)) {
+      reportWorkerState('idle')
+      return
+    }
+    const patchList = asn1.diff(oldResource.resource, newResource.resource)
+    renderedDiff = asn1.renderDiff(
+      {
+        specOld: oldResource.name,
+        specNew: newResource.name,
+        patchList
+      },
+      diffTemplate
+    )
+    port?.postMessage({
+      src: 'worker',
+      dest: 'main',
+      channel: 'saveLocationRequest',
+      extension: 'html'
     } satisfies z.infer<typeof SaveLocationRequest>)
     return
   }
@@ -229,6 +278,19 @@ port.on('message', (msg: unknown) => {
           reportWorkerState('idle')
         })
     }
+    if (renderedDiff) {
+      try {
+        writeFileSync(saveLocation, renderedDiff)
+        reportDiffComplete(true, saveLocation)
+      } catch (e) {
+        reportDiffComplete(false, undefined)
+        console.error(e)
+      } finally {
+        renderedDiff = undefined
+        reportMemoryUsage()
+        reportWorkerState('idle')
+      }
+    }
     return
   }
 })

src/renderer/src/App.tsx

@@ -64,7 +64,7 @@ function App(): JSX.Element {
       {page === Page.FormatMessage && (
         <FormatMessage resourceList={resourceList} workerState={workerState} />
       )}
-      {page === Page.DiffASN1 && <DiffAsn1 />}
+      {page === Page.DiffASN1 && <DiffAsn1 resourceList={resourceList} workerState={workerState} />}
       <ResourceSheet
         open={openResourceSheet}
         onOpenChange={setOpenResourceSheet}

src/renderer/src/components/AboutDialog.tsx

@@ -26,7 +26,7 @@ export function AboutDialog({ open, onOpenChange }: Props) {
           <a href="https://github.com/proj3rd/tool3rd" target="_blank">
             GitHub
           </a>
-          <a href="https://github.com/proj3rd/tool3rd/blob/main/CHANGELOG.md" target="_blank">
+          <a href={`https://github.com/proj3rd/tool3rd/releases/tag/v${version}`} target="_blank">
             Changelog
           </a>
           <a href="https://github.com/proj3rd/tool3rd/releases" target="_blank">

src/renderer/src/components/Nav.tsx

@@ -89,15 +89,15 @@ export function Nav({
               Format messsage
             </Button>
           </NavigationMenuItem>
-          {/* <NavigationMenuItem>
+          <NavigationMenuItem>
             <Button
               variant="ghost"
               onClick={selectPage(Page.DiffASN1)}
               disabled={workerState === 'busy'}
             >
               Diff ASN.1
             </Button>
-          </NavigationMenuItem> */}
+          </NavigationMenuItem>
           <NavigationMenuItem>
             <Button
               variant="ghost"