Skip to content

Commit

Permalink
Updates:
Browse files Browse the repository at this point in the history
- Fixed settings icon dissapearing when view launched and then rendered
- Fixed view not working when opening from ribbon by calling render, instead of update visualzition when new file opened
- Set updating visualizaiton to false when any of the conditional returns trigger
- Changed "Graph" to "Visualizer"
- Updated readme with the latest
  • Loading branch information
Mossy1022 committed Jun 2, 2024
1 parent 4421ede commit a7f105e
Show file tree
Hide file tree
Showing 6 changed files with 72 additions and 91 deletions.
77 changes: 29 additions & 48 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,75 +1,56 @@
# Smart Connections Graph View
# Smart Connections Visualizer

Welcome to the Smart Connections Graph View Plugin! This plugin integrates seamlessly with the Smart Connections tool, offering an advanced, interactive way to visualize connections between your notes. Our goal is to enhance your ability to discover relationships and insights within your notes, transforming the way you interact with and understand your information.
Welcome to the Smart Connections Visualizer Plugin! This plugin integrates seamlessly with the Smart Connections tool, offering an advanced, interactive way to visualize connections between your notes. Our goal is to enhance your ability to discover relationships and insights within your notes, transforming the way you interact with and understand your information.

## Features

- **Dynamic Force-Directed Graph:** Visualize connections as a force-directed graph where nodes represent notes or specific excerpts from them and edges represent connections.
- **Adjustable Visualization Settings:** Customize node size, link thickness, and text fade thresholds to tailor the visualization to your preferences.
- **Interactive Tooltips:** Hover over links to see detailed information about connections.
- **Dynamic Force-Directed Graph:** Visualize connections as a force-directed graph where nodes represent notes or specific excerpts from them and edges represent connections.
- **Easily view more relevant connections:** The distances between nodes and the central node (currently viewed note) are proportional to the relevance of the connections. The closer the distance to the main node, the more relevant the connection is. You can also adjust min and mx width of links to better distinguish these notes/blocks based on relevance.
- **Adjustable Visualization Settings:** Customize node size, label size, and text fade distance and more to tailor the visualization to your preferences.
- **Previewing Notes:** Ability to see note previews in the visualization view when hovering over a node.
- **Customizable Forces:** Adjust the repel force, link force, and center force for a more personalized layout.
- **Selection Box:** Multi-select nodes using a selection box, with accurate selection regardless of zoom and pan levels.

## Installation

Getting started with the Smart Connections Graph View Plugin is easy. Follow these steps to install and integrate it with your Smart Connections setup:
Getting started with the Smart Connections Visualizer Plugin is easy. Follow these steps to install and integrate it with your Smart Connections setup:

1. **Install Smart Connections Plugin:** Ensure you have the Smart Connections plugin installed in your Obsidian environment.
2. **Install Smart Connections Graph View Plugin:** Download and install the Smart Connections Graph View Plugin from the Obsidian Community Plugins.
2. **Install Smart Connections Graph View Plugin:** Download and install the Smart Connections Visualizer Plugin from the Obsidian Community Plugins.

## Usage

Once installed, the Smart Connections Graph View Plugin provides an intuitive interface to explore your notes' connections. Click on the dice icon to the left that says "Smart Graph".
Once installed, the Smart Connections Visualizer Plugin provides an intuitive interface to explore your notes' connections.

### Opening the Graph View
### Opening the Visualizer

To open the Graph View:
To open the Visualizer View:

1. Select the ribbon icon to the left that will display "Smart Graph"
1. Select the ribbon icon to the left that will display "Smart Connections Visualizer"
2. The visualization pane will appear, displaying a dynamic force-directed graph of your notes and their connections.

### Interacting with the Graph
### Interacting with the Visualization

- **Zooming:** Use the mouse wheel or touchpad to zoom in and out of the graph.
- **Panning:** Click and drag the graph to move it around.
- **Hovering:** Hover over links to see tooltips displaying connection details.
- **Zooming:** Use the mouse wheel or touchpad to zoom in and out of the view.
- **Panning:** Click and drag the visualization to move it around.
- **Hovering:** Hover over nodes to highlight them - displaying the full node label and link label, which right now the link label displays the relevance score.
- **Previewing Notes:** When hovering over a node, press the `Ctrl` (`Command` for Mac) key to view a preview of the note or block that the node represents.

### Customizing the Visualization

Access the settings menu by clicking the gear icon in the top right corner of the visualization pane. Here, you can adjust various parameters:

- **Relevance Threshold:** Adjust the threshold for displaying connections based on their relevance.
- **Node Size:** Change the size of the nodes to make them more visible or to declutter the graph.
- **Link Thickness:** Modify the thickness of the links to better visualize connection relevance.
- **Text Fade Threshold:** Set the zoom level at which labels fade in and out.
- **Repel Force:** Adjust the force that pushes nodes apart.
- **Link Force:** Modify the strength of the connections.
- **Center Force:** Change the force that keeps the graph centered.

## How To

### Panning and Zooming

- **Zooming:** Use the mouse wheel or touchpad to zoom in and out of the graph. This allows you to focus on specific areas or get a broad view of all connections.
- **Panning:** Click and drag the graph to move it around. This helps you navigate through different parts of the graph without changing the zoom level.

### Multi-Selecting Nodes

- **Selection Box:** Hold the `Ctrl` key and click and drag to create a selection box. Nodes within the box will be selected.
- **Individual Node Selection:** Hold the `Alt` (`Option` for Mac) key and click on individual nodes to select or deselect them without affecting other selected nodes.
- **Clearing Selections:** Click on an empty space in the graph or press `Esc` to clear all selections.

### Settings Menu

1. Click the gear icon in the top right corner of the visualization pane to open the settings menu.
2. Adjust various parameters to customize the visualization to your liking:
- **Score Threshold:** Use the slider to set the minimum score for displaying connections.
- **Node Size:** Adjust the slider to change the size of the nodes.
- **Link Thickness:** Use the slider to modify the thickness of the links.
- **Text Fade Threshold:** Set the zoom level at which labels appear or disappear.
- **Repel Force:** Adjust the slider to change the force that pushes nodes apart.
- **Link Force:** Modify the slider to change the strength of the connections.
- **Center Force:** Use the slider to change the force that keeps the graph centered.
- **Minimum Relevance**: Adjust the slider to change the minimum relevance score needed for displaying connections.
- **Connection Type**: Choose whether to display connections by block, or by note.
- **Node Size**: Change the size of the nodes to make them more visible or to declutter the visualization.
- **Maximum Label Characters**: Define the maximum number of characters displayed on node labels before they truncate/are shortened. Note: hovering over a node will display the full node label.
- **Minimum Link Thickness**: Set the minimum thickness for the links. Helps to distinguish between less relevant connections.
- **Maximum Link Thickness**: Set the maximum thickness for the links. Helps to distinguish between less relevant connections.
- **Link Label Size**: Change the font size of the link labels. Note: Link label will display when hovering over a node.
- **Node Label Size**: Adjust the font size of the node labels.
- **Text Fade Threshold**: Set the zoom level at which labels fade in and out.
- **Repel Force**: Adjust the force that pushes nodes apart.
- **Link Force**: Modify the strength of the links between nodes.
- **Link Distance**: Adjust the distance between connected nodes - relevance distance will increase/decrease proportionally.

## Community and Support

Expand Down
36 changes: 18 additions & 18 deletions main.js

Large diffs are not rendered by default.

36 changes: 18 additions & 18 deletions main.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ class ScGraphItemView extends ItemView {
connectionType = 'block';
isHovering: boolean;
relevanceScoreThreshold = 0.6;
settingsInstantiated = false;
nodeSize = 3;
linkThickness = 0.3;
repelForce = 400;
Expand Down Expand Up @@ -86,11 +85,11 @@ class ScGraphItemView extends ItemView {
}

getViewType(): string {
return "Smart Graph View";
return "Smart Connections Visualizer";
}

getDisplayText(): string {
return "Smart Graph View";
return "Smart Connections Visualizer";
}

getIcon(): string {
Expand Down Expand Up @@ -471,12 +470,11 @@ class ScGraphItemView extends ItemView {
}

setupSettingsMenu() {
if (!this.settingsInstantiated) {
if (!document.querySelector('.settings-icon')) {
this.createSettingsIcon();
this.createDropdownMenu();
this.setupAccordionHeaders();
this.setupSettingsEventListeners();
this.settingsInstantiated = true;
}
}

Expand Down Expand Up @@ -538,10 +536,6 @@ class ScGraphItemView extends ItemView {

getDisplayContent() {
return `
<div class="slider-container">
<label id="fadeThresholdLabel" for="fadeThreshold">Text Fade Threshold: ${this.textFadeThreshold}</label>
<input type="range" id="fadeThreshold" class="slider" name="fadeThreshold" min="0.1" max="10" value="${this.textFadeThreshold}" step="0.01">
</div>
<div class="slider-container">
<label id="nodeSizeLabel" for="nodeSize">Node Size: ${this.nodeSize}</label>
<input type="range" id="nodeSize" class="slider" name="nodeSize" min="1" max="15" value="${this.nodeSize}" step="0.01">
Expand All @@ -566,6 +560,10 @@ class ScGraphItemView extends ItemView {
<label id="maxLinkThicknessLabel" for="maxLinkThickness">Max Link Thickness: ${this.maxLinkThickness}</label>
<input type="range" id="maxLinkThickness" class="slider" name="maxLinkThickness" min="0.1" max="10" value="${this.maxLinkThickness}" step="0.01">
</div>
<div class="slider-container">
<label id="fadeThresholdLabel" for="fadeThreshold">Text Fade Threshold: ${this.textFadeThreshold}</label>
<input type="range" id="fadeThreshold" class="slider" name="fadeThreshold" min="0.1" max="10" value="${this.textFadeThreshold}" step="0.01">
</div>
`;
}

Expand Down Expand Up @@ -949,14 +947,15 @@ class ScGraphItemView extends ItemView {
this.app.workspace.on('file-open', (file) => {
if (file && (this.currentNoteKey !== file.path) && !this.isHovering) {
this.currentNoteKey = file.path;
this.updateVisualization();
this.render();
}
});
}

updateVisualization(newScoreThreshold?: number) {
if (this.updatingVisualization && !this.isChangingConnectionType) {
console.log('Update already in progress. Skipping...');
this.updatingVisualization = false;
return;
}
this.isChangingConnectionType = false;
Expand Down Expand Up @@ -987,6 +986,7 @@ class ScGraphItemView extends ItemView {
});

if (nodesData.length === 0 || this.validatedLinks.length === 0) {
this.updatingVisualization = false;
console.warn('No nodes or links to display after filtering. Aborting update.');
return;
}
Expand All @@ -1002,7 +1002,7 @@ class ScGraphItemView extends ItemView {
this.simulation.force('link').links(this.validatedLinks)
.distance((d: any) => this.linkDistanceScale(d.score)); // Ensure the link distance is applied

this.simulation.alpha(1).restart();
this.simulation.alpha(1).restart();

// Center the view
// this.centerView(nodesData);
Expand Down Expand Up @@ -1667,23 +1667,23 @@ export default class ScGraphView extends Plugin {
async onload() {
await this.loadSettings();
// Register the new view
this.registerView("Smart Graph View", (leaf: WorkspaceLeaf) => new ScGraphItemView(leaf));
this.registerView("Smart Connections Visualizer", (leaf: WorkspaceLeaf) => new ScGraphItemView(leaf));

// Register hover link source
this.registerHoverLinkSource('Smart Graph', {
display: 'Smart Graph Hover Link Source',
this.registerHoverLinkSource('Smart Connections Visualizer', {
display: 'Smart Connections Visualizer Hover Link Source',
defaultMod: true
});

// This creates an icon in the left ribbon.
const ribbonIconEl = this.addRibbonIcon('git-fork', 'Smart Graph', (evt: MouseEvent) => {
const ribbonIconEl = this.addRibbonIcon('git-fork', 'Smart Connections Visualizer', (evt: MouseEvent) => {
// Called when the user clicks the icon.
// Create a new leaf in the current workspace
let leaf = this.app.workspace.getLeaf(true);

// Set the new leaf's view to your custom view
leaf.setViewState({
type: "Smart Graph View",
type: "Smart Connections Visualizer",
active: true,
});
})
Expand All @@ -1704,7 +1704,7 @@ export default class ScGraphView extends Plugin {

// Set the new leaf's view to your custom view
leaf.setViewState({
type: "Smart Graph View",
type: "Smart Connections Visualizer",
active: true,
});
}
Expand Down Expand Up @@ -1735,7 +1735,7 @@ export default class ScGraphView extends Plugin {

// Set the new leaf's view to your custom view
leaf.setViewState({
type: "Smart Graph View",
type: "Smart Connections Visualizer",
active: true,
});
}
Expand Down
6 changes: 3 additions & 3 deletions manifest.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{
"id": "Smart-Connections-Graph-View",
"name": "Smart Connections Graph View",
"id": "Smart-Connections-Visualizer",
"name": "Smart Connections Visualizer",
"version": "1.0.2",
"minAppVersion": "0.15.0",
"description": "A plugin that allows you to view your Smart Connections in a graph format.",
"description": "A plugin that allows you to view your Smart Connections in a visualized format.",
"author": "Evan Moscoso",
"authorUrl": "https://github.com/mossy426",
"fundingUrl": "https://github.com/mossy426",
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

4 changes: 2 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "smart-connections-graph-view",
"name": "smart-connections-visualizer",
"version": "1.0.2",
"description": "A plugin that allows you to view your Smart Connections in a graph format.",
"description": "A plugin that allows you to view your Smart Connections in a visualized format.",
"main": "main.js",
"scripts": {
"dev": "node esbuild.config.mjs",
Expand Down

0 comments on commit a7f105e

Please sign in to comment.