Vizualizace rodokmenu v buněčných populacích

Masarykova univerzita Fakulta informatiky

Vizualizace rodokmenu v buněčných populacích Bakalářská práce

Antonín Holík

Brno, jaro 2016

Prohlášení Prohlašuji, že tato bakalářská práce je mým původním autorským dílem, které jsem vypracoval samostatně. Všechny zdroje, prameny a literaturu, které jsem při vypracování používal nebo z nich čerpal, v práci řádně cituji s uvedením úplného odkazu na příslušný zdroj.

Antonín Holík

Vedoucí práce: RNDr. Barbora Kozlíková, Ph.D. i

Poděkování Tímto bych chtěl poděkovat své vedoucí práce RNDr. Barboře Kozlíkové, Ph.D. za trpělivost, pomoc s problémy, které se při psaní práce vyskytly, a konzultace, které mě často navedly tím správným směrem k finální podobě aplikace. Dále bych chtěl poděkovat RNDr. Davidu Svobodovi, Ph.D. a RNDr. Martinu Maškovi, Ph.D. za připomínky a upozornění na chyby nalezené během testování. Zároveň bych chtěl poděkovat i svým přátelům, kteří mi naslouchali v situacích, kdy jsem se při psaní práce zasekl, a poskytli podněty, které mi často pomohly nalézt to správné řešení. iii

Shrnutí Tato práce se zabývá návrhem a implementací webové aplikace na vizualizaci rodokmenů buněčných populací z formátu man_track.txt. Ten je využíván v rámci soutěže Cell Tracking Challenge, ve které se pomocí rodokmenů buněk kontroluje efektivita a přesnost algoritmů zjišťujících informace o buňkách z časosběrných záznamů.

iv

Klíčová slova Cell Tracking Challenge, Centrum analýzy biomedicínského obrazu, D3.js, dělení buněk, rodokmeny buněk, vizualizace

v

Obsah 1

Úvod 1.1 Struktura práce . . . . . . . . . . . . . . . . . . . . . . . .

1 1

2

Sledování a analýza buněk z časosběrných snímků 2.1 Sledování buněk . . . . . . . . . . . . . . . . . . . 2.1.1 Sledování pomocí detekce . . . . . . . . 2.1.2 Sledování pomocí vývoje modelu . . . . 2.2 Cell Tracking Challenge . . . . . . . . . . . . . . . 2.3 Formát man_track.txt . . . . . . . . . . . . . . . . 2.4 Centrum analýzy biomedicínského obrazu . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

. . . . . .

3 3 4 4 4 5 7

Návrh aplikace 3.1 Vizualizace . . . . . . . . . . . . 3.2 Požadavky na funkcionalitu . . . . 3.3 Původní aplikace . . . . . . . . . 3.4 Samotný návrh aplikace . . . . . . 3.5 D3.js — Data-Driven Documents 3.6 jQuery a jQuery UI . . . . . . . . 3.7 Bootstrap . . . . . . . . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

9 9 11 12 14 16 17 18

Implementace aplikace 4.1 Uživatelské rozhraní . . . . . . . . . . . . . . . . . . . . 4.2 Nabídka pomoci . . . . . . . . . . . . . . . . . . . . . . . 4.3 Načtení dat . . . . . . . . . . . . . . . . . . . . . . . . . 4.4 Možnosti zobrazení . . . . . . . . . . . . . . . . . . . . . 4.5 Abnormální dělení . . . . . . . . . . . . . . . . . . . . . 4.6 Posuvník s omezením času . . . . . . . . . . . . . . . . . 4.7 Další možnosti interakce . . . . . . . . . . . . . . . . . . 4.7.1 Seřazení . . . . . . . . . . . . . . . . . . . . . . 4.7.2 Informace o buňce . . . . . . . . . . . . . . . . 4.7.3 Změna velikostí jednotlivých prvků . . . . . . 4.7.4 Vypínání zobrazení jednotlivých prvků . . . . 4.8 Grafy s dodatečnými informacemi o buňkách v určitém čase 4.8.1 Graf stavů . . . . . . . . . . . . . . . . . . . . . 4.8.2 Graf buněk v interfázi . . . . . . . . . . . . . .

. . . . . . . . . . . . . .

19 19 19 20 21 24 25 27 27 27 28 29 29 29 30

3

4

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

. . . . . . .

vii

4.9 Ukládání do vektorové grafiky . . . . 4.10 Programy na převod SVG do PDF . . 4.10.1 Online služby a aplikace . . 4.10.2 Desktopové aplikace . . . . 4.11 Použitelnost ve webových prohlížečích

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

. . . . .

30 32 32 33 34

5

Využití aplikace

37

6

Závěr

39

Literatura

41

A Přílohy

43

viii

Seznam obrázků 2.1

Jednoduchá vizualizace ukázkového příkladu formátu man_track.txt. 6

3.1

Rozdělení vizuálních proměnných podle Bertina [8]. 10 Prvotní verze původní aplikace na vizualizaci rodokmenů buněčných populacích. 12 Finální podoba aplikace pro vizualizaci rodokmenů buněčných populací. 13 Schéma aplikace na vizualizaci rodokmenů buněčných populací. 14 Příklad využití knihovny D3.js na vykreslení treemapy [11]. 17

3.2 3.3 3.4 3.5 4.1 4.2 4.3 4.4 4.5 4.6 4.7 4.8

4.9 4.10 4.11 4.12 4.13 4.14 4.15 4.16

Hlavní nabídka možností aplikace pro vizualizaci rodokmenů. 19 Nabídka s pomocnými texty. 20 Nabídka možností zobrazení. 22 Klasické horizontální vykreslení. 22 Kompaktní horizontální (přehledové) vykreslení. 23 Klasické (vlevo) a kompaktní (vpravo) vertikální vykreslení. 23 Vykreslení grafu s osami u každého rodokmenu. 24 Příklad abnormálního dělení o hodnotě čtyři se změnou hodnoty scale (vlevo) a beze změny hodnoty scale (vpravo). 25 Posuvník pro omezení zobrazení buněk. 25 Příklad abnormálního dělení o hodnotě sedm. 26 Nabídka s možnostmi seřazení. 27 Informační box s údaji o vybraném elementu. 28 Možnosti výběru velikosti fontu. 28 Nabídka vypínatelných prvků v grafu. 29 Graf stavů buněk v čase 62 30 Graf buněk v interfázi. 31

ix

1 Úvod Automatizované sledování buněk z medicínských záznamů je jednou z důležitých a také náročných oblastí bioinformatiky. Algoritmy snažící se o zaznamenání informací o pozorovaných objektech, zejména buňkách či jejich jádrech, mnohdy selhávají v případech, kdy je kvalita pořízeného záznamu nevhodná pro automatizovanou analýzu nebo v případě, kdy je hustota objektů v záznamu natolik vysoká, že je pro ně složité je rozeznat od sebe. Tímto problémem se zabývá i laboratoř Centra analýzy biomedicínského obrazu (dále CBIA)[1] a pro podporu rozvoje těchto algoritmů pořádá každoroční soutěž Cell Tracking Challenge (dále CTC)[2], v rámci které se její účastníci snaží pomocí svých algoritmů získat z dostupných videozáznamů přesné informace o každé buňce. Pro porovnání těchto výsledků slouží výsledné rodokmeny pozorovaných populací, u kterých analýzy a hledání podobností se vzorovým přesným rodokmenem odhalí chyby a rozdíly, ze kterých se pak objektivně určí, který z algoritmů dosáhl nejlepších výsledků. Tyto rodokmeny bylo možné zobrazit pomocí interní aplikace laboratoře CBIA na základě formátu ukládání dat z měření, který byl vytvořen pro soutěž CTC. Aplikace však byla z důvodů nedostatečného výsledného zobrazení a absence funkcionality některých požadovaných funkcí, nevhodná a spolu s problémem nerozšířenosti formátu mimo laboratoř CBIA a soutěž CTC dala podnět ke vzniku této práce. Jejím cílem bylo vytvořit vhodný vizualizační nástroj, který nahradí původní aplikaci, data z měření vhodně zpracuje a poskytne kompaktní grafické znázornění celé buněčné populace, které bude sloužit k následným analýzám testovaných algoritmů.

1.1

Struktura práce

Celá práce je rozdělena do několika kapitol. V první kapitole je podrobněji vysvětleno samotné sledování buněk, soutěž CTC a formát, sloužící pro ukládání informací o buňkách, ze kterých se pak vytváří samotné rodokmeny buněčných populací. 1

1. Úvod Druhá kapitola se zaměřuje na samotný návrh aplikace, je zde přiblížen pojem vizualizace a popsány již existující nástroje, které byly při tvorbě použity. Třetí kapitola se věnuje samotnému popisu a fungování aplikace a jsou zde přiblíženy problémy, které se při implementaci objevily a jak byly vyřešeny. V poslední kapitole je vysvětleno, k čemu je aplikace používána a jaké je užití výsledných rodokmenů v oblasti vědy.

2

2 Sledování a analýza buněk z časosběrných snímků V této kapitole se zaměříme na důležitost sledování buněk a metod, díky kterým můžeme z časosběrných videí (anglicky time-lapse) získat informace o jejich poloze. Dále se podíváme na soutěž CTC, která se zaměřuje na podporu rozvoje algoritmů, které data o buňkách získávají. Podrobně si vysvětlíme jeden z formátů využívaných v této soutěži, ve kterém jsou uloženy časové značky o buňkách a které lze následně využít k vizualizaci rodokmenů buněčných populací. Ke konci kapitoly stručně popíšeme laboratoř CBIA, která tento formát používá a díky které vůbec tato práce vznikla.

2.1

Sledování buněk

Jednou z významných oblastí v bioinformatice je sledování a následná analýza migrace buněk, která je základním krokem k lepšímu pochopení mnoha komplexních biologických procesů, jako je například reakce imunitního systému nebo embryonální vývoj. Je také nezbytným procesem ve vývoji a opravách tkání a jejich chorob, jako jsou například různé typy rakovin, jejichž invazivní pohyb skrz tkáně mění jejich strukturu nebo dokonce zapříčiní jejich zničení [3]. Důležitým aspektem pro zkoumání a pochopení tohoto procesu je přesné určení dynamičnosti (rychlost a směr pohybu buňky) a typu migrace (jakými morfologickými změnami během pohybu buňka prošla) [4]. Abychom však mohli vůbec přejít k samotné analýze, je třeba z původních časosběrných snímků pořízených mikroskopem vysledovat samotný pohyb jednotlivých buněk. Toho můžeme kromě manuálního sledování, které je díky obrovskému množství pořízených snímků a nutnosti jejich manuálního procházení značně pomalé a nepraktické, docílit pomocí algoritmů, které umožňují automaticky identifikovat a segmentovat všechny výskyty buněk a popsat vztahy mezi nimi. Přístupy ke sledování vývoje buněk v čase (tracking) lze rozdělit do dvou kategorií: sledování pomocí detekce (tracking by detection) a sledování pomocí vývoje modelu (tracking by model evolution) [3, 5]. 3

2. Sledování a analýza buněk z časosběrných snímků Výsledkem obou přístupů je matematická reprezentace pomocí acyklického orientovaného grafu. Vrcholy odpovídají detekovaným buňkám, zatímco hrany vztahům mezi nimi. Nedělící se buňky mohou mít nejvýše jednoho potomka, zatímco ty, u kterých došlo k dělení, mohou mít dva potomky. V případě, že se jednalo o abnormální dělení (charakteristické například pro nádorová onemocnění), má mateřská buňka potomků více. 2.1.1

Sledování pomocí detekce

Tento způsob nejdříve detekuje buňky v každém snímku na základě intenzity, textury nebo gradientu a poté tyto buňky spojuje mezi dvěma nebo více po sobě jdoucími snímky, a to typicky optimalizováním určitých pravděpodobnostních funkcí. Tento přístup je výpočetně robustní a efektivní, ale pouze za předpokladu, že je hustota buněk malá. V opačném případě dochází k problémům v segmentaci, jejímž výsledkem je neschopnost rozeznat dvě dotýkající se buňky nebo správně detekovat právě probíhající mitózu. 2.1.2

Sledování pomocí vývoje modelu

Tento způsob oproti předchozímu rozezná buňky pouze v prvním snímku a následně aktualizuje jejich pozici, orientaci a tvar po zbytek videa, kde vždy bere v potaz informace ze snímku předchozího. Výhodou tohoto přístupu je větší přesnost detekce mitotického dělení a samotných buněk při vyšší hustotě výskytu, ale za cenu snížené rychlosti výpočtu.

2.2

Cell Tracking Challenge

Samotné sledování migrace buněk je stále velkou výzvou, hlavně díky tomu, že se buňky mohou pohybovat, podstoupit dělení, odumřít, srážet se, opustit záběr, případně do něj vstoupit [4]. Dalším problémem může být kvalita pořízeného záznamu, kde špatně osvětlené pozadí, velká míra šumu ve snímku, nehomogenní skvrny nebo fototoxické látky mohou narušit správné detekování jednotlivých objektů v obraze. Robustní algoritmy pracující na výše zmíněných přístupech 4

2. Sledování a analýza buněk z časosběrných snímků byly vyvinuty teprve nedávno a ani ty nedokáží ve všech případech detekovat buňky správně. Proto v roce 2013 pod záštitou konference International Symposium on Biomedical Imaging vznikla mezinárodní soutěž CTC, jejímž cílem je podporovat rozvoj dostupných metod pro sledování buněk z dvourozměrných i třírozměrných záznamů a následně objektivně porovnat přesnost a efektivitu mezi nimi [2]. Účastníci soutěže každoročně zkouší své algoritmy fungující na jednom z výše uvedených principů na dvourozměrných i trojrozměrných datech z reálných měření i z těch počítačem vytvořených. V době psaní této bakalářské práce probíhal již třetí ročník, který se oproti předchozím ročníkům zaměřil na vzrůstající počet participantů a poskytl složitější datové sady a to včetně těch extrémních, jako jsou například embryonální data octomilky obecné, pořízené light-sheet mikroskopem [6]. Všechny datové sady a formáty pro ukládání informací z časosběrných záznamů dodržují konvenci a pojmenování vytvořené pro tuto soutěž. Jedním z těchto formátů je i man_track.txt (manual tracking), kterému se věnuji v další podkapitole a který je i zároveň předmětem této bakalářské práce.

2.3

Formát man_track.txt

V tomto textovém souboru jsou uloženy informace o buňkách z pořízených záznamů a podobně jako u CSV1 jsou v tomto souboru uschována data pro každou buňku pozorované populace, namísto čárek jsou však hodnoty odděleny mezerami. Data reprezentují acyklický graf celého pořízeného záznamu. Každý řádek odpovídá jedné buňce, která je charakterizována čtyřmi hodnotami L B E P, kde ∙ L — unikátní kladná identifikační značka (label) buňky (dále ID). ∙ B — index snímku, ve kterém se buňka poprvé objevila. 1. Comma separated values — formát souboru, sestávající z řádků, ve kterém jsou jednotlivé informace odděleny čárkou.

5

2. Sledování a analýza buněk z časosběrných snímků ∙ E — index snímku posledního výskytu buňky, který určuje její zánik (buňka neměla potomky) nebo dělení (z buňky vznikly nové dceřinné buňky). ∙ P — ID rodiče buňky. V případě, že žádného neměla, je použita hodnota 0. Pro lepší pochopení uvedeme jednoduchý příklad. Mějme textový soubor s těmito daty: 1030 2491 3491 4270 Z výše uvedeného popisu zjistíme, že se v celém záznamu, který je tvořen deseti snímky (to zjistíme podle nejvyššího čísla u indexů posledního výskytu buněk — v našem případě 9) vyskytují čtyři buňky. Buňka s ID 1 se poprvé objevila na snímku 0. Buňka neměla rodiče a žila až do snímku 3, kdy došlo k mitotickému dělení a vznikly dvě nové dceřinné buňky 2 a 3, které obě žily až do konce záznamu. Zároveň se na snímku 2 objevila další buňka s ID 4, která rovněž neměla rodiče a existovala až do snímku 7, kdy došlo k jejímu zániku. Jednoduché grafické zobrazení dat z tohoto dokumentu bude vypadat jako buněčný rodokmen na Obrázku 2.1.

Obrázek 2.1: Jednoduchá vizualizace ukázkového příkladu formátu man_track.txt. 6

2. Sledování a analýza buněk z časosběrných snímků Tento formát kromě archivace zmíněných časových značek o každé buňce můžeme použít k vytvoření rodokmenů všech buněčných populací, které se na snímku vyskytly.

2.4

Centrum analýzy biomedicínského obrazu

CBIA je interdisciplinární skupina vědců z oborů biologie, medicíny, fyziky, počítačově vědy a matematiky, jejichž společným zájmem je výzkum a klinické aplikace analýz buněk, pokrytých fluorescenční vrstvou a/nebo jejich komponent, sledovaných využitím optické mikroskopie [1]. Její členové jsou organizátory soutěže CTC a autory všech formátů využívaných v této soutěži, včetně formátu man_track.txt. Zároveň využívali svou vlastí interní aplikaci na zobrazení rodokmenů, avšak z důvodů nedostatečné vizuální validace výsledků z měření získaných od participantů soutěže a absence možnosti vhodného zobrazení v odborných publikacích, dali podnět ke vzniku této práce.

7

3 Návrh aplikace Tato kapitola se věnuje návrhu samotné aplikace pro vizualizaci rodokmenů buněčných populací. Vysvětlíme si zde samotný pojem vizualizace, projdeme si požadavky, které měl program splňovat, a nástroje, které byly při jeho vytváření použity.

3.1

Vizualizace

Co vlastně znamená vizualizace? Pro vysvětlení existuje spousta definic, pro tuto práci si ji však zadefinujeme tak, že vizualizace je v podstatě způsob zobrazení nějaké informace použitím počítačově generovaných, interaktivních a vizuálních reprezentací, které se v uživateli snaží vzbudit zájem tyto informace zkoumat a poskytují mu možnost na ně nahlédnout i z jiného úhlu pohledu. Těmito informacemi mohou být například různé typy dat, u kterých nemusí být v jejich původní podobě (kdy mohou například představovat pouze sadu čísel oddělených čárkou) ani po delším zkoumání patrné, co přesně znamenají nebo jaké jsou vztahy mezi nimi. Kvalitní vizualizace však může pozorovateli umožnit tato složitá data jednoduše zobrazit a poskytnout mu možnost objevit závislosti mezi hodnotami ihned, bez složitého prozkoumávání zdrojových souborů. Jak tedy můžeme data vhodně zobrazit? Odpověď není jednoduchá, protože vhodná vizualizace a metody využívané pro její zobrazení vždy záleží na datech, která chceme uživateli zprostředkovat. Pro některé datové sady je vhodné použít kupříkladu jednoduchý čárový graf, kdežto u jiných by bylo jeho využití nesmyslné a je proto nutné použít jiný typ grafu, případně navrhnout jinou, lepší možnost zobrazení. Vezměme si například data využívaná v této bakalářské práci. Máme v nich uloženy informace o buňkách a chceme uživateli poskytnout možnost prozkoumat jejich populace, porovnat je mezi sebou a umožnit mu rychle vidět chování buněk v rozdílných životních podmínkách. Jako vhodné zobrazení jejich prvních výskytů, zániku a dělení se tedy jako nejlepší možnost jeví data zobrazit jako jednoduchý rodokmen. 9

3. Návrh aplikace Jakmile máme vybrané celkové zobrazení, musíme se ještě zamyslet, jaké vizuální atributy při něm využijeme. Vizuální proměnné jsou sady symbolů, díky kterým můžeme na základě dat zprostředkovat nějakou informaci. Klasifikovat je můžeme do sedmi různých typů, které definoval Jaques Bertin ve svém díle Semiology of Graphics [7], a jejichž rozdělení zobrazuje i tabulka na Obrázku 3.1 .

Obrázek 3.1: Rozdělení vizuálních proměnných podle Bertina [8]. Těmito typy jsou: pozice, velikost, tvar, jas, barva, orientace a textura. Na každý z nich lze namapovat různé informace. Jejich kombinací pak můžeme složitá data zobrazit jednoduše a srozumitelně. Musíme si však dávat pozor, abychom nadměrným využíváním těchto proměnných výsledné zobrazení nepřehnali a nezpůsobili tak, že výsledná vizualizace bude příliš nepřehledná. Jako jednoduchý příklad si vezměme data z man_track.txt. Pomocí kruhů zobrazíme jednotlivé stavy buňky (první snímek výskytu, poslední snímek výskytu, dělení). K jejich odlišení pak použijeme různou barvu (modrá pro první výskyt, červená pro poslední výskyt, zelená pro dělení). 10

3. Návrh aplikace Výsledná vizualizace by měla splňovat to, za jakým účelem byla vytvořena. Tedy dát uživateli informaci o datech a možnost je lépe a snadno pochopit. Pokud však v tomto ohledu selhává, nezáleží už na tom, jestli bylo při jejím vytvoření využito správné zobrazovací metody nebo vhodně využity vizuální proměnné. Nemá-li uživatel zájem data prozkoumat, ať už z důvodu nepřehlednosti nebo složitosti, výsledkem bude vizualizace, která nesplní svůj účel.

3.2

Požadavky na funkcionalitu

Jak už název této bakalářské práce napovídá, cílem bylo vytvořit vizualizační nástroj, který z formátu man_track.txt, podrobně popsaném v předchozí kapitole, zpracuje data v něm uložená a poskytne jednoduchou a přehlednou grafickou reprezentaci rodokmenu buněčných populací. Kromě toho musí aplikace splňovat několik dalších požadavků: ∙ možnost výslednou vizualizaci buněčné populace zobrazit horizontálně i vertikálně (pro potřeby publikování v odborných článcích), ∙ možnost uložit výsledné zobrazení ve vektorové grafice, nejlépe ve formátu PDF nebo EPS, ∙ jazykem aplikace by měla být angličtina. Po diskusi s vedoucí práce a členy laboratoře CBIA bylo kromě výše zmíněných nutných možností přidáno ještě několik dalších funkcí. Byly jimi možnosti: ∙ kompaktního zmenšeného přehledového zobrazení, ∙ seřazení vykreslených populací podle času výskytu kořenové buňky populace ve snímku nebo podle jejich ID, ∙ omezení zobrazovaných buněk podle času, ∙ klikatelné elementy v grafu, které poskytnou detailnější informace o dané buňce, ∙ zobrazení dodatečných grafů, poskytujících informace o buňkách v určitém čase (frame). 11

3. Návrh aplikace

3.3

Původní aplikace

V rámci laboratoře CBIA bylo doposud využíváno interní aplikace, jejíž výsledné zobrazení bylo pro potřeby publikování v odborných článcích značně nepraktické a vizuálně nedostatečné, jak je vidět na obrázku 3.2.

Obrázek 3.2: Prvotní verze původní aplikace na vizualizaci rodokmenů buněčných populacích. Hlavním nedostatkem byla nemožnost vertikálního zobrazení, které je nutné pro zveřejnění v odborných publikacích, ve kterých byl horizontální graf z důvodů omezené šířky stránky nepřehledný a při velkém počtu dat také kvůli své velikosti nečitelný. Dalším problém byla nedostatečná reprezentace osy, díky které by šlo ihned rozpoznat, ve kterém snímku se buňka objevila, zmizela nebo podstoupila dělení. Navíc bylo třeba, aby byla vykreslena u každého jednotlivého grafu. Pro nezkušeného uživatele mohlo být dále matoucí, zda uvedený čas nad linkou značí dobu od počátku záznamu nebo zda odpovídá pouze době výskytu buňky v záznamu. Nadměrné opakování slova „mitosis“ a absence filtrování buněk též neusnadňovalo práci a přehlednost vizualizace. Nakonec z důvodů, že se jednalo o jedinou aplikaci, která data z formátu man_track.txt dokázala zobrazit v podobě rodokmenů, a že byla využívána pouze členy laboratoře CBIA, bylo způsobeno, že se forma archivace informací o buňkách mimo soutěž CTC a laboratoř CBIA nevyužívá. 12

3. Návrh aplikace Bylo tedy nutné vytvořit aplikaci novou, která kromě vhodné reprezentace pro uveřejnění v odborných publikacích a napravení nedostatků původní aplikace poskytne i lepší grafickou úpravu a nově rovněž možnost využívat aplikaci i mimo laboratoř CBIA, která by v konečném důsledku podpořila rozšíření formátu man_track.txt mimo soutěž CTC. Na základě těchto požadavků bylo rozhodnuto, že se bude jednat o aplikaci webovou, tedy volně dostupnou všem, kteří by ji chtěli využít. K jejímu vytvoření byla využita javascriptová knihovna D3.js, jejíž jednoduchá implementace pro internetové prohlížeče, velké množství funkcí pro samotnou vizualizaci dat a to, že je open-source, rozhodlo, že se jedná o nejlepší možnou volbu pro tuto bakalářskou práci. Podrobně si tuto knihovnu přiblížíme v jedné z následujících podkapitol. Výsledná podoba aplikace je zobrazena na Obrázku 3.3.

Obrázek 3.3: Finální podoba aplikace pro vizualizaci rodokmenů buněčných populací.

13

3. Návrh aplikace

3.4

Samotný návrh aplikace

Obrázek 3.4: Schéma aplikace na vizualizaci rodokmenů buněčných populací. 14

3. Návrh aplikace Po zhodnocení všech nedostatků původní aplikace a dohodnutí se s vedoucí i členy laboratoře CBIA na nutných i dodatečných požadavcích aplikace nové byl vytvořen schématický návrh uvedený na Obrázku 3.4. Aplikace po spuštění nabídne uživateli možnost nahrání souboru, který odpovídá formátu man_track.txt, podrobně popsaném v předchozí kapitole. V případě, že se jedná o jiný typ souboru, než je textový, nebo pokud data v něm neodpovídají zavedenému standardu soutěže CTC (na každém řádku se nevyskytují pouze čtyři čísla oddělená mezerami), aplikace na to uživatele upozorní. V případě, že si uživatel není jistý ovládáním a funkcí aplikace, je v ní dostupná forma nápovědy, která uživateli poskytne detailní informace o samotném ovládání a jednotlivých možnostech, které aplikace nabízí. Po nahrání souboru aplikace data zpracuje a zobrazí výsledný graf rodokmenů všech buněk, které se ve snímku vyskytovaly. Zároveň se uživateli otevřou možnosti s vizualizací dále pracovat. Pro přehled si zde uvedeme všechny funkce, které aplikace umožňuje, podrobněji si je rozebereme v následující kapitole, pojednávající o samotné implementaci aplikace. 1. Interakce — uživatel má možnost klikat na jednotlivé prvky v grafu, čímž zobrazí všechny informace o dané buňce, jimiž jsou: přesný čas prvního výskytu ve snímku, čas posledního výskytu ve snímku, ID svého rodiče a seznam svých potomků. Klikatelnými prvky jsou: (a) první výskyt buňky, (b) poslední výskyt buňky, (c) dělení, (d) čára spojující první a poslední výskyt buňky. 2. Osa — uživatel má možnost kliknout na osu, zobrazující aktuální čas ve snímku, čímž vyvolá posun hlavní linky, která určuje daný čas v záznamu, a následně zobrazí dodatečné grafy (graf stavů a graf buněk v interfázi — více si tyto dva grafy přiblížíme v následující kapitole), poskytující informace o buňkách ve vybraném čase. 3. Možnosti zobrazení — uživateli se zpřístupní tlačítka, díky kterým může manipulovat s výsledným zobrazením právě vykreslené populace. Těmito tlačítky jsou: 15

3. Návrh aplikace (a) Horizontální / Vertikální zobrazení — umožňuje přepínat mezi horizontálním nebo vertikálním zobrazením buněčné populace. (b) Kompaktní zobrazení — umožňuje uživateli přepínat mezi základním a kompaktním zobrazením. Toto zobrazení vykreslí celou populaci ve zmenšeném měřítku, čímž umožní vykreslit přehledný graf všech buněk, bez dodatečných prvků (ID buňky, celková doba výskytu v záznamu). (c) Omezení vykreslení — umožňuje uživateli pomocí posuvníku omezit časy od–do, ve kterých se buňky budou vykreslovat. (d) Seřazení — umožní výsledné populace seřadit podle kořenových buněk, tedy buněk určujících počátek nové populace (buňka nemá rodiče) a to podle jejich ID nebo času výskytu. (e) Vypínání prvků — umožňuje uživateli vypínat jednotlivé prvky v grafu. Těmito prvky jsou: ID buňky, celková doba výskytu ve snímku, čára na průzkum grafu v daném čase. (f) Změna fontu — umožňuje uživateli měnit velikost fontu jednotlivých popisných prvků v grafu. Prvky, které lze možno změnit jsou: ID a celková doba výskytu ve snímku. (g) Uložení výsledné populace — umožní uživateli výsledný graf celé populace uložit ve vektorové grafice. Kromě všech zmíněných možností aplikace navíc kdykoliv umožňuje znovu nahrát nový soubor a vykreslit tak novou populaci.

3.5

D3.js — Data-Driven Documents

V rámci této práce byla použita, jak už bylo zmíněno, javascriptová knihovna D3.js, která je určena pro manipulaci dokumentů založených na datech. Umožňuje spojit data s objektovým modelem dokumentu (DOM — z anglického Document Object Model) s využitím HTML, CSS a SVG a následně na nich implementovat různé typy interaktivity a přechodů. Knihovna podporuje mnoho základních tvarů, které může vykreslit (čára, kruh, čtverec, polygon, text, ...), možnost výběru jednotlivých 16

3. Návrh aplikace elementů v DOM (jako je head, body, případně jednotlivé vykreslené základní tvary), práci s formátem SVG, práci s geografickými souřadnicemi a možnost rozšíření dostupnými pluginy. Kromě možnosti vytvářet vizualizace přímo od základu poskytuje knihovna i několik základních rozvržení (layouts), mezi něž patří například klasický koláčový graf, dendrogramy, histogramy, uspořádání do stromu nebo treemapy (viz Obrázek 3.5). Dále umožňuje jednoduše nahrávat data z formátů .csv, .json a .txt. Knihovna byla vydána v roce 2011 jako nástupce tehdejšího frameworku Protovis, který generoval SVG grafiku na základě dat. Oproti němu se D3 více zaměřuje na webové standardy a poskytuje lepší výkon [9, 10].

Obrázek 3.5: Příklad využití knihovny D3.js na vykreslení treemapy [11].

3.6

jQuery a jQuery UI

Dalšími javascriptovými knihovnami, které byly při implementaci aplikace použity, jsou jQuery a jQuery UI. ∙ jQuery je zaměřena na interakci mezi javascriptem a HTML a umožňuje manipulaci s prvky na webových stránkách, animace a řešení událostí. Těmi může být cokoliv, co se při běhu 17

3. Návrh aplikace stránky může stát. Událost může být vyvolána jak uživatelem, tak i samotnou stránkou. Jako příklad uveďme kliknutí myší na element na stránce (obrázek, tlačítko, text), stisknutí kláves nebo najetí kurzorem na prvek na stránce [12]. ∙ jQuery UI je nadstavba jQuery a je zaměřena na uživatelské rozhraní a umožňuje navíc řešit práci s okny, nápovědami, posuvníky a efekty, aplikované na všechny tyto prvky. Dále se v rámci této knihovny využívá i možnosti frameworku ThemeRoller, který lze jednoduše použít k rychlé jednotné změně vizuální podoby prvků na stránce [13]. V aplikaci byly knihovny využity zejména při implementaci funkcí tlačítek, posuvníku pro omezení vykreslení výsledných buněčných populací a při výběru jednotlivých elementů uživatelského rozhraní. Podrobněji se o využití zmíníme v další kapitole.

3.7

Bootstrap

Bootstrap je jeden z populárních HTML, CSS a javaskriptových frameworků, pro tvorbu responzivních a pro mobily přívětivých webových stránek. Byl vytvořen jako framework podporující konzistenci mezi interními nástroji z důvodu využívání příliš velké řady knihoven, který vedl k nekonzistenci a náročnosti na údržbu [14]. Bootstrap je podporován posledními verzemi všech hlavních prohlížečů, využívá své vlastní CSS, které uživateli umožňuje použít jednotný, moderní vzhled pro jednotlivé části HTML. Jeho javascriptové komponenty fungují jako nadstavba jQuery a s jeho pomocí lze využít mnoho dostupných pluginů. Těmi jsou například: dialogová okna, rozbalovací políčka s nabídkou, bublinková nápověda, výstražné nebo informační boxy, vyskakovací okna, našeptávač a další. V rámci této práce byl Bootstrap použit pro grafickou úpravu všech tlačítek aplikace a pro rozbalení nabídek s dalšími funkcemi.

18

4 Implementace aplikace V této kapitole se zaměříme na samotnou implementaci celé aplikace. Podrobně si popíšeme veškeré funkce, které aplikace umožňuje, a projdeme si problémy, které se při tvorbě objevily, a jakým způsobem byly vyřešeny. Nakonec se podíváme na kompatibilitu aplikace v jednotlivých prohlížečích.

4.1

Uživatelské rozhraní

Základem každé aplikace je rozhraní, díky kterému může uživatel s aplikací komunikovat a využívat všechny možnosti, kterými disponuje. Na základě schématu celé aplikace, uvedeném v předchozí kapitole, byla vytvořena hlavní nabídka se všemi funkcemi, které může uživatel využít (Obrázek 4.1).

Obrázek 4.1: Hlavní nabídka možností aplikace pro vizualizaci rodokmenů. Po spuštění aplikace jsou všechna tlačítka kromě možnosti nahrát soubor (Load File) a nabídky s pomocí (HELP) zablokována. Po úspěšném nahrání prvního souboru jsou však aktivována a uživatel tak následně může využít jejich funkce. Pro tvorbu a výsledný vzhled celé nabídky bylo využito frameworku Bootstrap (více o něm je k nalezení v předešlé kapitole) a jednotlivé funkce všech tlačítek jsou vysvětleny v následujících podkapitolách.

4.2

Nabídka pomoci

V případě, že si uživatel není kdykoliv při užívání aplikace jistý funkcionalitou samotné aplikace či chováním jednotlivých prvků na stránce, může vždy využít tlačítka s nabídkou pomoci (HELP), jak je znázorněno na Obrázku 4.2. Všechny vysvětlující texty jsou rozděleny do 19

4. Implementace aplikace tří kategorií, které se zaměřují na jednotlivé oblasti aplikace. Těmito kategoriemi jsou: ∙ Hlavní nabídka, ve které se uživatel dozví o funkcionalitě jednotlivých položek v nabídce. ∙ Grafy, které uživateli popíšou jednotlivé zobrazované grafy a význam prvků v nich použitých. ∙ Interaktivita, ve které se uživatel dozví o možnostech interakce, kterou mu aplikace nabízí.

Obrázek 4.2: Nabídka s pomocnými texty.

4.3

Načtení dat

Hlavní funkcí, kterou může uživatel při spuštění aplikace použít, je tlačítko Load File. To po úspěšném vybrání souboru z počítače uživatele daný soubor zpracuje (funkce parseData(text)) a vykreslí z něj samotnou vizualizaci rodokmenů buněčných populací. 20

4. Implementace aplikace Podporovány jsou pouze soubory typu .txt, dodržující konvenci soutěže CTC. V případě, že se jedná o neplatný typ souboru (tedy soubor s příponou jinou než je .txt) nebo pokud data nejsou v přesně stanoveném formátu (nedodržují formát: L B E P — popsaném v podkapitole man_track.txt), aplikace upozorní uživatele chybovou hláškou s odůvodněním, proč nebyla data přijata, případně i místem výskytu, kde se data rozschází s očekávanou formou. V případě, že nedojde při čtení souboru k žádným chybám, dojde k zavolání funkce display(), která v závislosti na tom, jaké je zrovna aktivní zobrazení (implicitně nastaveno na horizontální vykreslení), daný soubor vykreslí. Pro tlačítko Load File bylo použito základní tlačítko v HTML (input s atributem type nastaveným na file), u kterého se kontroluje událost nahrání souboru. Poté dojde k zavolání funkce parseData(text) a následně i dalších funkcí, které umožní výslednou populaci zobrazit. Funkce parseData(text) bere jako svůj argument celý textový soubor, projde jej a vytvoří z něj seznam kořenových buněk všech populací. Kořenovou buňkou je zde myšlena buňka, která nemá žádného rodiče, a která může, ale nemusí, mít nějaké potomky. Pokud nějaké má, jsou všichni tito potomci uloženi v seznamu potomků daného rodiče. Výsledný seznam je pak brán jednotlivými funkcemi pro horizontální a vertikální zobrazení, které jej následné zobrazí jako výslednou vizualizaci.

4.4

Možnosti zobrazení

Výsledná vizualizace populací může nabývat dvou rozdílných typů zobrazení — horizontální a vertikální — jež umožňují vykreslení ve dvou různých podobách — kompaktním (přehledovém) a klasickém. Všechny čtyři možnosti jsou dostupné z tlačítka Display (viz. Obrázek 4.3) a využívají stejnou funkci pro vykreslení: displayPopulation(cell, position, container, repairer, positionInGraphBoxSVG)). V závislosti na tom, zda se má momentálně vykreslovat horizontálně nebo vertikálně, se vykreslují jednotlivé prvky (počáteční výskyt, poslední výskyt, spojující linka počátečního a posledního výskytu, ID buňky, doba života, spojová čára s potomkem) na danou pozici v grafu, 21

4. Implementace aplikace

Obrázek 4.3: Nabídka možností zobrazení. míru zobrazení pak řeší globální proměnná scaler (určuje rozpětí na ose v grafu) a jednotlivé velikosti daných prvků (radius a stroke). Porovnání jednotlivých zobrazení ukazují Obrázky 4.4, 4.5, 4.6.

Obrázek 4.4: Klasické horizontální vykreslení. Zobrazení funguje pro všechny typy případů. V tom nejčastějším, kdy se předpokládá, že buňka má buď žádného, jednoho anebo dva potomky (tedy došlo nejvýše k mitotickému dělení) pracuje aplikace bez jiných dodatečných modifikací. 22


Obrázek 4.5: Kompaktní horizontální (přehledové) vykreslení. V případě, že však dojde k abnormálnímu dělení — tedy k dělení, při kterém vznikne tři a více potomků — dochází při vykreslení k drobným změnám, které ovlivňují výsledné zobrazení a které jsou detailně rozebrány v další podkapitole.

Obrázek 4.6: Klasické (vlevo) a kompaktní (vpravo) vertikální vykreslení. Kromě výběru možností, zda se bude graf buněčných populací vykreslovat horizontálně anebo vertikálně, aplikace dále umožňuje přepínání mezi vykreslením jedné hlavní osy (jak bylo znázorněno na 23

4. Implementace aplikace předešlých grafech) anebo vykreslení osy u každého rodokmenu, jak je znázorněno na Obrázku 4.7.

Obrázek 4.7: Vykreslení grafu s osami u každého rodokmenu.

4.5

Abnormální dělení

K abnormálnímu dělení, kdy z původní mateřské buňky vznikají více než dvě buňky dceřinné, dochází převážně u rakovinotvorných buněk. Ačkoliv se nejedná o běžné případy, aplikace s nimi počítá, avšak s jistými omezeními a úpravami oproti zobrazení klasickému. Prvním podstatným rozdílem je změna globální proměnné scale, která v případě, že dojde k dělení většímu než jsou tři noví potomci, nastaví tuto hodnotu rozpětí na ose na výrazně menší, než je hodnota původní, z důvodů ušetření místa při vykreslení. Pokud by ke zmenšení nedošlo, výsledné větvení dané populace by bylo příliš velké a svým rozpětím by přesáhlo velikost zobrazovacího okna a nešlo by tak vidět celou výslednou populaci. Porovnání vykreslení s a beze změny hodnoty scale uvádí Obrázek 4.8. Avšak ani tato drobná modifikace nedokáže zajistit případy příliš velkého dělení a tohoto případu se týká i druhá změna. Byla stanovena maximální hodnota podporovaného dělení, při které aplikace zaručí 24


Obrázek 4.8: Příklad abnormálního dělení o hodnotě čtyři se změnou hodnoty scale (vlevo) a beze změny hodnoty scale (vpravo). přijatelně vhodné zobrazení. Touto hranicí je hodnota pět, která byla stanovena na základě domluvy s členy laboratoře CBIA. Při překročení této hranice sice aplikace zobrazení umožní, výsledná podoba však nemusí být ideální, jak ukazuje Obrázek 4.10.

4.6

Posuvník s omezením času

Jako jedna z možností interakce s výsledným zobrazením je omezení populace pomocí posuvníku. Ten umožňuje manipulaci se svými koncovými body, které odpovídají omezení, od jakého snímku a po který snímek se má výsledná populace zobrazit. Po nahrání souboru je posuvník implicitně nastaven na vykreslení všech prvků patřících do intervalu od počátku celého záznamu (snímku číslo 0) až po jeho konec (poslední snímek záznamu) — Obrázek 4.9.

Obrázek 4.9: Posuvník pro omezení zobrazení buněk. V případě omezení se nejdříve projde seznam všech buněk z nahraného souboru a vytvoří se z něj seznam aktuálně zobrazovaných 25


Obrázek 4.10: Příklad abnormálního dělení o hodnotě sedm. buněk. U nich se při vykreslení kontroluje, zda jednotlivé stavy buňky, kterými jsou: prvotní výskyt v záznamu, poslední výskyt v záznamu, dělení; se v omezení nachází. V případě že ne, nejsou vykresleny. Pro linku spojující počáteční a koncový bod buněk se postupuje jinak. Po kontrole, zda do zobrazení patří výše zmíněné stavy, je v případě, že se alespoň jeden nevykreslí, linka omezena a končí svou pozicí na posledním možném místě zobrazení, určeném aktuálním koncovým bodem posuvníku. Při omezení může navíc dojít k případu, že výsledná buňka do požadovaného intervalu vůbec nepatří žádnou svou částí. V takové situaci je buňka z aktuálního seznamu vykreslovaných buněk odstraněna a v případě, že má nějaké potomky a ty patří do žádaného intervalu, jsou tyto buňky přidány jako nové kořenové buňky. Při implementaci posuvníku bylo využito knihovny jQueryUI a její funkce slider(), díky které byla jednoduše kontrolována uživatelova interakce s držátky posuvníku a po ukončení manipulace okamžitě 26

4. Implementace aplikace zavolána funkce display(). Ta na základě nových parametrů výslednou vizualizaci upravila.

4.7

Další možnosti interakce

Zde jsou popsány další možnosti interakce s výsledným zobrazením. 4.7.1

Seřazení

Jako další možnost interakce aplikace nabízí funkci vzestupného seřazení právě vykreslených populací dle dvou parametrů: ∙ kořenové buňky jsou porovnány dle svých ID, ∙ kořenové buňky jsou porovnány dle svých časů prvního výskytu ve snímku.

Obrázek 4.11: Nabídka s možnostmi seřazení.

4.7.2

Informace o buňce

Jinou možností je kliknutí na jeden z vykreslených prvků v grafu. Interaktivními prvky jsou: doba prvního výskytu ve snímku, doba posledního výskytu ve snímku, dělení a linka spojující oba výskyty buňky. Stisknutí levého tlačítka myši na některý z nich vyvolá veškeré informace o dané buňce v informačním boxu (Obrázek 4.12). Těmito informacemi jsou: ∙ o jaký prvek se jedná a jaké buňce náleží, ∙ čas prvního výskytu buňky, ∙ čas posledního výskytu buňky, 27

4. Implementace aplikace ∙ číslo rodiče buňky, ∙ seznam potomků.

Obrázek 4.12: Informační box s údaji o vybraném elementu.

4.7.3

Změna velikostí jednotlivých prvků

Uživatel má možnost změnit velikost fontu ID a celkové doby výskytu buňky (Obrázek 4.13). Na výběr má několik možností, které může pro jednotlivé prvky zvolit individuálně.

Obrázek 4.13: Možnosti výběru velikosti fontu.

28

4. Implementace aplikace 4.7.4

Vypínání zobrazení jednotlivých prvků

Při prozkoumávání výsledné vizualizace mohou jednotlivé prvky uživateli překážet nebo mu mohou připadat nedůležité. Aplikace proto umožňuje všechny nedůležité prvky vypínat a zapínat dle jeho libosti (Obrázek 4.14). Těmito vypínatelnými prvky jsou: ID buňky, celková doba výskytu buňky ve snímku a hlavní čára pro průzkum grafů.

Obrázek 4.14: Nabídka vypínatelných prvků v grafu.

4.8

Grafy s dodatečnými informacemi o buňkách v určitém čase

Kromě hlavní vizualizace rodokmenu buněčných populací umožňuje aplikace navíc i zobrazení dvou dodatečných grafů, jimiž jsou Graf stavů a Graf buněk v interfázi, které poskytují detailnější pohled na stavy buněk v daném čase. Tento určitý snímek je dán pozicí hlavní červené linky, která prochází vizualizací celé populace. Tato linka může kliknutím na jakékoliv místo na ose, popřípadě stisknutím pravé a levé šipky na klávesnici, změnit svou pozici, čímž vyvolá zavolání funkce getAdditionalData(time), která oba grafy následně vykreslí. 4.8.1

Graf stavů

Každá buňka může během celého výskytu ve snímku nabýt pěti rozdílných stavů: ∙ BEGIN, který určuje snímek prvního výskytu v záznamu, ∙ END, který určuje snímek posledního výskytu v záznamu, 29

4. Implementace aplikace ∙ DIVISION, který určuje snímek, ve kterém buňka podstoupila dělení, ∙ INTERPHASE, který označuje stav, kdy se buňka vyskytuje na záznamu, ale není v žádném z předchozích tří uvedených stavů, ∙ a stav, kdy se vůbec v daném čase v záznamu nenachází.

Obrázek 4.15: Graf stavů buněk v čase 62 Jak už bylo zmíněno, pokud hlavní linka změní svou pozici, zavolá se patřičná funkce, která projde všechny buňky v záznamu a získá z nich všechny buňky patřící do jednoho z výše uvedených stavů v daném čase. Kromě posledního je pak dle výsledného počtu jednotlivých stavů vykreslen horizontální sloupcový graf, který tento přehled jednoduše zobrazí (Obrázek 4.15). 4.8.2

Graf buněk v interfázi

Tento graf slouží ke zmenšenému zobrazení všech buněk v interfázi, pro rychlé zjištění, v jaké části interfáze se buňka právě nachází. Interfázi představuje linka, která spojuje (podobně jako v hlavní vizualizaci) begin a end body a je jimi ohraničena (Obrázek 4.16).

4.9

Ukládání do vektorové grafiky

Jedním ze dvou hlavních požadavků na aplikaci byla možnost ukládání výsledné vizualizace do vektorové grafiky (nejlépe do formátu PDF), která by šla následně využít nejen pro výzkumné účely, ale i pro 30


Obrázek 4.16: Graf buněk v interfázi.

potřeby publikování v odborných publikacích. Ač se původně nepředpokládalo, že bude s ukládáním do hojně využívaného a známého formátu problém, nakonec se jednalo o jednu z nejproblematičtějších částí a její řešení se muselo obejít přes ukládání do jiného formátu a následné konverze pomocí externího programu. Hlavní příčinou problému byla absence jakékoliv možnosti převodu výsledného SVG grafu, vytvářeného pomocí D3.js, do formátu PDF nebo EPS lokálně na straně uživatele, jelikož samotná knihovna něco takového, až na ukládání nevektorových obrázků (PNG, JPEG. . . ), neumožňuje. Byly vyhledány některé metody, které měly export do PDF údajně zvládnout, bohužel se je nepodařilo nijak zprovoznit a byly prohlášeny za nefunkční. Jinou možností, která se naskytla, byla konverze na straně serveru. K tomuto účelu měl posloužit nástroj PhantomJS. I s ním se však objevily problémy spojené se samotnou instalací a následným zavedením do aplikace. Po domluvě se členy laboratoře CBIA bylo rozhodnuto, že výslednou vizualizaci půjde uložit do formátu SVG a v rámci této práce bude vyzkoušeno několik různých externích aplikací pro konverzi do formátu PDF. Následně budou tyto aplikace porovnány a bude doporučena nejlepší z nich. Všechny vyzkoušené možnosti jsou uvedeny v následující podkapitole. 31


4.10 Programy na převod SVG do PDF V rámci této práce bylo vyzkoušeno několik rozdílných aplikací, jak webových, tak i desktopových, které umožňují převod SVG formátu do PDF. 4.10.1 Online služby a aplikace Nejprve se podívejme na online služby, které tuto funkci umožňují. CloudConvert Jako první byla vyzkoušena služba CloudConvert [15], která umožňuje nahrání souboru lokálně z počítače nebo z různých úložných webových prostor (jako je Dropbox, Google Disk. . . ) a poskytuje možnost převést jeden z mnoha dostupných typů souboru (od archivních formátů, audio nahrávek, různých typů obrázků, videí nebo dokumentů) do jiných. Mezi dostupnými možnostmi je i převod SVG do PDF. Služba je dostupná i zdarma a podporuje až dvacet pět převodů denně. Je však omezena na 5 souběžně běžících převodů a v případě překročení hranice převodů za den je nutné využít jednoho z dostupných placených balíčků nebo počkat na následující den. Výsledky se po několika testováních vůbec nelišily od původního SVG a pro potřeby převodu je služba vřele doporučena. FileFormat Další testovanou službou byly stránky aplikace FileFormat [16]. Ta dokáže kromě konverze obrázků do jednoho z dostupných formátů i převod textů a dokumentů. Služba je dostupná zdarma a bez omezení. Výsledky testování však nejsou natolik přívětivé. Aplikace sice nabízí možnosti výběru finální velikosti strany PDF soubrou, ale téměř v každém případě vytváří kolem grafu velká prázdná místa. Pouze v případě, kdy uživatel nastaví přesně definovanou hodnotu šířky u horizontálního grafu (na hodnotu 200) nebo výšky u vertikálního grafu (na hodnotu 100), je poté výsledné PDF přijatelné, ale ne perfektní. 32

4. Implementace aplikace Pro potřeby převodu proto není služba moc doporučována. Zazmar Zazmar [17] je internetová služba, která umožňuje konverzi rozdílných typů souborů do jiných, včetně převodu SVG do PDF. Její využití je taktéž zdarma, ale pro převod je nutné zadat emailovou adresu, na který bude zaslána zpráva s odkazem ke stažení převedeného souboru. Při testování převodu se služba úplně neosvědčila. Dochází při ní totiž k chybě, kdy výsledné osy neodpovídají osám původním. Z tohoto důvodu není tedy služba doporučována. Convertio Poslední testovanou internetovou službou bylo Convertio [18]. Podobně jako u CloudConvert podporuje tato stránka mnoho formátů, stejně tak i nahrání souboru z počítače nebo webových úložných prostor. Umožňuje však pouze deset převodů denně (dvacet pět po registraci) zdarma, pro větší počet je nutné využít jeden z placených balíčků. Při testování se služba vůbec neosvědčila a není doporučována, výsledný PDF soubor totiž nejde otevřít. 4.10.2 Desktopové aplikace Nyní si přiblížíme několik desktopových aplikací, pomocí kterých můžeme výsledný SVG soubor uložit nebo převést do PDF. Inkscape Prvním z testovaných aplikací byl Inkscape [19]. Jedná se o open source software pro práci s vektorovu grafikou, běžící na operačních systémech Windows, Mac OS X a Linux. Je zdarma a umožňuje otevřít SVG soubory a uložit je do jednoho z mnoha formátů, včetně PDF. Kromě toho umožňuje SVG před případným uložením upravit. Při testování se dosáhlo dobrých výsledků a aplikace je pro převod vřele doporučována. 33

4. Implementace aplikace XML2PDF Workstation Dalším programem na testování byl XML2PDF Worksation [20]. Jedná se o aplikaci od firmy Altsoft, která je dostupná zdarma a umožňuje převádět XSL-FO, SVG, HTML nebo Word soubory do PDF, XPS nebo TIFF. Má jednoduché rozhraní a podporuje možnost digitálního podpisu u PDF a XPS souborů. Během testování nedošlo k žádným problémům a výsledné PDF plně odpovídá původnímu SVG. Software je proto pro převod vřele doporučován. Adobe Illustrator Adobe Illustrator [21] je program pro práci s vektorovou grafikou od společnosti Adobe. Umožňuje vytvářet loga, skici, ikony, typografické i složité ilustrace pro tisk, web, interaktivní obsah, video a mobilní zařízení. Též podporuje otevření souborů SVG, jeho následnou úpravu, pokud je třeba, a uložení do formátu PDF. Software je placený, oproti předchozím dvou aplikacím tedy méně vhodným. Výsledky testování jsou však dobré a pro účely převodu lze tedy aplikaci také doporučit.

4.11 Použitelnost ve webových prohlížečích Výsledkem této práce je webová aplikace, která uživateli umožňuje vykreslit rodokmeny v buněčných populacích. Aby ji však mohl využít v podstatě kdokoliv, musela být aplikace vyzkoušena v různých internetových prohlížečích a případně upravena tak, aby na co největším počtu z nich fungovala. Aplikace byla primárně vyvíjena pro prohlížeč Google Chrome1 a Mozilla Firefox2 , které patří mezi dva nejrozšířenější prohlížeče vůbec. U obou z nich byla funkcionalita na jejich nejnovějších verzích otestována a je doporučováno aplikaci využívat primárně na nich. 1. Verze: 50.0.2661.102 m 2. Verze: 43.0.1

34

4. Implementace aplikace Dalším testovacím prohlížečem byl Internet Explorer3 . S ním se vyskytl problém a možnost uložení do SVG u něj není bohužel dostupná. Ostatní funkce aplikace jsou však plně funkční. Oproti Google Chrom nebo Mozilla Firefox je však rychlost aplikace podstatně nižší. Jiným testovacím prohlížečem bylo Safari4 od firmy Apple. V tomto prohlížeči není aplikace vůbec funkční z důvodu chybějící podpory FileReaderu, který je využíván při získávání textových dat od uživatele. Posledními testovacími prohlížeči byla Opera5 a Maxthon6 . V obou případech byla aplikace funkční, ale jejich velikost uživatelského rozhraní zapříčinila, že výsledná vizualizace přetékala velikost okna, pokud nebylo využito funkce zobrazení na celou obrazovku, a tím způsobila nedostupnost některých tlačítek ovládání vizualizace. Výsledné zobrazení a rozložení aplikace bylo tedy upraveno a u Maxthonu je aplikace plně funkční. V případě Opery se však problém nepodařilo plně vyřešit a ve vertikálním zobrazení je posuvník mimo obrazovku, dokud není zmenšeno zobrazení na 75 %.

3. 4. 5. 6.

Verze: 11.0.9600.18314 Verze: 5.1.7 (7534.57.2) Verze: 37.0.2178.43 Verze: v4.9.2.1000

35

5 Využití aplikace Výsledné rodokmeny buněk mohou být použity v několika různých oblastech. Jejich využití můžeme rozdělit ze dvou hledisek: biologického a informatického. V každém z nich finální rodokmen poskytuje jiné informace. Biologický pohled Pokud se na konečnou vizualizaci podíváme z pohledu biologa, můžeme pozorováním výsledného grafu zjistit, jaké bylo chování buněk v daných podmínkách a jaké mělo dopad na jejich životní cyklus — u něj můžeme sledovat zejména jeho délku (doba života, než buňka podstoupila dělení). Můžeme též zjistit, zda byly buňky synchronizovány a zda se synchronně dělily. Informatický pohled Pokud rodokmen zhodnotíme z pohledu informatika, zajímá nás především podobnost výsledného zobrazení se vzorovým rodokmenem. Tato informace nám slouží hlavně ke zjištění shodnosti grafů při validaci algoritmů, které pracují na jednom z principů sledování buněk, podrobněji popsaném v podkapitole Sledování buněk. Díky tomu můžeme najít chyby v těchto algoritmech a případně je porovnat s chybami jiných algoritmů, které pracovaly se stejnými videozáznamy, avšak každý z nich poskytl jiné výsledky. Výsledná aplikace bude převážně využívána členy laboratoře CBIA k vizuální validaci výsledků z měření, získaných prostřednictvím soutěže CTC a ke zjištění, který ze zaslaných algoritmů zpracoval videozáznam nejlépe.

37

6 Závěr Cílem této práce bylo navrhnout a vytvořit webovou aplikaci, která by z formátu pro archivaci časových sekvencí buněčných populací vytvořila interaktivní grafické zobrazení rodokmenů. Nejprve jsme se seznámili s formátem man_track.txt, ve kterém jsou uloženy posloupnosti předků a potomků a to včetně časových značek jejich vzniku, zániku a dělení. Následně jsme si udělali návrh samotné aplikace a stanovili si, jaké funkce by měla aplikace uživateli umožňovat. V praktické části této práce pak byla na základě návrhu zhotovena aplikace, která umožňuje interaktivně prozkoumávat rodokmeny buněčných populací. Aplikace byla testována v rámci laboratoře CBIA a až na výjimky je podporvána všemi prohlížeči. Prozatím však není dostupná online a širší veřejnosti, je však v plánu aplikaci dát na stránky laboratoře CBIA. Během praktické části práce bylo zjištěno, že neexistuje jednoduché řešení pro ukládání SVG grafiky do formátu PDF. Z toho důvodu byla aplikace upravena tak, aby výsledné rodokmeny ukládala pouze ve formátu SVG. Na základě toho pak byly v rámci této práce vyzkoušeny dostupné externí možnosti převodu SVG do PDF a doporučena nejvhodnější řešení. V budoucnu by bylo vhodné aplikaci rozšířit o funkční ukládání rodokmenů do PDF v rámci samotné aplikace, ať už s využitím samostatné javascriptové knihovny anebo pluginu využívajícím D3.js, a upravit, případně přidat funkce, které budou vyžadovány na základě testování širší veřejností.

39

Literatura [1] Centre for Biomedical Image Analysis: Research, University. [online]. [cit. 15. 5. 2016]. url: http://cbia.fi.muni.cz/about-CBIA. html. [2] Cell Tracking Challenge. [online]. [cit. 7. 5. 2016]. url: http://www. codesolorzano.com/celltrackingchallenge/Cell_Tracking_ Challenge/Welcome.html. [3] Kang Li et al. „Cell Population Tracking and Lineage Construction with Spatiotemporal Context“. In: Medical Image Analysis 12.5 (2008). [cit. 29. 4. 2016], s. 546–566. url: http://dx.doi.org/10. 1016/j.media.2008.06.001. [4] Martin Maška et al. „A benchmark for comparison of cell tracking algorithms. Bioinformatics“. In: Oxford University Press 30.12 (2014). [cit. 29. 4. 2016], s. 1609–1617. url: http://dx.doi.org/ 10.1093/bioinformatics/btu080. [5] Pavel Matula et al. „Cell Tracking Accuracy Measurement Based on Comparison of Acyclic Oriented Graphs“. In: PLoS One 10.12 (2015). [cit. 1. 5. 2016]. url: http : / / dx . doi . org / 10 . 1371 / journal.pone.0144959. [6] Cell Tracking Challenge: Challenge Description. [cit. 16. 5. 2016]. url: http : / / www . codesolorzano . com / celltrackingchallenge / Cell_Tracking_Challenge/Description.html. [7] Jaques Bertin. Semiology of Graphics. 1st ed. ISBN: 9781589482616. New Yourk: Esri Press, 2010, s. 456. [8] Visual Variables - Infovis:Wiki. [online]. aktualizace 5. 9. 2012, [cit. 10. 5. 2016], InfoWis:Wiki. url: http://www.infovis-wiki.net/ index.php?title=Visual_Variables. [9] Mike Bostock. D3.js - Data-Driven Documents. [online]. [cit. 7. 5. 2016]. url: https://d3js.org/. [10] D3.js. [online]. aktualizace 1. 5. 2016, [cit. 7. 5. 2016], Wikipedie. url: https://en.wikipedia.org/wiki/D3.js. [11] Mike Bostock. d3.layout.treemap. [online]. [cit. 7. 5. 2016]. url: https://mbostock.github.io/d3/talk/20111018/treemap. html. [12] jQuery. [online]. [cit. 7. 5. 2016]. url: http://jquery.com/. [13] jQuery UI. [online]. [cit. 7. 5. 2016]. url: http://jqueryui.com/. 41

LITERATURA [14] Bootstrap. [online]. [cit. 15. 5. 2016]. url: http://getbootstrap. com/. [15] CloudConvert: convert anything to anything. [online]. [cit. 16. 5. 2016]. url: https://cloudconvert.com/. [16] FileFormat.Info: The Digital Rosetta Stone. [online]. [cit. 16. 5. 2016]. url: http://www.fileformat.info/. [17] Zazmar: video converter, audio converter, image converter, eBook converter. [online]. [cit. 16. 5. 2016]. url: http://www.zamzar.com/. [18] Convertio — File Converter. [online]. [cit. 16. 5. 2016]. url: https: //convertio.co/. [19] Inkscape. [online]. [cit. 16. 5. 2016]. url: https://inkscape.org/ en/. [20] Altsoft XML2PDF .NET Converter. [online]. [cit. 16. 5. 2016]. url: http://www.adobe.com/cz/. [21] Grafický design. [online]. [cit. 16. 5. 2016]. url: http://www.adobe. com/cz/products/illustrator.html.

42

A Přílohy Výsledná aplikace na vizualizaci rodokmenů buněčných populací je k nalezení ke stažení na těchto stránkách: ∙ https://github.com/TondaFS/CellLineage. ∙ http://is.muni.cz/th/409851/fi_b/.

43

Vizualizace rodokmenu v buněčných populacích

Recommend Documents