From 62775f5076d90e5fa84ea107f2ecaf285860ae2c Mon Sep 17 00:00:00 2001
From: freshavocado7 <nikidimitriou97@gmail.com>
Date: Wed, 18 Sep 2024 14:27:21 +0200
Subject: [PATCH] refactor: Make tailwind classes prettier

---
 .pre-commit-config.yaml                       |  5 ++
 frontend/.eslintrc.cjs                        |  3 +-
 frontend/.prettierrc.js                       |  9 ++-
 frontend/package-lock.json                    | 48 ++++++++++++
 frontend/package.json                         |  2 +
 frontend/src/components/Badge.jsx             | 28 ++++---
 frontend/src/components/Breadcrumbs.jsx       | 17 ++---
 frontend/src/components/Button.jsx            | 11 +--
 frontend/src/components/Card.jsx              |  8 +-
 frontend/src/components/DiffExplorer.jsx      |  8 +-
 frontend/src/components/DiffView.jsx          | 16 ++--
 frontend/src/components/Header.jsx            |  8 +-
 frontend/src/components/HomeIcon.jsx          |  4 +-
 frontend/src/components/InstanceView.jsx      | 28 +++----
 frontend/src/components/Lightbox.jsx          | 12 +--
 frontend/src/components/LightboxButton.jsx    |  6 +-
 frontend/src/components/ModelDiff.jsx         | 30 ++++----
 frontend/src/components/SVGDisplay.jsx        | 13 ++--
 frontend/src/components/SettingsMenu.jsx      | 13 +---
 frontend/src/components/SoftwareVersion.jsx   |  4 +-
 frontend/src/components/Spinner.jsx           |  6 +-
 frontend/src/components/TemplateCard.jsx      | 19 ++---
 frontend/src/components/TemplateDetails.jsx   | 73 ++++++++-----------
 frontend/src/components/ThemeSwitcher.jsx     | 12 +--
 frontend/src/components/ViewsList.jsx         | 21 ++----
 .../src/components/WiredTemplatesList.jsx     | 15 ++--
 frontend/src/views/HomeView.jsx               | 14 +++-
 frontend/src/views/ModelComparisonView.jsx    | 55 ++++++--------
 frontend/src/views/TemplateView.jsx           | 68 ++++++++---------
 29 files changed, 279 insertions(+), 277 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 5030375..cee44e1 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -131,6 +131,8 @@ repos:
         additional_dependencies:
           - 'prettier@^3.3.3'
           - 'prettier-plugin-tailwindcss@^0.6.6'
+          - 'prettier-plugin-classnames@^0.7.2'
+          - 'prettier-plugin-merge@^0.7.1'
           - 'tailwind-scrollbar@^3.1.0'
   - repo: https://github.com/pre-commit/mirrors-eslint
     rev: v9.10.0
@@ -147,3 +149,6 @@ repos:
           - 'eslint-plugin-react@^7.34.1'
           - 'eslint-plugin-react-hooks@^4.6.2'
           - 'eslint-plugin-react-refresh@^0.4.5'
+        args: ['--fix']
+        types: []
+        files: '^frontend/.*\.(js|jsx)$'
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
index 71ff1a6..b7db9aa 100644
--- a/frontend/.eslintrc.cjs
+++ b/frontend/.eslintrc.cjs
@@ -22,6 +22,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true }
     ],
-    'max-len': ['error', { code: 79 }]
+    'max-len': ['error', { code: 100 }],
+    'react/no-unescaped-entities': 'off'
   }
 };
diff --git a/frontend/.prettierrc.js b/frontend/.prettierrc.js
index d17e3d4..9585637 100644
--- a/frontend/.prettierrc.js
+++ b/frontend/.prettierrc.js
@@ -4,11 +4,16 @@
  */
 
 module.exports = {
-  plugins: [require.resolve('prettier-plugin-tailwindcss')],
+  plugins: [
+    require.resolve('prettier-plugin-tailwindcss'),
+    require.resolve('prettier-plugin-classnames'),
+    require.resolve('prettier-plugin-merge')
+  ],
   semi: true,
   tabWidth: 2,
   printWidth: 79,
   singleQuote: true,
   trailingComma: 'none',
-  bracketSameLine: true
+  bracketSameLine: true,
+  endingPosition: 'absolute-with-indent'
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index f3f0d70..10c3bdb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -42,6 +42,8 @@
         "globals": "^15.9.0",
         "postcss": "^8.4.45",
         "prettier": "^3.3.3",
+        "prettier-plugin-classnames": "^0.7.2",
+        "prettier-plugin-merge": "^0.7.1",
         "prettier-plugin-tailwindcss": "^0.6.6",
         "prop-types": "^15.8.1",
         "react-router-dom": "^6.26.2",
@@ -6039,6 +6041,15 @@
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
       "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="
     },
+    "node_modules/diff": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/diff/-/diff-5.1.0.tgz",
+      "integrity": "sha512-D+mk+qE8VC/PAUrlAU34N+VfXev0ghe5ywmpqrawphmVZc1bEfn56uo9qpyGp1p4xpzOHkSW4ztBd6L7Xx4ACw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.3.1"
+      }
+    },
     "node_modules/diff-sequences": {
       "version": "29.6.3",
       "resolved": "https://registry.npmjs.org/diff-sequences/-/diff-sequences-29.6.3.tgz",
@@ -10299,6 +10310,43 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/prettier-plugin-classnames": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-classnames/-/prettier-plugin-classnames-0.7.2.tgz",
+      "integrity": "sha512-rocYqVSWV/YSJE+TA7b1IgYY9/I4bx0lxJjE5Iwv/kavNNEYhKh7Gl1+MQARQYgPisGMd5DU8Uj6ZEVX0KmTTA==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3",
+        "prettier-plugin-astro": "*",
+        "prettier-plugin-svelte": "*"
+      },
+      "peerDependenciesMeta": {
+        "prettier-plugin-astro": {
+          "optional": true
+        },
+        "prettier-plugin-svelte": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/prettier-plugin-merge": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/prettier-plugin-merge/-/prettier-plugin-merge-0.7.1.tgz",
+      "integrity": "sha512-R3dSlv3kAlScjd/liWjTkGHcUrE4MBhPKKBxVOvHK7+FY2P5SEmLarZiD11VUEuaMRK0L7zqIurX6JcRYS9Y5Q==",
+      "dev": true,
+      "dependencies": {
+        "diff": "5.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "peerDependencies": {
+        "prettier": "^2 || ^3"
+      }
+    },
     "node_modules/prettier-plugin-tailwindcss": {
       "version": "0.6.6",
       "resolved": "https://registry.npmjs.org/prettier-plugin-tailwindcss/-/prettier-plugin-tailwindcss-0.6.6.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 1609fed..091dd43 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -47,6 +47,8 @@
     "globals": "^15.9.0",
     "postcss": "^8.4.45",
     "prettier": "^3.3.3",
+    "prettier-plugin-classnames": "^0.7.2",
+    "prettier-plugin-merge": "^0.7.1",
     "prettier-plugin-tailwindcss": "^0.6.6",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.26.2",
diff --git a/frontend/src/components/Badge.jsx b/frontend/src/components/Badge.jsx
index a24b443..dd6b12c 100644
--- a/frontend/src/components/Badge.jsx
+++ b/frontend/src/components/Badge.jsx
@@ -1,18 +1,22 @@
-
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
 const color_classes = {
-    "default": "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300",
-    "danger": "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300",
-    "success": "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300",
-    "warning": "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300"
-}
+  default: 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300',
+  danger: 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300',
+  success: 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300',
+  warning:
+    'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300'
+};
 /*
-* provides a badge that may have different colors
-*/
-export const Badge = ({ children, color="default" }) => (
-    <div className={"text-xs inline-block font-medium me-2 px-2.5 py-1 rounded-full " + color_classes[color] }>
-        {children}
-    </div>
+ * provides a badge that may have different colors
+ */
+export const Badge = ({ children, color = 'default' }) => (
+  <div
+    className={
+      'me-2 inline-block rounded-full px-2.5 py-1 text-xs font-medium ' +
+      color_classes[color]
+    }>
+    {children}
+  </div>
 );
diff --git a/frontend/src/components/Breadcrumbs.jsx b/frontend/src/components/Breadcrumbs.jsx
index 414d63e..6efec40 100644
--- a/frontend/src/components/Breadcrumbs.jsx
+++ b/frontend/src/components/Breadcrumbs.jsx
@@ -65,9 +65,7 @@ export const Breadcrumbs = () => {
   return (
     <nav
       aria-label="breadcrumb"
-      className={
-        'flex items-center font-medium text-black dark:text-gray-200'
-      }>
+      className="flex items-center font-medium text-black dark:text-gray-200">
       <ol className="flex items-center">
         <li className="hidden items-center truncate lg:block">
           <Link to={'/'}>{breadcrumbLabels['/']}</Link>
@@ -84,19 +82,16 @@ export const Breadcrumbs = () => {
               {!last && (
                 <Link
                   to={to}
-                  className={
-                    'hidden max-w-64 truncate whitespace-nowrap md:block'
-                  }>
+                  className="hidden max-w-64 truncate whitespace-nowrap
+                    md:block">
                   {label}
                 </Link>
               )}
               {last && (
                 <span
-                  className={
-                    'hidden w-full truncate whitespace-nowrap ' +
-                    'text-custom-blue custom-phone-width:block ' +
-                    'custom-phone-width:max-w-60 md:max-w-full'
-                  }
+                  className="hidden w-full truncate whitespace-nowrap
+                    text-custom-blue custom-phone-width:block
+                    custom-phone-width:max-w-60 md:max-w-full"
                   title={label}>
                   {label}
                 </span>
diff --git a/frontend/src/components/Button.jsx b/frontend/src/components/Button.jsx
index 4799ed7..6f13a9b 100644
--- a/frontend/src/components/Button.jsx
+++ b/frontend/src/components/Button.jsx
@@ -6,13 +6,10 @@ export const Button = ({ children, ...props }) => {
     <a
       href="#"
       {...props}
-      className={
-        'print:hidden rounded-md mx-1 bg-custom-blue px-2.5 py-1.5 ' +
-        'text-sm font-semibold text-white shadow-sm dark:shadow-dark ' +
-        'hover:bg-custom-blue-hover hover:text-gray-50 ' +
-        'focus-visible:outline focus-visible:outline-2 ' +
-        'focus-visible:outline-offset-2'
-      }>
+      className="mx-1 rounded-md bg-custom-blue px-2.5 py-1.5 text-sm
+        font-semibold text-white shadow-sm hover:bg-custom-blue-hover
+        hover:text-gray-50 focus-visible:outline focus-visible:outline-2
+        focus-visible:outline-offset-2 dark:shadow-dark print:hidden">
       {children}
     </a>
   );
diff --git a/frontend/src/components/Card.jsx b/frontend/src/components/Card.jsx
index 6ea491e..4cf20b2 100644
--- a/frontend/src/components/Card.jsx
+++ b/frontend/src/components/Card.jsx
@@ -4,11 +4,9 @@
 export const Card = ({ children, onClick }) => (
   <div
     onClick={onClick}
-    className={
-      'm-2 max-w-sm cursor-pointer rounded-lg border border-gray-200 ' +
-      'bg-white shadow-md hover:bg-gray-100 dark:border-gray-700' +
-      'dark:bg-gray-800 dark:shadow-dark dark:hover:bg-gray-700 '
-    }>
+    className="m-2 max-w-sm cursor-pointer rounded-lg border border-gray-200
+      bg-white shadow-md hover:bg-gray-100 dark:border-gray-700
+      dark:bg-gray-800 dark:shadow-dark dark:hover:bg-gray-700">
     {children}
   </div>
 );
diff --git a/frontend/src/components/DiffExplorer.jsx b/frontend/src/components/DiffExplorer.jsx
index 33f792c..fe259b0 100644
--- a/frontend/src/components/DiffExplorer.jsx
+++ b/frontend/src/components/DiffExplorer.jsx
@@ -1,7 +1,7 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState } from 'react';
+import { useState } from 'react';
 import {
   CirclePlus,
   CircleX,
@@ -123,13 +123,15 @@ export const DiffExplorer = ({
             )}
             <span
               onClick={() => handleLeafClick(node)}
-              className={`flex-1 cursor-pointer truncate ${node.change === 'deleted' ? 'pointer-events-none' : ''}`}
+              className={`flex-1 cursor-pointer truncate
+                ${node.change === 'deleted' ? 'pointer-events-none' : ''}`}
               title={node.display_name}>
               {node.display_name}
             </span>
           </div>
           <span
-            className={`flex h-6 w-6 items-center justify-center rounded-full ${getNodeClass(node.change, node.attributes)}`}>
+            className={`flex h-6 w-6 items-center justify-center rounded-full
+              ${getNodeClass(node.change, node.attributes)}`}>
             {getIcon(node.change, node.attributes)}
           </span>
         </div>
diff --git a/frontend/src/components/DiffView.jsx b/frontend/src/components/DiffView.jsx
index f75580e..b6b6f77 100644
--- a/frontend/src/components/DiffView.jsx
+++ b/frontend/src/components/DiffView.jsx
@@ -87,18 +87,20 @@ export const DiffView = ({ objectID, endpoint }) => {
   }, [objectID]);
 
   return (
-    <div className="flex min-h-screen items-center justify-center overflow-x-hidden">
+    <div
+      className="flex min-h-screen items-center justify-center
+        overflow-x-hidden">
       {isLoading ? (
         <Spinner />
       ) : (
         <div
-          className="html-content mb-4 rounded-lg border-4 border-transparent
-            bg-gray-100 p-8 text-gray-700 shadow-lg scrollbar
-            scrollbar-track-gray-200 scrollbar-thumb-gray-400
+          className="html-content scrollbar scrollbar-track-gray-200
+            scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+            dark:scrollbar-thumb-slate-600 mb-4 rounded-lg border-4
+            border-transparent bg-gray-100 p-8 text-gray-700 shadow-lg
             hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
-            dark:text-gray-100 dark:shadow-dark
-            dark:scrollbar-track-custom-dark-3 dark:scrollbar-thumb-slate-600
-            md:w-[210mm] print:m-0 print:bg-transparent print:p-0 print:shadow-none">
+            dark:text-gray-100 dark:shadow-dark md:w-[210mm] print:m-0
+            print:bg-transparent print:p-0 print:shadow-none">
           {details.map((item, idx) => {
             if (item.type === 'SVGDisplay') {
               return <SVGDisplay key={idx} content={item.content} />;
diff --git a/frontend/src/components/Header.jsx b/frontend/src/components/Header.jsx
index 518914e..750f92d 100644
--- a/frontend/src/components/Header.jsx
+++ b/frontend/src/components/Header.jsx
@@ -9,11 +9,9 @@ import { HomeIcon } from './HomeIcon';
 export const Header = () => {
   return (
     <header
-      className={
-        'fixed left-0 top-0 z-50 w-screen items-center justify-between ' +
-        'rounded-b-lg bg-gray-100 p-6 text-lg text-white shadow-lg ' +
-        'dark:bg-custom-dark-2 dark:shadow-dark print:hidden'
-      }>
+      className="fixed left-0 top-0 z-50 w-screen items-center justify-between
+        rounded-b-lg bg-gray-100 p-6 text-lg text-white shadow-lg
+        dark:bg-custom-dark-2 dark:shadow-dark print:hidden">
       {' '}
       <div className="flex w-full items-center justify-between">
         <div className="flex flex-1">
diff --git a/frontend/src/components/HomeIcon.jsx b/frontend/src/components/HomeIcon.jsx
index 86ec315..4f1ae5a 100644
--- a/frontend/src/components/HomeIcon.jsx
+++ b/frontend/src/components/HomeIcon.jsx
@@ -1,8 +1,8 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Home } from "lucide-react";
-import { Link } from "react-router-dom";
+import { Home } from 'lucide-react';
+import { Link } from 'react-router-dom';
 
 export const HomeIcon = () => {
   return (
diff --git a/frontend/src/components/InstanceView.jsx b/frontend/src/components/InstanceView.jsx
index 425a65b..b0d6992 100644
--- a/frontend/src/components/InstanceView.jsx
+++ b/frontend/src/components/InstanceView.jsx
@@ -70,28 +70,24 @@ export const InstanceView = ({ templateName, objectID, endpoint }) => {
     <>
       <div
         ref={contentRef}
-        className={`
-        html-content mb-4 rounded-lg border-4 border-transparent
-        bg-gray-100 p-8 text-gray-700 shadow-lg scrollbar
-        scrollbar-track-gray-200 scrollbar-thumb-gray-400
-        hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
-        dark:text-gray-100  dark:shadow-dark
-        dark:scrollbar-track-custom-dark-3 dark:scrollbar-thumb-slate-600
-        md:w-[210mm] print:m-0 print:bg-transparent print:p-0 print:shadow-none
-      `}
+        className="html-content scrollbar scrollbar-track-gray-200
+          scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+          dark:scrollbar-thumb-slate-600 mb-4 rounded-lg border-4
+          border-transparent bg-gray-100 p-8 text-gray-700 shadow-lg
+          hover:border-gray-300 hover:shadow-md dark:bg-custom-dark-2
+          dark:text-gray-100 dark:shadow-dark md:w-[210mm] print:m-0
+          print:bg-transparent print:p-0 print:shadow-none"
         onMouseEnter={() => setIsHovering(true)}
         onMouseLeave={() => setIsHovering(false)}>
         {isHovering && (
           <div className="fixed hidden md:-ml-14 md:-mt-6 md:block">
             <div
               onClick={() => window.print()}
-              className={`
-              flex cursor-pointer items-center justify-center
-              rounded-full bg-custom-blue p-2 text-white
-              transition-colors duration-700 ease-in-out
-              hover:bg-custom-dark-4 dark:bg-custom-blue
-              dark:text-gray-100 dark:hover:bg-custom-light
-            `}>
+              className="flex cursor-pointer items-center justify-center
+                rounded-full bg-custom-blue p-2 text-white transition-colors
+                duration-700 ease-in-out hover:bg-custom-dark-4
+                dark:bg-custom-blue dark:text-gray-100
+                dark:hover:bg-custom-light">
               <Printer></Printer>
             </div>
           </div>
diff --git a/frontend/src/components/Lightbox.jsx b/frontend/src/components/Lightbox.jsx
index 684e175..dce6dfb 100644
--- a/frontend/src/components/Lightbox.jsx
+++ b/frontend/src/components/Lightbox.jsx
@@ -59,10 +59,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
       <div className="z-50 flex flex-col items-center justify-center">
         <div
           id="control-bar"
-          className={`
-            fixed top-0 z-50 flex w-screen justify-center bg-black py-4
-             print:hidden
-          `}>
+          className="fixed top-0 z-50 flex w-screen justify-center bg-black
+            py-4 print:hidden">
           <LightboxButton onClick={() => window.print()} className="mr-4">
             <Printer />
           </LightboxButton>
@@ -78,10 +76,8 @@ export const Lightbox = ({ onClose, imageSource }) => {
                   dangerouslySetInnerHTML={{
                     __html: setHeightAndWeightOfSVG(imageSource)
                   }}
-                  className={
-                    'select-text overflow-visible ' +
-                    (isClicked ? 'cursor-grabbing' : 'cursor-grab')
-                  }
+                  className={`select-text overflow-visible
+                  ${isClicked ? 'cursor-grabbing' : 'cursor-grab'}`}
                   onMouseDown={() => setIsClicked(true)}></div>
               </TransformComponent>
             </TransformWrapper>
diff --git a/frontend/src/components/LightboxButton.jsx b/frontend/src/components/LightboxButton.jsx
index 5cfbf62..097db6b 100644
--- a/frontend/src/components/LightboxButton.jsx
+++ b/frontend/src/components/LightboxButton.jsx
@@ -5,9 +5,9 @@ export const LightboxButton = ({ onClick, children, className = '' }) => {
   return (
     <div
       onClick={onClick}
-      className={`flex cursor-pointer items-center justify-center
-    rounded-full p-2 text-white transition-colors duration-700
-    ease-in-out hover:bg-custom-dark-4 ${className}`}>
+      className={`flex cursor-pointer items-center justify-center rounded-full
+        p-2 text-white transition-colors duration-700 ease-in-out
+        hover:bg-custom-dark-4 ${className}`}>
       {children}
     </div>
   );
diff --git a/frontend/src/components/ModelDiff.jsx b/frontend/src/components/ModelDiff.jsx
index f88e3c0..abdc65c 100644
--- a/frontend/src/components/ModelDiff.jsx
+++ b/frontend/src/components/ModelDiff.jsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { API_BASE_URL, ROUTE_PREFIX } from '../APIConfig';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { Spinner } from './Spinner';
 
 export const ModelDiff = ({ onRefetch, hasDiffed }) => {
@@ -83,7 +83,9 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
       setCommitDetails(data);
       const options = data.map((commit) => ({
         value: JSON.stringify(commit),
-        label: `${commit.hash.substring(0, 7)} ${commit.tag ? `(${commit.tag})` : ''} - ${commit.subject} - Created on ${commit.date.substring(0, 10)}`
+        label: `${commit.hash.substring(0, 7)} ${
+          commit.tag ? `(${commit.tag})` : ''
+        } - ${commit.subject} - Created on ${commit.date.substring(0, 10)}`
       }));
 
       setSelectionOptions(options);
@@ -97,7 +99,8 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
     <div className="mb-2 mt-2 flex flex-col items-center">
       <button
         className="rounded border border-black bg-gray-200 px-4 py-2
-         text-gray-700 hover:bg-custom-light dark:bg-custom-dark-2 dark:text-gray-100 dark:hover:bg-custom-dark-4"
+          text-gray-700 hover:bg-custom-light dark:bg-custom-dark-2
+          dark:text-gray-100 dark:hover:bg-custom-dark-4"
         onClick={openModelCompareDialog}>
         {hasDiffed
           ? 'Compare with another version'
@@ -115,8 +118,9 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
             }}></div>
           <div
             className="absolute left-1/2 top-1/2 z-20 w-1/2 min-w-0
-            -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto rounded bg-gray-100
-            p-4 shadow-lg dark:bg-custom-dark-2 dark:text-gray-100"
+              -translate-x-1/2 -translate-y-1/2 transform overflow-y-auto
+              rounded bg-gray-100 p-4 shadow-lg dark:bg-custom-dark-2
+              dark:text-gray-100"
             style={{ maxHeight: '75%' }}
             onClick={(e) => e.stopPropagation()}>
             <div className="flex flex-col space-y-8 break-words text-lg">
@@ -134,8 +138,8 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
                 ) : (
                   <>
                     <select
-                      className="mb-2 w-full cursor-not-allowed bg-gray-300 text-gray-500
-                      dark:bg-custom-dark-3 dark:text-gray-100"
+                      className="mb-2 w-full cursor-not-allowed bg-gray-300
+                        text-gray-500 dark:bg-custom-dark-3 dark:text-gray-100"
                       disabled>
                       <option>{selectionOptions[0].label}</option>
                     </select>
@@ -149,7 +153,8 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
                       <p>Date: {commitDetails[0].date}</p>
                     </div>
                     <select
-                      className="mb-2 mt-2 w-full bg-gray-200 dark:bg-custom-dark-3 dark:text-gray-100"
+                      className="mb-2 mt-2 w-full bg-gray-200
+                        dark:bg-custom-dark-3 dark:text-gray-100"
                       value={selectedOption}
                       onChange={handleSelectChange}
                       disabled={isLoading}>
@@ -183,15 +188,13 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
                     )}
                     <div className="flex flex-col">
                       <button
-                        className={`
-                        mt-4 rounded px-4 py-2 text-white
-                        ${
+                        className={` mt-4 rounded px-4 py-2 text-white ${
                           isLoading
                             ? 'bg-gray-500 '
                             : completeLoading
                               ? 'bg-green-500'
                               : 'bg-custom-blue hover:bg-custom-blue-hover'
-                        }`}
+                          }`}
                         onClick={handleGenerateDiff}
                         disabled={isLoading || completeLoading}>
                         {isLoading ? (
@@ -204,7 +207,8 @@ export const ModelDiff = ({ onRefetch, hasDiffed }) => {
                       </button>
                       {completeLoading && (
                         <button
-                          className="mt-4 rounded bg-custom-blue px-4 py-2 text-white hover:bg-custom-blue-hover"
+                          className="mt-4 rounded bg-custom-blue px-4 py-2
+                            text-white hover:bg-custom-blue-hover"
                           onClick={() => {
                             window.open(
                               `${ROUTE_PREFIX}/model-comparison`,
diff --git a/frontend/src/components/SVGDisplay.jsx b/frontend/src/components/SVGDisplay.jsx
index e1b405c..57eb13f 100644
--- a/frontend/src/components/SVGDisplay.jsx
+++ b/frontend/src/components/SVGDisplay.jsx
@@ -28,16 +28,13 @@ export const SVGDisplay = ({ content }) => {
         style={{ maxWidth: '100%', height: 'auto' }}
         onClick={handleSvgClick}>
         <div
-          className={
-            'absolute inset-0 flex items-center justify-center rounded ' +
-            'bg-black bg-opacity-0 duration-200 group-hover:bg-opacity-50 ' +
-            'cursor-pointer'
-          }
+          className="absolute inset-0 flex cursor-pointer items-center
+            justify-center rounded bg-black bg-opacity-0 duration-200
+            group-hover:bg-opacity-50"
           style={{ pointerEvents: 'none' }}>
           <div
-            className={
-              'text-2xl font-bold text-transparent group-hover:text-white'
-            }>
+            className="text-2xl font-bold text-transparent
+              group-hover:text-white">
             Click to enlarge
           </div>
         </div>
diff --git a/frontend/src/components/SettingsMenu.jsx b/frontend/src/components/SettingsMenu.jsx
index 3aacf08..da706e2 100644
--- a/frontend/src/components/SettingsMenu.jsx
+++ b/frontend/src/components/SettingsMenu.jsx
@@ -33,19 +33,14 @@ export const SettingsMenu = () => {
       </div>
       {isOpen && (
         <div
-          className={
-            'absolute right-0 mt-2 w-48 divide-y divide-gray-100 ' +
-            'rounded-lg border border-gray-200 bg-white shadow-xl'
-          }>
+          className="absolute right-0 mt-2 w-48 divide-y divide-gray-100
+            rounded-lg border border-gray-200 bg-white shadow-xl">
           <button
             onClick={handlePrint}
-            className={
-              'block w-full px-4 py-2 text-left text-sm ' +
-              'text-gray-700 hover:bg-blue-100 hover:text-blue-700'
-            }>
+            className="block w-full px-4 py-2 text-left text-sm text-gray-700
+              hover:bg-blue-100 hover:text-blue-700">
             Print page
           </button>
-          {/* Add more options here as needed, following the same pattern */}
         </div>
       )}
     </div>
diff --git a/frontend/src/components/SoftwareVersion.jsx b/frontend/src/components/SoftwareVersion.jsx
index 8b9e0e0..6d952bd 100644
--- a/frontend/src/components/SoftwareVersion.jsx
+++ b/frontend/src/components/SoftwareVersion.jsx
@@ -30,9 +30,7 @@ export const SoftwareVersion = () => {
 
   return (
     <div className="text-gray-500 dark:text-gray-300 print:hidden">
-      {frontendVersion && (
-        <p>Frontend Version: {frontendVersion.version}</p>
-      )}
+      {frontendVersion && <p>Frontend Version: {frontendVersion.version}</p>}
       {backendVersion && <p>Backend Version: {backendVersion}</p>}
     </div>
   );
diff --git a/frontend/src/components/Spinner.jsx b/frontend/src/components/Spinner.jsx
index 6bb3780..0da4645 100644
--- a/frontend/src/components/Spinner.jsx
+++ b/frontend/src/components/Spinner.jsx
@@ -4,9 +4,7 @@
 export const Spinner = () => (
   <div className="flex items-center justify-center">
     <div
-      className={
-        'h-12 w-12 animate-spin-slow rounded-full border-b-4 border-t-4 ' +
-        'border-custom-blue ease-linear'
-      }></div>
+      className="h-12 w-12 animate-spin-slow rounded-full border-b-4 border-t-4
+        border-custom-blue ease-linear"></div>
   </div>
 );
diff --git a/frontend/src/components/TemplateCard.jsx b/frontend/src/components/TemplateCard.jsx
index 55a14dd..bcbe4f1 100644
--- a/frontend/src/components/TemplateCard.jsx
+++ b/frontend/src/components/TemplateCard.jsx
@@ -1,8 +1,6 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState, useEffect } from 'react';
-
 import {
   FlaskConical,
   TriangleAlert,
@@ -35,17 +33,14 @@ export const TemplateCard = ({
   return (
     <div
       onClick={() => onClickCallback(idx)}
-      className={
-        'm-2 mt-6 max-w-sm cursor-pointer rounded-lg bg-gray-200 shadow-md ' +
-        'hover:bg-custom-light dark:bg-custom-dark-2 dark:shadow-dark ' +
-        'dark:hover:bg-custom-dark-4'
-      }>
+      className="m-2 mt-6 max-w-sm cursor-pointer rounded-lg bg-gray-200
+        shadow-md hover:bg-custom-light dark:bg-custom-dark-2 dark:shadow-dark
+        dark:hover:bg-custom-dark-4">
       <div className="p-5">
         <div className="flex flex-row justify-between">
           <h5
-            className={
-              'mb-2 text-left text-2xl font-normal text-gray-900 dark:text-gray-100'
-            }
+            className="mb-2 text-left text-2xl font-normal text-gray-900
+              dark:text-gray-100"
             style={{ overflowWrap: 'break-word' }}>
             {name}
           </h5>
@@ -61,7 +56,9 @@ export const TemplateCard = ({
             </span>
           )}
         </div>
-        <p className="mb-3 text-left font-normal text-gray-700 dark:text-gray-300">
+        <p
+          className="mb-3 text-left font-normal text-gray-700
+            dark:text-gray-300">
           {description}
         </p>
         <div className={'text-left'}>
diff --git a/frontend/src/components/TemplateDetails.jsx b/frontend/src/components/TemplateDetails.jsx
index 8c126bc..b5587f1 100644
--- a/frontend/src/components/TemplateDetails.jsx
+++ b/frontend/src/components/TemplateDetails.jsx
@@ -34,21 +34,17 @@ export const TemplateDetails = ({ endpoint, onSingleInstance }) => {
   if (error) {
     return (
       <div
-        className={
-          'rounded bg-red-500 p-4 text-2xl text-white ' +
-          'dark:bg-custom-dark-error'
-        }>
+        className="rounded bg-red-500 p-4 text-2xl text-white
+          dark:bg-custom-dark-error">
         {error}
       </div>
     );
   }
   return (
     <div
-      className={
-        'flex h-full max-h-[calc(90vh-32px)] w-80 flex-col overflow-hidden ' +
-        'rounded-lg bg-gray-100 p-4 shadow-lg dark:bg-custom-dark-2 ' +
-        'dark:shadow-dark'
-      }>
+      className="flex h-full max-h-[calc(90vh-32px)] w-80 flex-col
+        overflow-hidden rounded-lg bg-gray-100 p-4 shadow-lg
+        dark:bg-custom-dark-2 dark:shadow-dark">
       <h5
         className={'mb-2 text-2xl font-bold text-gray-900 dark:text-gray-100'}>
         {details.name}
@@ -63,10 +59,8 @@ export const TemplateDetails = ({ endpoint, onSingleInstance }) => {
             error:{' '}
           </p>
           <div
-            className={
-              'rounded bg-red-500 px-2 py-2 font-bold text-gray-100 ' +
-              'dark:bg-custom-dark-error'
-            }>
+            className="rounded bg-red-500 px-2 py-2 font-bold text-gray-100
+              dark:bg-custom-dark-error">
             {details.error}
           </div>
         </div>
@@ -78,30 +72,23 @@ export const TemplateDetails = ({ endpoint, onSingleInstance }) => {
               value={filterText}
               onChange={(e) => setFilterText(e.target.value)}
               placeholder="Filter objects"
-              className={
-                'mx-auto mb-3 mr-6 w-full rounded bg-custom-light p-2 ' +
-                'text-gray-700 shadow-sm dark:border-gray-500 ' +
-                'dark:bg-custom-dark-3 dark:text-gray-100'
-              }
+              className="mx-auto mb-3 mr-6 w-full rounded bg-custom-light p-2
+                text-gray-700 shadow-sm dark:border-gray-500
+                dark:bg-custom-dark-3 dark:text-gray-100"
             />
           ) : (
             <></>
           )}
           <div
-            className={
-              'flex flex-wrap items-center justify-center overflow-auto ' +
-              'border-2 border-transparent text-left scrollbar ' +
-              'scrollbar-track-gray-200 scrollbar-thumb-gray-400 ' +
-              'dark:scrollbar-track-custom-dark-3 ' +
-              'dark:scrollbar-thumb-slate-600'
-            }>
+            className="scrollbar scrollbar-track-gray-200
+              scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+              dark:scrollbar-thumb-slate-600 flex flex-wrap items-center
+              justify-center overflow-auto border-2 border-transparent
+              text-left">
             {details.instanceList &&
             details.single === false &&
             details.instanceList.length === 0 ? (
-              <p
-                className={
-                  'mb-3 font-normal text-gray-700 dark:text-gray-300'
-                }>
+              <p className="mb-3 font-normal text-gray-700 dark:text-gray-300">
                 No objects found
               </p>
             ) : (
@@ -121,23 +108,21 @@ export const TemplateDetails = ({ endpoint, onSingleInstance }) => {
                     onClick={() => {
                       navigate(`/${templateName}/${object.idx}`);
                     }}
-                    className={
-                      (objectID && object.idx === objectID
-                        ? 'w-full bg-custom-blue text-white ' +
-                          'dark:bg-custom-blue dark:text-gray-100'
-                        : 'w-full bg-gray-200 text-gray-900 ' +
-                          'dark:bg-custom-dark-4') +
-                      ' dark:bg-dark-quaternary m-2 min-w-0 cursor-pointer ' +
-                      'rounded-lg shadow-md hover:bg-custom-blue ' +
-                      'hover:text-white dark:border-gray-700 ' +
-                      'dark:shadow-dark dark:hover:bg-blue-500 '
-                    }>
+                    className={`${
+                      objectID && object.idx === objectID
+                        ? `w-full bg-custom-blue text-white dark:bg-custom-blue
+                          dark:text-gray-100`
+                        : `w-full bg-gray-200 text-gray-900
+                          dark:bg-custom-dark-4`
+                      } dark:bg-dark-quaternary m-2 min-w-0 cursor-pointer
+                      rounded-lg shadow-md hover:bg-custom-blue
+                      hover:text-white dark:border-gray-700 dark:shadow-dark
+                      dark:hover:bg-blue-500`}>
                     <div className="p-2">
                       <h5
-                        className={
-                          'text-md break-words font-bold dark:text-gray-100' +
-                          (objectID && object.idx === objectID ? '' : '')
-                        }>
+                        className={`text-md break-words font-bold
+                          dark:text-gray-100 ${
+                          objectID && object.idx === objectID ? '' : '' }`}>
                         {object.name}
                       </h5>
                     </div>
diff --git a/frontend/src/components/ThemeSwitcher.jsx b/frontend/src/components/ThemeSwitcher.jsx
index 244ee0d..5f80308 100644
--- a/frontend/src/components/ThemeSwitcher.jsx
+++ b/frontend/src/components/ThemeSwitcher.jsx
@@ -32,17 +32,13 @@ export const ThemeSwitcher = () => {
     <div onClick={toggleTheme} className="header-button">
       {theme === 'dark' ? (
         <Sun
-          className={
-            'transform text-orange-500 transition-transform duration-500 ' +
-            'ease-in-out'
-          }
+          className="transform text-orange-500 transition-transform
+            duration-500 ease-in-out"
         />
       ) : (
         <Moon
-          className={
-            'transform text-black transition-transform duration-500 ' +
-            'ease-in-out'
-          }
+          className="transform text-black transition-transform duration-500
+            ease-in-out"
         />
       )}
     </div>
diff --git a/frontend/src/components/ViewsList.jsx b/frontend/src/components/ViewsList.jsx
index d7fa2d0..0e51523 100644
--- a/frontend/src/components/ViewsList.jsx
+++ b/frontend/src/components/ViewsList.jsx
@@ -15,30 +15,21 @@ export const ViewsList = ({ templates, cardClickCallback }) => {
 
   return (
     <div
-      className={
-        'rounded-lg bg-gray-100 pb-2 pl-4 pr-4 pt-8 shadow-lg ' +
-        'dark:bg-custom-dark-3'
-      }>
+      className="rounded-lg bg-gray-100 pb-2 pl-4 pr-4 pt-8 shadow-lg
+        dark:bg-custom-dark-3">
       {Object.keys(categories).map((cat) => {
         if (cat in templates && templates[cat].length > 0) {
           return (
             <div key={cat} className="mb-8 p-4">
               <h2
-                className={
-                  'border-b border-gray-900 pb-2 text-2xl font-bold ' +
-                  'dark:border-gray-300'
-                }>
-                <span
-                  className={
-                    'px-4 py-2 text-gray-900 dark:text-gray-100'
-                  }>
+                className="border-b border-gray-900 pb-2 text-2xl font-bold
+                  dark:border-gray-300">
+                <span className="px-4 py-2 text-gray-900 dark:text-gray-100">
                   {categories[cat]}
                 </span>
               </h2>
               <div
-                className={
-                  'mt-2 block gap-4 md:flex md:flex-wrap md:justify-center'
-                }>
+                className="mt-2 block gap-4 md:flex md:flex-wrap md:justify-center">
                 {templates[cat].map((template) => (
                   <TemplateCard
                     key={template.idx}
diff --git a/frontend/src/components/WiredTemplatesList.jsx b/frontend/src/components/WiredTemplatesList.jsx
index 18f3335..4ad9668 100644
--- a/frontend/src/components/WiredTemplatesList.jsx
+++ b/frontend/src/components/WiredTemplatesList.jsx
@@ -32,14 +32,11 @@ export const WiredTemplatesList = () => {
   if (error) {
     return (
       <div
-        className={
-          'dark:bg-custom-dark-error rounded bg-red-500 p-4 text-2xl ' +
-          'text-white'
-        }>
+        className={`rounded bg-red-500 p-4 text-2xl text-white
+          dark:bg-custom-dark-error`}>
         {error === 'Failed to fetch'
-          ? "Can't connect to the server. Maybe your session was inactive " +
-            "for too long? If that's the case, request a new session / " +
-            'restart the app.'
+          ? `Can't connect to the server. Maybe your session was inactive for
+          too long? If that's the case, request a new session / restart the app.`
           : error}
       </div>
     );
@@ -47,9 +44,7 @@ export const WiredTemplatesList = () => {
   return (
     <ViewsList
       templates={templates}
-      cardClickCallback={(idx) =>
-        navigate(`/${idx}`, { state: { idx: idx } })
-      }
+      cardClickCallback={(idx) => navigate(`/${idx}`, { state: { idx: idx } })}
     />
   );
 };
diff --git a/frontend/src/views/HomeView.jsx b/frontend/src/views/HomeView.jsx
index 8a1aa13..d02d15c 100644
--- a/frontend/src/views/HomeView.jsx
+++ b/frontend/src/views/HomeView.jsx
@@ -1,7 +1,7 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 import { WiredTemplatesList } from '../components/WiredTemplatesList';
 import { API_BASE_URL } from '../APIConfig';
 import { SoftwareVersion } from '../components/SoftwareVersion';
@@ -75,7 +75,9 @@ export const HomeView = () => {
 
   if (error) {
     return (
-      <div className="rounded bg-red-500 p-2 text-xl text-white dark:bg-custom-dark-error">
+      <div
+        className="rounded bg-red-500 p-2 text-xl text-white
+          dark:bg-custom-dark-error">
         {error}
       </div>
     );
@@ -86,7 +88,9 @@ export const HomeView = () => {
       <div className="flex w-full items-center justify-center px-4">
         {modelInfo && (
           <>
-            <div className="rounded-lg bg-gray-100 p-4 text-gray-700 shadow-lg dark:bg-custom-dark-3 dark:text-gray-100 md:mx-auto">
+            <div
+              className="rounded-lg bg-gray-100 p-4 text-gray-700 shadow-lg
+                dark:bg-custom-dark-3 dark:text-gray-100 md:mx-auto">
               <h2 className="text-xl">{modelInfo.title}</h2>
               {modelInfo.capella_version && (
                 <p>Capella Version: {modelInfo.capella_version}</p>
@@ -126,7 +130,9 @@ export const HomeView = () => {
       <div className="mt-4">
         <WiredTemplatesList />
       </div>
-      <div className="mt-8 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block 3xl:text-left">
+      <div
+        className="mt-8 text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:block
+          3xl:text-left">
         <SoftwareVersion />
       </div>
     </div>
diff --git a/frontend/src/views/ModelComparisonView.jsx b/frontend/src/views/ModelComparisonView.jsx
index 44515ca..aabe37e 100644
--- a/frontend/src/views/ModelComparisonView.jsx
+++ b/frontend/src/views/ModelComparisonView.jsx
@@ -1,7 +1,6 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
 import { useEffect, useState } from 'react';
 import { Header } from '../components/Header';
 import { DiffExplorer } from '../components/DiffExplorer';
@@ -24,16 +23,6 @@ export const ModelComparisonView = ({ endpoint }) => {
     setFilterStatus(event.target.value);
   };
 
-  const filterNodes = (node) => {
-    if (!searchTerm) return true;
-    if (node.display_name.toLowerCase().includes(searchTerm.toLowerCase()))
-      return true;
-    if (node.children) {
-      return Object.values(node.children).some(filterNodes);
-    }
-    return false;
-  };
-
   useEffect(() => {
     const fetchModelDiff = async () => {
       try {
@@ -64,26 +53,24 @@ export const ModelComparisonView = ({ endpoint }) => {
       {isSmallScreen && (
         <button
           onClick={toggleSidebar}
-          className={`
-          text-md fixed left-1/2 top-16 z-20 m-4 flex h-10 w-auto
+          className={` text-md fixed left-1/2 top-16 z-20 m-4 flex h-10 w-auto
           -translate-x-1/2 cursor-pointer items-center justify-center
           rounded-b-md border-2 border-gray-900 bg-custom-blue p-2 px-4
           text-white transition-transform duration-500 ease-in-out
-          hover:bg-custom-blue-hover focus:outline-none
-          dark:border-white print:hidden
-        `}>
+          hover:bg-custom-blue-hover focus:outline-none dark:border-white
+          print:hidden `}>
           {isSidebarVisible ? 'Collapse Sidebar' : 'Expand Sidebar'}
         </button>
       )}
       <div className="flex min-h-screen pt-28">
         <div
-          className={`fixed left-0 h-[calc(100vh-8rem)] w-96 flex-none overflow-auto overflow-y-scroll
-            rounded-md border-b-4 border-t-4 border-gray-300 bg-gray-100 p-4 shadow-lg
-            scrollbar scrollbar-track-gray-200 scrollbar-thumb-gray-400
-            dark:border-custom-dark-3 dark:bg-custom-dark-2 dark:shadow-dark
-            dark:scrollbar-track-custom-dark-3 dark:scrollbar-thumb-slate-600 ${
-              isSidebarVisible ? 'translate-x-0' : '-translate-x-full'
-            }`}
+          className={`scrollbar scrollbar-track-gray-200
+            scrollbar-thumb-gray-400 dark:scrollbar-track-custom-dark-3
+            dark:scrollbar-thumb-slate-600 fixed left-0 h-[calc(100vh-8rem)]
+            w-96 flex-none overflow-auto overflow-y-scroll rounded-md
+            border-b-4 border-t-4 border-gray-300 bg-gray-100 p-4 shadow-lg
+            dark:border-custom-dark-3 dark:bg-custom-dark-2 dark:shadow-dark ${
+            isSidebarVisible ? 'translate-x-0' : '-translate-x-full' }`}
           style={{ minWidth: '25%' }}>
           <div className="mb-4">
             <input
@@ -91,18 +78,20 @@ export const ModelComparisonView = ({ endpoint }) => {
               placeholder="Search..."
               value={searchTerm}
               onChange={handleSearchChange}
-              className="mx-auto mb-2 w-full rounded border-2 border-transparent
-              bg-custom-light p-2 text-gray-700 shadow-sm focus:border-gray-400
-              focus:outline-none dark:border-gray-500 dark:bg-custom-dark-3
-              dark:text-gray-100 dark:focus:border-custom-dark-1"
+              className="mx-auto mb-2 w-full rounded border-2
+                border-transparent bg-custom-light p-2 text-gray-700 shadow-sm
+                focus:border-gray-400 focus:outline-none dark:border-gray-500
+                dark:bg-custom-dark-3 dark:text-gray-100
+                dark:focus:border-custom-dark-1"
             />
             <select
               value={filterStatus}
               onChange={handleStatusChange}
-              className="custom-select mx-auto mb-2 w-full rounded border-2  border-transparent
-              bg-custom-light p-2 text-gray-700 shadow-sm focus:border-gray-400
-              focus:outline-none dark:border-gray-500 dark:bg-custom-dark-3
-              dark:text-gray-100 dark:focus:border-custom-dark-1">
+              className="custom-select mx-auto mb-2 w-full rounded border-2
+                border-transparent bg-custom-light p-2 text-gray-700 shadow-sm
+                focus:border-gray-400 focus:outline-none dark:border-gray-500
+                dark:bg-custom-dark-3 dark:text-gray-100
+                dark:focus:border-custom-dark-1">
               <option value="all">All</option>
               <option value="created">Created</option>
               <option value="deleted">Deleted</option>
@@ -115,6 +104,7 @@ export const ModelComparisonView = ({ endpoint }) => {
               (layer) =>
                 modelDiff.objects[layer] && (
                   <DiffExplorer
+                    key={modelDiff.objects[layer]}
                     node={modelDiff.objects[layer]}
                     setObjectID={setObjectID}
                     searchTerm={searchTerm}
@@ -125,8 +115,7 @@ export const ModelComparisonView = ({ endpoint }) => {
         </div>
         <div
           className={`flex-1 overflow-y-hidden ${
-            isSmallScreen ? (isSidebarVisible ? 'pl-96' : '') : 'pl-96'
-          }`}>
+            isSmallScreen ? (isSidebarVisible ? 'pl-96' : '') : 'pl-96' }`}>
           <div className="relative flex flex-1">
             {objectID && <DiffView objectID={objectID} endpoint={endpoint} />}
           </div>
diff --git a/frontend/src/views/TemplateView.jsx b/frontend/src/views/TemplateView.jsx
index 2025049..38b3f35 100644
--- a/frontend/src/views/TemplateView.jsx
+++ b/frontend/src/views/TemplateView.jsx
@@ -9,27 +9,27 @@ selected we show a hint to select one.
 
 */
 
-import React, { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
-import { useMediaQuery } from "react-responsive";
-import { Header } from "../components/Header";
-import { InstanceView } from "../components/InstanceView";
-import { TemplateDetails } from "../components/TemplateDetails";
-import { SoftwareVersion } from "../components/SoftwareVersion";
+import { useEffect, useState } from 'react';
+import { useParams } from 'react-router-dom';
+import { useMediaQuery } from 'react-responsive';
+import { Header } from '../components/Header';
+import { InstanceView } from '../components/InstanceView';
+import { TemplateDetails } from '../components/TemplateDetails';
+import { SoftwareVersion } from '../components/SoftwareVersion';
 
 export const TemplateView = ({ endpoint }) => {
   let { templateName, objectID } = useParams();
   const [singleObjectID, setObjectID] = useState(null);
-  const isSmallScreen = useMediaQuery({ query: "(max-width: 1080px)" });
+  const isSmallScreen = useMediaQuery({ query: '(max-width: 1080px)' });
   const [isSidebarVisible, setIsSidebarVisible] = useState(!isSmallScreen);
 
   useEffect(() => {
-    document.body.style.overflow = "hidden";
-    document.documentElement.style.overflow = "hidden";
+    document.body.style.overflow = 'hidden';
+    document.documentElement.style.overflow = 'hidden';
 
     return () => {
-      document.body.style.overflow = "";
-      document.documentElement.style.overflow = "";
+      document.body.style.overflow = '';
+      document.documentElement.style.overflow = '';
     };
   }, []);
   useEffect(() => {
@@ -54,25 +54,23 @@ export const TemplateView = ({ endpoint }) => {
       {isSmallScreen && (
         <button
           onClick={toggleSidebar}
-          className={`
-          text-md fixed left-1/2 top-16 z-20 m-4 flex h-10 w-auto
-          -translate-x-1/2 cursor-pointer items-center justify-center
-          rounded-b-md border-2 border-gray-900 bg-custom-blue p-2 px-4
-          text-white transition-transform duration-500 ease-in-out
-          hover:bg-custom-blue-hover focus:outline-none
-          dark:border-white print:hidden
-        `}
-        >
-          {isSidebarVisible ? "Collapse Sidebar" : "Expand Sidebar"}
+          className="text-md fixed left-1/2 top-16 z-20 m-4 flex h-10 w-auto
+            -translate-x-1/2 cursor-pointer items-center justify-center
+            rounded-b-md border-2 border-gray-900 bg-custom-blue p-2 px-4
+            text-white transition-transform duration-500 ease-in-out
+            hover:bg-custom-blue-hover focus:outline-none dark:border-white
+            print:hidden">
+          {isSidebarVisible ? 'Collapse Sidebar' : 'Expand Sidebar'}
         </button>
       )}
       <div className="flex">
         <div
-          className={`z-19 mt-32 flex min-w-80 transform flex-col items-center md:mr-8 md:mt-20 print:hidden ${
-            isSidebarVisible ? "mr-8 translate-y-0" : "hidden"
-          }`}
-        >
-          <aside className="h-auto flex-col overflow-y-auto rounded-lg shadow-lg dark:shadow-dark print:hidden">
+          className={`z-19 mt-32 flex min-w-80 transform flex-col items-center
+            md:mr-8 md:mt-20 print:hidden ${
+            isSidebarVisible ? 'mr-8 translate-y-0' : 'hidden' }`}>
+          <aside
+            className="h-auto flex-col overflow-y-auto rounded-lg shadow-lg
+              dark:shadow-dark print:hidden">
             <TemplateDetails
               endpoint={endpoint}
               onSingleInstance={setObjectID}
@@ -84,15 +82,17 @@ export const TemplateView = ({ endpoint }) => {
           <div className="overflow-y-auto md:w-screen">
             {!objectID && !singleObjectID && (
               <p
-                className={`absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 transform text-xl text-gray-700 dark:text-gray-300 ${
-                  isSidebarVisible && isSmallScreen ? "hidden" : ""
-                }`}
-              >
+                className={`absolute left-1/2 top-1/2 -translate-x-1/2
+                -translate-y-1/2 transform text-xl text-gray-700
+                dark:text-gray-300 ${
+                isSidebarVisible && isSmallScreen ? 'hidden' : '' }`}>
                 Select an Instance
               </p>
             )}
             <div className="relative flex flex-1 md:ml-12 md:mr-12">
-              <div className="html-wrapper relative flex h-screen items-center justify-center pt-32 print:pt-0">
+              <div
+                className="html-wrapper relative flex h-screen items-center
+                  justify-center pt-32 print:pt-0">
                 {(objectID || singleObjectID) && (
                   <div className="m-auto mx-auto box-border">
                     <InstanceView
@@ -107,7 +107,9 @@ export const TemplateView = ({ endpoint }) => {
           </div>
         </main>
       </div>
-      <div className="hidden text-center 3xl:fixed 3xl:bottom-4 3xl:left-4 3xl:mb-0 3xl:mt-0 3xl:block 3xl:text-left">
+      <div
+        className="hidden text-center 3xl:fixed 3xl:bottom-4 3xl:left-4
+          3xl:mb-0 3xl:mt-0 3xl:block 3xl:text-left">
         <SoftwareVersion />
       </div>
     </div>