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

Jump to bottom

Documented web usage doesn't work #6

Closed
christophfriedrich opened this issue Sep 15, 2020 · 4 comments · Fixed by #7
Closed

Documented web usage doesn't work #6

christophfriedrich opened this issue Sep 15, 2020 · 4 comments · Fixed by #7

Comments

@christophfriedrich
Copy link
Collaborator

The Readme says:

In a web environment you can include the library as follows:

<script src="https://cdn.jsdelivr.net/npm/ajv@6.12/lib/ajv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js"></script>

Putting those two lines into the <head> of a very simple HTML file gives me:

Uncaught ReferenceError: require is not defined
<anonymous> ajv.js:3
ajv.js:3:20
@christophfriedrich
Copy link
Collaborator Author

If I replace the ajv URL with https://cdnjs.cloudflare.com/ajax/libs/ajv/6.12.5/ajv.bundle.js (as suggested by their Readme) (note the bundle), then that error message goes away.

But when trying to parse a process graph I instead get:

Uncaught TypeError: s is not a constructor [main.min.js:1:3850]
c https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
createJsonSchemaValidatorInstance https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
getJsonSchemaValidator https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
createProcessGraphInstance https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
createChildProcessGraph https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
parseNodeArguments https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
parse https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js:1
parse file:///home/christoph/dev/openeo-js-processgraphs/examples/list.html:15
onclick file:///home/christoph/dev/openeo-js-processgraphs/examples/list.html:1

@m-mohr
Copy link
Member

m-mohr commented Sep 15, 2020

Could you please provide the repro example? :-)

@christophfriedrich
Copy link
Collaborator Author

As discussed in person, it was indeed a simple lower/upper case error... 🙄

christophfriedrich added a commit that referenced this issue Sep 15, 2020
@christophfriedrich
Fix webpack config (closes #6 about web usage)
bca9649 
When ajv is imported, the global variable is called `Ajv`, not `ajv`, hence the change in the webpack config is necessary.
The changes in jsonschema.js are not even necessary, but IMO for clearness/consistency they're nice anyway.
christophfriedrich added a commit that referenced this issue Sep 15, 2020
@christophfriedrich
Fix CDN URL of ajr in web usage readme (completes #6)
3c597da 
Very important for the previous commit to actually work: We need the bundled version.
@christophfriedrich christophfriedrich linked a pull request Sep 15, 2020 that will close this issue
Fix webpack config (closes #6 about web usage) #7
Merged
@christophfriedrich
Copy link
Collaborator Author

For future reference: The repro example I was using was exactly this script:

openeo-js-processgraphs/examples/browser.html

Lines 1 to 34 in 13974e8

<html>
<head>
<title>openeo-js-processgraphs example</title>
<!--<script src="https://cdn.jsdelivr.net/npm/ajv@6.12/lib/ajv.min.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/ajv/6.12.5/ajv.bundle.js"></script>
<script src="file:///home/christoph/dev/openeo-js-processgraphs/dist/main.js"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/@openeo/js-processgraphs@1.0.0-beta.4/dist/main.min.js"></script>-->
<script>
function parse() {
const processes = JSON.parse(document.getElementById('processes').value).processes;
const processAsString = document.getElementById('pg').value;
const processAsObject = JSON.parse(processAsString);
const processRegistry = new ProcessRegistry(processes);
var pg = new ProcessGraph(processAsObject, processRegistry);
pg.parse();
console.log(pg);
}
</script>
<style>
textarea {
width: 600px;
height: 200px;
display: block;
}
</style>
</head>
<body>
<textarea id='processes' placeholder="Paste /processes response here"></textarea>
<textarea id='pg' placeholder="Paste your process graph here"></textarea>
<button onclick="parse()">Parse</button>
</body>
</html>

executed with the response of https://earthengine.openeo.org/v1.0/processes and the Earth Engine driver sample process graph.

m-mohr added a commit that referenced this issue Sep 16, 2020
@m-mohr
Merge pull request #7 from Open-EO/fix-web-usage
c98cf6e 
Fix webpack config (closes #6 about web usage)
@m-mohr m-mohr closed this as completed Sep 16, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix webpack config (closes #6 about web usage) Open-EO/openeo-js-processgraphs
2 participants
@m-mohr @christophfriedrich