git log –graph

Od samego początku projektu wiedziałem, że ten etap będzie najtrudniejszy. Nie wiedziałem, że aż tak. Od ostatniego wpisu minęło sporo… czasu. Bynajmniej powodem nie był brak tematów lecz ilość czasu jaki spędzałem nad rozwiązaniem tego problemu. Cały czas pracowałem nad wizualizacją grafu comimtów w gicie. W Togglu mam prawie 30h pracy nad tym komponentem, co w stosunku do ilości pracy włożonej w cały projekt od początku konkursu, wynosi coś koło 25%.

Dobra ale gdzie ten problem? Co mi zajęło tyle czasu. Miałem dwa problemy do rozwiązania:

  • struktura grafu
  • wizualizacja

Co jest ważniejsze?!

Za pomocą biblioteki libgit2Sharp pobranie listy commitów wraz z identyfikatorami rodziców jest trywialne:

Powyższe zapytanie wyciąga commity rozpoczynając od HEAD (najwyższy dostępny lokalnie commit obecnego brancha) oraz są one w kolejności chronologicznej. Jak się okaże później, są to bardzo istotne informacje, szczególnie ta druga.

Podgląd grafu w SourceTree

Na samym początku zadałem sobie pytanie, które już od dawna mnie nurtowało: Które commity wchodzą w skład „głównej” ścieżki ( w powyższym przypadku kolor seledynowy). Postaram się to opisać jeszcze dokładniej. Analizę rozpoczynamy od góry od commita b82… Jego rodzice to 50df.. i a24b… i teraz zakładając, że mogą one przyjmować dowolne daty wcześniejsze niż b82…, który z rodziców jest „głównym” rodzicem? Nie dawało mi to spokoju, uważałem to za najważniejszą informację jaką muszę pozyskać. Odpowiedź przyszła dopiero po długim czasie czytania dokumentacji gita.

Okazuje się, żeby wyznaczyć główną linię grafu należy wykonać komendę git log –first-parent. Dzięki temu uzyskamy wyłącznie commity zaznaczone na seledynowo. GENIALNIE! miałem rozwiązanie mojego problemu. Teraz jak to zaimplementować przy pomocy libgit2Sharp….

Nie trzeba!, domyślnie struktura listy parentów dla każdego commita jest posortowana tak, że „główny” commit jest pierwszy! Jest to kluczowa informacja. Trzeba pamiętać że sama lista commitów posortowana jest chronologicznie.

Wizualizacja

Mając przygotowane dane jedyne co mi zostało to je wyświetlić na widoku. Jedynie… Od samego początku odrzuciłem pomysł

Może napiszę framework do generowania grafów!

Od znajomego dostałem cynk, że do tego nada się doskonale d3js!

Czym jest d3js? Oh, dużo by mówić, można zobaczyć tutaj, w skrócie bardzo przyjemne API do wizualizacji różnego rodzaju danych.

Spędzając parę kolejnych godzin na wertowanie dokumentacji (jest straszna i obszerna!) wybrałem sposób na wizualizację mojego grafu. Zastosowałem klasyczne podejście z węzłami i liniami łączącymi.

Po kilku godzinach pracy udało się!

Jeszcze nie jest doskonały, niektóre ścieżki się nie kończą i czasami kolor się miesza (czarny i żółty).  Dodatkowo dochodzi problem wydajności, puki co napisałem to „żeby działało” jest tam jeszcze co optymalizować.

Ale uff udało się, najbardziej bałem się tego etapu. Jak już mnie nic nie blokuje, będę mógł częściej publikować nowe wpisy 😉