[ENG-40] Identify node obsidian

apps/obsidian/src/components/DiscourseContextView.tsx

@@ -0,0 +1,141 @@
+import { ItemView, TFile, WorkspaceLeaf } from "obsidian";
+import { createRoot, Root } from "react-dom/client";
+import DiscourseGraphPlugin from "~/index";
+import { getDiscourseNodeFormatExpression } from "~/utils/getDiscourseNodeFormatExpression";
+import { VIEW_TYPE_DISCOURSE_CONTEXT } from "~/types";
+
+interface DiscourseContextProps {
+  activeFile: TFile | null;
+  plugin: DiscourseGraphPlugin;
+}
+
+const DiscourseContext = ({ activeFile, plugin }: DiscourseContextProps) => {
+  const extractContentFromTitle = (
+    format: string | undefined,
+    title: string,
+  ): string => {
+    if (!format) return "";
+    const regex = getDiscourseNodeFormatExpression(format);
+    const match = title.match(regex);
+    return match?.[1] ?? title;
+  };
+
+  const renderContent = () => {
+    if (!activeFile) {
+      return <div>No file is open</div>;
+    }
+
+    const fileMetadata = plugin.app.metadataCache.getFileCache(activeFile);
+    if (!fileMetadata) {
+      return <div>File metadata not available</div>;
+    }
+
+    const frontmatter = fileMetadata.frontmatter;
+    if (!frontmatter) {
+      return <div>No discourse node data found</div>;
+    }
+
+    if (!frontmatter.nodeTypeId) {
+      return <div>Not a discourse node (no nodeTypeId)</div>;
+    }
+
+    const nodeType = plugin.settings.nodeTypes.find(
+      (type) => type.id === frontmatter.nodeTypeId,
+    );
+
+    if (!nodeType) {
+      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>
+
+        {nodeType.format && (
+          <div style={{ marginBottom: "4px" }}>
+            <span style={{ fontWeight: "bold" }}>Content: </span>
+            {extractContentFromTitle(nodeType.format, activeFile.basename)}
+          </div>
+        )}
+      </div>
+    );
+  };
+
+  return (
+    <div>
+      <h4 style={{ marginTop: 0 }}>Discourse Context</h4>
+      {renderContent()}
+    </div>
+  );
+};
+
+export class DiscourseContextView extends ItemView {
+  private plugin: DiscourseGraphPlugin;
+  private activeFile: TFile | null = null;
+  private root: Root | null = null;
+
+  constructor(leaf: WorkspaceLeaf, plugin: DiscourseGraphPlugin) {
+    super(leaf);
+    this.plugin = plugin;
+  }
+
+  setActiveFile(file: TFile | null): void {
+    this.activeFile = file;
+    this.updateView();
+  }
+
+  getViewType(): string {
+    return VIEW_TYPE_DISCOURSE_CONTEXT;
+  }
+
+  getDisplayText(): string {
+    return "Discourse Context";
+  }
+
+  getIcon(): string {
+    return "telescope";
+  }
+
+  async onOpen(): Promise<void> {
+    const container = this.containerEl.children[1];
+    if (container) {
+      container.empty();
+      container.addClass("discourse-context-container");
+
+      this.root = createRoot(container);
+
+      this.activeFile = this.app.workspace.getActiveFile();
+
+      this.updateView();
+
+      this.registerEvent(
+        this.app.workspace.on("file-open", (file) => {
+          this.activeFile = file;
+          this.updateView();
+        }),
+      );
+    }
+  }
+
+  updateView(): void {
+    if (this.root) {
+      this.root.render(
+        <DiscourseContext activeFile={this.activeFile} plugin={this.plugin} />,
+      );
+    }
+  }
+
+  async onClose(): Promise<void> {
+    if (this.root) {
+      this.root.unmount();
+      this.root = null;
+    }
+  }
+}

apps/obsidian/src/components/NodeTypeModal.tsx

@@ -1,4 +1,4 @@
-import { App, Editor, SuggestModal } from "obsidian";
+import { App, Editor, SuggestModal, TFile, Notice } from "obsidian";
 import { DiscourseNode } from "../types";
 import { getDiscourseNodeFormatExpression } from "../utils/getDiscourseNodeFormatExpression";
 
@@ -25,8 +25,38 @@ export class NodeTypeModal extends SuggestModal<DiscourseNode> {
   renderSuggestion(nodeType: DiscourseNode, el: HTMLElement) {
     el.createEl("div", { text: nodeType.name });
   }
+  async createDiscourseNode(
+    title: string,
+    nodeType: DiscourseNode,
+  ): Promise<TFile | null> {
+    try {
+      const instanceId = `${nodeType.id}-${Date.now()}`;
+      const filename = `${title}.md`;
 
-  onChooseSuggestion(nodeType: DiscourseNode) {
+      await this.app.vault.create(filename, "");
+
+      const newFile = this.app.vault.getAbstractFileByPath(filename);
+      if (!(newFile instanceof TFile)) {
+        throw new Error("Failed to create new file");
+      }
+
+      await this.app.fileManager.processFrontMatter(newFile, (fm) => {
+        fm.nodeTypeId = nodeType.id;
+        fm.nodeInstanceId = instanceId;
+      });
+
+      new Notice(`Created discourse node: ${title}`);
+      return newFile;
+    } catch (error: unknown) {
+      const errorMessage =
+        error instanceof Error ? error.message : "Unknown error";
+      new Notice(`Error creating discourse node: ${errorMessage}`, 5000);
+      console.error("Failed to create discourse node:", error);
+      return null;
+    }
+  }
+
+  async onChooseSuggestion(nodeType: DiscourseNode) {
     const selectedText = this.editor.getSelection();
     const regex = getDiscourseNodeFormatExpression(nodeType.format);
 
@@ -39,6 +69,9 @@ export class NodeTypeModal extends SuggestModal<DiscourseNode> {
       nodeFormat[2]?.replace(/\\/g, "");
     if (!nodeFormat) return;
 
-    this.editor.replaceSelection(`[[${formattedNodeName}]]`);
+    const newFile = await this.createDiscourseNode(formattedNodeName, nodeType);
+    if (newFile) {
+      this.editor.replaceSelection(`[[${formattedNodeName}]]`);
+    }
   }
 }

apps/obsidian/src/index.ts

@@ -1,7 +1,9 @@
 import { Plugin } from "obsidian";
 import { SettingsTab } from "~/components/Settings";
-import { Settings } from "./types";
-import { registerCommands } from "./utils/registerCommands";
+import { Settings } from "~/types";
+import { registerCommands } from "~/utils/registerCommands";
+import { DiscourseContextView } from "~/components/DiscourseContextView";
+import { VIEW_TYPE_DISCOURSE_CONTEXT } from "~/types";
 
 const DEFAULT_SETTINGS: Settings = {
   nodeTypes: [],
@@ -16,9 +18,47 @@ export default class DiscourseGraphPlugin extends Plugin {
     await this.loadSettings();
     registerCommands(this);
     this.addSettingTab(new SettingsTab(this.app, this));
+
+    this.registerView(
+      VIEW_TYPE_DISCOURSE_CONTEXT,
+      (leaf) => new DiscourseContextView(leaf, this),
+    );
+
+    this.addRibbonIcon("telescope", "Toggle Discourse Context", () => {
+      this.toggleDiscourseContextView();
+    });
   }
 
-  onunload() {}
+  toggleDiscourseContextView() {
+    const { workspace } = this.app;
+    const existingLeaf = workspace.getLeavesOfType(
+      VIEW_TYPE_DISCOURSE_CONTEXT,
+    )[0];
+
+    if (existingLeaf) {
+      existingLeaf.detach();
+    } else {
+      const activeFile = workspace.getActiveFile();
+      const leaf = workspace.getRightLeaf(false);
+      if (leaf) {
+        const layoutChangeHandler = () => {
+          const view = leaf.view;
+          if (view instanceof DiscourseContextView) {
+            view.setActiveFile(activeFile);
+            workspace.off("layout-change", layoutChangeHandler);
+          }
+        };
+
+        workspace.on("layout-change", layoutChangeHandler);
+
+        leaf.setViewState({
+          type: VIEW_TYPE_DISCOURSE_CONTEXT,
+          active: true,
+        });
+        workspace.revealLeaf(leaf);
+      }
+    }
+  }
 
   async loadSettings() {
     this.settings = Object.assign({}, DEFAULT_SETTINGS, await this.loadData());

apps/obsidian/src/types.ts

@@ -23,3 +23,5 @@ export type Settings = {
   discourseRelations: DiscourseRelation[];
   relationTypes: DiscourseRelationType[];
 };
+
+export const VIEW_TYPE_DISCOURSE_CONTEXT = "discourse-context-view";

apps/obsidian/src/utils/registerCommands.ts

@@ -52,4 +52,12 @@ export const registerCommands = (plugin: DiscourseGraphPlugin) => {
       new NodeTypeModal(plugin.app, editor, plugin.settings.nodeTypes).open();
     },
   });
+
+  plugin.addCommand({
+    id: "toggle-discourse-context",
+    name: "Toggle Discourse Context",
+    callback: () => {
+      plugin.toggleDiscourseContextView();
+    },
+  });
 };