4.7 VIS-network

Kapitola sumarizuje dosiahnuté výsledky v téme grafových vizualizácií v projekte BIBLIB.AI. V tejto oblasti bolo cieľom vybrať vhodnú knižnicu komponentov pre interaktívnu vizualizáciu semantických a bibliografických vzťahov v prostredí BIBLIB.AI. Riešenie malo umožniť prehľadné zobrazenie prepojených metadát, podporiť orientáciu v sieti entít a zároveň zostať technicky primerané pre rýchly prototyp, následné testovanie a budúcu integráciu do produkčného používateľského rozhrania.

Na riešenie boli kladené tieto požiadavky:

• fungovanie v bežnom webovom prehliadači bez závislosti na komerčnej platforme,

• schopnosť pracovať s modelom nodes/edges a s typmi uzlov a hrán,

• podpora interakcií, ako sú klik, zoom, kontextové menu, filtre a dynamické rozširovanie okolia uzla,

• možnosť lokálneho nasadenia bez CDN,

• podpora exportov do technických a prezentačných formátov,

• primeraná implementačná náročnosť vzhľadom na potrebu rýchleho experimentálneho overenia.

Výsledkom tejto etapy nebolo len porovnanie knižníc, ale aj vytvorenie funkčného víťazného prototypu založeného na knižnici vis-network.

Grafová vizualizácia bibliografických dát má odlišné nároky než bežná vizualizácia všeobecných sietí. Nejde iba o kreslenie uzlov a hrán, ale o zobrazovanie významových vzťahov medzi publikáciami, osobami, inštitúciami, projektmi, databázami, témami a podujatiami. V takomto type aplikácie je kritická nielen vizuálna stránka, ale aj schopnosť pracovať s heterogénnymi typmi entít, s rozdielnou dôležitosťou väzieb a s postupným rozbaľovaním lokálneho kontextu.

V prípravnej fáze bol vytvorený jednoduchý porovnávací priestor s minimálnymi príkladmi pre viaceré open-source prístupy. Lokálne HTML ukážky boli pripravené pre Cytoscape.js a D3.js, pričom Graphviz bol zastúpený formátom DOT pre statické diagramy. Tento priestor slúžil ako praktický základ na rýchle porovnanie základnej zložitosti, ergonomiky a vhodnosti jednotlivých riešení.

Analytický dokument grafy.md pomenúva silné a slabé stránky jednotlivých alternatív:

• D3.js poskytuje maximálnu flexibilitu, ale za cenu vyššej implementačnej náročnosti.

• Cytoscape.js je silný kandidát pre bohaté interakcie a stredne veľké grafy.

• Graphviz je vhodný najmä na statické výstupy a server-side generované obrázky.

• vis-network je vhodný na rýchle prototypovanie, priamo podporuje model uzlov a hrán a pracuje aj s importom DOT.

Z pohľadu projektu BIBLIB.AI sa ako rozhodujúce ukázali tri faktory. Prvým bola rýchlosť vytvorenia funkčného prototypu. Druhým bola nízka bariéra integrácie s jednoduchým dátovým modelom id, label, group, from, to, rel. Tretím bola dostupnosť praktických interakčných mechanizmov bez potreby budovať rozsiahlu vlastnú grafovú vrstvu od začiatku. Na tomto základe bol ako víťazný komponent vybraný vis-network.

Tento výber neznamená, že ostatné knižnice stratili význam. Graphviz ostáva vhodným doplnkom pre statické exporty a reporty, Cytoscape.js ostáva reálnou alternatívou pre neskoršie rozšírenie a D3.js zostáva relevantný tam, kde by bola potrebná špecializovaná vizualizačná logika. Pre prvú overenú implementačnú líniu však vis-network poskytol najlepší pomer medzi funkčnosťou, jednoduchosťou a rýchlosťou vývoja.

Koncept návrhu vychádzal z myšlienky, že jedna vizualizácia má reprezentovať jeden fokusový uzol a jeho bezprostredné alebo iteratívne rozširované okolie. Dokument vizualizacie.md pritom definuje širší doménový rámec pre BIBLIB.AI, v ktorom sa majú graficky zobrazovať publikácie, osoby, inštitúcie, projekty, podujatia, databázy a tematické pojmy.

Za kľúčové návrhové zásady boli prijaté tieto princípy:

• graf musí byť čitateľný aj pri čiastočnom zobrazení a nesmie sa snažiť naraz zobraziť celý dátový vesmír,

• používateľ má mať možnosť rozbaľovať okolie uzla až na základe interakcie,

• typ uzla a typ vzťahu musia byť odlíšiteľné farbou, tvarom, hrúbkou alebo štýlom hrany,

• vizualizácia musí byť kombinovateľná s filtrami a s detailovým pohľadom na konkrétnu entitu,

• export grafu musí byť možný nielen ako obrázok, ale aj v dátových formátoch použiteľných na ďalšiu analýzu.

Na dátovej úrovni bol použitý minimalistický model kompatibilný s vis-network:

• uzol: id, label, group, voliteľne pozícia, veľkosť, farba a ďalšie atribúty,

• hrana: from, to, label, rel, voliteľne hrúbka, farba, šípky a štýl čiarkovania.

Tento model je dostatočne jednoduchý pre prototypovanie, ale zároveň prirodzene rozšíriteľný na komplexnejšie entity uvedené v dokumente vizualizacie.md. Z praktického hľadiska je dôležité, že takáto štruktúra je ľahko odvodená z relačných alebo API výstupov a nevyžaduje zložitý medziformát.

Detaily implementácie

Víťazné riešenie bolo implementované v samostatnom adresári b:\biblib.ai\grafy-vis ako lokálne spustiteľné demo bez CDN. Použitá verzia knižnice vis-network je 10.0.2, pričom JavaScript aj CSS sú dostupné lokálne cez adresár vendor.

Implementácia je rozdelená do troch hlavných demo súborov:

• vis-network-local.html predstavuje hlavné funkčné demo,

• vis-network-count.html demonštruje vizuálne mapovanie sily uzlov a hrán,

• vis-network-styles.html slúži na overenie rozsiahleho štýlovania viacerých skupín entít.

Najdôležitejšou implementáciou je vis-network-local.html. Tento súbor obsahuje:

• základnú sieť osôb a pojmov,

• dynamické dopĺňanie pojmov po kliknutí na osobu pomocou funkcie addTermsForPerson(personId),

• kontextové menu na pravé kliknutie nad uzlom alebo hranou cez udalosť oncontext,

• ovládanie zoomu, fit pohľadu a mierky uzlov,

• nastavovanie fyziky a layoutu prostredníctvom parametrov springLength, gravity, damping, avoidOverlap a iterations,

• filtre pre typy uzlov a typy vzťahov,

• exporty do formátov JSON, DOT, CSV a PNG.

Použitý layout vychádza z fyzikálneho modelu barnesHut, čo je pre prototyp tohto typu vhodné riešenie. Umožňuje rozumne vyvážiť automatické rozmiestnenie uzlov s interaktívnym doladením. Zároveň je implementované explicitné stabilize() volanie, takže používateľ môže po zmene parametrov fyziky graf prepočítať a opätovne usporiadať.

Demo vis-network-count.html overuje inú vrstvu problému: schopnosť mapovať silu uzla a silu vzťahu do grafických vlastností. V tomto prototype sa sila uzla prenáša do veľkosti a hrúbky okraja, zatiaľ čo sila vzťahu sa prenáša do hrúbky hrany. To je dôležité pre budúce zobrazenia typu spoluautorstvo, citácie, inštitucionálna spolupráca alebo projektové väzby.

Demo vis-network-styles.html rozširuje predchádzajúce koncepty o štýlovanie širšieho spektra entít. Obsahuje viacero skupín, napríklad osoby, témy, inštitúcie, podujatia, projekty a databázy. Overené boli rôzne tvary uzlov, hrúbky okrajov, opacity, farby, odlišné štýly hrán, prítomnosť šípok a odlišná typografia. Z implementačného hľadiska ide o dôležitý výsledok, pretože vizualizácie pre BIBLIB.AI nebudú jednofarebné diagramy, ale musia niesť sémantickú informáciu aj cez vizuálne kódovanie.

Za technicky významný výsledok treba považovať aj exportnú vrstvu. V hlavnom deme sú explicitne implementované funkcie:

• exportJSON() pre uloženie uzlov, hrán a aktuálnych pozícií,

• exportCSV() pre samostatné nodes.csv a edges.csv,

• exportDOT() pre interoperabilitu s Graphviz,

• exportPNG() pre obrazový export aktuálneho canvasu.

Tým sa riešenie posúva od čistej vizualizačnej ukážky k nástroju použiteľnému aj pri testovaní, dokumentovaní a porovnávaní výsledkov.

Testovanie prebiehalo v dvoch na seba nadväzujúcich úrovniach. Prvou bola výberová a porovnávacia úroveň v adresári grafy_priklady. Druhou bola implementačná a funkčná úroveň v adresári grafy-vis.

Výberová úroveň

Táto etapa slúžila na praktické overenie, ako rýchlo sa dá vytvoriť základný funkčný graf, ako prirodzene jednotlivé knižnice pracujú s modelom uzlov a hrán a akú implementačnú režiu si vyžiada ďalšie rozširovanie o interakcie. Výsledkom tejto etapy bolo rozhodnutie neísť cestou najflexibilnejšieho, ale zbytočne náročného riešenia, ale zvoliť komponent, ktorý umožní rýchly a kontrolovaný progres.

Funkčná úroveň pre vis-network

V adresári grafy-vis vznikol samostatný prototyp orientovaný už výhradne na vis-network. Jeho výsledky možno zhrnúť nasledovne:

• úspešne bolo vytvorené hlavné interaktívne demo s lokálnou knižnicou bez potreby CDN,

• bola overená funkcionalita kliku na osobu a dynamického dopĺňania tematických pojmov,

• bolo implementované a overené kontextové menu pre uzly aj hrany,

• bolo implementované ovládanie fyziky, zoomu, filtrov a vizuálnych parametrov grafu,

• boli implementované a reálne použité exporty do JSON, DOT, CSV a PNG.

Export graph.json obsahuje 7 uzlov a 7 hrán, čo potvrdzuje, že testovanie nezostalo len pri inicializačnom trojuholníku osôb, ale zahŕňalo aj interaktívne doplnené tematické uzly. Exporty nodes.csv a edges.csv korešpondujú s týmto stavom a dokazujú, že údaje je možné preniesť aj do tabulárnej alebo analytickej vrstvy. Export graph.dot zároveň potvrdzuje interoperabilitu s Graphviz, čo je cenné pre budúce statické reporty.

Obrazové výstupy potvrdzujú aj praktickú funkčnosť obrazového exportu:

• graph.png má rozlíšenie 1920 × 1085 a veľkosť 45 253 bajtov,

• canvas.png má rozlíšenie 1920 × 710 a veľkosť 37 712 bajtov.

Tieto údaje sú dôležité, pretože preukazujú, že prototyp vie generovať použiteľné vizuálne artefakty aj pre dokumentáciu a komunikáciu výsledkov projektu.

Na základe realizovaných testov možno konštatovať, že vis-network splnilo rozhodujúce požiadavky prvej implementačnej línie:

• umožnilo rýchle vytvorenie interaktívneho prototypu,

• poskytlo dostatočný rozsah vstavaných interakcií bez potreby rozsiahlej nadstavbovej infraštruktúry,

• podporilo lokálne nasadenie a exporty,

• prirodzene sa napojilo na jednoduchý, ale rozšíriteľný dátový model.

Vytvorené knižnice a testované komponenty boli vložené do projektu REPČO ktorý je najviac pripravený na integráciu tohto typu funkcionality. Funkcionalita bola pridaná na vizualizáciu hierarchií entít Inštitúcia kde sa uplatňuje 3 vrstvová hierarchia typu univerzia – fakulta – katedra. Táto funkcionalita sa dostala až do ostro nasadených systémov. V prototypovaní sa pokračuje vo vývojových verziách na vzťahoch Osoba – Pracovisko, Projekt – Osoba, Publikácia – Osoba – Pracovisko.

Nasledujúce obrazové artefakty predstavujú reálne výstupy testovacieho prostredia grafy-vis.

Obrázok: PNG export z hlavného dema vis-network-local.html.

Obrázok: Doplnkový obrazový výstup z adresára vystupy, použitý na overenie renderovania grafu na úrovni canvasu.

Obrázok: Obrazový výstup PNG z reálneho nasadenia do systému REPČO – hierarchia inštitúcie (v tomto prípade prvá úroveň / univerzita a fakulty) – dostupné na linke: https://repcoszu.dawinci.sk/?fn=detailInstitutionForm&sid=781B62298F65BFAE2B188AAD

Obrázok: Ukážka kontextových informácií na grafe – s možnosťou získavať informácie o uzloch

Obrázok: Snímka časti GUI aplikácie REPČO pre zobrazenie ovládacieho panela na prácu s vizualizovanými dátami o fakulte a jej katedrách – demonštruje globálnu parametrizáciu grafu a možnosti exportu

V oblasti výberu knižnice komponentov pre grafové vizualizácie bol v projekte BIBLIB.AI dosiahnutý jasný a prakticky využiteľný výsledok. Po počiatočnom porovnaní viacerých open-source prístupov bol ako víťazný komponent vybraný vis-network, pretože najlepšie splnil požiadavku rýchleho prototypovania, podpory interaktívnych grafov, nízkej implementačnej režie a schopnosti exportu do viacerých formátov.

Samostatný prototyp v adresári grafy-vis ukázal, že zvolená knižnica je vhodná nielen pre jednoduchý proof-of-concept, ale aj pre realistické rozšírenie smerom k reálnym bibliografickým entitám, typom vzťahov a interakčným scenárom BIBLIB.AI. Zároveň boli vytvorené konkrétne artefakty dokazujúce funkčnosť exportov a vizuálneho výstupu.

Za hlavný odborný prínos tejto etapy možno považovať to, že výber knižnice neostal na úrovni deklaratívneho odporúčania, ale bol overený funkčnou implementáciou, exportnými výstupmi a obrazovou dokumentáciou. vis-network tak v jadre projektu BIBLIB.AI predstavuje racionálne zvolený základ pre ďalší rozvoj interaktívnych grafových vizualizácií nad bibliografickými a sémantickými dátami.