feat(react/ribbon): port note map partially

apps/client/src/widgets/ribbon/NoteMapTab.tsx

@@ -0,0 +1,16 @@
+import { TabContext } from "./ribbon-interface";
+import NoteMapWidget from "../note_map";
+import { useLegacyWidget } from "../react/hooks";
+
+export default function NoteMapTab({ note, noteContext }: TabContext) {
+    const noteMapWidget = useLegacyWidget(() => new NoteMapWidget("ribbon"), {
+        noteContext,
+        containerClassName: "note-map-container"
+    });
+
+    return (
+        <div className="note-map-ribbon-widget">
+            {noteMapWidget}
+        </div>
+    );
+}

apps/client/src/widgets/ribbon/Ribbon.tsx

@@ -18,6 +18,7 @@ import SimilarNotesTab from "./SimilarNotesTab";
 import FilePropertiesTab from "./FilePropertiesTab";
 import ImagePropertiesTab from "./ImagePropertiesTab";
 import NotePathsTab from "./NotePathsTab";
+import NoteMapTab from "./NoteMapTab";
 
 interface TitleContext {
     note: FNote | null | undefined;
@@ -121,9 +122,11 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
         toggleCommand: "toggleRibbonTabNotePaths"
     },
     {
-        // NoteMapRibbonWidget
         title: t("note_map.title"),
-        icon: "bx bxs-network-chart"
+        icon: "bx bxs-network-chart",
+        content: NoteMapTab,
+        show: true,
+        toggleCommand: "toggleRibbonTabNoteMap"
     },
     {
         title: t("similar_notes.title"),
@@ -142,7 +145,7 @@ const TAB_CONFIGURATION = numberObjectsInPlace<TabConfiguration>([
 ]);
 
 export default function Ribbon() {
-    const { note, ntxId, hoistedNoteId, notePath } = useNoteContext();
+    const { note, ntxId, hoistedNoteId, notePath, noteContext } = useNoteContext();
     const titleContext: TitleContext = { note };
     const [ activeTabIndex, setActiveTabIndex ] = useState<number | undefined>();
     const filteredTabs = useMemo(() => TAB_CONFIGURATION.filter(tab => typeof tab.show === "boolean" ? tab.show : tab.show?.(titleContext)), [ titleContext, note ]);
@@ -183,7 +186,8 @@ export default function Ribbon() {
                             hidden: !isActive,
                             ntxId,
                             hoistedNoteId,
-                            notePath
+                            notePath,
+                            noteContext
                         });
                     })}
                 </div>

apps/client/src/widgets/ribbon/ribbon-interface.ts

@@ -1,3 +1,4 @@
+import NoteContext from "../../components/note_context";
 import FNote from "../../entities/fnote";
 
 export interface TabContext {
@@ -6,4 +7,5 @@ export interface TabContext {
     ntxId?: string | null;
     hoistedNoteId?: string;
     notePath?: string | null;
+    noteContext?: NoteContext;
 }

apps/client/src/widgets/ribbon/style.css

@@ -245,4 +245,26 @@
 .note-path-list .path-search a {
     font-style: italic;
 }
+/* #endregion */
+
+/* #region Note map */
+.note-map-ribbon-widget {
+    position: relative;
+}
+
+.note-map-ribbon-widget .note-map-container {
+    height: 300px;
+}
+
+.note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
+    position: absolute;
+    right: 5px;
+    bottom: 5px;
+    z-index: 1000;
+}
+
+.style-resolver {
+    color: var(--muted-text-color);
+    display: none;
+}
 /* #endregion */

apps/client/src/widgets/ribbon_widgets/note_map.ts

@@ -3,63 +3,20 @@ import NoteMapWidget from "../note_map.js";
 import { t } from "../../services/i18n.js";
 
 const TPL = /*html*/`
-<div class="note-map-ribbon-widget">
-    <style>
-        .note-map-ribbon-widget {
-            position: relative;
-        }
-
-        .note-map-ribbon-widget .note-map-container {
-            height: 300px;
-        }
-
-        .note-map-ribbon-widget .open-full-button, .note-map-ribbon-widget .collapse-button {
-            position: absolute;
-            right: 5px;
-            bottom: 5px;
-            z-index: 1000;
-        }
-
-        .style-resolver {
-            color: var(--muted-text-color);
-            display: none;
-        }
-    </style>
 
     <button class="bx bx-arrow-to-bottom icon-action open-full-button" title="${t("note_map.open_full")}"></button>
     <button class="bx bx-arrow-to-top icon-action collapse-button" style="display: none;" title="${t("note_map.collapse")}"></button>
 
-    <div class="note-map-container"></div>
+
 </div>`;
 
 export default class NoteMapRibbonWidget extends NoteContextAwareWidget {
 
     private openState!: "small" | "full";
-    private noteMapWidget: NoteMapWidget;
     private $container!: JQuery<HTMLElement>;
     private $openFullButton!: JQuery<HTMLElement>;
     private $collapseButton!: JQuery<HTMLElement>;
 
-    constructor() {
-        super();
-
-        this.noteMapWidget = new NoteMapWidget("ribbon");
-        this.child(this.noteMapWidget);
-    }
-
-    get name() {
-        return "noteMap";
-    }
-
-    get toggleCommand() {
-        return "toggleRibbonTabNoteMap";
-    }
-
-    getTitle() {
-        return {
-            show: this.isEnabled()
-        };
-    }
 
     doRender() {
         this.$widget = $(TPL);