mirror of https://github.com/joplin/website.git
349 lines
13 KiB
HTML
349 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Common page configuration that goes in the <head></head> tag -->
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,viewport-fit=cover"/>
|
|
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src * data: ; style-src 'self' 'unsafe-inline' ; child-src 'none' ; connect-src 'self' raw.githubusercontent.com ;"/>
|
|
<link rel="icon" type="image/x-icon" href="/plugins/favicon.png" />
|
|
<link rel="stylesheet" href="/plugins/fontawesome-6.4.2/css/all.min.css" type="text/css"/>
|
|
|
|
<!-- Allow included JavaScipt files to determine the root directory of this site. -->
|
|
<script id="site-root" type="text/plain">/plugins</script>
|
|
|
|
<!-- Scripts used by all pages -->
|
|
<script src="/plugins/bundle-main.js"></script>
|
|
<script src="/plugins/bundle-components.js"></script>
|
|
<title>Joplin Plugins - Graph</title>
|
|
|
|
<meta property="og:title" content="Joplin Plugin: Graph"/>
|
|
<meta property="og:description" content="Notes as nodes. Explore your Joplin knowledge graph."/>
|
|
<meta property="og:image" content=""/>
|
|
|
|
<script src="/plugins/bundle-pluginPage.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<nav class="navbar navbar-expand-lg bg-body-tertiary sticky-top">
|
|
<div class="container">
|
|
<a class="navbar-brand" href="https://joplinapp.org/">
|
|
<img src="/plugins/joplin-logo.png" alt="Home"/>
|
|
</a>
|
|
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
|
<ul class="navbar-nav ms-auto me-2 mb-2 mb-lg-0">
|
|
<li class="nav-item">
|
|
<a class="nav-link active" aria-current="page" href="/plugins">Plugins</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://joplinapp.org/news/">News</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://joplinapp.org/help/">Help</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="https://discourse.joplinapp.org/">Forum</a>
|
|
</li>
|
|
</ul>
|
|
<div class="search-field col-12 col-lg-3 mb-3 mb-lg-0 me-lg-3">
|
|
<i class="fa-solid fa-magnifying-glass search-icon" alt=""></i>
|
|
<input
|
|
type="search"
|
|
class="form-control search-input"
|
|
placeholder="Search..."
|
|
id="search-input"/>
|
|
<div class="search-results" id="search-results-container" aria-live="polite"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
<main class="plugin-details">
|
|
<nav aria-label="breadcrumb" class="container breadcrumb-container">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">
|
|
<a href="/plugins"><i class="fas fa-home"></i> Home</a>
|
|
</li>
|
|
<li class="breadcrumb-item"><a id="current-category-nav-link" href="/plugins/">All</a></li>
|
|
<li class="breadcrumb-item active" aria-current="page">Graph</li>
|
|
</ol>
|
|
</nav>
|
|
<div class="plugin-overview">
|
|
<div class="spacer">
|
|
</div>
|
|
<div class="plugin-page-header">
|
|
<div class="title plugin-page-title">
|
|
<img
|
|
class="icon plugin-icon -missing"
|
|
src=""
|
|
alt="Plugin icon"
|
|
/>
|
|
<div>
|
|
<h1 class="card-title">Graph</h1>
|
|
<div class="card-title pb-2">
|
|
by
|
|
<a
|
|
href="./?search=author%3D%22Antoine Gerardin%22%20max-results%3D20"
|
|
style="display: inline;"
|
|
>
|
|
Antoine Gerardin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="categories">
|
|
<a class="plugin-category me-2 badge" href="/plugins/#tab-productivity">
|
|
<i class="fas fa-tag"></i> productivity
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="download-link-container">
|
|
<a
|
|
href="/plugins/downloadPlugin.html?plugin=joplin-plugin-knowledge-graph"
|
|
class="btn btn-primary process--append-parent-tab-to-href"
|
|
>
|
|
Install Plugin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="plugin-content">
|
|
<div class="secondary-section">
|
|
<div class="content" id="screenshots-container">
|
|
<div id="raw-screenshots">
|
|
</div>
|
|
|
|
<!-- See https://getbootstrap.com/docs/5.3/components/carousel/ -->
|
|
<div id="screenshots-carousel" class="carousel slide">
|
|
<button
|
|
class="carousel-control-prev"
|
|
type="button"
|
|
data-bs-target="#screenshots-carousel"
|
|
data-bs-slide="prev"
|
|
>
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Previous</span>
|
|
</button>
|
|
<button
|
|
class="carousel-control-next"
|
|
type="button"
|
|
data-bs-target="#screenshots-carousel"
|
|
data-bs-slide="next"
|
|
>
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="visually-hidden">Next</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="container section">
|
|
<h3>Description</h3>
|
|
<p class="card-text pb-4">Notes as nodes. Explore your Joplin knowledge graph.</p>
|
|
</div>
|
|
<div class="container section">
|
|
<h3>Additional Information</h3>
|
|
<table class="additional-information-table">
|
|
<tbody>
|
|
<tr>
|
|
<th>Links:</th>
|
|
<td>
|
|
<ul class="list-group list-group-flush text-break">
|
|
<li><a href=https://github.com/agerardin/joplin-plugin-knowledge-graph style="display: block;"><i class="fa-solid fa-link"></i> Repository</a></li>
|
|
<li><a href=https://github.com/agerardin/joplin-plugin-knowledge-graph style="display: block;"><i class="fa-solid fa-link"></i> Homepage</a></li>
|
|
<li>
|
|
<a
|
|
id="view-plugin-source-link"
|
|
href="/plugins/view-source.html?plugin=joplin-plugin-knowledge-graph"
|
|
class="process--append-parent-tab-to-href"
|
|
>
|
|
<i class="fa-solid fa-code"></i> View source
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<th>Maintainers:</th>
|
|
<td>
|
|
<a href="./?search=maintainer%3D%22agerardin%22%20max-results%3D20" class="maintainer-link">
|
|
agerardin
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
<tr><th>Version:</th><td>1.1.0</td></tr>
|
|
<tr><th>Minimum app version:</th><td>2.2</td></tr>
|
|
<tr><th>Downloads: This version:</th><td>8571</td></tr>
|
|
<tr><th>Last updated:</th><td class="process--format-as-local-time">2022-01-14T17:35:05Z</td></tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="container section" id="readme" data--is-rendered-markdown>
|
|
|
|
<h1>Joplin Graph Plugin</h1>
|
|
<p>This joplin plugin turns notes into nodes in a knowledge graph.</p>
|
|
<p><img src="https://raw.githubusercontent.com/agerardin/joplin-plugin-knowledge-graph/HEAD/screenshot.webp" alt="screenshot" /></p>
|
|
<p>Links are built from tags and from cross-links between notes.</p>
|
|
<ul>
|
|
<li>The visualization can scale reasonably well to display up to several thousand nodes
|
|
and links at the same time.</li>
|
|
<li>Nodes and links can be filtered dynamically to explore data.</li>
|
|
<li>The graph layout can be customized dynamically to help navigate large graphs.</li>
|
|
<li>Support multiple links between notes.</li>
|
|
</ul>
|
|
|
|
<h2>Controls</h2>
|
|
<p><code>CTRL+click</code> or <code>META+click</code> on a node opens the related note in the editor.</p>
|
|
<p><code>SHIFT+click</code> for multiple node selection.</p>
|
|
<h3>Layout options</h3>
|
|
<p>The layout is based on as set of d3 forces that can be enabled/disabled.
|
|
Many options are supported in order to tune the layout depending on the specific data.</p>
|
|
<h3>Filters</h3>
|
|
<p>Filters are essential to remove noise and for performance reasons.</p>
|
|
<p>Several filters are implemented and can be composed as conjunct terms (AND).</p>
|
|
<ul>
|
|
<li>view can be focused on selected nodes.</li>
|
|
<li>tags can be filtered and several tags can be selected as disjoint filtering terms (OR).</li>
|
|
<li>nodes representing tags can be displayed or not.</li>
|
|
<li>multiple relationships between two nodes can be aggregated as one.</li>
|
|
</ul>
|
|
<h3>Settings</h3>
|
|
<p>plugin settings help tune the graph rendering.</p>
|
|
<p>In particular, simulation settings COOLDOWN_TIME, COOLDOWN_TICKS & WARMUP_TICKS can help rendering larger graphs.</p>
|
|
<p>Label size are also customizable.</p>
|
|
|
|
<h2>Similar projects and related plugins</h2>
|
|
<p>This plugin works best in combination with other plugins that helps manage links and backlinks, provide links preview
|
|
or facilate creating notes from existing notes.</p>
|
|
<ul>
|
|
<li><a href="https://discourse.joplinapp.org/t/plugin-note-link-system/21768">Note Link System</a></li>
|
|
<li><a href="https://discourse.joplinapp.org/t/quick-links-plugin/14214">Quick Links</a></li>
|
|
<li><a href="https://discourse.joplinapp.org/t/copy-markdown-link-to-active-note/1440">Copy Markdown Link</a></li>
|
|
<li><a href="https://discourse.joplinapp.org/t/create-note-from-highlighted-text/12511">Copy Note from Selection</a></li>
|
|
<li><a href="https://discourse.joplinapp.org/t/automatic-backlinks-with-manual-insert-option/13632">Automatic Backlinks</a></li>
|
|
</ul>
|
|
<p>The graph interactions have been inspired by the foam vscode extension : <code>https://foambubble.github.io/foam/</code>.</p>
|
|
<p>You may also want to look at another graph plugin for Joplin <code>https://github.com/treymo/joplin-link-graph</code> which
|
|
also provide graph visualization.</p>
|
|
|
|
<h2>Development</h2>
|
|
<h3>Project Structure</h3>
|
|
<p><code>src/core</code> a generic graph model</p>
|
|
<p><code>src/joplin</code> joplin specific code</p>
|
|
<p><code>src/common</code> definitions shared by the <code>core</code> and <code>joplin</code> component</p>
|
|
<p><code>src/ui</code> ui components</p>
|
|
<p><code>index.ts</code> plugin bootstrap</p>
|
|
<h3>Building the plugin</h3>
|
|
<p>The plugin is built using Webpack, which creates the compiled code in <code>/dist</code>. A JPL archive will also be created at the root, which can use to distribute the plugin.
|
|
To build the plugin, simply run <code>npm run dist</code>.</p>
|
|
<h3>Development workflow</h3>
|
|
<p><code>npm run test</code> can be used to generate sourceMaps useful for debugging.</p>
|
|
<p><code>npm run test-ui</code> will pop up the ui in the browser using webpack dev-server which is useful when working on the ui instead of rebuilding the plugin each time.
|
|
Note that this requires <code>webpack-cli@4</code> while building for joplin requires <code>webpack-cli@3</code>.</p>
|
|
<p>So for now we need to get back and forth : <code>npm install webpack-cli@4</code> or <code>npm install webpack-cli@3</code> when developing the ui and testing integration.</p>
|
|
<p><code>npm run test</code> will run a jest test suite.</p>
|
|
<h3>Dependencies</h3>
|
|
<p>This project is written Typescript and React.
|
|
Main dependencies:</p>
|
|
<ul>
|
|
<li>d3: <code>https://github.com/d3/d3</code></li>
|
|
<li>d3 library: <code>https://github.com/vasturiano/force-graph</code>.</li>
|
|
<li>react component for tag selection: <code>https://github.com/react-tags/react-tags</code></li>
|
|
</ul>
|
|
<p>The layout controls have been adapted from :
|
|
<code>https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03</code></p>
|
|
<h3>Updating the plugin framework</h3>
|
|
<p>To update the plugin framework, run <code>npm run update</code>.</p>
|
|
<p>A few changes have been made to the stock <code>webpack.config.js</code> so caution is required when trying to update the plugin framework.</p>
|
|
|
|
<h2>Notes</h2>
|
|
<h3>Plugin/UI Communication</h3>
|
|
<p>Short of a mechanism for a two-way async communication between the ui and the plugin,
|
|
plugin events are recorded in a queue.</p>
|
|
<p>Whenever the ui is ready to process a new events, it notifies the plugin, which will
|
|
poll events from the queues at the rate of a consumption of the ui until the queue is empty.</p>
|
|
<h3>Style</h3>
|
|
<p>This plugin is not yet adapting to Joplin Themes. Dark Themes work best.</p>
|
|
|
|
<h2>Licensing</h2>
|
|
<p>MIT License.</p>
|
|
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="page-footer">
|
|
<div class="plugin-documentation-section">
|
|
<div class="heading">
|
|
Would you like to submit or develop a plugin? Consult our documentation:
|
|
</div>
|
|
<a class="btn btn-outline-primary" href="https://joplinapp.org/help/api/get_started/plugins">
|
|
See documentation
|
|
</a>
|
|
</div>
|
|
|
|
<div class="links legal-and-about-links">
|
|
<div class="copyright">© Joplin 2023 - 2024</div>
|
|
<a class="link terms-and-conditions" href="/plugins/terms-and-conditions.html">Terms and conditions</a>
|
|
<a class="link privacy" href="/plugins/privacy-policy.html">Privacy policy</a>
|
|
</div>
|
|
|
|
|
|
<div class="site-links">
|
|
<a
|
|
class="a-github"
|
|
href="https://github.com/joplin/website-plugin-discovery"
|
|
aria-label="GitHub"
|
|
title="GitHub"
|
|
>
|
|
<i class="fab fa-github"></i>
|
|
</a>
|
|
<a
|
|
class="a-discord"
|
|
href="https://discord.com/invite/VSj7AFHvpq"
|
|
aria-label="Discord"
|
|
title="Discord"
|
|
>
|
|
<i class="fab fa-discord"></i>
|
|
</a>
|
|
<a
|
|
class="a-linkedin"
|
|
href="https://www.linkedin.com/company/joplin"
|
|
aria-label="LinkedIn"
|
|
title="LinkedIn"
|
|
>
|
|
<i class="fab fa-linkedin"></i>
|
|
</a>
|
|
<a
|
|
class="a-twitter"
|
|
href="https://twitter.com/joplinapp"
|
|
aria-label="Twitter"
|
|
title="Twitter"
|
|
>
|
|
<i class="fab fa-twitter"></i>
|
|
</a>
|
|
<a
|
|
class="a-mastodon"
|
|
href="https://mastodon.social/@joplinapp"
|
|
aria-label="Mastodon"
|
|
title="Mastodon"
|
|
>
|
|
<i class="fab fa-mastodon"></i>
|
|
</a>
|
|
<a
|
|
class="a-patreon"
|
|
href="https://www.patreon.com/joplin"
|
|
aria-label="Patreon"
|
|
title="Patreon"
|
|
>
|
|
<i class="fab fa-patreon"></i>
|
|
</a>
|
|
</div>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|
|
|