create insight web component

finos · Mar 14, 2024 · b5ae8b0 · b5ae8b0
1 parent fb659e7
commit b5ae8b0
Show file tree

Hide file tree

Showing 6 changed files with 287 additions and 17 deletions.
diff --git a/cli/elm.json b/cli/elm.json
@@ -19,8 +19,8 @@
             "elm/parser": "1.1.0",
             "elm/regex": "1.0.0",
             "elm/svg": "1.0.1",
-            "elm/url": "1.0.0",
             "elm/time": "1.0.0",
+            "elm/url": "1.0.0",
             "elm-community/array-extra": "2.6.0",
             "elm-community/graph": "6.0.0",
             "elm-community/list-extra": "8.7.0",

diff --git a/cli/web/insight.html b/cli/web/insight.html
@@ -6,7 +6,7 @@
     <script src="insight.js"></script>
 </head>
 <body>
-    <div id="app"></div>
+    <morphir-insight id="i" arguments="[1, 2, 3, 4]" fqn="TestModel.Testing:add4"></morphir-insight>
 </body>
 <script>
 
@@ -16,26 +16,15 @@
         var xmlHttp = new XMLHttpRequest();
         xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
         xmlHttp.send(null);
-        return JSON.parse(xmlHttp.responseText);
+        return xmlHttp.responseText;
     }
 
     //HTTP GET request to fetch distribution JSON from server
     var distribution = httpGet("http://localhost:8000/server/morphir-ir.json");
 
-    //ELM integration in JavaScript for interoperability
-    var app = Elm.Morphir.Web.Insight.init({
-    node : document.getElementById('app'),
-    flags : {   distribution : distribution
-            ,   config : {  fontSize : 12 , decimalDigit : 2 }
-            }
-    });
-
-    //Sending Function Name threw port
-    app.ports.receiveFunctionName.send("TestModel.Testing:add4");
-
-    //Sending Arguments List threw port
-    var argsList = [1,2,3,4];
-    app.ports.receiveFunctionArguments.send(argsList);
+    setTimeout(() => {
+        document.getElementById('i').init(distribution);
+    }, 5000);
 
 </script>
 </html>
diff --git a/cli/web/morphir-insight-element.js b/cli/web/morphir-insight-element.js
@@ -0,0 +1,56 @@
+class MorphirInsightElement extends HTMLElement {
+
+	static fqn = 'fqn';
+	static arguments ='arguments';
+	static observedAttributes = [MorphirInsightElement.fqn, MorphirInsightElement.arguments];
+	static divId = 'divId'
+
+	// Should be called to init the insight component
+	init(distribution) {
+		this.distribution = JSON.parse(distribution);
+
+		this.app = Elm.Morphir.Web.Insight.init({
+				node : this.shadowRoot.getElementById(MorphirInsightElement.divId),
+				flags : {   distribution : this.distribution,
+				config : {  fontSize : 12 , decimalDigit : 2 }
+    	    }});
+
+		this.app.ports.receiveFunctionName.send(this.fqn);
+		this.app.ports.receiveFunctionArguments.send(this.arguments);
+	}
+
+	// Called automatically after connected to the DOM
+	connectedCallback() {
+		this.attachShadow({mode: 'open'});
+		const insightDiv = document.createElement('div');
+		insightDiv.id = MorphirInsightElement.divId;
+   		this.shadowRoot.appendChild(insightDiv);
+
+		this.fqn = this.getAttribute(MorphirInsightElement.fqn);
+		this.arguments = JSON.parse(this.getAttribute(MorphirInsightElement.arguments));
+
+	}
+
+	// Called automatically after an observed attribute is read for the first time, or changed
+	attributeChangedCallback(name, oldValue, newValue) {
+		if (this.app && newValue && (oldValue !== newValue)) {
+			switch (name) {
+				case MorphirInsightElement.fqn:
+					this.fqn = newValue;
+					this.app.ports.receiveFunctionName.send(this.fqn);
+					break;
+
+				case MorphirInsightElement.arguments:
+					this.arguments = JSON.parse(newValue);
+					this.app.ports.receiveFunctionArguments.send(this.arguments);
+					break;
+
+				default:
+					break;
+		}
+		}
+	}
+
+}
+
+customElements.define('morphir-insight', MorphirInsightElement); 
diff --git a/gulpfile.js b/gulpfile.js
@@ -1,4 +1,5 @@
 const { series, parallel, src, dest } = require('gulp');
+const concat = require('gulp-concat');
 const os = require('os')
 const path = require('path')
 const util = require('util')
@@ -85,6 +86,10 @@ function makeTryMorphir() {
     return make('cli', 'src/Morphir/Web/TryMorphir.elm', 'web/try-morphir.html')
 }
 
+async function addLitComponents() {
+    return src(['./cli/web/insight.js', './cli/web/morphir-insight-element.js']).pipe(concat('insight.js')).pipe(dest('./cli/web/'))
+}
+
 const buildCLI2 =
     parallel(
         compileCli2Ts,
@@ -115,6 +120,7 @@ const build =
         makeDevServer,
         makeDevServerAPI,
         makeInsightAPI,
+        addLitComponents,
         makeTryMorphir
     )