introduced template clustering

capella_model_explorer/backend/explorer.py

@@ -41,7 +41,7 @@ def __post_init__(self):
             allow_headers=["*"],
         )
         self.env = Environment()
-        self.templates = index_templates(self.templates_path)
+        self.grouped_templates, self.templates = index_templates(self.templates_path)
         self.app.state.templates = templates = Jinja2Templates(
             directory=PATH_TO_FRONTEND
         )
@@ -59,11 +59,8 @@ def configure_routes(self):
         @self.app.get("/api/views")
         def read_templates():
             # list all templates in the templates folder from .yaml
-            self.templates = index_templates(self.templates_path)
-            return [
-                {"idx": key, **template}
-                for key, template in self.templates.items()
-            ]
+            self.grouped_templates, self.templates = index_templates(self.templates_path)
+            return self.grouped_templates
 
         @self.app.get("/api/objects/{uuid}")
         def read_object(uuid: str):
@@ -144,14 +141,25 @@ async def catch_all(request: Request, rest_of_path: str):
 
 
 def index_templates(path: pathlib.Path) -> dict[str, t.Any]:
+    templates_grouped: dict[str, t.Any] = {"other": []}
     templates: dict[str, t.Any] = {}
     for template_file in path.glob("*.yaml"):
         template = yaml.safe_load(template_file.read_text(encoding="utf8"))
+        idx = urlparse.quote(template_file.name.replace(".yaml", ""))
+        record = {"idx": idx, **template}
+        if "category" in template:
+            category = template["category"]
+            if category not in templates_grouped:
+                templates_grouped[category] = []
+            templates_grouped[category].append(record)
+        else:
+            templates_grouped["other"].append(record)
+        templates[idx] = template
         name = template_file.name.replace(".yaml", "")
         templates[urlparse.quote(name)] = template
         # later we could add here count of objects that can be rendered
         # with this template
-    return templates
+    return templates_grouped, templates
 
 
 def find_objects(model, obj_type, below=None, attr=None):

frontend/src/components/Breadcrumbs.jsx

@@ -18,10 +18,11 @@ export const Breadcrumbs = () => {
   const fetchViewName = async (idx) => {
     const response = await fetch(API_BASE_URL + `/views`);
 
-    const views = await response.json();
-    const view = views.find(v => v.idx.toString() === idx);
+    const viewsDict = await response.json();
+    const allViews = Object.values(viewsDict).flat();
+    const view = allViews.find(v => v.idx.toString() === idx);
     return view ? view.name : idx;
-  };
+};
 
   // Function to fetch object names
   const fetchObjectName = async (uuid) => {

frontend/src/components/ViewsList.jsx

@@ -1,10 +1,27 @@
 import React from 'react';
 import { TemplateCard } from './TemplateCard';
 
-export const ViewsList = ({templates, cardClickCallback}) => (
-    <div className='flex flex-wrap justify-center gap-y-2'>
-        {templates.map(template => (
-          <TemplateCard key={template.idx} template={template} onClickCallback={cardClickCallback} />  
-        ))}
+export const ViewsList = ({templates, cardClickCallback}) => {
+  let categories = {
+    "oa": "Operational Analysis Reports", 
+    "sa": "System Analysis Reports",
+    "la": "Logical Architecture Reports",
+    "pa": "Physical Architecture Reports",
+    "xc": "Cross-cutting Reports",
+    "other": "Other reports"};
+  return (
+    <div>
+      {Object.keys(categories).map(cat => (
+        (cat in templates) && (templates[cat].length > 0) && (
+        <div key={cat}>
+        <h2 key={cat + "h2"} className='text-2xl p-2'>{categories[cat]}</h2>
+        <div key={cat + "div"} className='flex flex-wrap justify-center gap-y-2'>
+            {templates[cat].map(template => (
+              <TemplateCard key={template.idx} template={template} onClickCallback={cardClickCallback} />  
+            ))}
+        </div>
+        </div>)
+      ))}
     </div>
-    );
+  );
+};

frontend/src/views/HomeView.jsx

@@ -12,7 +12,6 @@ export const HomeView = () => {
                 const response = await fetch(API_BASE_URL + '/model-info');
                 const data = await response.json();
                 setModelInfo(data);
-                console.log(data);
             } catch (err) {
                 setError('Failed to fetch model info: ' + err.message);
             }

templates/classes.yaml

@@ -1,6 +1,7 @@
 template: classes.html.j2
 name: Data Class
 description: Specifies structure of a data class. A class may be used to describe anything from a simple object relationship to a message on a bus.
+category: xc
 variable: 
   name: object
   type: Class

templates/diagrams.yaml

@@ -1,6 +1,7 @@
 template: diagrams.html.j2
 name: Diagrams
 description: Provides access to all human-made diagrams inside the model
+category: xc
 variable: 
   name: object
   type: AbstractDiagram

templates/logical-component.yaml

@@ -1,6 +1,7 @@
 template: logical-component.html.j2
 name: Logical Component
 description: Specifies a logical component. This is a ported template from a prototype project.
+category: la
 variable: 
   name: object
   type: LogicalComponent

templates/system-capability.yaml

@@ -1,6 +1,7 @@
 template: system-capability.html.j2
 name: System Capability
 description: Specifies what the system should be capable of and how it needs to interact with external actors.
+category: sa
 variable: 
   name: object
   type: Capability

templates/system_function.yaml

@@ -1,6 +1,7 @@
 template: system_function.html.j2
 name: System Function
 description: Specifies what the system should do and how it needs to interact with external actors.
+category: sa
 variable: 
   name: object
   type: SystemFunction