WiP treeview

packages/gui/package.json

@@ -24,7 +24,7 @@
     "material-icons": "^1.13.13",
     "materialize-css": "^1.0.0",
     "meiosis-setup": "^6.2.3",
-    "mithril": "^2.2.13",
+    "mithril": "^2.2.14",
     "mithril-materialized": "^1.3.5",
     "mithril-ui-form": "^1.10.16",
     "stopwords-en": "^0.3.0",
@@ -45,4 +45,4 @@
     "ts-node": "^10.9.2",
     "typescript": "^5.7.3"
   }
-}
+}

packages/gui/src/components/settings-page.ts

@@ -17,6 +17,7 @@ import { Collapsible, FlatButton, Tabs } from 'mithril-materialized';
 import { attrForm, AttributeType } from '../models/forms';
 import { TextInputWithClear } from './ui/text-input-with-clear';
 import { scrollToActiveItem, sortByLabel } from '../utils';
+import { TreeNode, TreeView } from './ui/treeview';
 
 export const SettingsPage: MeiosisComponent = () => {
   let edit = false;
@@ -95,6 +96,35 @@ export const SettingsPage: MeiosisComponent = () => {
             actions.setAttributeFilter(v);
           },
         }),
+
+        m(TreeView, {
+          className: 'col s12',
+          data: {
+            label: 'World',
+            expanded: true,
+            children: [
+              {
+                label: 'Europe',
+                children: [
+                  {
+                    label: 'Netherlands',
+                    children: [
+                      {
+                        label: 'North Holland',
+                        children: [{ label: 'Amsterdam' }, { label: 'Haarlem' }],
+                      },
+                      {
+                        label: 'South Holland',
+                        children: [{ label: 'The Hague' }, { label: 'Rotterdam' }],
+                      },
+                    ],
+                  },
+                ],
+              },
+            ],
+          } as TreeNode,
+        }),
+
         isAdmin && [
           m(FlatButton, {
             label: edit ? t('SAVE_BUTTON', 'LABEL') : t('EDIT_BUTTON', 'LABEL'),

packages/gui/src/components/ui/treeview.ts

@@ -0,0 +1,79 @@
+import m, { FactoryComponent, Attributes } from 'mithril';
+
+export interface TreeNode {
+  label: string;
+  children?: TreeNode[];
+  expanded?: boolean;
+}
+
+export const TreeView: FactoryComponent<{ data: TreeNode } & Attributes> = () => {
+  // Recursive function to toggle node expansion
+  const toggleNode = (node: TreeNode) => {
+    node.expanded = !node.expanded;
+  };
+
+  // Recursive function to render tree nodes
+  const renderNode = (node: TreeNode, level: number = 0): m.Vnode => {
+    const hasChildren = node.children && node.children.length > 0;
+    const indent = level * 20; // Pixels per level of indentation
+
+    return m('.tree-node', { style: { marginLeft: `${indent}px` } }, [
+      m(
+        '.node-content',
+        {
+          onclick: (e: Event) => {
+            e.stopPropagation(); // Prevent event bubbling
+            if (hasChildren) {
+              toggleNode(node);
+            }
+          },
+        },
+        [
+          // Toggle icon
+          hasChildren &&
+            m(
+              'span.toggle-icon',
+              {
+                style: { cursor: 'pointer', marginRight: '8px' },
+              },
+              node.expanded ? '▼' : '▶'
+            ),
+
+          // Node name
+          m(
+            'span.node-name',
+            {
+              style: {
+                cursor: hasChildren ? 'pointer' : 'default',
+              },
+            },
+            node.label
+          ),
+        ]
+      ),
+
+      // Render children if expanded
+      node.expanded &&
+        hasChildren &&
+        m(
+          '.node-children',
+          node.children!.map((child) => renderNode(child, level + 1))
+        ),
+    ]);
+  };
+
+  return {
+    view: ({ attrs: { data, ...attrs } }) =>
+      m(
+        '.tree-view',
+        {
+          ...attrs,
+          style: {
+            fontFamily: 'Arial, sans-serif',
+            padding: '1rem',
+          },
+        },
+        renderNode(data)
+      ),
+  };
+};

packages/gui/src/css/style.css

@@ -881,3 +881,33 @@ li input[type='text'] {
 .switch {
   margin-bottom: 8px;
 }
+
+/* START Tree view */
+.tree-view {
+  user-select: none;
+}
+
+.tree-node {
+  margin: 4px 0;
+}
+
+.node-content {
+  display: flex;
+  align-items: center;
+  padding: 4px;
+}
+
+.node-content:hover {
+  background-color: #f5f5f5;
+  border-radius: 4px;
+}
+
+.toggle-icon {
+  font-size: 12px;
+  color: #666;
+}
+
+.node-name {
+  font-size: 14px;
+}
+/* END Tree view */