Creating an expandable multi-layer System Diagram [closed] - javascript

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 5 years ago.
Improve this question
SITUATION: My company has a massively complex and dynamic IT infrastructure. These systems are far too complex to map and present through a diagram. I am trying to create a centralized website that houses all documentation, for all IT teams, with interactive expandable system diagrams, so that teams can drill-down and view as much, or as little of the system as they need without being overwhelmed.
QUESTION: Using DHTML, is it possible to create an interactive diagram that starts out as a simple square with the system name, then once the users clicks on it, that square disappears and expands to reveal more of the system components? Each component would then be clickable, and the process would continue until the system was completely broken down.
NOTE: I apologize if this is ambiguous. I didn't know how else to describe it. Google continues to pull up incorrect results to all queries. All help is appreciated.

What you are looking for is definitely possible. I believe the search terms you should be looking for is diagramming libraries or graph drawing and flow-charting programming libraries. There are a lot of libraries out there, both commercial and open-source. See this related SO question for a number of options.
From your description, I believe the yFiles for HTML diagramming library should be a good match.
There are two demos available online that show scenarios that seem to match your description:
Live Demo Hierarchic Grouping
Live Demo Collapsible Tree
Since this is a library with a huge API you can easily customize the look and feel as well as the data sources to your own specific requirements.
Disclosure: I work for the company that creates that (commercial) library, however I do not represent my employer here. This is my own post and opinion.

I am not sure if I understood correctly your question. But it seems you are looking for a tree diagram. There is this example in D3.

Yes, it is possible, but there are many options to possible designs, so more specific suggestions will not be definitive. The distribution of concerns between client and server ( who does compute what part of the schematics at what time / upon which user action ) should be a reasonable first design choice. Further criteria comprise visualization complexity, data complexity, data source, frequency of data change, ease of development, available development skills and budget.
Today's user agents and computing power allow to run the whole gamut between client-only and server-only processing (almost that is: basic user input ['mouse clicks'] will of course be processed client-side).
The easiest path will probably be to use a client-side library like D3.js on a precomputed data set as #MárioAreias suggests.

Related

Django or NodeJS for long-term web and business project? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 1 year ago.
Improve this question
Good afternoon all, we are struggling to decide which way to go for a project and would like to have some insight from people who have been dealing with this. We have to invest in training/time for the two people who are working on our business and we would like to understand which way to go.
The people
Both have a good understanding of HTML, CSS, SASS and some JS
One has some experience with PHP
One has more experience with Python
The Project
Database driven website that will host and display hundreds of products (laboratory products which will need specific templates for each product
Shopping chart for reagents and lower cost products
A section with a knowledge base
The website(s) will be multilingual, with different products for different countries
Integrated CRM, connected to the products, stock management and shopping chart
Potentially (desirable, but not necessary) an APP for the phone
An application that will link all the components
AI services and big data analytics (as a separate product)
The timeline
2-3 years, potentially 4 for completion
This is to move what we are doing manually at the moment (and what we are planning to do) to something that is kept together by a coherent structure.
We do not have much experience or funds, but we have the man hours to pour into it. Would you suggest to go with Python/Django or with JS/Node? Why?
Thnks
It depends on the kind of data structure you need to keep if your data is kept around the world or in a central location, what kind of traffic you expect to have, and what your future of expansion looks like.
Option 1: Stick to your strengths
The first, and possibly the most obvious option, is to stick to your strengths. If you have someone strong in Python, Flask or Django could be the way to go because of the immense flexibility you have with python scripting, TensorFlow (for AI), and R libraries for statistical interfaces.
If only one of your 2 devs is good at python this will provide some separation of responsibility as you can have one dev focus on the page design and the other focus on the actual app functionality.
My biggest suggestion is to please stay away from PHP. Modern languages and libraries will work for what you need and are usually more reliable, less complicated, and have a whole community of active support built around them.
That being said you have to consider all the components of what you need. If your site needs are truly as large as you've described, you could break it down into microservices that handle various parts of the site independently and scale to meet traffic demands. This is all dependent on what you need of course.
Option 2: Go outside your comfort zone
The second, and more risky, option for you is to exit your comfort zone. NodeJS is a wildly adaptable and extensive JavaScript framework that can be molded to fit nearly any web-based need. The extensive lists of frameworks that can be used are a lot to consider, but you can deliver a more reliable, scalable, and user-friendly product with node. The HTML, CSS, and JS knowledge your team already has would be essential to making a NodeJS site work. Node also has the ability to provide you great flexibility in terms of localization. If you need to have different databases in different countries, for example, node can easily accommodate this and any other complexity you might have to throw at it. It's built to be robust and customizable for any need.
However, the drawbacks to using node are that it would be harder to implement AI and Statistical infrastructure to your site because of the nature of how node sites run. This part alone may make using python the way to go, but it can also make your site buggier, and take much longer to deploy.
Wrapping up
Ultimately the best choice for you is going to come down to your funding, team skills, and the systems you need to create to pull your site together. I encourage you to talk extensively with your development team to understand their strengths, weaknesses, and limits for what you need. Take their input seriously and use it to put together the best game plan possible to create the product you need.

How do I code a dynamic website? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
Never mind. I've found the correct answer
I think you have already all pieces in front of you, but don't know where to start.
I suggest that you
find an exciting Bootstrap blog template (like the free ones at Start Bootstrap)
understand the code, which is usually a good mixture of HTML5, CSS3, JavaScript with a modest use of jQuery
tweak it with your own ideas
if you have some special needs not covered by the template (for example collapsible menu items), you can browse the Bootply Snippet Library to look how others coded it.
Nowadays no web programmer starts from scratch. They choose a template with the basic structure of a one-pager, multi-pager, blog, e-commerce, etc. and start from there.
By the way: Alaboudi mentioned in his answer that you need to learn MySQL, too. This is indeed needed for dynamic content like e-commerce and blogs, but not for static content like business websites that don't change that often, but put an emphasis on individual page layouts.
But to get your first website up fast I would start with static websites and later extend your knowledge to MySQL.
Everything you have learnt is great, but you must also learn a database querying language (SQL). May I suggest you start learning MySQL, its very friendly for beginners. Now let me give you an example of how to code a dynamic website.
Lets consider facebook profile pages as an example. Firstly you must realize that there isnt 1 billion uniquely saved profile pages made for each user on the server. Rather, there is only 1 html css template that is filled in with appropriate information depending on the person loading the page. When the visitor comes to his profile page, his information must be queried from the database using a backend language (PHP in your case). Once the result of the call is retrieved, you fill in the appropriate information in your html (name, age, friends, blah, blah) and send it over to the user. So technically you are constructing the complete page with every call and you never actually have the complete page saved on the server.
Long story short, you should look into using a database.
This is not really a question. I would suggest you to go and code something.
You want to do a blog? Ok, try to do it with what you've learned so far.
When you'll start to build it, you'll have specific questions on specific problems, you can then search on Google your specific problem or come back to StackOverflow and ask for it.
Any resource is good and lucky you, there are plenty of resources on the internet ;)

Oracle ADF vs a Javascript MVC framework like EmberJs or AngularJs [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am starting a new project that has planned to use a large of Oracle components BEPL, SOA Suit, Oracle Spatial and Oracle ADF. I am trying to convince the team that a Javascript framework like EmberJs or AngularJs would be better. I feel like I might not be comparing apples to apple with EmberJs vs ADF. The goal of the project is to expose a large complex database to both our Web Front end and as an API. I think that a Javascript framework would work well with the data being exposed as an API instead of thought ADF where it might use a more proprietary connector.
Well.. comparing cars to bikes always look crazy. However sometimes you choose bike over the car. And sometimes you might want even reinvent the wheel.
However mostly it just shows lack of particular knowledge and very bad decision is trying to get rid of native, supported solution and start repeating it with the tools, you know better.
All oracle stuff now driven with ADF. There should be VERY strong reasons to abandon it. And you didn't provided any.
I'll be subjective with my answer here, as ADF is a very big framework and CAN be used along with EmberJS if you want to ditch the ADF Faces part, however here is my 5 cents into this
Using EmberJS from a Java Developer point of view
Pros
If done right, a great User Experience can be generated.
Very flexible front end development for your front end team.
More options when it comes to Deployment on servers as you don't need to work with Java EE container (I'm excluding the Service part of course).
Cons
Developers will need to learn EmberJS, Backbone or AngularJS
Developers will have to provide a great service layer, and controller in a way that all this JS Frameworks can interact with.
Developers will have to consider security constraints themselves as JS is not secure by default.
Development time will increase greatly and if you are under a deadline it'll be very hard to be met since developers will have to take care of everything themselfs.
This question interested me, so I made a tiny research. If you make a search on tags javascript + oracle, you'll notice that there are only 74 questions tagged. So these technologies do not actually intersect quite often in a real world and it's doubtful if anyone would provide expertise.
I'm learning AngularJS now and I'm quite certain that it's worth every minute I spend on it, it will be there for a long time and that it provides one of the quickest an intuitive developing experiences on the market. It requires learning, though, and even hair-pulling at times if you're a novice, like I was.
PS One of the killer arguments are the numbers for the tags in this question in the top-right corner.
Comparing ADF to JS is like comparing Servlets/JSP to JS. Makes no sense.
ADF generates JS as part of its page rendering, but also allows you to incorporate JS and JS libraries to extend and augment the ADF JSF page functionality.
I suggest you read a bit about JSF before making this decision...or comparison.
AND, if you're working with Oracle, specifically Fusion Apps, which is written in ADF and SOA Suite, (BTW: BPEL is one component of SOA Suite, not a separate product), then you have no choice but to use ADF.
Seems you have some study ahead of you.

Possibility of fully functional word-processor in html5/css3/javascript? [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
With the current state of html5/css3/javascript and the browsers support of it, do you think it is possible to create a fully functional word-processor (or document editor) like Microsoft Word or LibreOffice Writer with > 80% of its features? I'm talking about the rendering and editing engine, I think a server-side component for loading and saving documents to disk is always required because of security, conversion, etc.
Of course I am not talking about HTML-editors which are commonly available (e.g. CKEditor, TinyMCE, etc.) but I compare it with products like DevExpress DXRichEdit, Telerik RichTextBox and TX Text Control. Why would you at this moment still need technologies like Silverlight, ActiveX or Flash to create a webbased word-processor?
There are some initiatives regarding HTML5 document viewers, but besides Google Docs and Zoho Docs (which are limited in features compared to desktop based word-processors, and operate more like advanced HMTL editors) there is little available in regards to webbased word-processors.
Is there a reason there is no HTML5 word-processor yet? What do you think is still missing from the current technology to be able to create a webbased word-processor suitable as replacement for products like MS Word?
No if you think anything more advanced than a letter to your aunt.
HTML WYSIWYG components are horrible mess (contentEditable). You might almost success for one browser, but xplatform stuff (IE) just wont fly.
Google Docs is the best what money can buy today and it is flakey at the best.
However Silverlight or Adobe do not offer anything better.
The best bet is to hope that HTML5 APIs got to the point pure Javascript editor is possible. But they are not yet there.
ConstEdit at http://www.constedit.com may be such a word processor that satisfies your requirements on html5/css3, but not javascript.
It generates documents in the html format. Html5 sectioning elements tags are fully supported. There is an option to generate css stylesheets. It is not web-based. It runs locally on your pc.
You may give it a try. It is free for non-commercial users.
(Please note that I am the author of this software)
I am very interested in this issue, too. I want to be able to take templates and finalize my cover letters and similar format-critical documents via an online word processor.
I detest CKeditor and the other html editors. They are definitely not WYSIWYG.
The best one I've found so far is www.TeamLab.com I have no affiliation with them at all. I think they already recognize the monetary value of their online word processor. They are not giving out their API's and last time I spoke with them they said they will not do so for a number of months - presumably to assess how they want to charge for this valuable WP feature.
I am an attorney who needs to have proper looking letters and documents. I have my own online application, and the online word-processing feature is only one small - but very important - aspect that I want to add to my app for my staff attorneys to have.
I may be wrong but ConstEdit seemed to be just preliminary. If I am wrong, I would very much like to talk to you. I can give you good advice from a User's perspective.
Another group that I think is working on this concept is www.TheFormTool.com They indicated they have a secret project, and I suspect it is this very html5 word processor.
As a user it is my opinion that such a product would be very valuable. I encourage people to pursue this.
Only reliable way to find out is to attempt it yourself, and see if you're blocked by something missing in the tech stack you're using (in this case js/html5/css).

How to illustrate multigraphs in Javascript? [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
The community reviewed whether to reopen this question last year and left it closed:
Original close reason(s) were not resolved
Improve this question
This question is looking for a practical and easy way for drawing multigraphs using Javascript.
First of all look at this question. None of those libraries support Multigraphs (or Pseudographs ). I mean I can't generate graphs like this:
Is there any jQuery plugin (or javascript library) out there for this purpose ?
I thought i can use WolframAlpha's API and use its images, something like this:
but it have lots of problem:
I can't move nodes or add remove edges interactively.
Only 2000 API calls per month. Not enough.
I can't produce large or intermediate graphs.
They are really ugly!
Please help me if you know some javascript library in order to draw Multigraphs, or anyway to produce such graphs (something like Dracula Graph Library but with ability to draw Multigraphs).
Cytoscape.JS supports multigraphs, is pure Javascript, and uses the new HTML 5 Canvas for performance. Its design intent is general purpose graph visualization/manipulation.
https://js.cytoscape.org/
If you are allowed to use Google Charts API you may refer to this
http://code.google.com/apis/chart/image/docs/gallery/graphviz.html
Example:
https://chart.googleapis.com/chart?cht=gv&chl=graph{C_0--H_0[type=s];C_0--H_1[type=s];C_0--H_2[type=s];C_0--C_1[type=s];C_1--H_3[type=s];C_1--H_4[type=s];C_1--H_5[type=s]}
I'm affraid you will have to do some development yourself. Raphael.js is pretty capable in creating and manipulating svg - would be good starting point
Some of those graph visualization libraries (mentioned in this question) DO support Multigraphs and allow dragging/placement of nodes
jsplumb: http://jsplumb.org/jquery/stateMachineDemo.html
possibly http://js-graph-it.sourceforge.net/ may support multigraphs.
but as far as your issue
4- Its really ugly!
These may not appeal to your aesthetic.
I think paper.js (http://paperjs.org) will get you also pretty close.
You might want to check this one out: www.d3js.org
You'd have to do a lot yourself (make your own SVG and such), but the library is very powerful.
I recently used Graphviz to draw the connections between some authors pubblications.
Graphviz is open source graph visualization software. The Graphviz layout programs take descriptions of graphs in a simple text language, and make diagrams in useful formats, such as images and SVG for web pages, PDF or Postscript for inclusion in other documents; or display in an interactive graph browser.
For example i used a simple DOT file to write all the connection between the authors and I produced a PNG file.
http://www.graphviz.org/
Here there is all the documentation that you need and in the gallery section you can see a lot of output example.
Hoping it could be helpful.
In a commercial scenario, take a look at yFiles for HTML:
It easily supports multi-graphs and does not look too ugly, I believe:
(These graphs have been laid out automatically, manual placement is also possible.)
Of course this is a matter of taste, so if you don't like the look, you can change any aspect of the visualization, like in the style tutorial.
The API offers full interactive editing capabilities and being a pure client-side solution, of course there is no API call count limit.
Large graphs are still a problem with todays' Javascript engines, but only if "large" means more than thousands of elements. With virtualization (considering only what is currently visible in the viewport during rendering), you can get good performance with thousands of elements.
Disclaimer: I work for the company that creates the library, on SO/SE, however I do not represent my employer. My posts and comments are my own.
You can check jsnetworkx (http://jsnetworkx.org/)
It is a js version of python graph library which supports multi-graph. It has a draw function which visualizes the graph using D3.js. It is available for both browser and node.js.
Best bet would be to render them on the server (or use it as an applet) with JGraphT.

Categories

Resources