SaintPetersburg State University ITMO Automatabased Algorithms Visualization Framework

Saint-Petersburg State University ITMO Automata-based Algorithms Visualization Framework Georgiy Korneev kgeorgiy@rain. ifmo. ru Computer Technology Department, Saint-Petersburg State University of Information Technology, Mechanics and Optics, Russia Foundation for Open Project Documentation

Saint-Petersburg State University ITMO What is visualizer? Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 2

Saint-Petersburg State University ITMO Visualizers advantages Better algorithms understandability l Dynamic content l User can choose input data l Forward and backward tracing l Detailed comments l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 3

Saint-Petersburg State University ITMO Visualizer requirements Interface simplicity l Show all algorithm stages and special cases l Clear comments for all stages l Hints for every visualizer element l Big and small steps l Automated execution l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 4

Saint-Petersburg State University ITMO l Sergey Stolyar l l Initial stage (1998 -1999) Matvey Kazakov l l Visualizers history in ITMO Transitional stage (1999 -2000) Georgiy Korneev Evolution stage (2000 -2002) l Industrial stage (2002 -2004) l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 5

Saint-Petersburg State University ITMO Initial stage First attempts l Visualizers in Borland Delphi l Handmade user interface l Handmade visualizers logic l Less than ten visualizers were made l Very slow development l Lots of errors l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 6

Saint-Petersburg State University ITMO Transitional stage Visualizers in Java (applets) l Similar user interfaces l First attempts in reversing l About 15 visualizers l Slow development l Less errors l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 7

Saint-Petersburg State University ITMO Evolution stage Common user interfaces (Base. Applet library) l Common configuration l Template-based logic l All visualizers are reversible l More than 50 visualizers l Fast GUI development l Difficulties in reversing l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 8

Saint-Petersburg State University ITMO Industrial stage Standard user interface l Automated code generation l Automated program reverse l More than 200 visualizers l Fast logic development l Automated reverse l Quick development l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 9

Saint-Petersburg State University ITMO Vizi visualization technology Visual representation library l Logic definition language l Visualizer programming methodology l Standard project execution flow l Documentation infrastructure l l Vizi visualization framework binds it together Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 10

Saint-Petersburg State University ITMO Standard interface (1) Drawing area Comment area Controls area Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 11

Saint-Petersburg State University ITMO Standard interface (2) Forward Backward Auto execution mode Restart Randomize About Automated execution delay Number of elements Save/load dialog Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 12

Saint-Petersburg State University ITMO Logic definition language XML-based l Program-like l Auto-commented l Auto documentation generation l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 13

Saint-Petersburg State University ITMO Visualizer programming Methodology Based on Switch-technology l Formal program transformation l Automated source code generation l Model-View-Controller paradigm l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 14

Saint-Petersburg State University ITMO Switch-technology in visualization Proposed by Anatoly Shalyto (1991) l First application for visualizers Matvey Kazakov (2002) l Implementation l Block diagrams l Automata transition diagram l Automata-based visualizer programming l l Visualization and reversing technology Georgiy Korneev (2003) Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 15

Saint-Petersburg State University ITMO Switch-technology in Vizi Correlated automata systems l Automata pair for each procedure l Automata pair l Forward transition graph l Backward transition graph l Shared automata states l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 16

Saint-Petersburg State University ITMO Formal program transformations Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 17

Saint-Petersburg State University ITMO Automated source code generation Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 18

Saint-Petersburg State University ITMO l Model l l Auto-generated correlated automata system View l l Model-View-Controller paradigm User interface based on Vizi library Controller l Vizi library Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 19

Saint-Petersburg State University ITMO Algorithm reversing problem Backward tracing is very useful for education l Repeatable forward-backward navigation l l How get one step back? Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 20

Saint-Petersburg State University ITMO l Per-step save/load technique l l High memory requirements Program re-execution l l Algorithm reversing problem solutions Low execution speed Program reverse Average memory requirements l High execution speed l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 21

Saint-Petersburg State University ITMO l Program reversing difficulties Two versions of program forward tracing l for backward tracing l Algorithm development for backward tracing l Programs must be synchronized l Complex modification l Hard debugging l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 22

Saint-Petersburg State University ITMO Automated program reversing One version of program (XML-source) l One-way debugging l l : TODO: Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 23

Saint-Petersburg State University ITMO Project execution flow Algorithm implementation l Program structure simplification l Data model extraction l Transformation to correlated automata system l Code generation l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 24

Saint-Petersburg State University ITMO Algorithm implementation Algorithm is implemented using structural language l Implementation source code is an input for other stages l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 25

Saint-Petersburg State University ITMO Program structure simplification Most of programming languages are too complicated for automated transformations l Program should use only simple programming structures l Structuring theorem l l Formal structure simplification for Java Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 26

Saint-Petersburg State University ITMO Allowed structures Statements sequence l Assignment statement l Short conditional statement l Full conditional statement l “While” loop l Procedure call l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 27

Saint-Petersburg State University ITMO Data model extraction Data model contains all variables l Data model fully represents algorithm state l All data flows going through data model l l Formal data model extraction Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 28

Saint-Petersburg State University ITMO Transformation into correlated automata system Correlated automata systems l Pairwise automatas l l Formal and automated program transformation l More information available at http: //www. softcraft. ru/auto/switch/vis/index. shtml Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 29

Saint-Petersburg State University ITMO l Annotation l l Project documentation (1) Short project description Introduction Brief algorithm description l Algorithm applications l Usage examples l l Chapter 1. Literature analysis l References and comments Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 30

Saint-Petersburg State University ITMO l Project documentation (2) Chapter 2. Algorithm description Complete algorithm descriptions l Special cases analysis l l Chapter 3. Algorithm implementation Implementation comments l Decision ground l l Chapter 4. Implementation simplification l Simplified implementation Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 31

Saint-Petersburg State University ITMO l Chapter 5. Data model definition l l Project documentation (3) Descriptions of data model variables Chapter 6. “Interesting” stages definition Implementation is divided into “interesting” stages l Comments for “interesting” stages l l Chapter 7. User Interface Description Pictures for each “interesting” stage l Controls descriptions l Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 32

Saint-Petersburg State University ITMO l Project documentation (4) Chapter 8. Configuration Description Complete configuration description l Initial configuration l l Conclusions l l Visualizer properties References Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 33

Saint-Petersburg State University ITMO l Project documentation (5) Appendixes l l l Algorithm Implementations Source Code Transformed Implementation Visualizer XML-description Generated Source Codes User Interfaces Source Codes Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 34

Saint-Petersburg State University ITMO Simple algorithm example “Find. Maximum” algorithm Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 35

Find. Maximum Saint-Petersburg State University ITMO Algorithm implementation int max = 0; for (int i = 0; i < a. length; i++) { if (max < a[i]) { max = a[i]; } } Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 36

Find. Maximum Saint-Petersburg State University ITMO Simplified implementation max = 0; i = 0; while (i < a. length) { if (max < a[i]) { max = a[i]; } i++; } Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 37

Find. Maximum Saint-Petersburg State University ITMO Data model public final static class Data { public int max; public int i; public int a[]; } Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 38

Find. Maximum Saint-Petersburg State University ITMO Transformed implementation d. max = 0; d. i = 0; while (d. i < d. a. length) { if (d. max < d. a[d. i]) { d. max = d. a[d. i]; } d. i++; } Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 39

Find. Maximum Saint-Petersburg State University ITMO l Transformation to automata (1) Initialization Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 40

Find. Maximum Saint-Petersburg State University ITMO l Transformation to automata (2) If statement Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 41

Find. Maximum Saint-Petersburg State University ITMO l Transformation to automata (3) Full automata Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 42

Find. Maximum Saint-Petersburg State University ITMO Reversed automata Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 43

Find. Maximum Saint-Petersburg State University ITMO XML-representation <step>@max @= 0; </step> <step>@i @= 0; </step> <while test="@i < @a. length"> <if test="@max < @a[@i]"> <then> <step>@max @= @a[@i]; </step> </then> </if> <step>@i @= @i + 1; </step> </while> Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 44

Find. Maximum Saint-Petersburg State University ITMO Generated sources extract switch (state) {. . . case 1: { // Initialization state = 2; // Loop init break; } case 2: { // Loop init state = 3; // Loop break; } case 3: { // Loop if (Main_i < a. length) { state = 4; // If } else { state = END_STATE; } break; } case 4: { // if if (max < a[Main_i]) { state = 6; // Update } else { state = 5; // End if } break; } case 5: { // End if state = 7; // Increment break; } case 6: { // Update max = a[Main_i] state = 5; // End if break; } case 7: { // Increment Main_i++; state = 3; // Loop break; } Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 45

Find maximum Saint-Petersburg State University ITMO Statistics Automata l States l Automata implementation l 2 9 326 lines Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 46

Saint-Petersburg State University ITMO Complex algorithm example Malhotra, Kumar, Maheshwari maximal flow algorithm Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 47

Malhotra, Kumar, Maheshwari Saint-Petersburg State University ITMO Statistics Automata l States l Automata implementation l 18 107 4069 lines Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 48

Saint-Petersburg State University ITMO l l l l l More examples Dinic’s network flow algorithm Hopcroft-Karp Bipartite Matching algorithm Chu-Liu shortest arborescence of a directed graph Algorithms on 2 -3 threes Bitonic salesman problem Ukkonen suffix tree construction algorithm Prim minimum spanning tree algorithm Simple strings and de. Bruin cycles construction algorithms … Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 49

Saint-Petersburg State University ITMO l Vizi project homepage l l http: //ctddev. ifmo. ru/vizi Old visualizers examples l l Links http: //ips. ifmo. ru: 8888/ru/visualizers/ Visualizer-related switch-technology information l http: //is. ifmo. ru/? i 0=vis Automata-based Algorithms Visualization Framework — http: //ctddev. ifmo. ru/vizi 50