ENG-96 Create new relationship between nodes

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -2,14 +2,17 @@ import { ItemView, TFile, WorkspaceLeaf } from "obsidian";
 import { createRoot, Root } from "react-dom/client";
 import DiscourseGraphPlugin from "~/index";
 import { getDiscourseNodeFormatExpression } from "~/utils/getDiscourseNodeFormatExpression";
+import { RelationshipSection } from "~/components/RelationshipSection";
 import { VIEW_TYPE_DISCOURSE_CONTEXT } from "~/types";
+import { PluginProvider, usePlugin } from "~/components/PluginContext";
 
-interface DiscourseContextProps {
+type DiscourseContextProps = {
   activeFile: TFile | null;
-  plugin: DiscourseGraphPlugin;
-}
+};
+
+const DiscourseContext = ({ activeFile }: DiscourseContextProps) => {
+  const plugin = usePlugin();
 
-const DiscourseContext = ({ activeFile, plugin }: DiscourseContextProps) => {
   const extractContentFromTitle = (
     format: string | undefined,
     title: string,
@@ -47,24 +50,40 @@ const DiscourseContext = ({ activeFile, plugin }: DiscourseContextProps) => {
       return <div>Unknown node type: {frontmatter.nodeTypeId}</div>;
     }
     return (
-      <div>
-        <div
-          style={{
-            fontSize: "1.2em",
-            fontWeight: "bold",
-            marginBottom: "8px",
-          }}
-        >
-          {nodeType.name || "Unnamed Node Type"}
+      <>
+        <div style={{ marginBottom: "1.5rem" }}>
+          <div
+            style={{
+              fontSize: "1.2em",
+              fontWeight: "bold",
+              marginBottom: "8px",
+            }}
+          >
+            {nodeType.name || "Unnamed Node Type"}
+          </div>
+
+          {nodeType.format && (
+            <div style={{ marginBottom: "4px" }}>
+              <span style={{ fontWeight: "bold" }}>Content: </span>
+              {extractContentFromTitle(nodeType.format, activeFile.basename)}
+            </div>
+          )}
         </div>
 
-        {nodeType.format && (
-          <div style={{ marginBottom: "4px" }}>
-            <span style={{ fontWeight: "bold" }}>Content: </span>
-            {extractContentFromTitle(nodeType.format, activeFile.basename)}
-          </div>
-        )}
-      </div>
+        <div className="relationships-section">
+          <h5
+            style={{
+              marginTop: "1rem",
+              marginBottom: "0.75rem",
+              borderBottom: "1px solid var(--background-modifier-border)",
+              paddingBottom: "0.25rem",
+            }}
+          >
+            Relationships
+          </h5>
+          <RelationshipSection key={activeFile.path} activeFile={activeFile} />
+        </div>
+      </>
     );
   };
 
@@ -127,7 +146,9 @@ export class DiscourseContextView extends ItemView {
   updateView(): void {
     if (this.root) {
       this.root.render(
-        <DiscourseContext activeFile={this.activeFile} plugin={this.plugin} />,
+        <PluginProvider plugin={this.plugin}>
+          <DiscourseContext activeFile={this.activeFile} />
+        </PluginProvider>,
       );
     }
   }

apps/obsidian/src/components/DropdownSelect.tsx

@@ -0,0 +1,85 @@
+import { DropdownComponent } from "obsidian";
+import { useEffect, useRef } from "react";
+
+type DropdownSelectProps<T> = {
+  options: T[];
+  onSelect: (item: T | null) => void;
+  placeholder?: string;
+  getItemText: (item: T) => string;
+};
+
+const DropdownSelect = <T,>({
+  options,
+  onSelect,
+  placeholder = "Select...",
+  getItemText,
+}: DropdownSelectProps<T>) => {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const dropdownRef = useRef<DropdownComponent | null>(null);
+
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    if (!dropdownRef.current) {
+      dropdownRef.current = new DropdownComponent(containerRef.current);
+    }
+
+    const dropdown = dropdownRef.current;
+    const currentValue = dropdown.getValue();
+
+    dropdown.selectEl.empty();
+
+    dropdown.addOption("", placeholder);
+
+    options.forEach((option) => {
+      const text = getItemText(option);
+      dropdown.addOption(text, text);
+    });
+
+    if (
+      currentValue &&
+      options.some((opt) => getItemText(opt) === currentValue)
+    ) {
+      dropdown.setValue(currentValue);
+    }
+
+    const onChangeHandler = (value: string) => {
+      const selectedOption =
+        options.find((opt) => getItemText(opt) === value) || null;
+      dropdown.setValue(value);
+      onSelect(selectedOption);
+    };
+
+    dropdown.onChange(onChangeHandler);
+
+    if (options && options.length === 1 && !currentValue) {
+      dropdown.setValue(getItemText(options[0] as T));
+    }
+
+    return () => {
+      dropdown.onChange(() => {});
+    };
+  }, [options, onSelect, getItemText, placeholder]);
+
+  useEffect(() => {
+    return () => {
+      if (dropdownRef.current) {
+        dropdownRef.current.selectEl.empty();
+        dropdownRef.current = null;
+      }
+    };
+  }, []);
+
+  return (
+    <div
+      ref={containerRef}
+      className="dropdown-select"
+      style={{
+        width: "100%",
+        position: "relative",
+      }}
+    />
+  );
+};
+
+export default DropdownSelect;