julien.oculi/demo_network_visjs
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

doc: add jsdoc

Browse source
This commit is contained in:
Julien Oculi 2024-01-23 14:30:10 +01:00
parent a0862ad35d
commit d849fc358e
5 changed files with 40 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
client/app.tsx
View file

@ -6,6 +6,9 @@ import { siteDb } from './site_db_manual.ts'
//! Get datas manually (site_db_manual.ts) //! Get datas manually (site_db_manual.ts)
// const siteDb = await fetchDbFromSite('https://www.pierregrangepraderas.net/') // const siteDb = await fetchDbFromSite('https://www.pierregrangepraderas.net/')
/**
* Main content
*/
export function App() { export function App() {
return ( return (
<main> <main>

13
client/db_graph.tsx
View file

@ -2,6 +2,10 @@ import { Ref, useEffect, useRef } from 'preact/hooks'
import * as vis from 'vis-network' import * as vis from 'vis-network'
import { DbEntry } from '../datas.ts' import { DbEntry } from '../datas.ts'
/**
* Renders a network style graph based on the provided database entries.
* @param db - Datas that will be used to draw the graph.
*/
export function DbGraph({ db }: { db: DbEntry[] }) { export function DbGraph({ db }: { db: DbEntry[] }) {
const graph = useRef<HTMLDivElement>(null) const graph = useRef<HTMLDivElement>(null)
@ -12,17 +16,26 @@ export function DbGraph({ db }: { db: DbEntry[] }) {
return <div class='graph' ref={graph}></div> return <div class='graph' ref={graph}></div>
} }
/**
* Draw db entries as vis network graph.
* @param db - DB Entries.
* @param graph - Container html reference.
*/
function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref<HTMLDivElement> }) { function drawDb({ db, graph }: { db: DbEntry[]; graph: Ref<HTMLDivElement> }) {
//Convert db entries to "vis-network" nodes
const nodes = db.map(({ id, title, links }) => ({ const nodes = db.map(({ id, title, links }) => ({
id, id,
label: title, label: title,
value: links.length, value: links.length,
})) }))
//Construct "vis-network" edges from db entries
const edges = db.map(({ id, links }) => const edges = db.map(({ id, links }) =>
links.map((link) => ({ from: id, to: link, value: id + link })) links.map((link) => ({ from: id, to: link, value: id + link }))
).flat() ).flat()
//Draw the network graph
return new vis.Network(graph.current!, { return new vis.Network(graph.current!, {
nodes, nodes,
edges, edges,

20
client/fetch_db_from_site.ts
View file

@ -2,11 +2,18 @@ import { DbEntry } from '../datas.ts'
const domParser = new DOMParser() const domParser = new DOMParser()
/**
* Construct db by scrapping site.
* @param siteUrl - Index page url
* @returns DbEntries[]
*/
export async function fetchDbFromSite(siteUrl: string) { export async function fetchDbFromSite(siteUrl: string) {
//Index page
const index = await fetch(siteUrl, { mode: 'no-cors' }) const index = await fetch(siteUrl, { mode: 'no-cors' })
.then((response) => response.text()) .then((response) => response.text())
.then((raw) => domParser.parseFromString(raw, 'text/html')) .then((raw) => domParser.parseFromString(raw, 'text/html'))
//Get nodes from index page links
const nodes = Array.from( const nodes = Array.from(
index.querySelectorAll<HTMLAnchorElement>('#episodes>a'), index.querySelectorAll<HTMLAnchorElement>('#episodes>a'),
) )
@ -14,6 +21,7 @@ export async function fetchDbFromSite(siteUrl: string) {
const db: DbEntry[] = [] const db: DbEntry[] = []
//Fill db with nodes
for (const node of nodes) { for (const node of nodes) {
const id = getNodeId(node) const id = getNodeId(node)
const title = node.title const title = node.title
@ -26,12 +34,20 @@ export async function fetchDbFromSite(siteUrl: string) {
return db return db
} }
function getNodeId({ href }: { href: string }) { /**
* Determine id from node link href attribute.
* @returns node id
*/
function getNodeId({ href }: { href: string }): number {
const { pathname } = new URL(href) const { pathname } = new URL(href)
return Number.parseInt(pathname.slice(1, -5)) return Number.parseInt(pathname.slice(1, -5))
} }
async function getNodeLinks({ href }: { href: string }) { /**
* Get ids of nodes related to current nodes by listing all links in current node web page.
* @returns List of ids related to current node.
*/
async function getNodeLinks({ href }: { href: string }): Promise<number[]> {
const page = await fetch(href, { mode: 'no-cors' }) const page = await fetch(href, { mode: 'no-cors' })
.then((response) => response.text()) .then((response) => response.text())
.then((raw) => domParser.parseFromString(raw, 'text/html')) .then((raw) => domParser.parseFromString(raw, 'text/html'))

2
client/site_db_manual.ts
View file

@ -1,5 +1,7 @@
import { DbEntry } from '../datas.ts' import { DbEntry } from '../datas.ts'
//! Manually fecthed datas
//! Output of `const db = await fetchDbFromSite('https://www.pierregrangepraderas.net')` run in console from the site.
export const siteDb: DbEntry[] = [ export const siteDb: DbEntry[] = [
{ {
'id': 2, 'id': 2,

4
server.tsx
View file

@ -2,6 +2,7 @@ import { bundle } from 'emit'
import ssr from 'preact-render-to-string' import ssr from 'preact-render-to-string'
import denoConfig from './deno.json' with { type: 'json' } import denoConfig from './deno.json' with { type: 'json' }
//Compile and bundle client script to js
const script = await bundle('./script.tsx', { const script = await bundle('./script.tsx', {
minify: true, minify: true,
type: 'module', type: 'module',
@ -12,6 +13,9 @@ const script = await bundle('./script.tsx', {
'importMap': { imports: denoConfig.imports }, 'importMap': { imports: denoConfig.imports },
}) })
/**
* Page template
*/
function Template() { function Template() {
return ( return (
<html lang='fr'> <html lang='fr'>