DeepSee Web: InterSystems Analytics Visualization with AngularJS. Part 1
Tags: analytics, angular, json, fronted
Published: 2023-12-23 14:46:35

<p dir="ltr"><span id="docs-internal-guid-622b98d8-8263-7edc-c652-0060558a539f">There are several options how to deliver user interface(UI) for DeepSee BI solutions. The most common approaches are:</span></p>

<ul style="list-style-type:disc;">
<li dir="ltr"><span id="docs-internal-guid-622b98d8-8263-7edc-c652-0060558a539f">use native DeepSee Dashboards, get web UI in Zen and deliver it in your web apps.</span></li>
<li dir="ltr"><span id="docs-internal-guid-622b98d8-8263-7edc-c652-0060558a539f">use DeepSee REST API, get and build your own UI widgets and dashboards.</span></li>
</ul>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8263-7edc-c652-0060558a539f">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.</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8263-7edc-c652-0060558a539f">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.</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8264-5b53-e475-ac6a7c215c3d">Today I want to tell you about yet another approach which combines both listed above and provides Angular based web UI for DeepSee Dashboards - &nbsp;<a href="https://github.com/intersystems-ru/DeepSeeWeb">DeepSee Web library</a>.</span></p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="403" src="https://lh6.googleusercontent.com/nLmnnJXBpDoWoz6SOlm7W91ThlY-zW_cEEPcYT165qubSiDReoQxoW5Yxzvjn7PR0H0MeiqTXVV8NNkx4S02IKeJnsmlwPgLl0kc4REyWlU-FZBV56GUkL6TXXQP5M4ySvJrM_H4" width="624"></b></p>
<p dir="ltr"><!--break--></p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">What is it?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8264-fe37-b233-d31d9dd9227f">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.</span></p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="299" src="https://lh5.googleusercontent.com/88K3O1Gq0QKPw3b07dpV2-RGMkxcl6vFvyla7mgSD9N1DkS9gGsQ79751I_7PIn7f54l1GPy-CfbZLmkuGABE528iZyGoXZM_y4JsLUU3rYZp34bkFTbHi2gi55nbx3l6U5s1u6x" width="624"></b></p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">How it works</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-838e-c52b-4688-049f11703def">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.</span></p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="473" src="https://lh6.googleusercontent.com/9my4tANG6mf-wD63NGOocCLPkXyfM4MNs267wJWQ-ReZWJBQQaSC6gk1QVs1JLYv4UzAIf1fCJWhLuj-Kx0Vxx7QQKAWQfLmVdCq3UTe40slL97Wh2wYjtvt7HsV1lPP_jKrUx8W" width="624"></b></p>

<p>&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">Why is it cool?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-838e-6bbb-aa52-ea36f455c163">DSW is great because:</span></p>

<ul style="list-style-type:disc;">
<li dir="ltr"><span id="docs-internal-guid-622b98d8-838e-6bbb-aa52-ea36f455c163">You can develop DeepSee Dashboards using standard editor and then have a UI on Angular without any line of coding.</span></li>
<li dir="ltr"><span id="docs-internal-guid-622b98d8-838e-6bbb-aa52-ea36f455c163">You can expand the library of widgets easily with any js library or self-written widget.</span></li>
<li dir="ltr"><span id="docs-internal-guid-622b98d8-838e-6bbb-aa52-ea36f455c163">You can introduce smart-tiles on DSW covers.</span></li>
<li dir="ltr"><span id="docs-internal-guid-622b98d8-838e-6bbb-aa52-ea36f455c163">You can display the data on map.</span></li>
</ul>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="315" src="https://lh6.googleusercontent.com/7VaIFM2Nbxxvsk6Y-D5ckiB3djhuPxg2K2Tkc-89dmZKN0PaM2OrehY3vLRbT07JYMa_wMPY5ya9mzOUIcHpIKS8MiBvSnQ1wwbTArDEA73o-AJyKrTNi6QU_Ef8z2X39A_nKR9C" width="624"></b></p>

<p>&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">What about mobile devices?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-838f-27df-b025-5a26138421ff">DSW works pretty well in Mobile browsers (Safari, Chrome), and it has standalone </span><a href="https://itunes.apple.com/app/deepsight/id1054816712?mt=8">DeepSight iOS app</a>, here are some screenshots:</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="351" src="https://lh3.googleusercontent.com/SOrF6fhjiBia9QVnGFZ6Z4LQWMsqr2yPwj9YD9h0fdQi5HN3p2z3rZb71H_O5cKYqXRrAWcRa2H0Z3waK7xsn42foRTw5iRoDjmeYsqpMDUPysDzAdscWUuwZPB-mUC8-DYHUXPR" width="197"><img height="350" src="https://lh5.googleusercontent.com/8RpbChBN-xKalDdncYGAsYEQX69AfWu4X8MHP2MI6m2myYgrsWtBP8yGdXumT1vsxO4ukCOpzFROtirBnWo6I5p3ry0Yg9rwaJTIjDTQ5frAvC0OBEakd3YLLht3jWpjmTMPSlbK" width="198"><img height="351" src="https://lh6.googleusercontent.com/XNgMOkeToadxKdX-Sv949ebxwkjZLEq1EBoy8_f1LaU0vzy20hUzdfpEWbNBr2Y6pF_8tNbZi-46GtJ_P-c7DmiFXqnrSYa2RFr5M3zjYFNaDSFYyAX9gGyM6B_7mlEDeNUpqseS" width="197"></b></p>

<p>&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">How much it costs?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-838f-7819-949f-0e8e58221733">It is free. You are very welcome to download latest </span><a href="https://github.com/intersystems-ru/DeepSeeWeb/releases">release</a>, open <a href="https://github.com/intersystems-ru/DeepSeeWeb/issues">issues</a>, make forks and send pull requests with fixes and new features.</p>

<p>&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">Is it suitable for production usage?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8399-3ee4-cdcb-cc6f24b52c5e">Yes. DSW was started in 2014 and has about 60 releases to the date. Dozens of companies use DSW successfully in their DeepSee solutions. </span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8399-3ee4-cdcb-cc6f24b52c5e">For example, we are using DSW for </span><a href="https://analytics.community.intersystems.com/dswpub/index.html#!/f/Public/?ns=COMMUNITY&amp;embed=1">developer community</a>:</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c"><img height="387" src="https://lh3.googleusercontent.com/lCU0Cq1T8MFae1jndM0i12nJd8cjZ5jW_F6U2CVJJfvQ3jRoQTjwz_iQOAN-fXPMKwTuyvTNPFbjaLHt9bNXlU1FCtPIEeZt0huBOcXIWEo4VULrZhdeEeh3R100gPgFXsQONCan" width="624"></b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8390-0357-79f3-6d8e5363a6af">But be aware that according to the DSW license (MIT license) you are using it at your own risk. </span></p>

<div>&nbsp;</div>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">Is it supported?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8390-3d5b-3c16-cabb465e5fd6">It is supported by the community. You are very welcome to open </span><a href="https://github.com/intersystems-ru/DeepSeeWeb/issues">issues</a>, make forks and send pull requests with fixes and new features.</p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8390-3d5b-3c16-cabb465e5fd6">Key contributors are [</span>@Anton.Gnibeda​]<span>, [@Nikita.Savchenko] and [@Eduard.Lebedyuk].</span>&nbsp;</p>
<p dir="ltr">&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">How to install?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8390-e790-4fd9-73e6623df974">It’s easy. First, install MDX2JSON. Download </span><a href="https://github.com/intersystems-ru/Cache-MDX2JSON/releases">the latest installer</a> from release, import/compile installer.xml in USER namespace, run</p>

<pre dir="ltr"><span id="docs-internal-guid-622b98d8-8391-1ff7-16c5-ac9f62a7240a">USER&gt; D ##class(MDX2JSON.Installer).setup()</span></pre>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8391-6201-dab3-4a395fc680c0">It will download the latest release from github, create MDX2JSON database and namespace, map it to %All and create the /MDX2JSON web app.</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8391-6201-dab3-4a395fc680c0">To check if everything installed well open localhost:57772/MDX2JSON/Test. &nbsp;If everything is fine it will return something like this:</span></p>

<pre dir="ltr"><span id="docs-internal-guid-622b98d8-8391-d3af-5e11-3211227d3cdd">{</span>
"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
}​</pre>
<p>&nbsp;</p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">Then install DSW. Download the latest release xml.</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">Import/compile it to USER Namespace. Run:</span></p>

<pre dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">USER&gt; Do ##class(DSW.Installer).setup()</span></pre>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">It will create /dsw app and install all the js files in the /csp/dsw folder.</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">Open localhost:57772/dsw/index.html#!/?ns=SAMPLES to see how it works.</span></p>
<p dir="ltr">&nbsp;</p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">Known issues: </span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">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:</span></p>

<pre dir="ltr"><span id="docs-internal-guid-622b98d8-8392-8882-78ff-2d833e844aca">USER&gt; set ^%SYS("CSP","DefaultFileCharset")="utf-8"</span></pre>
<p>&nbsp;</p>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">Any demos?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8394-034e-94ca-d3d45b2926a2">Sure!</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8394-034e-94ca-d3d45b2926a2">Online demo for </span><a href="http://176.112.210.99:57773/dsw/index.html#!/?ns=SAMPLES">Samples</a>, login=dswdemo, password=dswdemopass!</p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8394-034e-94ca-d3d45b2926a2">Online demo for </span><a href="http://176.112.210.99:57773/dsw/index.html#!/?ns=MAP">Maps</a>, login=dswdemo, password=dswdemopass!</p>

<div>&nbsp;</div>
<p dir="ltr"><b id="docs-internal-guid-622b98d8-8262-1a1a-9866-43f670f0b80c">When should I install it?</b></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8394-b4dd-b48b-0b60b45fcfca">Now! )</span></p>
<p dir="ltr"><span id="docs-internal-guid-622b98d8-8394-b4dd-b48b-0b60b45fcfca">To be continued, stay tuned!</span></p>

<div>&nbsp;</div>