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

Importing graph-explorer via Unpkg returns an error #25

Closed
lolive opened this issue Mar 12, 2024 · 5 comments
Closed

Importing graph-explorer via Unpkg returns an error #25

lolive opened this issue Mar 12, 2024 · 5 comments

Comments

@lolive
Copy link

lolive commented Mar 12, 2024

I would like to try graph-explorer in one of my web project.
In that project, files are served statically, so I do not have any NodeJS instance.
Usually, in that case, my html points the js libs at Unpkg.com, which handles the delivery of a browser-ready version of libs I need, taking care of all the require/imports/modules mess.

I tried this HTML for graph-explorer:
image

and got this error:
image

In parallel, I built locally from sources the file dist/graph-explorer.js, and pointing at my built version of the file from my .html returns the same error.

Any idea what I did wrong?
@lolive
Copy link
Author

lolive commented Mar 12, 2024

Note: adding React as script in the .html does not change the error.
image

@lolive
Copy link
Author

lolive commented Mar 12, 2024

Where as pointing at this built version makes no loading error:
image

@lolive
Copy link
Author

lolive commented Mar 12, 2024

It works with this:
image

So my question becomes: why does the graph-explorer-full.min.js has, that the graph-explorer.js does not have?

@lolive
Copy link
Author

lolive commented Mar 12, 2024 •
edited
Loading

Ok, the build of the minified version embed these libs:
image

whereas the build of the non-minified version does NOT embed these libs.

But then, back to my first comment: how do you "give" React to the non-minified version of graph-explorer when you load it?
(not with a <script>, it seems)

@ludovicm67
Copy link
Member

Hi @lolive!

Here is a full basic working example using unpkg for all imports, to illustrate how you can run the app:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Graph Explorer</title>

    <!-- Import "Font Awesome" for the icons -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/[email protected]/css/font-awesome.min.css"
    />

    <!-- Basic style, just that we can see something -->
    <style>
      h1 {
        height: 42px;
      }

      #graph-explorer {
        width: 100%;
        height: calc(100vh - 100px);
      }
    </style>
  </head>
  <body>
    <h1>Graph Explorer demo</h1>

    <!-- This is where Graph Explorer will be mounted -->
    <div id="graph-explorer"></div>

    <!-- Import required libraries -->
    <script src="https://unpkg.com/[email protected]/dist/graph-explorer-full.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

    <!-- Tell where to mount the app -->
    <script>
      // Some configuration for the Graph Explorer
      const graphExplorerConfig = {
        // Replace this with your own SPARQL endpoint
        endpointUrl: "https://ld.admin.ch/query",
        acceptBlankNodes: true,
        dataLabelProperty: "<http://schema.org/name> | rdfs:label",
        schemaLabelProperty: "<http://schema.org/name> | rdfs:label",
        language: "en",
        languages: [
          { code: "en", label: "English" },
          { code: "de", label: "German" },
          { code: "fr", label: "French" },
          { code: "it", label: "Italian" },
        ],
      };

      const SparqlDialect = GraphExplorer.OWLStatsSettings;
      SparqlDialect.dataLabelProperty = graphExplorerConfig.dataLabelProperty;
      SparqlDialect.schemaLabelProperty =
        graphExplorerConfig.schemaLabelProperty;

      const onWorkspaceMounted = async (workspace) => {
        if (!workspace) {
          return;
        }

        const model = workspace.getModel();

        model.importLayout({
          dataProvider: new GraphExplorer.SparqlDataProvider(
            {
              endpointUrl: graphExplorerConfig.endpointUrl,
              acceptBlankNodes: graphExplorerConfig.acceptBlankNodes,
              imagePropertyUris: ["http://xmlns.com/foaf/0.1/img"],
              queryMethod: GraphExplorer.SparqlQueryMethod.GET,
            },
            SparqlDialect
          ),
        });
      };

      const props = {
        ref: onWorkspaceMounted,
        languages: graphExplorerConfig.languages,
        language: graphExplorerConfig.language,
      };

      // Tell React to mount the app in the div with the id "graph-explorer"
      ReactDOM.render(
        React.createElement(GraphExplorer.Workspace, props),
        document.getElementById("graph-explorer")
      );
    </script>
  </body>
</html>

Some notes:

  • You will need to import Font Awesome, to load the icons.
  • React and React-DOM are required to mount the Graph Explorer app.
  • You will need to write some custom script, in order to tell React where to mount the Graph Explorer app and to specify the endpoint to use. In this example, I set it to https://ld.admin.ch/query, but you will need to replace it with your own endpoint.

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

No branches or pull requests
2 participants
@lolive @ludovicm67