feat: Integrate FastHTML replacing FastAPI and React #81

jamilraichouni · 2025-01-27T16:13:24Z

This introduces several major changes by

replacing the FastAPI backend and React frontend with FastHTML and
replacing the Makefile with a Python CLI tool that manages the project.

The project can be managed including

building the Docker image,
running the app in a container,
running the app locally with optional full hot code reloading, and
building the Tailwind CSS stylesheet.

New is also a hot template reloading, which is enabled per default.

In development mode, it also runs with hot code reloading.

The FastHTML integration involves reusing existing code where possible, but also includes significant rewrites that affect the application's behavior. This update aims to enhance performance and streamline the development process.

Open issues/ topics

Integration in Capella Collaboration Manager

Rename the env vars in CCM tool cfg MODEL_ENTRYPOINT --> CME_MODEL and ROUTE_PREFIX --> CME_ROUTE_PREFIX Align this with main contributor @MoritzWeber0 of https://github.com/DSD-DBS/capella-collab-manager.git
Ensure, that CCM sets env var CME_LIVE_MODE=0 in the tool config

Wuestengecko

Here are some initial comments. As the PR is still WIP anyway, I've mostly only looked at the greater ideas, and not too much into the details yet. (Except for the comment about OOB swaps :p )

Wuestengecko · 2025-01-28T09:00:18Z

capella_model_explorer/icons.py

I think it would make more sense to store all these icons as individual *.svg files and serve them somewhere below /static. This allows the browser to cache the files and optimize rendering, since it knows that they must look the same (in the absence of CSS shenanigans, that is). It also makes the licensing situation a bit clearer, as there can be individual license notices attached to each file. Plus, it slightly improves server performance as well, as there's no longer the need to construct several intermediate objects over and over just to show a static image.

I thought about having .svg files instead of py components for SVGs.
Do not want to do that because we depend on Tailwind CSS utility classes which will be listed in the class (respectively FastHTML's cls) attribute of the <svg> tags sent to the client instead of attrs of the <svg> tag itself.

With external .svg file we would have final values for colors. A solution with string replacements after the reading of SVG files is sth. I do not really want to implement.

We want to be able to configure colors

<svg stroke="black">  <svg stroke="white"> 

Example pseudo-code of current implementation:

constants.py

STROKE_ACCENT: t.Final[dict[str, str]] = { "dark": "white", "light": "black" }

icons.py

from fasthtml import svg import constants as c THEME: str = "dark" def icon() -> t.Any: return fh.Svg( svg.Path(...), cls=f"stroke-{c.STROKE_ACCENT[THEME]}"" )

I am open for discussion. It has for sure benefits when dealing with .svg files which can easily be edited/ downloaded etc..

capella_model_explorer/main.py

capella_model_explorer/components.py

.github/workflows/build-test-publish.yml

capella_model_explorer/components.py

Wuestengecko · 2025-01-28T14:34:29Z

capella_model_explorer/components.py

+        ft.Div(model_element["uuid"], cls="text-xs text-sky-700")
+        if state.show_uuids
+        else None,


In the future, we'll probably want to make this a client- (or session-) specific setting that's configurable via some settings UI.

capella_model_explorer/main.py

capella_model_explorer/__main__.py

Wuestengecko · 2025-02-07T09:34:36Z

New is also an always enabled hot template reloading.

Please add a way to disable that.

uvicorn's live reloading feature injects a websocket connection that reloads the page automatically. Problem with that is that it also tries to reload the page when that websocket connection breaks, for example due to the server going down. This reload then of course fails, because the server is down now, and just shows an error page. So the effect is that you can't just keep an old version of a page opened in the background. I want to be able to do just that, for example to compare against a newer template version, or just to look at the current DOM and make template changes without constantly being thrown around in the page inspector due to the reloads.

Also, the feature should be disabled when deploying the docker image to e.g. the Collab Manager, where the templates are immutable anyway.

capella_model_explorer/constants.py

CONTRIBUTING.md

capella_model_explorer/main.py

Wuestengecko

Haven't looked at much of the actual code yet. More important stuff came up, so I don't know when I'll be able to. So here you go.

.prettierignore

.pre-commit-config.yaml

Wuestengecko · 2025-02-07T10:23:05Z

pyproject.toml

-  "Programming Language :: Python :: 3.11",
-  "Programming Language :: Python :: 3.12",
-  "Programming Language :: Python :: 3.13",
+    "Development Status :: 1 - Planning",


Why did you also change the indentation width of this entire file? We're using 2 spaces in Jinja as well, so it's not like everything else is 4 spaces anyway. This just seems unnecessary to me.

mysterious effect. fixed that. will appear with next push.

pyproject.toml

Wuestengecko · 2025-02-07T10:27:11Z

static/README.md

I don't think we need a README for /static in a web app 🙃

idea was to document how the .ico can be made. forgot to push the locally got ignored dev subfolder.
after we checked that chrome understands to display .svg favicons directl too, i remove this anyway.

Wuestengecko · 2025-02-07T15:02:57Z

capella_model_explorer/__main__.py

+    subprocess.run(
+        cmd,
+        check=True,
+        capture_output=False,
+    )


Suggested change

subprocess.run(

cmd,

check=True,

capture_output=False,

)

subprocess.check_call(cmd)

Wuestengecko · 2025-02-07T15:10:53Z

capella_model_explorer/__main__.py

+    )
+
+
+def run_local():


cme run local needs to build the CSS if it doesn't exist already (for example after a fresh clone).

nice one. thx!

Wuestengecko · 2025-02-07T15:13:10Z

capella_model_explorer/__main__.py

+            ]
+        )
+    cmd.append("capella_model_explorer.main:app")
+    print(" ".join(cmd))


Left-over debug print.

not really, do this after all of the cmd runs. want to leave that including the non-dev case run local.
may help to get this line from anybody, if sth went wrong...

Wuestengecko · 2025-02-07T15:30:57Z

capella_model_explorer/__main__.py

+    thread = threading.Thread(target=build_css, kwargs={"watch": True})
+    thread.start()


This doesn't need to be a thread. We can simply do the launch preparation serially, then start the two processes with Popen(), and await both of them using:

with uvicorn, tailwindcli: time.sleep(float("inf"))

Wuestengecko · 2025-02-07T15:35:44Z

capella_model_explorer/__main__.py

+    if not pathlib.Path(c.TEMPLATES_DIR).is_dir():
+        raise SystemExit(f"Templates directory '{c.TEMPLATES_DIR}' not found.")


Suggested change

if not pathlib.Path(c.TEMPLATES_DIR).is_dir():

raise SystemExit(f"Templates directory '{c.TEMPLATES_DIR}' not found.")

if not pathlib.Path(c.TEMPLATES_DIR).is_dir():

raise SystemExit(f"Templates directory not found: {c.TEMPLATES_DIR}")

jamilraichouni · 2025-02-10T11:30:33Z

New is also an always enabled hot template reloading.

Please add a way to disable that.

uvicorn's live reloading feature injects a websocket connection that reloads the page automatically. Problem with that is that it also tries to reload the page when that websocket connection breaks, for example due to the server going down. This reload then of course fails, because the server is down now, and just shows an error page. So the effect is that you can't just keep an old version of a page opened in the background. I want to be able to do just that, for example to compare against a newer template version, or just to look at the current DOM and make template changes without constantly being thrown around in the page inspector due to the reloads.

Also, the feature should be disabled when deploying the docker image to e.g. the Collab Manager, where the templates are immutable anyway.

One can set CME_LIVE_MODE=0. My PR comment was misleading. See also:

cme run local -h

Wuestengecko · 2025-02-10T12:42:53Z

Dockerfile

+# }}}
+
+# install Nodep kgs and build the CSS {{{
+RUN npm clean-install && uv run python3 -m capella_model_explorer build css


We don't even need a multi-stage build, we can just remove the node_modules right here. They're not needed after this step anymore, as far as I can tell.

Suggested change

RUN npm clean-install && uv run python3 -m capella_model_explorer build css

RUN npm clean-install && uv run python3 -m capella_model_explorer build css && rm -rf node_modules

This introduces a major change by replacing the FastAPI backend and React frontend with FastHTML. The integration involves reusing existing code where possible, but also includes significant rewrites that affect the application's behavior. This update aims to enhance performance and streamline the development process. This commit also introduces project management tool which replaces the Makefile with a Python CLI tool. The tool manages the project, including building the Docker image, running the app in a container, and running the app locally. The tool also builds the Tailwind CSS stylesheet. The app always runs with hot template reloading enabled. In development mode, it also runs with hot code reloading. After cloning the project, one can get further information by running: ```bash cme -h cme run -h cme build -h ``` Co-authored-by: Martin Lehmann <[email protected]>

jamilraichouni force-pushed the fasthtml branch 5 times, most recently from b7cde84 to e0c22bf Compare January 27, 2025 23:22

Wuestengecko reviewed Jan 28, 2025

View reviewed changes

jamilraichouni force-pushed the fasthtml branch 24 times, most recently from 8e79d21 to 2391551 Compare January 30, 2025 13:23

jamilraichouni force-pushed the fasthtml branch 3 times, most recently from 6d7bbb9 to 0134fe1 Compare February 7, 2025 08:57

Wuestengecko reviewed Feb 7, 2025

View reviewed changes

capella_model_explorer/__main__.py Outdated Show resolved Hide resolved

jamilraichouni force-pushed the fasthtml branch 6 times, most recently from 6b86c3c to cdd0938 Compare February 7, 2025 12:37

jamilraichouni marked this pull request as ready for review February 7, 2025 12:49

jamilraichouni force-pushed the fasthtml branch from cdd0938 to d4c4c78 Compare February 7, 2025 13:03

jamilraichouni commented Feb 7, 2025

View reviewed changes

capella_model_explorer/constants.py Outdated Show resolved Hide resolved

jamilraichouni commented Feb 7, 2025

View reviewed changes

CONTRIBUTING.md Outdated Show resolved Hide resolved

jamilraichouni force-pushed the fasthtml branch 3 times, most recently from f46b53b to 8c8f1a5 Compare February 9, 2025 07:11

jamilraichouni commented Feb 9, 2025

View reviewed changes

capella_model_explorer/main.py Outdated Show resolved Hide resolved

Wuestengecko reviewed Feb 10, 2025

View reviewed changes

jamilraichouni force-pushed the fasthtml branch 4 times, most recently from 1e69029 to 2173540 Compare February 10, 2025 11:26

Wuestengecko reviewed Feb 10, 2025

View reviewed changes

jamilraichouni force-pushed the fasthtml branch 2 times, most recently from 5b3b2ea to 2e36557 Compare February 10, 2025 13:45

jamilraichouni force-pushed the fasthtml branch from 2e36557 to d7de46a Compare February 10, 2025 13:59

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Integrate FastHTML replacing FastAPI and React #81

feat: Integrate FastHTML replacing FastAPI and React #81

jamilraichouni commented Jan 27, 2025 •

edited

Loading

Wuestengecko left a comment

Wuestengecko Jan 28, 2025

jamilraichouni Jan 28, 2025 •

edited

Loading

Wuestengecko Jan 28, 2025

jamilraichouni Feb 10, 2025

Wuestengecko commented Feb 7, 2025

Wuestengecko left a comment

Wuestengecko Feb 7, 2025

jamilraichouni Feb 10, 2025

Wuestengecko Feb 7, 2025

jamilraichouni Feb 10, 2025

Wuestengecko Feb 7, 2025

jamilraichouni Feb 10, 2025

Wuestengecko Feb 7, 2025

jamilraichouni Feb 10, 2025

Wuestengecko Feb 7, 2025

jamilraichouni Feb 10, 2025

Wuestengecko Feb 7, 2025

Wuestengecko Feb 7, 2025

jamilraichouni commented Feb 10, 2025

Wuestengecko Feb 10, 2025

		thread = threading.Thread(target=build_css, kwargs={"watch": True})
		thread.start()

		if not pathlib.Path(c.TEMPLATES_DIR).is_dir():
		raise SystemExit(f"Templates directory '{c.TEMPLATES_DIR}' not found.")

	RUN npm clean-install && uv run python3 -m capella_model_explorer build css
	RUN npm clean-install && uv run python3 -m capella_model_explorer build css && rm -rf node_modules

feat: Integrate FastHTML replacing FastAPI and React #81

Are you sure you want to change the base?

feat: Integrate FastHTML replacing FastAPI and React #81

Conversation

jamilraichouni commented Jan 27, 2025 • edited Loading

Open issues/ topics

Integration in Capella Collaboration Manager

Wuestengecko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamilraichouni Jan 28, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Wuestengecko commented Feb 7, 2025

Wuestengecko left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jamilraichouni commented Feb 10, 2025

Choose a reason for hiding this comment

jamilraichouni commented Jan 27, 2025 •

edited

Loading

jamilraichouni Jan 28, 2025 •

edited

Loading