Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

create insight web component #1150

Merged
merged 1 commit into from
Mar 18, 2024
Merged

create insight web component #1150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cli/elm.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
21 changes: 5 additions & 16 deletions cli/web/insight.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand All @@ -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>
56 changes: 56 additions & 0 deletions cli/web/morphir-insight-element.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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);
6 changes: 6 additions & 0 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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')
Expand Down Expand Up @@ -85,6 +86,10 @@ function makeTryMorphir() {
return make('cli', 'src/Morphir/Web/TryMorphir.elm', 'web/try-morphir.html')
}

async function makeComponents() {
return src(['./cli/web/insight.js', './cli/web/morphir-insight-element.js']).pipe(concat('insight.js')).pipe(dest('./cli/web/'))
}

const buildCLI2 =
parallel(
compileCli2Ts,
Expand Down Expand Up @@ -115,6 +120,7 @@ const build =
makeDevServer,
makeDevServerAPI,
makeInsightAPI,
makeComponents,
makeTryMorphir
)

Expand Down
Loading
Loading