[Bug] Graph displays only on the focused notes

[JanChec]

The plugin currently has two usability issues when working with multiple notes in Obsidian:

1. Graph Visibility Limited to Focused Notes

The graph banner only displays on the actively focused note when notes are open side-by-side (e.g., in split panes). This makes it impossible to simultaneously view relationships across multiple notes, hindering workflows like knowledge reorganization, comparison, or contextual analysis.

Repro Steps:

1. Open two notes in split panes (vertical/horizontal).
2. Click on either pane to focus it → graph banner appears only on the focused note.
3. Switch focus to the other pane → banner disappears from the first note.

Expected Behavior:

Graph banners should be displayed on all open notes regardless of focus.

2. Graph Banner Causes Accidental Selections Due to UI Shifting

When clicking a non-focused note pane, the sudden appearance of the graph banner shifts the note content downward. This can cause accidental text selections or button clicks if the user interacts with the pane before the UI settles.

Repro Steps:

1. Open two notes in split panes.
2. Click on a link/button in the non-focused pane.
3. The graph banner loads abruptly, shifting content → your click may register on unintended elements.

This appears to be a problem on PCs fast enough to load the banner earlier than the user depresses the left click.

Expected Behavior:

The graph banner should load without disrupting UI elements, or render in a way that prevents content displacement (e.g., reserved space).
Workaround Suggestion

As noted in this comment, allowing users to display the graph banner at the bottom of notes (instead of the top) could mitigate the second issue by removing content shift. This could be a configurable option in plugin settings.

---

Thank you for your hard work on this plugin! Let me know if further details are needed. 🙌

[ras0q]

Thank you for writing the issue in detail!

In fact, I was aware of the problem that could only open one graph at the same time, and I was thinking about how to deal with it.

This problem is caused by the fact that the class representing the plugin can have only one graph now. I want to increase the number of graphs at the right time (and, if possible, delete them at a time when they are no longer needed)...

[HoBeom]

Hi @JanChec and @ras0q,

I found a temporary CSS workaround that helps position the graph banner at the bottom of notes, preventing UI shifting issues. However, there is still a problem in Read Mode, where the CSS does not apply correctly, and the issue persists.

Temporary CSS Fix (for Edit Mode)

This ensures that the graph banner stays at the bottom of the note in Edit Mode:

.markdown-preview-view {
    display: flex;
    flex-direction: column;
}

.graph-banner-content {
    order: 1;
    width: 100%;
    padding: 10px;
}

Remaining Issue in Read Mode
• This CSS only works in Edit Mode (.markdown-preview-view).
• The issue persists when switching between notes if the pane is in Read Mode, as the banner does not remain consistently positioned at the bottom.

Based on Feature Request #40 , I have added a footnote-graph option to allow users to place the graph banner at the bottom of the note.

/* https://github.com/mgmeyers/obsidian-style-settings */
/* @settings
name: Graph Banner
id: graph-banner
settings:
  - id: hide-graph-banner
    title: Hide Graph Banner
    type: class-toggle
    addCommand: true
  - id: graph-banner-type-select
    title: Select graph type
    type: class-select
    allowEmpty: false
    default: banner-graph
    options:
      - banner-graph
      - hanging-graph
      - footnote-graph
  - id: banner-height
    title: Banner Height
    description: The height of the banner. (e.g. 20vh, 200px)
    type: variable-text
    default: 20vh
  - id: banner-width
    title: Banner Width
    description: The width of the banner. (e.g. 20vh, 200px)
    type: variable-text
    default: 400px
*/

body {
  --banner-height: 20vh;
  --banner-width: 400px;
}

body.hide-graph-banner .graph-banner-content {
  display: none !important;
}

.banner-graph .graph-banner-content {
  width: auto;
  height: var(--banner-height);
  margin-bottom: 16px;
}

.hanging-graph .cm-sizer>div.view-content.graph-banner-content,
.hanging-graph .mod-header>div.view-content.graph-banner-content {
  display: block;
  position: fixed !important;
  right: 50px;
  top: 50px;
  z-index: 2;
  border-radius: 10px;
  border: 1px solid var(--background-modifier-border);
  width: var(--banner-width);
  height: var(--banner-height);
  margin-bottom: 16px;
}

.footnote-graph .markdown-source-view.mod-cm6,
.footnote-graph .markdown-reading-view {
    display: flex;
    flex-direction: column;
}

.footnote-graph .graph-banner-content {
    order: 99;
    width: 100%;
    margin-top: 10px;
    background: var(--background-primary);
    padding: 10px;
    border-top: 1px solid var(--background-modifier-border);
}

[ras0q]

Multiple graph views now available in v2.2.0!
I'm closing this issue...