diff --git a/docs/Features/Filtering.md b/docs/Features/Filtering.md index 48f2b91..ea83913 100644 --- a/docs/Features/Filtering.md +++ b/docs/Features/Filtering.md @@ -17,6 +17,12 @@ The syntax of this simulates [the search syntax in Obsidian](https://help.obsidi - `class:`: Search based on [[CSS Styling#Classes|CSS class]]. - `raw:`: Search using a [[CSS Styling#Selectors|CSS selector]]. +## Tips +- Hiding **attachments**: `-class:file` +- Hiding **images**: `-class:image` +- Hiding **dangling nodes**: `-class:dangling` +- You can add those filters to the [[Style Pane]] to quickly hide and unhide them + ## Limitations Regex does not work, nor do the `section:`, `line:` and `block:` operators. diff --git a/docs/Features/Juggl code fence.md b/docs/Features/Juggl code fence.md index 44b544e..0b03383 100644 --- a/docs/Features/Juggl code fence.md +++ b/docs/Features/Juggl code fence.md @@ -19,7 +19,7 @@ will display when using Juggl as: The code fence is in the familiar YAML syntax. ## Creating a Juggl code fence - +The code fence requires one of currently two **modes**. You can use --- #feature diff --git a/docs/Features/Local Graph mode.md b/docs/Features/Local Graph mode.md new file mode 100644 index 0000000..b785aa3 --- /dev/null +++ b/docs/Features/Local Graph mode.md @@ -0,0 +1,11 @@ +--- +aliases: [] +--- + +The local graph mode simulates the local graph of [[Obsidian]]. It will display the currently active note and the notes around it. + +I'm planning to implement a depth-slider for this later! + +--- +#feature +- author [[Emile van Krieken]] \ No newline at end of file diff --git a/docs/Features/Styling/CSS Styling.md b/docs/Features/Styling/CSS Styling.md index 9e2ddb4..6f4087d 100644 --- a/docs/Features/Styling/CSS Styling.md +++ b/docs/Features/Styling/CSS Styling.md @@ -13,6 +13,8 @@ This document acts as an overview of common and useful options for Juggl. For do We will first discuss how to [[#Selectors|select certain objects]], then discuss common [[#Properties|properties]] you might want to change, then finally show a couple of [[#Snippets|snippets]] to get started. +If you prefer to start off with examples, I'd recommend immediately jumping to [[#Snippets]]. + If you need more help, feel free to join the [[Discord]] where help is provided for all your styling questions! # Selectors @@ -24,6 +26,7 @@ Classes can be selected using `.class`. Available classes that are useful to sty - Any class in the `cssclass` property in your [[YAML Styling|YAML]] frontmatter is also available on that node. - `.dangling`: Targets dangling nodes (nodes that aren't created as a file) - `.image`: Targets all nodes that are rendered as images. This is image files, but also notes that are styled with the `image` [[YAML Styling|YAML]] property. Similar for `.audio`, `.video` and `.pdf`. +- `.file`: Targets all attachments (everything that does not have the `.md` extension) - `.note`: Targets all nodes that represent `.md` files. - `.global-3`: Targets nodes in the **fourth** global [[Style Pane|style group]](note: zero-based indexing!) - `.local-5`: Targets nodes in the fifth local style group @@ -84,7 +87,7 @@ Useful common properties are listed as following. See [this link](https://js.cyt - `background-image`: URL to the background image. See [this link](https://js.cytoscape.org/#style/background-image) and [[YAML Styling]] for nuances - There is a significant amount of options for dealing with images, such as how it is contained in the node, smoothing, opacity, offset, etc. See [this link](https://js.cytoscape.org/#style/background-image). - `label`: The text on the node, usually the name of a note. - - Many standard options for styling this are avabile, see [this link](https://js.cytoscape.org/#style/labels). You can for example change the positioning of the text to be inside the node. + - Many standard options for styling this are available like the `font-family`, see [this link](https://js.cytoscape.org/#style/labels). You can for example change the positioning of the text to be inside the node. The - `display`: Set to none to not display the element. ## Edges @@ -94,6 +97,7 @@ Edges can also be completely styled. See [this link](https://js.cytoscape.org/#s - `line-color`: Color of the edge - `line-style`: Choose from `solid, dotted, dashed` - `line-opacity`: Opacity of the edge. +- `label`: The text on the node # Snippets **Style [[Link Types]]**: Color links with the `author` type red. ```css @@ -101,9 +105,53 @@ Edges can also be completely styled. See [this link](https://js.cytoscape.org/#s line-color: red; } ``` + +**Map cooking time to colour**: Changes from the color blue to red depending on how long it takes to cook a meal: +```css +node[cooking-time] { + background-color: mapData(cooking-time, 1, 120, blue, red); +} +``` + +**Change opacity and width of a line**, depending on how many connections (from 1 to 15) there are from one node to the other: +```css +edge[edgeCount] { + width: mapData(edgeCount, 1, 15, 0.5, 3); + line-opacity: mapData(edgeCount, 1, 15, 0.5, 0.9); +} +``` + +**Display the context of a link**: This will display the sentences around where the link appears. This can be a bit messy! +```css +edge.inline { + label: data(context); + text-opacity: 0.8; + font-size: 2; + text-wrap: ellipsis; + text-max-width: 100px; +} +``` + +![[Pasted image 20210414175943.png|500]] + +**Text in a box**: One styling I love is to have rectangle nodes that contain some text. This can be achieved (imperfectly!) using +```css +.tag-paper { + shape: rectangle; + width: 50px; + height: 45px; + font-size: 5; + text-valign: center; + text-max-width: 45px; + text-opacity: 1; +} +``` + +![[Pasted image 20210414182140.png|400]] + # Current limitations - CSS variables like `var(--background-primary)` will not be recognized. If this is something you need, please add a pull request. -- `not()` does not seem to work +- `not()` does not seem to work. --- diff --git a/docs/Features/Styling/Style Pane.md b/docs/Features/Styling/Style Pane.md index 574b1b0..57df922 100644 --- a/docs/Features/Styling/Style Pane.md +++ b/docs/Features/Styling/Style Pane.md @@ -4,7 +4,11 @@ aliases: [style group] ![[style_pane.gif|400]] -The easiest way to [[Styling|style]] a group of nodes is the Style Pane. You can style nodes using a simple user interface that already provides a large amount of options. The style pane is a separate view which opens by default in the right sidebar of [[Obsidian]]. +The easiest way to [[Styling|style]] a group of nodes is the Style Pane. You can style nodes using a simple user interface that already provides a large amount of options. + +The style pane is a separate view which opens by default in the right sidebar of [[Obsidian]]: + +![[Screen Recording 2021-04-14 at 17.29.09.mp4]] A group of nodes is chosen using a [[Filtering|Filter]]. The styling options for each group of nodes are - Show or hide the group diff --git a/docs/Features/Workspace mode/Workspace mode.md b/docs/Features/Workspace mode/Workspace mode.md index bc9ceb1..1170dec 100644 --- a/docs/Features/Workspace mode/Workspace mode.md +++ b/docs/Features/Workspace mode/Workspace mode.md @@ -27,6 +27,7 @@ While holding shift, you can click and drag around the screen to select a group Selected nodes can be interacted with through the [[#Toolbar]]. +### Radial context menu To interact with a single node, click and hold on that node to open the **radial context menu**: ![[Screen Recording 2021-04-03 at 13.58.20.mp4]] @@ -54,7 +55,8 @@ Filters the node from the view. You can add the node back again using the [[Node ![[Pasted image 20210403143207.png|200]] Focus on the selected nodes and its neighbors, and zoom the view to fit on its neighborhood. -## Toolbar + +### Toolbar The toolbar is the set of buttons on the top of the Juggl view, with the following functions: ![[Pasted image 20210402162157.png]] diff --git a/docs/Installing Juggl.md b/docs/Installing Juggl.md index f3f6fb3..e9ddc0c 100644 --- a/docs/Installing Juggl.md +++ b/docs/Installing Juggl.md @@ -9,16 +9,16 @@ Installing Juggl is as easy as downloading and installing it from the 'Community 4. Click on the 'install' button. This might take a while, Juggl is 12+mb. 5. Activate the plugin ![[Pasted image 20210320161754.png]] -# Pre-relase versions -Pre-release versions of [[Juggl]] are available [from this link](https://www.dropbox.com/s/i285vzhqrax8pdv/v0.3.0%20rc1.zip?dl=0). +# Pre-release versions +There are currently no pre-release versions. -## Installation instructions -Unzip the downloaded file in `.obsidian/plugins/neo4j-graph-view/`. The easiest way to find this folder is to follow these steps: +## Installation instructions for pre-release versions +Unzip the downloaded file in `.obsidian/plugins/juggl/`. The easiest way to find this folder is to follow these steps: - Open the settings in Obsidian - Go to the 'Community plugins' tab - Make sure you deactivated safe mode - Click on the Open Plugins Folder icon: ![[Pasted image 20210320161536.png]] -- In the resulting folder, create the neo4j-graph-view folder if you haven't already, then extract the downloaded file in there. +- In the resulting folder, create the `juggl` folder if you haven't already, then extract the downloaded file in there. - Activate the plugin ![[Pasted image 20210320161754.png]] --- diff --git a/docs/Juggl.md b/docs/Juggl.md index 9e9b7fd..223a9db 100644 --- a/docs/Juggl.md +++ b/docs/Juggl.md @@ -6,25 +6,28 @@ Welcome to the documentation of Juggl, now available on the [[Obsidian]] communi Juggl is the next generation of PKM-focused graph views! +- **Code** is on Github: https://github.com/HEmile/juggl +- **Support the development** of Juggl: + - Buy me a kofi: https://ko-fi.com/Emile + - Sponsor me on Github: https://github.com/sponsors/HEmile + - Paypal.me: https://paypal.me/EvanKrieken + # Features Juggl is a new graph view with many more features than the original [[Obsidian]] graph view. ![[juggl trailer.gif]] ## Styling -[[Styling|Style]] the graph in many ways: -1. Using a special [[Style Pane]] that is very easy to use -2. Using [[CSS Styling|CSS]] -3. Using [[YAML Styling|YAML]] +With Juggl you have completely control over the [[Styling|Style]] of your graph. You can use a special [[Style Pane]] that is very easy to use. For more advanced styling, you can use [[CSS Styling|CSS]] and [[YAML Styling|YAML]]. ## Workspace mode A very extensive new [[Workspace mode]] designed for keeping the focus on just the right notes. -**Interactivity**: You can control the highly interactive graph using a special **radial context menu** and the toolbar. +**Interactivity**: You can control the highly interactive graph using a special **[[Workspace mode#Radial context menu|radial context menu]]** and the [[Workspace mode#Toolbar|toolbar]]. - Select, expand and collapse nodes - Pin nodes in place - Hide and filter nodes from view -**Save and load graphs** so you can always continue your work from where you left it. +**[[Workspace mode#Saving and loading|Save and load graphs]]** so you can always continue your work from where you left it. -You can choose from **four layout options**: +You can choose from **four [[Layouts|layout]] options**: 1. Force-directed 2. Circle 3. Grid @@ -37,6 +40,7 @@ You can use "[[Juggl code fence|code fence]]s" to embed graphs within your Obsid - **Mobile ready!** While still buggy, the graph works on mobile - Has a **navigation element** that keeps an overview of the total graph - Supports stylable [[Link Types]]. You can use this to add labels to edges, for example +- Supports a [[Global Graph mode|global graph]] for small vaults, and an Obsidian-like [[Local Graph mode|local graph]]. - Ready to be extended by other plugins through the [[Juggl API]] # Implementations and licensing diff --git a/docs/Roadmap.md b/docs/Roadmap.md index 3c15e9a..220c6b4 100644 --- a/docs/Roadmap.md +++ b/docs/Roadmap.md @@ -4,10 +4,11 @@ aliases: [] # Juggl -## First release -The [[Style Pane]] will be made available in the next test release. - ## Planned +### [[Neo4j Stream]] +A new plugin that will upload your vault to [[Neo4j Desktop]]. This feature was present in [[Neo4j Graph View Plugin]], but not in [[Juggl]]. It'll be a separate plugin to ensure non-advanced users will not have to deal with installing Neo4j, and that this is completely optional for advanced users. + +This plugin will not require installing Python, and will allow for [[Cypher]] querying in [[Juggl]]. ### [[Link Types]] Add better support for creating and maintaining link types. Also provide new syntax for inline link types and properties on links. A discussion on syntax is in [[Link Types]]. @@ -16,6 +17,9 @@ Add better support for creating and maintaining link types. Also provide new syn - Preview typed links using templates - Autocomplete typed links +### [[Style Pane]] for edges +Makes it easier to style typed links. + ### [[Juggl API]] It is easy using [[Cytoscape.js]] to create an API for other plugin developers to use, to interact with [[Juggl]]. This could allow extending the graph view with eg automatically adding data from external sources, such as citation graphs, or with a different syntax for creating graphs. ^82c7c4 @@ -30,6 +34,7 @@ The outline of a note is essentially a tree. As it is completely hierarchical wr ![](https://cdn.discordapp.com/attachments/794501737062203422/798921299404652574/JfMR9BuCHr.gif)__ +### Compound nodes to represent hierachies --- diff --git a/docs/Screen Recording 2021-04-14 at 17.29.09.mov b/docs/Screen Recording 2021-04-14 at 17.29.09.mov new file mode 100644 index 0000000..a1a4401 Binary files /dev/null and b/docs/Screen Recording 2021-04-14 at 17.29.09.mov differ diff --git a/docs/files/Pasted image 20210414175943.png b/docs/files/Pasted image 20210414175943.png new file mode 100644 index 0000000..b8444f7 Binary files /dev/null and b/docs/files/Pasted image 20210414175943.png differ diff --git a/docs/files/Pasted image 20210414182140.png b/docs/files/Pasted image 20210414182140.png new file mode 100644 index 0000000..21e5c11 Binary files /dev/null and b/docs/files/Pasted image 20210414182140.png differ diff --git a/docs/files/Screen Recording 2021-04-14 at 17.29.09.mp4 b/docs/files/Screen Recording 2021-04-14 at 17.29.09.mp4 new file mode 100644 index 0000000..06afb68 Binary files /dev/null and b/docs/files/Screen Recording 2021-04-14 at 17.29.09.mp4 differ diff --git a/juggl/settings.ts b/juggl/settings.ts index 92dd422..853f87f 100644 --- a/juggl/settings.ts +++ b/juggl/settings.ts @@ -238,7 +238,7 @@ export class JugglGraphSettingsTab extends PluginSettingTab { new KoFi({target: containerEl}); const doc_link = document.createElement('a'); - doc_link.href = 'https://publish.obsidian.md/semantic-obsidian/Neo4j+Graph+View+Plugin'; + doc_link.href = 'https://juggl.io'; doc_link.target = '_blank'; doc_link.innerHTML = 'the documentation'; diff --git a/juggl/viz/stylesheet.ts b/juggl/viz/stylesheet.ts index 2eabfd0..13bd094 100644 --- a/juggl/viz/stylesheet.ts +++ b/juggl/viz/stylesheet.ts @@ -274,7 +274,6 @@ edge:selected { :loop { display: none; - width: mapData(edgeCount, 1, 30, 0.1, 1); } edge[type] {