Hi,
We are happy to announce GT Mondrian, a graph visualization engine built on top of Bloc. It is similar to the original Mondrian and the Mondrian from Roassal, but it is different in that it is built directly out of Bloc elements. This is interesting because it allows us to combine typical widgets with visualizations. The other interesting thing about it is that it validates the design of Bloc: right now, the implementation has 509 lines of code (excluding graph-specific layouts). The goal is to make visualization a first class citizen and an integral part of the IDE. The key ingredient that made this happen is that Bloc can now treat graph layouts, such as tree or force based, behave under the same rules as typical widget layouts, such as grid or flow. The challenge comes from the fact that a graph layout depends on the notion of edges between elements, and we did not want to have elements know about edges in the core of Bloc. The solution was to split the typical edge implementation in graph visualization libraries into two distinct concepts: • Line is an element that draws the connections. • Edge defines constraints imposed by connections between elements. Thus, edges form constraints, and constraints are what layouts deal with. That is one reason why elements in bloc have the ability of defining layout-specific constraints. Using this, we can nicely define edges between elements as a plugin to Bloc, but still be able to connect arbitrary elements. What's more, it turns out that we need constraints for other layouts as well. For example, an element in a grid layout might specify the span. The API of GT Mondrian is similar to the one from Roassal, but there are a few differences as well. These are described in the Pillar documentation available in the GitHub repo. The best way to experience GT Mondrian and its documentation is to load the GToolkit as described here: If you download the GT code through Iceberg, the documentation can be experienced live by inspecting: './pharo-local/iceberg/feenkcom/gtoolkit-visualizer/doc/mondrian/index.pillar' asFileReference Cheers, The feenk team _______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
Super super cool.
Can you give an example? BTW doru did you think about having a bloc layer on top of telescope model? Because from that perspective telescope offers a visualisation model while roassal/mondrian like design are more a pen-oriented metaphor. I wanted to do it to learn Bloc but I’m running against time and trying to flush pilling duties (I want to also release the book that we wrote with luc and olivier and convert the seaside book and and and….. :(
-------------------------------------------- Stéphane Ducasse 03 59 35 87 52 Assistant: Julie Jonas FAX 03 59 57 78 50 TEL 03 59 35 86 16 S. Ducasse - Inria 40, avenue Halley, Parc Scientifique de la Haute Borne, Bât.A, Park Plaza Villeneuve d'Ascq 59650 France _______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
Hi, Here is an example that shows the distinction between edge and line: elementToVisualize := BlChicken chicken. elementToVisualize forceLayout. root := BlElement new constraintsDo: [:c | c horizontal matchParent. c vertical matchParent]. elementToVisualize allChildrenBreadthFirstDo: [ :each | | label | label := BlTextElement new text: each gtDisplayString asRopedText; background: Color white; effect: (BlDropShadowEffect color: (Color gray alpha: 0.5) width: 10 offset: 0@0). label userData at: #model put: each. root children detect: [ :child | (child userData at: #model ifAbsent: [ nil ]) = each parent ] ifFound: [ :parentLabel | | edge | edge := GtGraphEdge new from: parentLabel to: label. parentLabel constraints graph addConnectedEdge: edge. label constraints graph addConnectedEdge: edge ]. root addChild: label]. root layout: (GtGraphHorizontalTreeLayout new layered; verticalGap: 20). root With this we visualize the elements that make the chicken element demo: - we create a label for each element - we find the parentLabel corresponding to the parent element - we create an edge between the parentLabel and the current label The example gives us this: The edge is a constraint. It has no visual impact. And the graph layouts take the edge constraints into account. The cool thing is the GtGraphEdge is defined next to the graph layout classes, not in the core of Bloc. To add a visual impact, we have to create a separate line: Thanks for the question. This email is now a comment in the graph layout examples and can be viewed like this: Cheers, Doru On Dec 9, 2017, at 8:43 AM, Stéphane Ducasse <[hidden email]> wrote: _______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
In reply to this post by Tudor Girba-2
Hi Tudor, VM just crashed here after click in Bloc examples -> any item -> Connected (Bloc)Attached crash.dmp Cheers, Hernán 2017-12-09 4:14 GMT-03:00 Tudor Girba <[hidden email]>:
_______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev crash.dmp (36K) Download Attachment |
Hi,
Thanks for the report. I see that you are on Windows 8.1. We only tested on Windows 10. Can you tell me how you installed the code? Cheers, Doru > On Dec 10, 2017, at 7:30 AM, Hernán Morales Durand <[hidden email]> wrote: > > Hi Tudor, > > VM just crashed here after click in Bloc examples -> any item -> Connected (Bloc) > Attached crash.dmp > > Cheers, > > Hernán > > > 2017-12-09 4:14 GMT-03:00 Tudor Girba <[hidden email]>: > Hi, > > We are happy to announce GT Mondrian, a graph visualization engine built on top of Bloc. > > It is similar to the original Mondrian and the Mondrian from Roassal, but it is different in that it is built directly out of Bloc elements. This is interesting because it allows us to combine typical widgets with visualizations. The other interesting thing about it is that it validates the design of Bloc: right now, the implementation has 509 lines of code (excluding graph-specific layouts). The goal is to make visualization a first class citizen and an integral part of the IDE. > > The key ingredient that made this happen is that Bloc can now treat graph layouts, such as tree or force based, behave under the same rules as typical widget layouts, such as grid or flow. The challenge comes from the fact that a graph layout depends on the notion of edges between elements, and we did not want to have elements know about edges in the core of Bloc. > > The solution was to split the typical edge implementation in graph visualization libraries into two distinct concepts: > • Line is an element that draws the connections. > • Edge defines constraints imposed by connections between elements. > > Thus, edges form constraints, and constraints are what layouts deal with. That is one reason why elements in bloc have the ability of defining layout-specific constraints. Using this, we can nicely define edges between elements as a plugin to Bloc, but still be able to connect arbitrary elements. What's more, it turns out that we need constraints for other layouts as well. For example, an element in a grid layout might specify the span. > > The API of GT Mondrian is similar to the one from Roassal, but there are a few differences as well. These are described in the Pillar documentation available in the GitHub repo. > > The best way to experience GT Mondrian and its documentation is to load the GToolkit as described here: > https://github.com/feenkcom/gtoolkit > > If you download the GT code through Iceberg, the documentation can be experienced live by inspecting: > './pharo-local/iceberg/feenkcom/gtoolkit-visualizer/doc/mondrian/index.pillar' asFileReference > > > <mondrian-doc.png> > > > > > > Cheers, > The feenk team > > > -- > www.tudorgirba.com > www.feenk.com > > "Quality cannot be an afterthought." > > > _______________________________________________ > Moose-dev mailing list > [hidden email] > https://www.list.inf.unibe.ch/listinfo/moose-dev > > > <crash.dmp>_______________________________________________ > Moose-dev mailing list > [hidden email] > https://www.list.inf.unibe.ch/listinfo/moose-dev -- www.tudorgirba.com www.feenk.com "One cannot do more than one can do." _______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
2017-12-10 7:34 GMT+01:00 Tudor Girba <[hidden email]>: Hi, How did you install this on windows 10 ? I tried to load the code in a 6.1 image as described on the github page:
But it now runs since two hours without finishing it. After I excluded the pharo image from the windows defender antivirus check, it seems to need less cpu time. But it is still not finished. I will restart the installation with the antivirus deactivated from the start and see how long it will take.
_______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
2017-12-10 11:55 GMT+01:00 Nicolai Hess <[hidden email]>:
Ok, without antivirus check, the installation now "only" takes an hour. But of course we shouldn't depend on disabled antivirus check. Is there any other way to make this faster?
_______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
In reply to this post by Tudor Girba-2
Hi Tudor,
This is how I installed GToolkit: IceCredentialsProvider plaintextCredentials: ( IcePlaintextCredentials new username: '[hidden email]'; password: 'mypass' ; yourself). Metacello new baseline: 'GToolkit'; repository: 'github://feenkcom/gtoolkit/src'; load. Without the IceCredentialsProvider configuration I had LibGIT errors. This is the output: "linear load : explicit load : baseline [BaselineOfGToolkit] load : BaselineOfGToolkitTranscript-cypress.1 explicit load : baseline [BaselineOfGToolkit] load : BaselineOfGToolkitConnector-cypress.1 explicit load : baseline [BaselineOfGToolkit] load : BaselineOfGToolkitMondrian-cypress.1 explicit load : baseline [BaselineOfGToolkit] load : BaselineOfGToolkitDocumenter-cypress.1 linear load : baseline [BaselineOfGToolkit] explicit load : baseline [BaselineOfGToolkitDocumenter] load : BaselineOfBrick-cypress.1 explicit load : baseline [BaselineOfGToolkitDocumenter] load : BaselineOfGToolkitExamples-cypress.1 explicit load : baseline [BaselineOfGToolkitDocumenter] load : ConfigurationOfDeepTraverser-AndreiChis.13 explicit load : baseline [BaselineOfGToolkitDocumenter] load : ConfigurationOfPillar-StephaneDucasse.277 linear load : baseline [BaselineOfGToolkitDocumenter] explicit load : baseline [BaselineOfBrick] load : BaselineOfBloc-cypress.1 preload : baseline [BaselineOfBrick] >> preLoadActions: linear load : baseline [BaselineOfBrick] preload : baseline [BaselineOfBloc] >> preLoadActions: linear load : baseline [BaselineOfBloc] linear load : 1.2.15 [ConfigurationOfOSWindow] postload : baseline [BaselineOfBloc] >> postLoadBloc: postload : Bloc >> postLoadBloc: load : Brick-cypress.1 load : Brick-Style-cypress.1 load : Brick-Theme-GlennCavarle.1 load : Brick-Material-cypress.1 load : Brick-UI-cypress.1 load : Brick-Editor-cypress.1 load : Brick-Editor-Extensions-cypress.1 load : Brick-Sparta-cypress.1 load : Brick-Examples-cypress.1 load : Brick-Experimental-cypress.1 explicit load : baseline [BaselineOfGToolkitExamples] load : BaselineOfGToolkitExamplesEngine-cypress.1 linear load : baseline [BaselineOfGToolkitExamples] linear load : baseline [BaselineOfGToolkitExamplesEngine] load : GToolkit-Examples-cypress.1 load : GToolkit-Examples-UI-cypress.1 load : GToolkit-Examples-Dummies-cypress.1 load : GToolkit-Examples-Roassal2UI-cypress.1 load : GToolkit-Examples-Extensions-cypress.1 load : GToolkit-Tests-Examples-cypress.1 explicit load : 6.0.7 [ConfigurationOfPillar] load : ConfigurationOfCocoon-StephaneDucasse.51 explicit load : 6.0.7 [ConfigurationOfPillar] load : ConfigurationOfPetitParser-TudorGirba.80 explicit load : 6.0.7 [ConfigurationOfPillar] load : ConfigurationOfLightPhaser-GuillermoPolito.9 explicit load : 6.0.7 [ConfigurationOfPillar] load : ConfigurationOfJSON-StephanEggermont.7 linear load : 6.0.7 [ConfigurationOfPillar] explicit load : 1.33 [ConfigurationOfCocoon] load : ConfigurationOfMagritte3-topa.126 linear load : 1.33 [ConfigurationOfCocoon] explicit load : 3.5.0 [ConfigurationOfMagritte3] load : ConfigurationOfGrease-StephanEggermont.348 linear load : 3.5.0 [ConfigurationOfMagritte3] linear load : 1.2.7 [ConfigurationOfGrease] load : Grease-Core-JohanBrichau.97 load : Grease-Pharo30-Core-PavelKrivanek.22 load : Magritte-Model-SeanDeNigris.465 load : Magritte-Pharo3-Model-JohnCBorden.4 load : Magritte-Morph-SeanDeNigris.95 load : Glamour-Magritte-Presentations-AndreiChis.10 load : Magritte-GT-SeanDeNigris.6 load : Cocoon-Core-ThibaultArloing.57 load : Cocoon-Tests-Core-StephaneDucasse.38 linear load : 1.2 [ConfigurationOfJSON] load : JSON-PaulDeBruicker.39 linear load : 0.1-baseline [ConfigurationOfLightPhaser] load : LightPhaser-Model-GuillermoPolito.18 load : LightPhaser-Tests-Model-YannDubois.9 atomic load : 1.14 [ConfigurationOfPetitParser] load : PetitParser-JanKurs.278 load : PetitTests-JanKurs.73 load : Pillar-Model-StephaneDucasse.296 load : Pillar-ExporterCore-StephaneDucasse.420 load : Pillar-ExporterText-CyrilFerlicot.11 load : Pillar-ExporterHTML-DamienCassou.88 load : Pillar-ExporterMarkdown-PeterUhnak.76 load : Pillar-ExporterDeckJS-DamienCassou.12 load : Pillar-ExporterEPub-DamienCassou.9 load : Pillar-Cli-StephaneDucasse.67 load : Pillar-Cli-PillarVersion-StephaneDucasse.1 load : Pillar-ExporterAsciiDoc-StephaneDucasse.28 load : Pillar-PetitPillar-TudorGirba.143 load : Pillar-GitBook-DamienCassou.2 load : Pillar-ExporterPillar-StephaneDucasse.41 load : Pillar-ExporterLaTeX-DamienCassou.107 load : Pillar-ExporterBeamer-DamienCassou.30 load : Pillar-Pharo-Tools-TudorGirba.18 load : Pillar-Tests-Cli-DamienCassou.1 load : Pillar-Tests-Model-StephaneDucasse.220 load : Pillar-Tests-ExporterCore-StephaneDucasse.217 load : Pillar-Tests-ExporterText-DamienCassou.16 load : Pillar-Tests-ExporterPillar-DamienCassou.18 load : Pillar-Tests-ExporterLaTeX-DamienCassou.113 load : Pillar-Tests-ExporterBeamer-DamienCassou.19 load : Pillar-Tests-ExporterHTML-DamienCassou.46 load : Pillar-Tests-ExporterMarkdown-PeterUhnak.33 load : Pillar-Tests-ExporterDeckJS-DamienCassou.5 load : Pillar-Tests-ExporterEPub-DamienCassou.6 load : Pillar-Tests-ExporterAsciiDoc-DamienCassou.12 load : Pillar-Tests-PetitPillar-YannDubois.25 explicit load : 1.2-baseline [ConfigurationOfDeepTraverser] load : BaselineOfGToolkitExamplesEngine-cypress.1 atomic load : 1.2-baseline [ConfigurationOfDeepTraverser] linear load : baseline [BaselineOfGToolkitExamplesEngine] load : DeepTraverser-CyrilFerlicot.42 load : DeepTraverser-Examples-AndreiChis.3 load : DeepTraverser-Tests-CyrilFerlicot.1 load : GToolkit-Documenter-cypress.1 explicit load : baseline [BaselineOfGToolkitTranscript] load : BaselineOfBrick-cypress.1 linear load : baseline [BaselineOfGToolkitTranscript] explicit load : baseline [BaselineOfBrick] load : BaselineOfBloc-cypress.1 preload : baseline [BaselineOfBrick] >> preLoadActions: linear load : baseline [BaselineOfBrick] explicit load : baseline [BaselineOfBloc] load : BaselineOfGToolkitExamplesEngine-cypress.1 preload : baseline [BaselineOfBloc] >> preLoadActions: linear load : baseline [BaselineOfBloc] linear load : baseline [BaselineOfGToolkitExamplesEngine] postload : baseline [BaselineOfBloc] >> postLoadBloc: postload : Bloc >> postLoadBloc: load : GToolkit-Transcript-cypress.1 explicit load : baseline [BaselineOfGToolkitConnector] load : BaselineOfBrick-cypress.1 explicit load : baseline [BaselineOfGToolkitConnector] load : BaselineOfGToolkitExamples-cypress.1 linear load : baseline [BaselineOfGToolkitConnector] explicit load : baseline [BaselineOfBrick] load : BaselineOfBloc-cypress.1 preload : baseline [BaselineOfBrick] >> preLoadActions: linear load : baseline [BaselineOfBrick] explicit load : baseline [BaselineOfBloc] load : BaselineOfGToolkitExamplesEngine-cypress.1 preload : baseline [BaselineOfBloc] >> preLoadActions: linear load : baseline [BaselineOfBloc] linear load : baseline [BaselineOfGToolkitExamplesEngine] postload : baseline [BaselineOfBloc] >> postLoadBloc: postload : Bloc >> postLoadBloc: explicit load : baseline [BaselineOfGToolkitExamples] load : BaselineOfGToolkitExamplesEngine-cypress.1 linear load : baseline [BaselineOfGToolkitExamples] linear load : baseline [BaselineOfGToolkitExamplesEngine] load : GToolkit-Connector-cypress.1 explicit load : baseline [BaselineOfGToolkitMondrian] load : BaselineOfBloc-cypress.1 linear load : baseline [BaselineOfGToolkitMondrian] explicit load : baseline [BaselineOfBloc] load : BaselineOfGToolkitExamplesEngine-cypress.1 explicit load : baseline [BaselineOfBloc] load : BaselineOfSparta-cypress.1 preload : baseline [BaselineOfBloc] >> preLoadActions: linear load : baseline [BaselineOfBloc] postload : Sparta >> postLoadSparta: linear load : baseline [BaselineOfGToolkitExamplesEngine] load : Bloc-cypress.1 load : Bloc-Layout-cypress.1 load : Bloc-Layout-Tests-cypress.1 load : Bloc-Geometry-cypress.1 load : Bloc-Animation-cypress.1 load : Bloc-Infinite-cypress.1 load : Bloc-Infinite-Layouts-cypress.1 load : Bloc-Animation-Tests-cypress.1 load : Bloc-Text-cypress.1 load : Bloc-Text-Rope-cypress.1 load : Bloc-Text-Elements-cypress.1 load : Bloc-Sparta-cypress.1 load : Bloc-DevTool-cypress.1 load : Bloc-Examples-cypress.1 load : BlocHost-Mock-cypress.1 load : Bloc-Tests-cypress.1 load : BlocHost-Morphic-cypress.1 load : Bloc-Extensions-cypress.1 postload : baseline [BaselineOfBloc] >> postLoadBloc: load : GToolkit-Plotter-cypress.1 load : GToolkit-Mondrian-cypress.1 load : GToolkit-Mondrian-Layouts-cypress.1 load : GToolkit-Mondrian-Glamour-cypress.1" 2017-12-10 3:34 GMT-03:00 Tudor Girba <[hidden email]>: > Hi, > > Thanks for the report. > > I see that you are on Windows 8.1. We only tested on Windows 10. > > Can you tell me how you installed the code? > > Cheers, > Doru > > >> On Dec 10, 2017, at 7:30 AM, Hernán Morales Durand <[hidden email]> wrote: >> >> Hi Tudor, >> >> VM just crashed here after click in Bloc examples -> any item -> Connected (Bloc) >> Attached crash.dmp >> >> Cheers, >> >> Hernán >> >> >> 2017-12-09 4:14 GMT-03:00 Tudor Girba <[hidden email]>: >> Hi, >> >> We are happy to announce GT Mondrian, a graph visualization engine built on top of Bloc. >> >> It is similar to the original Mondrian and the Mondrian from Roassal, but it is different in that it is built directly out of Bloc elements. This is interesting because it allows us to combine typical widgets with visualizations. The other interesting thing about it is that it validates the design of Bloc: right now, the implementation has 509 lines of code (excluding graph-specific layouts). The goal is to make visualization a first class citizen and an integral part of the IDE. >> >> The key ingredient that made this happen is that Bloc can now treat graph layouts, such as tree or force based, behave under the same rules as typical widget layouts, such as grid or flow. The challenge comes from the fact that a graph layout depends on the notion of edges between elements, and we did not want to have elements know about edges in the core of Bloc. >> >> The solution was to split the typical edge implementation in graph visualization libraries into two distinct concepts: >> • Line is an element that draws the connections. >> • Edge defines constraints imposed by connections between elements. >> >> Thus, edges form constraints, and constraints are what layouts deal with. That is one reason why elements in bloc have the ability of defining layout-specific constraints. Using this, we can nicely define edges between elements as a plugin to Bloc, but still be able to connect arbitrary elements. What's more, it turns out that we need constraints for other layouts as well. For example, an element in a grid layout might specify the span. >> >> The API of GT Mondrian is similar to the one from Roassal, but there are a few differences as well. These are described in the Pillar documentation available in the GitHub repo. >> >> The best way to experience GT Mondrian and its documentation is to load the GToolkit as described here: >> https://github.com/feenkcom/gtoolkit >> >> If you download the GT code through Iceberg, the documentation can be experienced live by inspecting: >> './pharo-local/iceberg/feenkcom/gtoolkit-visualizer/doc/mondrian/index.pillar' asFileReference >> >> >> <mondrian-doc.png> >> >> >> >> >> >> Cheers, >> The feenk team >> >> >> -- >> www.tudorgirba.com >> www.feenk.com >> >> "Quality cannot be an afterthought." >> >> >> _______________________________________________ >> Moose-dev mailing list >> [hidden email] >> https://www.list.inf.unibe.ch/listinfo/moose-dev >> >> >> <crash.dmp>_______________________________________________ >> Moose-dev mailing list >> [hidden email] >> https://www.list.inf.unibe.ch/listinfo/moose-dev > > -- > www.tudorgirba.com > www.feenk.com > > "One cannot do more than one can do." > > > > > _______________________________________________ > Moose-dev mailing list > [hidden email] > https://www.list.inf.unibe.ch/listinfo/moose-dev Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev |
Administrator
|
In reply to this post by Stéphane Ducasse
Stéphane Ducasse wrote
> Super super cool. Yes!!! One question about terminology. Why edge? Is that a well-known domain concept? The first word that comes to mind from the example is "connection". Edge seems like a stretch… ----- Cheers, Sean -- Sent from: http://forum.world.st/Moose-f1310756.html _______________________________________________ Moose-dev mailing list [hidden email] https://www.list.inf.unibe.ch/listinfo/moose-dev
Cheers,
Sean |
Free forum by Nabble | Edit this page |