Article
· Nov 3, 2017 3m read

DeepSee Web: InterSystems Analytics Visualization with AngularJS. Part 1

There are several options how to deliver user interface(UI) for DeepSee BI solutions. The most common approaches are:

  • use native DeepSee Dashboards, get web UI in Zen and deliver it in your web apps.
  • use DeepSee REST API, get and build your own UI widgets and dashboards.

The 1st approach is good because of the possibility to build BI dashboards without coding relatively fast, but you are limited with preset widgets library which is expandable but with a lot of development efforts.

The 2nd provides you the way to use any comprehensive js framework (D3, Highcharts, etc) to visualize your DeepSee data, but you need to code widgets and dashboards on your own.

Today I want to tell you about yet another approach which combines both listed above and provides Angular based web UI for DeepSee Dashboards -  DeepSee Web library.

What is it?

DeepSee Web(DSW) is an Angular.js web app which renders DeepSee Dashboards, available to a user in a given Namespace using Highcharts.js, OpenStreetMap and some self-written js widgets.

How it works

DSW requests dashboards and widgets metadata available in a namespace using MDX2SJON library. To visualize a dashboard DSW reads the list of widgets and their types and uses js-widget analogs which were implemented for almost every DeepSee widget. It instantiates js widgets listed in a dashboard, requests the data according to widgets’ datasources using DeepSee REST API and MDX2JSON, retrieves the data in JSON format and performs the visualization.

 

Why is it cool?

DSW is great because:

  • You can develop DeepSee Dashboards using standard editor and then have a UI on Angular without any line of coding.
  • You can expand the library of widgets easily with any js library or self-written widget.
  • You can introduce smart-tiles on DSW covers.
  • You can display the data on map.

 

What about mobile devices?

DSW works pretty well in Mobile browsers (Safari, Chrome), and it has standalone DeepSight iOS app, here are some screenshots:

 

How much it costs?

It is free. You are very welcome to download latest release, open issues, make forks and send pull requests with fixes and new features.

 

Is it suitable for production usage?

Yes. DSW was started in 2014 and has about 60 releases to the date. Dozens of companies use DSW successfully in their DeepSee solutions.

For example, we are using DSW for developer community:

But be aware that according to the DSW license (MIT license) you are using it at your own risk.

 

Is it supported?

It is supported by the community. You are very welcome to open issues, make forks and send pull requests with fixes and new features.

Key contributors are [@Anton Gnibeda​], [@Nikita.Savchenko] and [@Eduard Lebedyuk]. 

 

How to install?

It’s easy. First, install MDX2JSON. Download the latest installer from release, import/compile installer.xml in USER namespace, run

USER> D ##class(MDX2JSON.Installer).setup()

It will download the latest release from github, create MDX2JSON database and namespace, map it to %All and create the /MDX2JSON web app.

To check if everything installed well open localhost:57772/MDX2JSON/Test.  If everything is fine it will return something like this:

{
"DefaultApp":"\/dsw",
"Mappings": {
"Mapped":["%SYS","MDX2JSON","SAMPLES","USER"
],
"Unmapped":["DOCBOOK"
]
},
"Parent":"18872dc518d8009bdc105425f541953d2c9d461e",
"ParentTS":"2017-05-26 16:20:17.307",
"Status":"OK",
"User":"",
"Version":2.2
}​

 

Then install DSW. Download the latest release xml.

Import/compile it to USER Namespace. Run:

USER> Do ##class(DSW.Installer).setup()

It will create /dsw app and install all the js files in the /csp/dsw folder.

Open localhost:57772/dsw/index.html#!/?ns=SAMPLES to see how it works.

 

Known issues:

On some systems you need to set UTF8 support for non-CSP files in CSP Gateway. Run the following in terminal to turn it on:

USER> set ^%SYS("CSP","DefaultFileCharset")="utf-8"

 

Any demos?

Sure!

Online demo for Samples, login=dswdemo, password=dswdemopass!

Online demo for Maps, login=dswdemo, password=dswdemopass!

 

When should I install it?

Now! )

To be continued, stay tuned!

Discussion (16)8
Log in or sign up to continue

Hi Gethsemani!

It looks like we have shut down this demo server.

But you can test it on your laptop easily. 

Testing with Docker: 

0. Install Docker desktop

0.1. Install VSCode and Open it and install  Docker and ObjectScript plugins.

1. Download this archive.

2. Unpack and open the folder in VSCode.

3. Right-click on Docker-compose.yml and choose Compose Restart. Wait for docker says in terminal "done".

4. Connect VSCode - click on the "disconnected" status bar and then choose "Refresh Connection".

5. You will see IRIS Terminal. Open ZPM (package manager) and install samples-bi module.

Node: 04319ab688f6, Instance: IRIS

IRISAPP>zpm
zpm: IRISAPP>install samples-bi

6. Then install DeepSee Web

zpm: IRISAPP>install dsw

7. Click on VSCode bar again and open Management Portal. It will be another port in your case.

Open DSW web-app in IRISAPP namespace with default credentials:

Then you will see DSW working in action:

HTH

I have a very important question:

Can this extension be used in a productive/ commercial environment?
 
You wrote: 
But be aware that according to the DSW license (MIT license) you are using it at your own risk.
But the extension uses HighchartsJS and this is only free  for "Non-commercial".
Unfortunately, no statement was made and it may be a dangerous license trap,  if my guess is correct.
 

Hi T!

Thanks for this, you are right.

Highcharts.js changes license terms through time. 
I haven't found the license agreement actual for highcharts.js 3.0 which is delivered with the current DSW release. I remember it was something like "You pay for the support".

The license for the current version highcharts.js 7.2 is the following and could be purchased for commercial usage.