Source code visualisation for my projects

Today I read the announcement of SourceCloud, a new Zest/Cloudio-based visualization for source code. As I like cool visualizations, I tried it out on the open projects I am participating in.At first I created the cloud for the source code of the Debug Visualisation project. Globally it consists of about half Eclipse debugger/UI and Java keywords – as this is quite a small project (about 4 kLOC), this is somewhat expected with 200 words.

https://i1.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/dv-cloud.png?resize=1024%2C835 1024w, https://i0.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/dv-cloud.png?resize=367%2C300 367w, https://i0.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/dv-cloud.png?w=1150 1150w" sizes="(max-width: 300px) 85vw, 300px" /> SourceCloud of the Debug Visualisation Project

However, it is interesting, that the strings ‘end_of_line‘ and ‘sp_cleanup‘ found their way in. Luckily, only a few one-character names and numbers are present, meaning, we managed to created longer variable names…

The cloud of the VIATRA2 model transformation framework is more interesting: it is a much larger codebase, developed for several year by around a dozen people. Because of the size I generated the cloud using 300 words, but almost no Java keywords found their way into the graph.

https://i1.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/viatra-cloud.png?resize=1024%2C920 1024w, https://i1.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/viatra-cloud.png?resize=333%2C300 333w, https://i0.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/viatra-cloud.png?w=1046 1046w" sizes="(max-width: 300px) 85vw, 300px" /> SourceCloud of the VIATRA2 framework

However, the mandatory comment parts did, e.g. nbsp or the names of some creators. A lot of EMF-specific keywords are also present. They are present because we have quite a large EMF metamodel that provides several hundred generated Java files.

At last, but not least I also checked the cloud of the EMF-IncQuery project. This is smaller, then the VIATRA2 project, but larger then the Debug Visualisation. Additionally, it has a shorter history, but with several key committers.

https://i2.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/iq-cloud.png?resize=1024%2C909 1024w, https://i0.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/iq-cloud.png?resize=337%2C300 337w, https://i2.wp.com/cubussapiens.hu/wp-content/uploads/2011/09/iq-cloud.png?w=1043 1043w" sizes="(max-width: 300px) 85vw, 300px" /> SourceCloud of the EMF-IncQuery project

My personal favorite is this diagram, as it shows a lot of nice things: e.g. four digit numbers in large quantities (magic numbers FTW) or the absolute champion string: ‘HUKfyM7ahfg‘. All of them are present in the Ecore Diagram of the defined metamodel (the meaningless string 152 times as a postfix of an identifier 🙂 ). At least, I learned something about the internal model representation of GMF.

And how do your projects look like?

Projektbemutató videóval

Úgy néz ki, egyelőre Balage Debug Visualisation projektje még fut egy darabig, nem ért véget azzal, hogy megkapta rá a jegyét. Nemrég volt egy újabb release, most pedig én egy régi ígéretemnek tettem eleget, és készítettem hozzá egy bemutató videót.

A videó nagyon egyszerű: megmutatom, hogy egy komplex debug eljárás esetén (hiszen egy másik Eclipse példányban futtatott plugin projektet tesztelek vele) hogyan használható ez a plugin.

Mindenesetre jöjjön a lényeg:

Úgy néz ki, egyelőre Balage Debug Visualisation projektje még fut egy darabig, nem ért véget azzal, hogy megkapta rá a jegyét. Nemrég volt egy újabb release, most pedig én egy régi ígéretemnek tettem eleget, és készítettem hozzá egy bemutató videót.

A videó nagyon egyszerű: megmutatom, hogy egy komplex debug eljárás esetén (hiszen egy másik Eclipse példányban futtatott plugin projektet tesztelek vele) hogyan használható ez a plugin.

Mindenesetre jöjjön a lényeg:

Megfelelő igény esetén esetleg arról is fogok beszélni, hogy hogyan készült a videó – most csak annyit mondanék róla, hogy teljesen nyílt szoftverek felhasználásával készült – eltekintve a youtube felületén hozzáadott annotációktól.

Ami viszont vicces volt, hogy feltölteni macerás: a fájl lassan töltődik fel, és időnként megszakadt közben a net – ebben az esetben pedig az AJAX-os feltöltő script végtelen ciklusba került, és nem töltött fel semmit, de nem is vette észre, hogy vége a dalnak. Talán majd egyszer ezt is javítják (vagy nekem javul meg a netem 😀 ).

Eclipse update site az oldalon

Aki figyelemmel kisérte a nem rég [[Debug vizualizáció Eclipse-hez|bejelentett]] projektet, az már tudhat róla, hogy pár hónapja működik egy eclipse update site a honlapon. Az említett projekt [[http://code.google.com/p/debugvisualisation/|honlapján]] egy ideje már bejelentettük a létezését, de az itteni kihirdetés idő és kedv hiányában késett egy kicsit.

Tehát a lényeg: az eclipse menüben Help/Software Updates../Available Software/Add Site..: http://eclipse.cubussapiens.hu

Aki figyelemmel kisérte a nem rég [[Debug vizualizáció Eclipse-hez|bejelentett]] projektet, az már tudhat róla, hogy pár hónapja működik egy eclipse update site a honlapon. Az említett projekt [[http://code.google.com/p/debugvisualisation/|honlapján]] egy ideje már bejelentettük a létezését, de az itteni kihirdetés idő és kedv hiányában késett egy kicsit.

Tehát a lényeg: az eclipse menüben Help/Software Updates../Available Software/Add Site..: http://eclipse.cubussapiens.hu

Jelenleg egyetlen feature található rajta, de ahogy az időnk engedi, ez a kör bővülhet. Addig is használjátok egészséggel ezt az egyet, és nyugodtan küldjetek hibajelzést/kivánságot a projekt oldalára.

Debug vizualizáció Eclipse-hez

Kicsit féltem a feladattól, mikor Stampie előállt az ötletével, hogy mit adjak be házi feladatnak Nyilt Fejlesztőrendszerekre. Sőt, akkor ő is csak viccelt vele. Akkor egyikünk se gondolta volna, hogy ennyire jól fog elsülni. A néhány hetes projekt eredménye egy eclipse nézet, ami a debug folyamatban az aktuálisan elérhető változókat jeleníti meg egy gráfban. Ehhez a [[http://www.eclipse.org/gef/zest/|Zest]] keretrendszert használtam, ami egy az egyben megoldja a gráf megjelenítését, és keretrendszert ad a csomópontok automatikus elrendezéséhez. A feladat innentől csak annyi, hogy összekanalazzuk a debug folyamatból az adatokat és a megfelelő formában beleszórjuk egy Zest megjelenítőbe.

Kicsit féltem a feladattól, mikor Stampie előállt az ötletével, hogy mit adjak be házi feladatnak Nyilt Fejlesztőrendszerekre. Sőt, akkor ő is csak viccelt vele. Akkor egyikünk se gondolta volna, hogy ennyire jól fog elsülni. A néhány hetes projekt eredménye egy eclipse nézet, ami a debug folyamatban az aktuálisan elérhető változókat jeleníti meg egy gráfban. Ehhez a Zest keretrendszert használtam, ami egy az egyben megoldja a gráf megjelenítését, és keretrendszert ad a csomópontok automatikus elrendezéséhez. A feladat innentől csak annyi, hogy összekanalazzuk a debug folyamatból az adatokat és a megfelelő formában beleszórjuk egy Zest megjelenítőbe.

Sokáig nem tudtam hogy álljak neki, hetekig bogarásztam az eclipse forrását, mire megtaláltam hogyan is juthatok hozzá a megfelelő adatokhoz. A megoldás végül is egyszerűnek bizonyult. Eclipse-ben a debug folyamat diszkrét lépésekre oszlik, mint például indítás, breakpointhoz érkezés, léptetés, folyamat befejezése, stb.. Minden lépés végén triggerelődik egy esemény a folyamat állásáról, ezt kell figyelni:

[cc_java]
public class DebugContextListener implements IDebugContextListener {

public void debugContextChanged(DebugContextEvent event) {
if1;
}
}

private void contextActivated(ISelection context) {
if (context instanceof StructuredSelection){
Object data =2;
[/cc_java]

A fent látható módon várhatunk a debug állapotot reprezentáló IStackFrame adatstruktúrára. A struktúra többek között tartalmazza a Variables nézetben is látható változókat. Ezeket a változókat akarjuk megjeleníteni. Érdemes leszögezni, hogy ebben a kontextusban a változók (IVariable) csak referenciák a tényleges adatokra (IValue). Tehát az értékek felelnek meg a csomópontoknak, míg a változók az éleknek. Ez alapján már igazán gyerekjáték volt az adatokat bedobálni egy Graph-ba (persze elöbb érdemes felépíteni egy modellt, amin megjelenítés elött elrendezhetünk pár hasznos műveletet, mint a gráf “lusta” megjelenítése, vagy a csomópontok szűrése). Ami további nehézséget okozott, az a Zest kritikán aluli dokumentáltsága, így többnyire csak próbálgatásokkal sikerült megértenem a működését.

Lényeg a lényegben, hogy ma (azaz már tegnap) elfogadták házi feladatként, és így terv szerint pár apró csiszolással kiadtam a 0.5.0 verziót. A projektnek létrehoztam egy oldalt a Google Code-on, onnan leszedhető a forrás is, egy telepíthető bináris csomag és további információk a projektről. Végezetűl egy kis felsorolás arról, hogy mit is tud a cucc, azaz fícsörz:

  • Változók és referenciék gráf alapú megjelenítése, a gráf automatikus elrendezése választható algoritmus alapján
  • A gráf lusta módon van megjelenítve, az egyes csomópontok gyermek-csomópontjai csak akkor jelennek meg, ha a felhasználó dupla kattintással kinyitja a csomópontot. A csomópontok hasonló módon be is zárhatóak
  • A gráf-rendező algoritmusok extension-point-on csatlakoznak a nézethez, ami lehetővé teszi, hogy bárki hozzácsatoljon egy saját, Zest-tel kompatibilis algoritmust.
  • A Zest-ben beépítetteken kívül csináltam egy szimulált hűtésen alapuló algoritmust is, ami ugyan lassú, de az esetek nagy hányadában jobb elrendezést biztosít, mint a többi.
  • Típusfüggő szűrést végzek a csomópontokon, így pl. egy ArrayList-nél csak a releváns gyermekelemek (A listában tárolt elemek) jelennek meg.
  • Természetesen a szűrők is extension-point-tal vannak csatlakoztatva, hogy ezen a ponton is tetszőlegesen kiegészíthető a cucc.

Még néhány link:

  1. event.getFlags() & DebugContextEvent.ACTIVATED) > 0) {
    contextActivated(event.getContext( []
  2. StructuredSelection) context).getFirstElement();
    if (data instanceof IStackFrame) {
    //itt megkaptuk a StackFrame-et
    }else{
    //véget ért a debug folyamat
    }
    }
    }

    }
    [/cc_java]
    A Listener-t a következő módon tudjuk beregisztrálni a rendszerbe:

    [cc_java]
    DebugUITools.getDebugContextManager().addDebugContextListener(new DebugContextListener(this []