Kliens oldali nézet bővités weboldalhoz.

Grafika: GUI, OpenGL

Szervusztok!

A gerrit felületét szeretnem kiegészíteni egy új nézettel kliens oldalon, ami a review -kat (egy keresés kimenetet) grafikusan jelenítené meg. Jelenleg van egy python szkriptem, ami REST API -n éri el a szervert, plantuml forrást generál, amiből .svg ábra készül. Működik, de nem elég interaktív, read-only, és állapota sincs, azaz nem lehet kommentelni rá. Az egészet review status átnézésre használja a csapat a heti meetingen (hogy halad az egyes patch-stack -ek review -ja, esetleges elakadás oka, mi legyen a merge order, stb...). Csatoltam egy példa SVG -t.

Arra gondoltam, hogy valami kliens oldali tool -lal tenném szebbé és jobbá a megoldást. Mit kellene a megoldás tudjon:

  • Vizualizálja a patch-stack -eket interaktívan. Lehessen nagyítani, összecsukni, ideiglenesen elrejteni az egyes ágakat. Ehhez vonalakkal összekötött dobozok kellenének. Kb. mint egy komponens diagram, ahol a komponensekben benne vannak alap onfók (commit message, change id, topik es hash tag, link a review -ra, szavazatok állapota), illetve valami színkód jelölné mikor volt a legutóbbi frissítés.
  • Bukl műveletek. A stack kijelölt elemeire lehessen has-tag -et, topic -ot, assigneet, reviewert állítani.
  • Jó lenne ha 2 szerver adatait egybe tudná fésülni. A 2 szerveren ugyan azok a módosítások vannak fent, a belső szerverről vándorolnak a publikus szerverre a patch -ek.

Arra gondoltam, hogy ami nekem kell az egy böngésző bővítmény, ami REST API -n manipulálná a szervert, és valamilyen js toolsettel generálna valami interaktív nézetet. Csak fogalmam sincs, milyen library -vel halmazzal érdemes ennek nekilátni manapság. Az "offline kommentekhez" (adat amit a szerver nem tud kezelni) kellene valami local storage. Nem tudom a browser extension -nak lehet e ilyenje. Ha nem, akkor gondolom egy elektron app, vagy vscode bővítmény lehetne a megoldás.

Ki, mivel indulna el? Elég ha megoldásokat, library -ket javasoltok, merre induljak el a kutatással. Előre is köszi!

( asch v | 2025. 02. 05., sze – 15:36 )

Szerintem lemaradt a példa SVG.

Nekem ez elég összetett feladatnak tűnik, el vagy szánva, hogy rengeteg munkaórát bele kell ölni, hogy használható eredményt kapj? Pláne, hogy tanulással kezdődik, ha jól látjuk.

Szerintem kell hozzá szerver. Például a kommenteket hol tárolod, hogy osztod meg másképpen? Ha már egyszer Python szkript van hozzá, akkor azt beleépítheted, vagy úgy hogy Pythonban csinálsz web szervert, vagy úgy, hogy amit csinálsz, az ezt a generátort meghívja. Olyan technológiát választanék amihez legjobban ért aki fejleszteni fogja.

"Szerintem lemaradt a példa SVG."
Nem találtam olyan ingyenes image hosting oldalt ami elfogad .svg fájlokat. 🤷‍♂️

"Nekem ez elég összetett feladatnak tűnik, el vagy szánva, hogy rengeteg munkaórát bele kell ölni, hogy használható eredményt kapj? Pláne, hogy tanulással kezdődik, ha jól látjuk."

Low prio hobbi project. Meglátjuk mekkora falatnak bizonyul.

"Szerintem kell hozzá szerver. Például a kommenteket hol tárolod, hogy osztod meg másképpen?"

Szerver van, de ezek a kommentek inkább offline annotációk lenének, amit helyben kellene menteni. A kommentek megoszthatósága nem szükséges.

"Ha már egyszer Python szkript van hozzá, akkor azt beleépítheted, vagy úgy hogy Pythonban csinálsz web szervert, vagy úgy, hogy amit csinálsz, az ezt a generátort meghívja. Olyan technológiát választanék amihez legjobban ért aki fejleszteni fogja."

Igen, lehetne belőle egy pythonban irt web-app, de azt kicsit ovekill -nek érezném. A gerritnek van webui -ja, ez "mellé" betenni valamit tűnik egyszerűnek. Ha önálló alkalmazás lenne, inkább kihagynám belőle a browser -t meg a javascript -et. Nem tudom miben lehet manapság portolható desktop GUI -t írni. Desktop GUI -hoz ugyan annyira értek, mint a webes GUI -hoz. Semennyire :D Delphi -ben és c++ builder -ben csináltam utoljára ilyesmit. Portolható mondjuk egyik sem volt.

Szerintem jobban járnál, ha JS-ben és Electronban gondolkodnál, abból kicsit egyszerűbb is macerálni a meglevő oldal DOM-ját, plusz nem vernéd szét a Gerrit már meglévő működéseit. De amúgy AFAIK a Gerrit nyillt forrású dolog, le is lehet forkolni, és belerakni ezeket a riportokat.

Viszont, ha ez neked egy sima dinamikus board, én lehet, hogy inkább egy webappban saját dashboardot írnék, nem feltétlenül a mostani divatos felállásban, ti hogy a kliens rendereljen/csináljon/tároljon mindent, hanem inkább azt csinálnám, hogy egy webappban összelapátolnék minden infót, és leküldeném a kliensre, a kliens JS-e meg csak annyit tudna, amennyit múlhatatlanul szükséges. Így a business logikát is abban valósíthatnád meg, amiben kényelmesebb (webapp oldalon a Ruby-tól a Python-on át a Javáig vagy C CGI-ig is terjedhet a skála), míg böngésző oldalon HTML, CSS kell meg egy nagyon minimál JS tudás.

Ja, igen oldschool megoldás, egy webfejlesztő valószínűleg szembe fog köpni. De gondolom nem ezzel akarsz senior fejlesztői babérokra törni.

> Nem találtam olyan ingyenes image hosting oldalt ami elfogad .svg fájlokat. 🤷‍♂️

GitHub Gists bármilyen szövegformátumú fájlt elfogad, ide pedig tudsz belőle PNG-t konvertálni ImageMagick-kel vagy Gimp-pel.

Blog | @hron84

valahol egy üzemeltetőmaci most mérgesen toppant a lábával 

via @snq-

( Hevi v | 2025. 02. 05., sze – 15:49 )

Amúgy a kedvenc LLM-edet megkérdezted már?

o3-mini-high nekem ezt adta, kiindulási pontnak nagyjából jónak tűnik:

Az elképzelésed megvalósításához több modern webes technológiát és könyvtárat is érdemes megfontolni. Íme néhány javaslat, amivel elindulhatsz:

    1.    Interaktív diagramok és vizualizáció

    •    D3.js
Egy rendkívül rugalmas könyvtár, amellyel bármilyen típusú adatvizualizációt készíthetsz. Azonban magasabb tanulási görbéje van, és több kódot igényelhet a kívánt vizuális elemek, például összekötött dobozok, zoom, összecsukható ágak megvalósításához.

    •    Cytoscape.js
Kifejezetten grafikus hálózatok, gráfok vizualizációjára fejlesztették ki. Jó választás lehet, ha a patch-stack-ek közötti kapcsolatok és interaktív elemek (például kijelölés, zoom, elrejtés) fontosak. Könnyen testreszabható és támogatja a különböző interakciókat.

    •    vis.js
Szintén egy jól használható könyvtár interaktív diagramokhoz, amely támogatja a zoom-olást és egyéb interakciókat. Jó kompromisszum lehet a testreszabhatóság és az egyszerűség között.

    •    JointJS
Ez a könyvtár is egy nagyon átfogó diagramozó megoldás, amelyet esetleg érdemes megnézni, ha egy kifejezetten üzleti jellegű, komplex diagramokra van szükséged (bár licenc kérdéseket is felvethet).

 

    2.    Felhasználói felület és állapotkezelés

    •    Érdemes lehet egy modern JavaScript keretrendszert, például React vagy Vue.js használni a felhasználói felület kialakításához. Ezekkel könnyen kezelheted az interaktivitást, a felhasználói eseményeket és az alkalmazás állapotát.

    •    Az állapot kezelésére használhatsz Reduxot (React esetén) vagy Vue esetén a Vuex-et, illetve a kisebb alkalmazásokhoz akár a beépített Context API-t is.

 

    3.    Offline adatok és helyi tárolás

    •    Böngészőbővítmény esetén az elérhető lehetőségek között szerepel a Web Storage API (localStorage), de ha strukturáltabb, nagyobb mennyiségű adatot kell tárolnod, akkor érdemes az IndexedDB-t használni.

    •    Emellett a Chrome (vagy más böngészők) saját extension storage API-t kínál (például chrome.storage.local vagy browser.storage.local), amivel kényelmesen kezelhető a bővítmény-specifikus adat.

 

    4.    Integráció több szerver adataival

    •    Az adatokat össze kell fésülnöd a két szerverről. Ezt érdemes kliensoldalon, a REST API hívások eredményét egyesítve megoldani. Nincs szükség speciális könyvtárra ehhez, de érdemes egy jól strukturált adatmodellre és esetleg egy központi állapotkezelőre (pl. Redux) támaszkodni.

 

    5.    Böngésző kiterjesztés vs. Electron/VS Code bővítmény

    •    Ha a cél a böngészőből való közvetlen interakció a Gerrit felülettel, akkor egy böngészőbővítmény jó választás, hiszen a modern böngészők biztosítanak elegendő API-t (pl. tárolás, DOM manipuláció, hálózati hívások).

    •    Ha azonban a böngészőbővítmény korlátozásokkal küzdene (például a helyi fájlokhoz való hozzáférés, vagy komplexebb offline munkafolyamatok miatt), akkor egy Electron alapú alkalmazás vagy akár egy VS Code bővítmény is megfontolandó, hiszen ezek esetében szinte teljes mértékben a webes technológiákon belül maradhatsz, de nagyobb szabadságot kapsz.

Összefoglalva:

    •    Vizualizációhoz: D3.js (ha teljes testreszabhatóságot szeretnél), Cytoscape.js vagy vis.js (ha kifejezetten interaktív gráfok érdekelnek).
    •    UI és állapotkezeléshez: React vagy Vue.js, esetleg Redux/Vuex az állapot kezelésére.
    •    Offline adatkezeléshez: IndexedDB vagy a böngésző/extension storage API-k.
    •    Fejlesztési platform: Kezdheted böngészőbővítménnyel, de ha a korlátozások miatt szükséges, akkor Electron vagy VS Code kiterjesztés is jó megoldás.

Érdemes először készíteni egy prototípust a kiválasztott könyvtárakkal, és kipróbálni, hogyan illeszkedik a meglévő REST API-dhoz és Gerrit felülethez. Sok sikert a fejlesztéshez!