JavaFx within Cytoscape 3.2.1

[Anthony Bargnesi]

Hello folks,

I am trying to use JavaFx user interfaces from within Cytoscape. My use case is to leverage JavaFX WebView components to render HTML. So far so good until I attempt to interact with the Javascript in the HTML page.

Now I am hitting NoClassDefFoundError with the netscape.javascript.JSObject class. It seems the exported JRE packages defined for 1.8 in Karaf are missing the following packages:

• javafx.collections.transformation      

• javafx.print    

• netscape.javascript

If I export netscape.javascript my problem goes away.

Is there a reason these packages were left off? Is there a workaround possible for Apps?

Thanks,

Anthony Bargnesi

[Matthias König]

Hi Anthony,
Sorry I don't have an answer for you, but I am also planning on using JavaFx Webview. The JEditorPane does just not have the functionality I want.
So I would be interested in your code when you get it working. You have a repository somewhere?
The best,
Matthias

[Anthony Bargnesi]

Matthias,

It's a work in progress at the moment, but the changes are for the JGF App.

Here is a snippet of subclassing a JFXPanel that you can drop into a Swing container:

private class EditPanel extends JFXPanel {

        private EditPanel() {
            Platform.runLater(() -> initFX());
        }

        private void initFX() {
            // This method is invoked on the JavaFX thread
            Scene scene = createScene();
            this.setScene(scene);
        }

        private Scene createScene() {
            WebView browser   = new WebView();
            ZoomingPane zpane = new ZoomingPane(browser);
            Scene scene       = new Scene(new BorderPane(zpane, null, null, null, null));

            WebEngine engine = browser.getEngine();

            // on page load
            engine.getLoadWorker().stateProperty().addListener(
                (ObservableValue<? extends Worker.State> ov, Worker.State oldState, Worker.State newState) -> {
                    if (newState == Worker.State.SUCCEEDED) {
                        JSObject win = (JSObject) engine.executeScript("window");
                        win.setMember("portal", new EvidencePortal());
                    }
                }
            );

            engine.loadContent(read(getClass().getResourceAsStream("/form.html")));

            return scene;
        }

        private String read(InputStream stream) {
            StringBuilder bldr = new StringBuilder();
            try (BufferedReader r = new BufferedReader(new InputStreamReader(stream))) {
                String line;
                while ((line = r.readLine()) != null)
                    bldr.append(line + "\n");
            } catch (IOException e) {
                return null;
            }

            return bldr.toString();
        }
    }

    private class ZoomingPane extends Pane {

        Node content;
        private DoubleProperty zoomFactor = new SimpleDoubleProperty(1);

        private ZoomingPane(Node content) {
            this.content = content;
            getChildren().add(content);
            Scale scale = new Scale(1, 1);
            content.getTransforms().add(scale);

            zoomFactor.addListener((observable, oldValue, newValue) -> {
                scale.setX(newValue.doubleValue());
                scale.setY(newValue.doubleValue());
                requestLayout();
            });
        }

        protected void layoutChildren() {
            Pos pos = Pos.TOP_LEFT;
            double width = getWidth();
            double height = getHeight();
            double top = getInsets().getTop();
            double right = getInsets().getRight();
            double left = getInsets().getLeft();
            double bottom = getInsets().getBottom();
            double contentWidth = (width - left - right)/zoomFactor.get();
            double contentHeight = (height - top - bottom)/zoomFactor.get();
            layoutInArea(content, left, top,
                    contentWidth, contentHeight,
                    0, null,
                    pos.getHpos(),
                    pos.getVpos());
        }

        public final Double getZoomFactor() {
            return zoomFactor.get();
        }
        public final void setZoomFactor(Double zoomFactor) {
            this.zoomFactor.set(zoomFactor);
        }
        public final DoubleProperty zoomFactorProperty() {
            return zoomFactor;
        }
    }

The ZoomingPane allows your WebView contents to adjust as the pane resizes.

Where I am running into the classpath problem is when I request the "window" object from the HTML context:

JSObject win = (JSObject) engine.executeScript("window");

Hope that helps,

Anthony Bargnesi

[Matthias König]

HI Anthony,
did you solve the issue? Did you get JavaScript to work?
Wanted to start the JavaFX implementation the next few days and would be nice to learn from your experience.
The best

Matthias

...

[Matthias König]

Did anybody ever get JavaFX with Cytoscape 3 to work? The OSGI architecture of Cytoscape seems to create a lot of problems here.
Looks like the JGF App gave up and switched to swingx.

I am not sure if the proposed solutions will work
http://stackoverflow.com/questions/13240822/using-javafx-2-2-in-osgi-bundle
so it would be very nice to hear from some app developer who got JavaFX working with Cytoscape.

I need support for HTML, CSS, Javascript which is provided by the Webkit implementation of the JavaFX WebView.

Matthias

[Mark Fortner]

You might ask on the JavaFX mailing list. You're more likely to encounter someone who has done experience mixing OSGi and JavaFX there.

Just out of curiosity, since Java ships with JavaScript would it be possible to drop the dependency on the Netscape JavaScript package and use the Nashorn implementation instead?

Regards,

Mark

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Keiichiro Ono]

Hi.

Latest version of Cytoscape, 3.4.0, only supports Java 8, which comes with JavaFX 8.  And calling Java FX components from Cytoscape is not an issue if you use Jfxpanel.

I've already tried to use it from Cytoscape and here is the list of my findings:

1. As long as you embed your JavaFX UI components in an independent JDialog or JFrame, it works fine.  However if you embed JFXPanel in CytoPanels, you will see a blank region in the panel when you detache the CytoPanel.  I.e., it only works when you "dock" the CytoPanels.

2. WebView uses old Webklit, and many of latest UI frameworks cannot be used with it.  For example, React.js works, but Material UI using Reract does not due to poor CSS support.

3. JavaFX file chooser fails if you call it from Cytoscape.

The bottom line is, if you use simple JavaFX components, like buttons, it may work.  But WebView is not a great choice if you want to use modern JS frameworks.

As an alternative, I'm developing simple application calling Electron desktop app from Cy3 and connecting it to Cytoscape via WebSockt.

http://electron.atom.io

This is not a perfect solution, but if we use Electron as a child process of Cytoscape, you can use all kinds of modern JS/CSS frameworks because it uses latest Chromium as an internal browser component.  This is very different from current Cytosacpe 3 app development because the Cy3 app only serves as a caller of external (web) application.

I'll document more when I finish this application, but the basic idea is the following:

1. Create UI as a web application

2. Embed it into Electron

3. Call it from Cytoscape as a child process (using Runtime.exec() method)

4. Use WebSocket for duplex communication between those two applications

 

The advantage of this approach is you can use same UI for both web application and Cytoscape App.  This is still experimental, but a good alternative for web application developers who want to use all of the modern web frontend technology from Cytoscape.

I'm using this for our specific use case, but the overall architecture is reusable by anyone who wants to use same UI for different platforms (Cytoscape, web, and tablets).  These are not finished yet, but you can check the code to see how it works.

https://github.com/CyComponent/NDExValet (UI code written with JS only)

https://github.com/idekerlab/ndex-valet-electron  (Electron App using the module above)

https://github.com/idekerlab/ndex-valet (Cytoscape App calling the Electron app)

Kei

Cytoscape Core Team

p.s. I'll present these stuff at ISMB SIG (BOSC) next month.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

[Barry Demchak]

Thanks, Kei and all ... 

I was hoping you would answer this.

Please note that this approach is:

* experimental,

* limited to our single use case, 

* is not a sanctioned approach of the Cytoscape Core team, 

* is not packaged for reuse by other apps, 

* and does not exist in any released code.

We're getting close to collecting requirements for a reusable core facility. If anyone has any, please contribute them on this thread.

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

[Keiichiro Ono]

Yes, Electron/WebSocket approach is an experimental one for developers who know modern web technologies well.  Also, these are totally independent from the Cy3 Core, i.e., if you understand what I'm doing in the experimental code, you can do the same as a 3rd party.

Anyway, JavaFX is a "better Swing," and is usable in Cytoscape 3.4 now if you are an app developer.  However, there are lots of small issues if you want to write real Cytoscape App with it, especially when you use WebView.

Please share your findings when you use JavaFX and web technologies in Cytoscape 3.  It will be helpful for others because most of the modern UI frameworks and visualization tools  are now developed with web technologies (HTML5/JS/CSS), and that is something we need to use in the long run...

Thanks,

Kei

[Matthias König]

Hi Kei,
thanks for the information. I will look into your integration approach with http://electron.atom.io.

Here some background information
I have to update some user interfaces for apps in Cy3, and Swing is for me
* too complicated (compared to HTML/CSS layout + form elements for Interface components)
* too restricted from the design perspective (especially when comparing to HTML/CSS + Javascript)
My background is more from web frameworks like django, so the whole Interface Design with Swing seems very limited.
Especially if I want to display information in a nice way.
* too restricted from the functionality (comparing to HTML/CSS + JavaScript).

I was looking for some easy integration between Java & the Design/GUI stack and JavaFX provides great API for calling Javascript and getting information back from the WebView.
To handle the communication between Java core code and the HTML/CSS/JS GUI via WebSockets seems very interesting.


I can confirm that the core JavaFX is working with Cy3.4.
The trick is using the JFXPanel to integrate it with Swing and exporting the javafx packages via a property in the pom file:
<org.osgi.framework.system.packages.extra>javafx.animation,javafx.application,javafx.collections,javafx.embed.swing,javafx.geometry,javafx.scene,javafx.scene.layout,javafx.scene.transform,javax.swing,javax.swing.border,org.osgi.framework</org.osgi.framework.system.packages.extra>

I also got the WebView to work with external urls, i.e. I can open javafx webview in a JDialog or JFrame and load webpages, but local resources packed in the bundle jar are not displayed.
I assume the problem is that the webview cannot resolve resource urls of the form

bundle://117.0:1/info.html

which are a result of the OSGI packaging :/. This is the crucial part, because I have to read my src/main/resources HTML templates and the relative links within the HTML for instance to images have to resolve correctly.
I could just put my resources online and use the web urls, but this would slow down the GUI: all resources have to fetched from the web on GUI updates compared to loading from local resources.
So stuck at this point.

@Kei
Is the approach you present ready to work minimal examples?
I need:
- HTML layouted with some CSS and javascript.
- form components in the HTML (search field, radio buttons)
- after submitting the form I want to consume the form content with Java/Cytoscape
- a way to update the HTML from java, i.e. some load, loadContent
- If possible I want to call JS functions from Java (not required now, but has to be supported in the long run)
- If possible I want to make changes to the DOM from Java (not required now)

Thanks
Matthias

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Mike Kucera]

Hi Matthias,

OSGi provides a "persistent storage area" folder for every bundle where you can store and retrieve files. It should be possible to copy the html files from inside the App jar to this folder and then refer to them using file:// urls. Take a look at BundleContext.getDataFile() in the OSGi docs.

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

[Matthias König]

Hi Mike,
thanks for the tip.

I looked into this, but cannot get access to the File object via bc.getDataFile()
It creates a file object, but the file is not existing under the given path (no files are created in the cache folder for the app bundle)

            File ftest = bc.getDataFile("gui/info.html");
            System.out.println(ftest.getAbsolutePath());
            System.out.println("File exists: " + ftest.exists());
           
           
            // copying the file does not work
            Files.copy(ftest.toPath(), new File(appDirectory + "/" + "info.html").toPath(),
                    StandardCopyOption.REPLACE_EXISTING);

Results in:
/home/mkoenig/CytoscapeConfiguration/3/karaf_data/cache/bundle123/data/gui/info.html
File exists: false

And than an error is thrown because the file cannot be copied.
M

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

[Mike Kucera]

This technique has worked for me in the past. Perhaps you could try writing some data to the file.

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Max Franz]

Hello Matthias:

If you're interested in building a JS/HTML/CSS app with Electron, you may want to consider using Cytoscape.js (http://js.cytoscape.org/).  It has a comparable featureset to Cytoscape desktop core.

If you end up needing a specific feature/algorithm from Cytoscape desktop, you can communicate with it by HTTP/REST or websockets -- as Kei mentioned.  You can make it a child process of Electron.

There will also be a step-by-step Tutorial for building Electron apps with Cytoscape soon. Keep an eye on http://blog.js.cytoscape.org/

-Max

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.

[Keiichiro Ono]

Hi Matthias.

> I was looking for some easy integration between Java & the Design/GUI stack
> and JavaFX provides great API for calling Javascript and getting information
> back from the WebView.
> To handle the communication between Java core code and the HTML/CSS/JS GUI
> via WebSockets seems very interesting.

Yes, this is another issue (at least for us). Rendering simple HTML
in WebView is not an issue, but interaction between Java and HTML5 is
VERY JavaFX dependent and the knowledge is not portable.
That is one reason I use WebSocket (particularly, Jetty WS server and
client) for communication between HTML5 app and Java.

> I also got the WebView to work with external urls, i.e. I can open javafx
> webview in a JDialog or JFrame and load webpages, but local resources packed
> in the bundle jar are not displayed.
> I assume the problem is that the webview cannot resolve resource urls of the
> form
>
> bundle://117.0:1/info.html

I had the same issue, and for my test code, I used dumb approach,
which is using ~/CytoscapeConfiguration/webapp as a resource
directory, which means simply unziped the entire web app from the
bundle to the directory when user installed the bundle.

https://github.com/idekerlab/ndex-valet/blob/eba7e23b3ae941d190c8adbeb8d5369ed96aa95e/src/main/java/org/cytoscape/fx/internal/ui/WebViewPanel.java

This is not a perfect solution, but now you can use "file:///" to
access those. I used same approach for this app:

https://github.com/idekerlab/science-direct-app


Event handling part can be done by:


1. Simply follow JavaFX standard way:

https://docs.oracle.com/javase/8/javafx/embedded-browser-tutorial/

2. Add custom communication layer using more open standards (REST
API/WebSocket/WebRTC/ etc.)


I'm using 2nd option, but it's still experimental and I need to design
more consistent messages between applications. If your UI is
relatively simple, you can try 1st one.


Kei

>>>>>> an email to cytoscape-disc...@googlegroups.com.

>>>>>> To post to this group, send email to

>>>>>> cytoscap...@googlegroups.com.

>>>>>> Visit this group at https://groups.google.com/group/cytoscape-discuss.
>>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>>
>>>>> --
>>>>> You received this message because you are subscribed to the Google
>>>>> Groups "cytoscape-discuss" group.
>>>>> To unsubscribe from this group and stop receiving emails from it, send

>>>>> an email to cytoscape-disc...@googlegroups.com.

>>>>> To post to this group, send email to

>>>>> cytoscap...@googlegroups.com.

>>>>> Visit this group at https://groups.google.com/group/cytoscape-discuss.
>>>>> For more options, visit https://groups.google.com/d/optout.
>>>>
>>>>
>>>>
>>>> --
>>>> ===================================
>>>>
>>>> Keiichiro Ono
>>>> http://keiono.github.io/
>>>>
>>>> ===================================
>>>>
>>>> --
>>>> You received this message because you are subscribed to the Google
>>>> Groups "cytoscape-discuss" group.
>>>> To unsubscribe from this group and stop receiving emails from it, send

>>>> an email to cytoscape-disc...@googlegroups.com.
>>>> To post to this group, send email to cytoscap...@googlegroups.com.

>>>> Visit this group at https://groups.google.com/group/cytoscape-discuss.
>>>> For more options, visit https://groups.google.com/d/optout.
>>>
>>>
>>>
>>>
>>> --
>>> vvvvvvvvvvvvvvvvvvvvvvvvvvvv
>>> : Barry Demchak, PhD
>>> : UC San Diego, Department of Medicine
>>> : https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
>>> : (858) 452-8700
>>> vvvvvvvvvvvvvvvvvvvvvvvvvvvv
>>>
>>> --
>>> You received this message because you are subscribed to the Google Groups
>>> "cytoscape-discuss" group.
>>> To unsubscribe from this group and stop receiving emails from it, send an

>>> email to cytoscape-disc...@googlegroups.com.
>>> To post to this group, send email to cytoscap...@googlegroups.com.

>>> Visit this group at https://groups.google.com/group/cytoscape-discuss.
>>> For more options, visit https://groups.google.com/d/optout.
>>
>>
>>
>> --
>> ===================================
>>
>> Keiichiro Ono
>> http://keiono.github.io/
>>
>> ===================================
>>
> --
> You received this message because you are subscribed to the Google Groups
> "cytoscape-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to cytoscape-disc...@googlegroups.com.
> To post to this group, send email to cytoscap...@googlegroups.com.

[Matthias König]

Hi Max,
I am following the cytoscape.js development for some time.
Most of my networks are quit large (a few thousand nodes) and here the performance of the js version is not comparable to the Desktop version. For me it has some complementary functionality. Being pure js opens many new possibilities.
I even thought about showing subnetworks with cytoscape.js from within a WebView in the Desktop version and so combine both worlds. I have annotation RDF graphs for the nodes of of the "real network", and it would be nice to layout them with cytoscape.js in a Results Panel.

M

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

[Max Franz]

Hi Matthias:

Thanks for your answer.

I can see why you would think that about the performance of past versions of Cytoscape.js.  Recent versions -- like 2.6 and especially 2.7 -- have much improved rendering performance though.  2.7 has architectural changes that make a very large improvement, and the default stylesheet in 2.7 has been optimised to make high performance much easier.

Please take a look at this repo: https://github.com/cytoscape/cyjs2.6-cyjs2.7-desktop-comparison

It has live demos with 6k, 10k, and 20k elements.  In each case Cy.js 2.7 has a higher framerate and faster responsiveness than Cy3 desktop.

There are also plans for future versions of Cy.js that will continue to improve performance by large amounts.

-Max

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Matthias König]

Hi Max,
yes, large improvements in 2.7.
Problem is not rendering, the problem is node movements. On the 6k networks I have lacks of 0.8-1.2 seconds before a node is moving after I move the mouse. On the 20k networks I have to wait ~2s before a node is moving in the layout after moving the node with the mouse. On the desktop version I can feel the lacks for such large networks, but they are normally <200ms, so I can at least move nodes.
>0.2s is in the range of user not feeling direct interaction with UI and looses the train of thought. I will look at larger networks with cytoscape.js, but I will not work with them. Even for the moderate size networks of <1000 nodes http://js.cytoscape.org/demos/57e7cc43342193d9d21a/ I can feel the lack of ~0.4s.

M

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

[Matthias König]

Hi Kei,
thanks for the information.

I came up with a very similar solution than in
https://github.com/idekerlab/science-direct-app
i.e.
[1] create an app directory in the CyActivator

final CyApplicationConfiguration config = getService(bc, CyApplicationConfiguration.class);
final File cyDirectory = config.getConfigurationDirectoryLocation();

[2] copy all resources from the bundle there
[3] use the file resources instead of bundle resources


My experience with JavaFX in Cytoscape so far
- most of the things I tried work
- main issue are the resolution of resources, but can be fixed with the trick above
- I could generate some GUI based on FXML and a FXMLController within a JFXPanel, i.e. Swing embedded. This seems much cleaner than the Swing GUI due to nice separation of logic and layout (but has overhead of packing the things, i.e. JavaFxScence in JFXPanel in JDialog)
- WebView renders HTML from HTTP without problem, but I had problems with many HTTPS resources (problems with certificates, seems to be a known JavaFX bug)
- the CSS support of WebView is quit good limited, but not comparable to modern browsers. As a consequence the HTML/CSS/JS example GUI I tried looked quit different in WebView than in Firefox/Chrome
- also no support for things like flash, pdf, ... in the Webview

In summary, JavaFX looks like a great alternative for UI design to Swing. Especially with FXML and possibility of styling the UI with basic CSS. This is the way I will go for now with the GUI redesign. JavaFX seems to work well in Cytoscape with java 8, besides some issues due the OSGI bundles.
Unfortunately, the WebView is not a full browser replacement and there seem to be a ton of issues on the horizon if one wanted to design a pure html/js/css Webview GUI. In the long run I will look in your electron approach. Let me know about major progress there.

M

[Barry Demchak]

Thanks, Matthias, for all of your good comments.

 

We’re building an inventory of use cases pertaining to mixing Swing and web apps or web pages. Ultimately, the core team will make recommendations for how to integrate web apps and web pages within Cytoscape core and in apps.

 

Would you mind contributing a list of requirements for your application? This type of inventory is needed so we can formulate and test our designs.

 

Thanks!

[Max Franz]

Hi Matthias -- This seems to be an issue with your machine in particular.  I've tested those demos on several machines on both Mac and openSUSE, and dragging is instant.  I suspect you have either inefficient browser extensions/addons or an old CPU/GPU combo that Chrome and Firefox no longer optimise for.  Maybe you have a different issue, but you may want to at least test with extensions off. -Max

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-disc...@googlegroups.com.
To post to this group, send email to cytoscap...@googlegroups.com.
Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

[Matthias König]

Hi Max,
created a separate discussion for that
https://groups.google.com/forum/#!topic/cytoscape-discuss/qEDrA0QZ7Vc
Could you give some information about the cytoscape.js requirements for good performance there?
M

Kei

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

===================================

Keiichiro Ono

http://keiono.github.io/

===================================

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

Visit this group at https://groups.google.com/group/cytoscape-discuss.
For more options, visit https://groups.google.com/d/optout.

--

vvvvvvvvvvvvvvvvvvvvvvvvvvvv
: Barry Demchak, PhD
: UC San Diego, Department of Medicine
: https://sosa.ucsd.edu/confluence/display/~bdemchak/Home
: (858) 452-8700
vvvvvvvvvvvvvvvvvvvvvvvvvvvv

--
You received this message because you are subscribed to the Google Groups "cytoscape-discuss" group.

To unsubscribe from this group and stop receiving emails from it, send an email to cytoscape-discuss+unsubscribe@googlegroups.com.
To post to this group, send email to cytoscape-discuss@googlegroups.com.

[Matthias König]

Hi Barry,
created an document with my requirements
https://docs.google.com/document/d/1jWzMB0Wv_kgQAiScSrDXqVaYR7cv_7iouZAgENtyC1I/edit?usp=sharing
M

[Barry Demchak]

Thanks, Matthias …

 

This is an awesome start to the discussion … please note my friendly comments on the document, particularly the new paragraph at the end of the Introduction.

 

I have to leave the office for an hour or so … what do you think of opening this discussion to the rest of the developers?? (I think you already did this by posting on Discuss)

[Keiichiro Ono]

This is a great summary.
I've added some comments.

I've just finished the proof of the concept Electron application for
Cytoscape, and will write some documents for it shortly.

https://github.com/idekerlab/ndex-valet-electron
https://github.com/idekerlab/ndex-valet

Kei



2016-06-15 0:35 GMT-07:00 'Matthias König' via cytoscape-discuss
<cytoscap...@googlegroups.com>:

[Matthias König]

Hi Barry,

everybody can comment on the document right now, so everybody is invited to give input.
If you send me a list of emails of developers (to email account) I will give edit rights.

@Kei @Barry thanks for the great input.

M

[Matthias König]

Hi all,

here some screencast of the JavaFX GUI with explanations and comparison to the JTextPanel approach
https://www.youtube.com/watch?v=GmAu6RBCs2Q

The app is available from app store:
http://apps.cytoscape.org/apps/cy3sabiork

There are still some minor issues, the only big one is the missing javascript support due to the old felix OSGI.
I give a short demonstration of the functionality without OSGI in the video.
Unfortunately there seems to be no workaround until Cytoscape ships with a current felix OSGI implementation.

Personally I love the JavaFX HTML/JS/CSS hybrid approach. I will definitely do no more Swing GUI.

Code for anybody interested is available at
https://github.com/matthiaskoenig/cy3sabiork/

The app will be featured in the upcoming Cytosape app issue
https://docs.google.com/document/d/1_3ZSaE1fcdRdgrXuwVFQ1lnQ8-FmKFe0drURC4w6gtU/edit?usp=sharing

So please feel free to comment on the manuscript/app/approach

The best
Matthias

[Barry Demchak]

Interesting video, Matthias …

 

Great job making it and demonstrating an integration path for HTML/JS/CSS and Cytoscape.

 

We’ll take a close look at this.

 

For everyone:

Here’s our latest commentary: https://docs.google.com/document/d/1UNZ977Qay4PBvUZeXyqCwgh6rr5Wn9RyQrckxUj-02w/edit#

 

Here’s Mattias’ latest commentary:

https://docs.google.com/document/d/1jWzMB0Wv_kgQAiScSrDXqVaYR7cv_7iouZAgENtyC1I/edit