async refreshWithNote(note) {
        this.$widget.show();

        this.css = {
            fontFamily: this.$container.css("font-family"),
            textColor: this.rgb2hex(this.$container.css("color")),
            mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
        };

        this.mapType = this.note.getLabelValue("mapType") === "tree" ? "tree" : "link";

        await libraryLoader.requireLibrary(libraryLoader.FORCE_GRAPH);

        this.graph = ForceGraph()(this.$container[0])
            .width(this.$container.width())
            .height(this.$container.height())
            .onZoom(zoom => this.setZoomLevel(zoom.k))
            .d3AlphaDecay(0.01)
            .d3VelocityDecay(0.08)
            .nodeCanvasObject((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
            .nodePointerAreaPaint((node, ctx) => this.paintNode(node, this.getColorForNode(node), ctx))
            .nodePointerAreaPaint((node, color, ctx) => {
                ctx.fillStyle = color;
                ctx.beginPath();
                ctx.arc(node.x, node.y, this.noteIdToSizeMap[node.id], 0, 2 * Math.PI, false);
                ctx.fill();
            })
            .nodeLabel(node => esc(node.name))
            .maxZoom(7)
            .warmupTicks(30)
            .linkDirectionalArrowLength(5)
            .linkDirectionalArrowRelPos(1)
            .linkWidth(1)
            .linkColor(() => this.css.mutedTextColor)
            .onNodeClick(node => appContext.tabManager.getActiveContext().setNote(node.id))
            .onNodeRightClick((node, e) => linkContextMenuService.openContextMenu(node.id, e));

        if (this.mapType === 'link') {
            this.graph
                .linkLabel(l => `${esc(l.source.name)} - <strong>${esc(l.name)}</strong> - ${esc(l.target.name)}`)
                .linkCanvasObject((link, ctx) => this.paintLink(link, ctx))
                .linkCanvasObjectMode(() => "after");
        }

        const mapRootNoteId = this.getMapRootNoteId();
        const data = await this.loadNotesAndRelations(mapRootNoteId);

        const nodeLinkRatio = data.nodes.length / data.links.length;
        const magnifiedRatio = Math.pow(nodeLinkRatio, 1.5);
        const charge = -20 / magnifiedRatio;
        const boundedCharge = Math.min(-3, charge);

        this.graph.d3Force('link').distance(40);
        this.graph.d3Force('center').strength(0.2);
        this.graph.d3Force('charge').strength(boundedCharge);
        this.graph.d3Force('charge').distanceMax(1000);
        this.graph.onNodeDragEnd(node => {
            node.fx = node.x;
            node.fy = node.y;
        });
        this.renderData(data);
    }

async refreshWithNote(e) {
                this.$widget.show(),
                this.css = {
                    fontFamily: this.$container.css("font-family"),
                    textColor: this.rgb2hex(this.$container.css("color")),
                    mutedTextColor: this.rgb2hex(this.$styleResolver.css("color"))
                },
                this.mapType = "tree" === this.note.getLabelValue("mapType") ? "tree" : "link",
                await at.A.requireLibrary(at.A.FORCE_GRAPH),
                this.graph = ForceGraph()(this.$container[0]).width(this.$container.width()).height(this.$container.height()).onZoom((t=>this.setZoomLevel(t.k))).d3AlphaDecay(.01).d3VelocityDecay(.08).nodeCanvasObject(((t,e)=>this.paintNode(t, this.getColorForNode(t), e))).nodePointerAreaPaint(((t,e)=>this.paintNode(t, this.getColorForNode(t), e))).nodePointerAreaPaint(((t,e,n)=>{
                    n.fillStyle = e,
                    n.beginPath(),
                    n.arc(t.x, t.y, this.noteIdToSizeMap[t.id], 0, 2 * Math.PI, !1),
                    n.fill()
                }
                )).nodeLabel((t=>Rt(t.name))).maxZoom(7).warmupTicks(30).linkDirectionalArrowLength(5).linkDirectionalArrowRelPos(1).linkWidth(1).linkColor((()=>this.css.mutedTextColor)).onNodeClick((e=>t.default.tabManager.getActiveContext().setNote(e.id))).onNodeRightClick(((t,e)=>Et.A.openContextMenu(t.id, e))),
                "link" === this.mapType && this.graph.linkLabel((t=>`${Rt(t.source.name)} - <strong>${Rt(t.name)}</strong> - ${Rt(t.target.name)}`)).linkCanvasObject(((t,e)=>this.paintLink(t, e))).linkCanvasObjectMode((()=>"after"));
                const n = this.getMapRootNoteId()
                  , i = await this.loadNotesAndRelations(n)
                  , o = i.nodes.length / i.links.length
                  , s = -20 / Math.pow(o, 1.5)
                  , a = Math.min(-3, s);
                this.graph.d3Force("link").distance(40),
                this.graph.d3Force("center").strength(.2),
                this.graph.d3Force("charge").strength(a),
                this.graph.d3Force("charge").distanceMax(1e3),
                this.renderData(i)
            }