I am looking a way to use Cytoscape library with Python via Django.
I would like to go to route and be able to click node and have an output.
I want this to be similar to this one video: https://www.youtube.com/watch?v=g8xBlilTV4w
I have represented this problem on image below:
enter image description here
How should I tackle the problem?
That video was done using Dash with plotly and Cytoscape.js. I'm not sure if there is an easy way to do this with Cytoscape desktop. There is work underway to support linking between web applications and Cytoscape desktop using CyREST, but I'm not sure if solves your problem.
-- scooter
Related
I need to add some infographics into Angular 5 app. I've chosen d3.js for that. I also need to be able to do export of graphs, i.e. make SVGs with Node and wrap them inside PDF.
Fortunately it's rather simple to make code that makes d3 graph in browser work on node.js. The following lines do that...
const { JSDOM } = jsdom;
const { window } = new JSDOM();
const { document } = (new JSDOM('')).window;
global.document = document;
After that only minor changes to code that works in browser are required.
Obviously I don't want to have 2 copies of almost the same code, so I need a way to organize usage of the functions that create SVG (I'd prefer if that was Typescript not javascript) on both angular app side and node app side. Unfortunately I don't have to much experience in Node and don't see an easy solution for that.
Here are my questions...
How can I simply organize usage of functions that create SVG using d3 by angular 5 app and node.js app?
Maybe rendering d3.js with node isn't the best solution and there's another, that is simpler?
Thank you in advance!
I would like to suggest the following solution.
First of all, no matter which front-end framework you actually use right now.
If I got your idea correctly, you need to have a picture/screenshot of the d3js chart, in order to use it in PDF in the future. Is it correct?
You need to write a utility, to be able to open the real web page with your chart component and make a screenshot (with a resolution you want ofc) It might be a combination of the protractor with chrome-browser, for example. (there are a lot of solutions, actually, we could even use PhantomJS. In my experience using Protractor simpler and easier to implement). Also, Protractor has an internal feature to make screenshots of the page and save to the particular folder.
Which benefits we have following that solution:
the only one place with a source code related to chart rendering
100% sure that chart view the same, as on the real web-page (with
other angular components)
we don't need to find the way render SVG on the Node.JS side and etc...
The job might look like below:
Launch some NPM/Gulp/Grunt (whatever) task to open the particular
page of your web-app by using Protractor and Chrome browser.
Open the dummy page with only chart component + data layer.
Make a screenshot and save to the particular folder. Use screenshot
of the chart inside PDF (manually or by using another tool)
If you want to do it on the server side, you can have an api which will generate the graphics and return the element. You can directly plug it in the UI and also use the same function for you PDF generation.
I have a problem. I've tried some libraries that convert html to PDF but they don't import CSS, so my PDF is invalid.
I's tried with "html2pdf" , "pdfmake", "jspdf"..
PDFMake does not help me because it need to generate a JSON with HTML data...
The structure of file that I would like to convert to PDF is:
html: www/templates/phase_one_report.html
css: www/css/phase_one_report.css
Some ideas? I am using nodeJS with sailsJS in backend and javascript with ionic in frontend.
Sorry about my english.
This is a difficult problem. I have also found that existing HTML to PDF libraries usually don't handle the HTML & CSS that I throw at them.
The best solution I have found is not Javascript at all: wkhtmltopdf. This is essentially a program that wraps up the webkit rendering engine so that you can give it any HTML + CSS that webkit can render and it will return a PDF document. It does an outstanding job, since it's actually rendering the document just like a browser would.
You mention that you're using node.js, but it's not clear exactly what your environment is, so I'm going assume that your report is available at a URL like http://my.domain/phase_one_report.html. The simplest way to get this working would be to install the wkhtmltopdf application on your server, then use child_process.exec to execute it.
For example:
import { exec } from 'child_process';
// generate the report
// execute the wkhtmltopdf command
exec(
'wkhtmltopdf http://my.domain/phase_one_report.html output_file.pdf',
(error) => {
// send the PDF file to the client
}
);
There are a lot of different command-line options for wkhtmltopdf - you'll need to look into all the different ways to configure it.
If your report is not accessible at a URL, then this becomes a little more complicated - you'll need to inline the CSS and send everything to wkhtmltopdf at once.
There are a number of options available right now:
Edit 09/2018: Use puppeteer, the JS Headless Chrome driver. Firefox now also has headless mode but I'm not sure which library corresponds to puppeteer.
wkhtmltopdf as mentioned before does the job but is slightly outdated.
You will have to watch the latest chrome releases which will have a --headless option to enable html+css+js to pdf conversion.
Then there is PhantomJS and Slimer.js. Both are possible to use with node and Javascript. Nightmare.js is also an option but sits on top of it.
However, Phantom.js is currently the only solution that is truly headless and javascript based. Slimer.JS works with Firefox but requires you to have a window manager, at least xvfb, a virtual frame buffer.
If you want the latest browser features you will have to go with slimer.js or, another option, go with one of the Electron based solutions that keep popping up. Electron is based on Chrome and is scriptable too. A fine solution that also ships with Docker containers is currently https://github.com/msokk/electron-render-service
This list is possibly incomplete and will change a lot in the near future.
I need to display some data online but I also would like to have nice plots as high-res files for printing. So far I was generating the plots as png, but now I am thinking on changing this to Javascript. This is mainly because I would like my plots to be dynamic.
The WWW part is looks relatively easy for me; I would grab data from a server with AJAX and plot on a webpage - I think SVG would be perfect for my needs. But how can I run the script from terminal with a file name as a parameter to get a myplot.svg (which of course will not be dynamic any longer) file that looks like the plot on the webpage?
Ideally I would like to have a single plotting subroutine in order to avoid duplicate code and to keep both versions looking the same.
So my questions are which framework should I use for SVG generation to make the terminal variant easy ?
You can use ImageMagick to convert a SVG to png:
ImageMagick convert svg to png
You can extract the generated SVG from a virtual DOM (with the same code as on your web page, perhaps with slightly differences regarding environment) when you use Node.js and jsdom
As mentioned in the comment I can recommend D3.js - Data Driven Documents for generating SVG the easy way.
An alternative for Node.js and jsdom might be Phantom.js.
Your task is not an easy one, but it's worth the effort. Good luck!
Goal
My goal is to get an UML model out of my JavaScript project (consisting of several .js files) and store it as XMI.
How far I've come
I searched the internet and found out js/uml is the first place to go.
I've managed it to get the js/uml plugin running with Eclipse 3.7.1 (Win32) and a local installation of my pre-downloaded additional plugins:
mdt-uml2tools-Update-incubation-I201103290512.zip (installs required org.eclipse.uml2.diagram.clazz 0.10.0)
jsuml-eclipse-0.8.4.zip (only works with Eclipse 3.7.1 (Indigo))
I loaded the provided example project jsuml-example-yui-0.8.4.zip into Eclipse and added all my .js files to this project also.
Problem
Now I'm stuck and do not get it how to call the reverse engineering of my .js files. I can call 'New'->'Other'->'UML 2.1 Diagrams'->'Class Diagram' from the project's context menu, but I don't get the following steps of that assistant dialog, nor do I get it if this is the right way at all. Please, could you help me with an easy understandable click tutorial? The js/uml homepage does not explain it well enough IMHO. Thanks for your help in advance.
Someone adapted UML for web artifact, its called the "WAE" extension of UML. This way you can see not only your javascript files but the html and css. If you work with node.js, i created a module that generate class diagram for javascript/node/html/css. Its called wavi. For javascript, function,variable are automatically recognized. You can use it for documenting your application.
https://www.npmjs.org/package/wavi
Well, I think I have come quite close.
There's a command-line tool called Code2Flow. which uses GaphViz to generate graphs for Python and JavaScript sources.
I tried it, it does generate the graphs but somehow i can't make to do right.
I hope this will help you or someone.
i currently have highcharts realtime graph working on a browser (e.g. http://www.highcharts.com/demo/dynamic-update ), but we now want to an iphone/ipad app so that the users dont have to go and type in the address (instead open an app) and they see the live graph.
is there an easy way to convert the existing webpage (with highcharts.js and jquery. js into an app?) i looked at real time plotting on iPhone using core plot? but looks a bit complex for me (i dont have any prev knowledge on building apps )
Also, http://code.google.com/p/core-plot/issues/detail?id=94 indicates there is a known problem with core-plot dynamically updating the data in real time. any live examples would be of great help.
thanks
You might want to check out Phonegap, on build.phonegap.com you can upload your web-assets and download a ready compiled (web-)app wich will run as a regular app on your device.
For a simple web-app tested on android this worked great (but do not count on anything outside the browser being available to you (phonebook/sms etc)).
I'd suggest to create a iOS web-application, so you can use Highcharts JS like in a normal webpage. The Highcharts homepage says it's compatible with iPhone/iPad.
Web-apps can be designed to look like native apps and can also be started directly from the homescreen without typing the URL.
This answer is very late, but here is a gist that embeds HighCharts into a UIWebView. Embed jQuery (I used jquery-1.9.1.min.js) and the HighCharts .js files in the app bundle and this will load them into the web view.