style: Frontend overhaul with many small changes

.pre-commit-config.yaml

@@ -114,3 +114,11 @@ repos:
     hooks:
       - id: commitlint
         stages: [commit-msg]
+  - repo: https://github.com/pre-commit/mirrors-prettier
+    rev: v3.1.0
+    hooks:
+      - id: prettier
+        types_or: [ts, css, html, markdown]
+        additional_dependencies:
+          - 'prettier@^3.2.5'
+          - 'prettier-plugin-tailwindcss@^0.5.14'

CONTRIBUTING.md

@@ -76,8 +76,7 @@ The key differences are:
 
 - **Docstrings**: The [Numpy style guide] applies here.
 
-  [numpy style guide]:
-    https://numpydoc.readthedocs.io/en/latest/format.html#docstring-standard
+  [numpy style guide]: https://numpydoc.readthedocs.io/en/latest/format.html#docstring-standard
 
   When writing docstrings for functions, use the imperative style, as per
   [PEP-257]). For example, write "Do X and Y" instead of "Does X and Y".
@@ -124,7 +123,6 @@ The key differences are:
   typing related classes like `t.TypedDict`.
 
   <!-- prettier-ignore -->
-
   Use the new syntax and classes for typing introduced with Python 3.10.
 
   - Instead of `t.Tuple`, `t.List` etc. use the builtin classes `tuple`, `list`
@@ -142,8 +140,7 @@ The key differences are:
   If you have set up black correctly, you don't need to worry about this though
   :)
 
-  [black code style]:
-    https://black.readthedocs.io/en/stable/the_black_code_style/current_style.html
+  [black code style]: https://black.readthedocs.io/en/stable/the_black_code_style/current_style.html
 
 - When working with `dict`s, consider using `t.TypedDict` instead of a more
   generic `dict[str, float|int|str]`-like annotation where possible, as the

Dockerfile

@@ -43,4 +43,4 @@ RUN chmod +x /entrypoint.sh
 ENV MODEL_ENTRYPOINT=/model
 RUN chmod -R 777 ./frontend/dist/
 
-ENTRYPOINT ["/entrypoint.sh"]
+ENTRYPOINT ["/entrypoint.sh"]

README.md

@@ -16,8 +16,8 @@ We see a larger non-MBSE crowd struggling with the things hidden in the model. W
 
 **Use cases**:
 
--   Provide insights into / "spell-out" the model for non-MBSE stakeholders via document-a-like dynamic views that describe model elements in a human-readable form.
--   Provide meaningful default views (that can be further customized) for the key elements to kickstart the model exploration.
+- Provide insights into / "spell-out" the model for non-MBSE stakeholders via document-a-like dynamic views that describe model elements in a human-readable form.
+- Provide meaningful default views (that can be further customized) for the key elements to kickstart the model exploration.
 
 There are a few more use cases but we will reveal them a bit later.
 

capella_model_explorer/backend/explorer.py

@@ -181,14 +181,23 @@ def read_template(template_name: str):
                     filters=filters,
                 )
                 base["objects"] = [
-                    {"idx": obj.uuid, 
-                     "name": str(
-                         obj.name if obj.name else (
-                             obj.long_name if hasattr(obj, "long_name") else "undefined")
-                    )} for obj in objects
+                    {
+                        "idx": obj.uuid,
+                        "name": str(
+                            obj.name
+                            if obj.name
+                            else (
+                                obj.long_name
+                                if hasattr(obj, "long_name")
+                                else "undefined"
+                            )
+                        ),
+                    }
+                    for obj in objects
                 ]
             except Exception as e:
                 import traceback
+
                 LOGGER.exception(
                     "Error finding objects for template %s", template_name
                 )

entrypoint.sh

@@ -7,4 +7,4 @@ sed -i "s|__ROUTE_PREFIX__|${ROUTE_PREFIX}|g" ./frontend/dist/static/env.js
 sed -i "s|href=\"/|href=\"${ROUTE_PREFIX}/|g" ./frontend/dist/index.html
 sed -i "s|src=\"/|src=\"${ROUTE_PREFIX}/|g" ./frontend/dist/index.html
 
-exec python -m capella_model_explorer.backend ${MODEL_ENTRYPOINT} /views
+exec python -m capella_model_explorer.backend ${MODEL_ENTRYPOINT} /views

frontend/index.html

@@ -3,20 +3,17 @@
  ~ SPDX-License-Identifier: Apache-2.0
  -->
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <link rel="icon" type="image/svg+xml" href="/static/vite.svg" />
-        <meta
-            name="viewport"
-            content="width=device-width, initial-scale=1.0"
-        />
-        <title>Model Explorer</title>
-    </head>
-    <body>
-        <div id="root"></div>
-        <script type="module" src="/src/main.jsx"></script>
-        <script src="/static/env.js"></script>
-    </body>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/static/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Model Explorer</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+    <script src="/static/env.js"></script>
+  </body>
 </html>

frontend/package.json

@@ -2,7 +2,6 @@
   "name": "frontend",
   "private": true,
   "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
@@ -12,9 +11,13 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "lucide-react": "^0.372.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-zoom-pan-pinch": "^3.4.3"
+    "react-modal": "^3.16.1",
+    "react-responsive": "^10.0.0",
+    "react-zoom-pan-pinch": "^3.4.3",
+    "tailwind-scrollbar": "^3.1.0"
   },
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.16",
@@ -37,9 +40,10 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "prop-types": "^15.8.1",
     "react-router-dom": "^6.22.2",
-    "react-responsive": "^10.0.0",
     "storybook": "^7.6.16",
     "tailwindcss": "^3.4.1",
     "vite": "^5.1.4",

frontend/src/App.css

@@ -16,7 +16,7 @@
   transition: filter 300ms;
 }
 .logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
+  filter: drop-shadow(0 0 2em #646cff);
 }
 .logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);

frontend/src/components/Breadcrumbs.jsx

@@ -1,14 +1,14 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useState } from 'react';
-import { Link, useLocation } from 'react-router-dom';
-import { API_BASE_URL } from '../APIConfig';
+import React, { useEffect, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { API_BASE_URL } from "../APIConfig";
 
 export const Breadcrumbs = () => {
   const location = useLocation();
   const [breadcrumbLabels, setBreadcrumbLabels] = useState({});
-  const pathnames = location.pathname.split('/').filter(x => x);
+  const pathnames = location.pathname.split("/").filter((x) => x);
   const [error, setError] = useState(null);
 
   const fetchModelInfo = async () => {
@@ -23,9 +23,9 @@ export const Breadcrumbs = () => {
 
     const viewsDict = await response.json();
     const allViews = Object.values(viewsDict).flat();
-    const view = allViews.find(v => v.idx.toString() === idx);
+    const view = allViews.find((v) => v.idx.toString() === idx);
     return view ? view.name : idx;
-};
+  };
 
   // Function to fetch object names
   const fetchObjectName = async (uuid) => {
@@ -37,10 +37,10 @@ export const Breadcrumbs = () => {
   useEffect(() => {
     const updateLabels = async () => {
       const title = await fetchModelInfo();
-      const labels = { '/': title };
+      const labels = { "/": title };
 
       for (let i = 0; i < pathnames.length; i++) {
-        const to = `/${pathnames.slice(0, i + 1).join('/')}`;
+        const to = `/${pathnames.slice(0, i + 1).join("/")}`;
 
         if (i === 0) {
           labels[to] = await fetchViewName(pathnames[i]);
@@ -58,24 +58,30 @@ export const Breadcrumbs = () => {
     updateLabels();
   }, [location]);
 
-  const visible_pathnames = [breadcrumbLabels['/'], ...location.pathname.split('/').filter(x => x)];
+  const visible_pathnames = [
+    breadcrumbLabels["/"],
+    ...location.pathname.split("/").filter((x) => x),
+  ];
 
   return (
-    <nav aria-label="breadcrumb" className="flex items-center">
+    <nav
+      aria-label="breadcrumb"
+      className="flex items-center text-black dark:text-gray-200 font-medium"
+    >
       <ol className="flex items-center">
-        <li className="flex items-center dark:text-gray-200">
-          <Link to={"/"}>{breadcrumbLabels['/']}</Link>
+        <li className="flex items-center">
+          <Link to={"/"}>{breadcrumbLabels["/"]}</Link>
           <span className="mx-2">/</span>
         </li>
         {visible_pathnames.slice(1).map((value, index) => {
           const last = index === visible_pathnames.length - 2;
-          const to = `/${visible_pathnames.slice(1, index + 2).join('/')}`;
+          const to = `/${visible_pathnames.slice(1, index + 2).join("/")}`;
           const label = breadcrumbLabels[to] || value;
 
           return (
             <li className="flex items-center" key={to}>
               {!last && <Link to={to}>{label}</Link>}
-              {last && <span className='dark:text-gray-200' >{label}</span>}
+              {last && <span className=" text-custom-blue">{label}</span>}
               {!last && <span className="mx-2">/</span>}
             </li>
           );

frontend/src/components/Button.jsx

@@ -1,12 +1,16 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React from "react";
 
 export const Button = ({ theme, children, ...props }) => {
   return (
-    <a href="#" {...props} className="print:hidden rounded-md mx-1 bg-blue-800 px-2.5 py-1.5 text-sm font-semibold text-white shadow-sm hover:bg-blue-700 hover:text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 ">
-        {children}
+    <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 "
+    >
+      {children}
     </a>
   );
-};
+};

frontend/src/components/Card.jsx

@@ -1,11 +1,13 @@
 // Copyright DB InfraGO AG and contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React from 'react';
+import React from "react";
 
-export const Card = ({children, onClick}) => (
-    <div onClick={onClick}
-    className='max-w-sm bg-white rounded-lg border border-gray-200 shadow-md m-2 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 dark:bg-gray-800 dark:border-gray-700'>
-        {children}
-    </div>
-    );
+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"
+  >
+    {children}
+  </div>
+);

frontend/src/components/Header.jsx

@@ -2,15 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React from "react";
-import {Breadcrumbs} from "./Breadcrumbs";
-import {ThemeSwitcher} from "./ThemeSwitcher";
+import { Breadcrumbs } from "./Breadcrumbs";
+import { ThemeSwitcher } from "./ThemeSwitcher";
 
 export const Header = () => {
-    return (
-      <header className="print:hidden text-gray-700 p-4 flex justify-between items-center">
-          <div><Breadcrumbs /></div>
-          <div></div>
-          <div><ThemeSwitcher /></div>
-      </header>
-    );
-  };
+  return (
+    <header className="flex 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>
+        <Breadcrumbs />
+      </div>
+      <div></div>
+      <div>
+        <ThemeSwitcher />
+      </div>
+    </header>
+  );
+};