chore(react): reintroduce map type toggles

apps/client/src/widgets/note_map.ts

@@ -13,11 +13,6 @@ import type FNote from "../entities/fnote.js";
 const esc = utils.escapeHtml;
 
 const TPL = /*html*/`<div class="note-map-widget">
-    <div class="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
-      <button type="button" class="btn bx bx-network-chart tn-tool-button" title="${t("note-map.button-link-map")}" data-type="link"></button>
-      <button type="button" class="btn bx bx-sitemap tn-tool-button" title="${t("note-map.button-tree-map")}" data-type="tree"></button>
-    </div>
-
     <!-- UI for dragging Notes and link force -->
 
     <div class="btn-group-sm fixnodes-type-switcher content-floating-buttons bottom-left" role="group">
@@ -63,12 +58,6 @@ export default class NoteMapWidget extends NoteContextAwareWidget {
 
         new ResizeObserver(() => this.setDimensions()).observe(this.$container[0]);
 
-        this.$widget.find(".map-type-switcher button").on("click", async (e) => {
-            const type = $(e.target).closest("button").attr("data-type");
-
-            await attributeService.setLabel(this.noteId ?? "", "mapType", type);
-        });
-
         // Reading the status of the Drag nodes Ui element. Changing it´s color when activated.
         // Reading Force value of the link distance.
         this.$fixNodesButton.on("click", async (event) => {

apps/client/src/widgets/note_map/NoteMap.tsx

@@ -7,6 +7,8 @@ import { useElementSize, useNoteContext, useNoteLabel } from "../react/hooks";
 import ForceGraph, { LinkObject, NodeObject } from "force-graph";
 import { loadNotesAndRelations, NotesAndRelationsData } from "./data";
 import { CssData, setupRendering } from "./rendering";
+import ActionButton from "../react/ActionButton";
+import { t } from "../../services/i18n";
 
 interface NoteMapProps {
     note: FNote;
@@ -19,8 +21,7 @@ type MapType = "tree" | "link";
 export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
     const containerRef = useRef<HTMLDivElement>(null);
     const styleResolverRef = useRef<HTMLDivElement>(null);
-    const [ cssData, setCssData ] = useState<CssData>();
+    const [ mapTypeRaw, setMapType ] = useNoteLabel(note, "mapType");
-    const [ mapTypeRaw ] = useNoteLabel(note, "mapType");
     const mapType: MapType = mapTypeRaw === "tree" ? "tree" : "link";
 
     const graphRef = useRef<ForceGraph<NodeObject, LinkObject<NodeObject>>>();
@@ -35,7 +36,6 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
         graphRef.current = graph;
 
         const mapRootId = getMapRootNoteId(note.noteId, note, widgetMode);
-        console.log("Map root ID ", mapRootId);
         if (!mapRootId) return;
 
         const labelValues = (name: string) => note.getLabels(name).map(l => l.value) ?? [];
@@ -56,7 +56,7 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
         });
 
         return () => container.replaceChildren();
-    }, [ note ]);
+    }, [ note, mapType ]);
 
     // React to container size
     useEffect(() => {
@@ -66,6 +66,24 @@ export default function NoteMap({ note, widgetMode, parentRef }: NoteMapProps) {
 
     return (
         <div className="note-map-widget">
+            <div className="btn-group btn-group-sm map-type-switcher content-floating-buttons top-left" role="group">
+                <ActionButton
+                    icon="bx bx-network-chart"
+                    text={t("note-map.button-link-map")}
+                    disabled={mapType === "link"}
+                    onClick={() => setMapType("link")}
+                    frame
+                />
+
+                <ActionButton
+                    icon="bx bx-sitemap"
+                    text={t("note-map.button-tree-map")}
+                    disabled={mapType === "tree"}
+                    onClick={() => setMapType("tree")}
+                    frame
+                />
+            </div>
+
             <div ref={styleResolverRef} class="style-resolver" />
             <div ref={containerRef} className="note-map-container" />
         </div>

apps/client/src/widgets/react/ActionButton.tsx

@@ -12,9 +12,10 @@ export interface ActionButtonProps {
     triggerCommand?: CommandNames;
     noIconActionClass?: boolean;
     frame?: boolean;
+    disabled?: boolean;
 }
 
-export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame }: ActionButtonProps) {
+export default function ActionButton({ text, icon, className, onClick, triggerCommand, titlePosition, noIconActionClass, frame, disabled }: ActionButtonProps) {
     const buttonRef = useRef<HTMLButtonElement>(null);
     const [ keyboardShortcut, setKeyboardShortcut ] = useState<string[]>();
 
@@ -32,8 +33,9 @@ export default function ActionButton({ text, icon, className, onClick, triggerCo
 
     return <button
         ref={buttonRef}
-        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""}`}
+        class={`${className ?? ""} ${!noIconActionClass ? "icon-action" : "btn"} ${icon} ${frame ? "btn btn-primary" : ""} ${disabled ? "disabled" : ""}`}
         onClick={onClick}
         data-trigger-command={triggerCommand}
+        disabled={disabled}
     />;
 }