Zazuko Blueprint is an enterprise knowledge graph frontend and browser, designed to make RDF Knowledge Graphs accessible and customizable for domain users.
Zazuko Blueprint is the culmination of a decade of experience at Zazuko working with RDF Knowledge Graphs. We understand that for Knowledge Graphs to be truly accessible to domain users, they must align with the context, experience, and expectations of those users. Generic "bubble"-oriented graph browsers often fall short in this regard. Zazuko Blueprint simplifies the creation of customized configurations or hypergraphs on top of your RDF Knowledge Graph, allowing you to focus on the most relevant elements from a high-level domain specialist perspective. You can also tailor generic vocabularies, such as schema.org, to reflect the specific terminology used within your organization or domain.
Recognizing the challenges web developers face when building applications on top of RDF, Zazuko Blueprint minimizes their exposure to RDF, enabling them to create specialized views of domain-specific knowledge with ease. Developers can provide a web component, and we leverage the declarative power of RDF to map the data schema to a highly specific visualization schema without extensive coding.
Zazuko Blueprint has been in development for several years for our customers, and we are now making the code base publicly available. While we currently anticipate our audience to have some knowledge of RDF Knowledge Graphs, Zazuko also offers retainers for assistance with using and working with Zazuko Blueprint. Contact us to learn more.
Zazuko Blueprint is an Angular web application that runs entirely in the browser.
We plan to provide a configuration frontend in the future. For now, you need to add the configuration directly to the knowledge graph. This configuration is purely written in RDF and resides with your data in the knowledge graph. Blueprint will read this configuration when you interact with the application.
The configuration allows you to define various aspects such as what should be visible and what should be hidden, how different entities relate to each other, and many other customizable elements. Please note that the configuration language and style may change before we release version 1.0 of Zazuko Blueprint. Examples and detailed documentation will be added soon to help guide you through the process.
The configuration file of the Angular app itself is located in ./src/config.json.
{
"endpointUrl": "http://localhost:4200/query",
"sparqlConsoleUrl": "https://ld.example.org/sparql/#query'",
"graphExplorerUrl": "https://ld.example.org/graph-explorer/?resource",
"fullTextSearchDialect": "stardog"
}After the build config.json is located in the App root directory.
You can replace it if needed.
sparqlConsoleUrl - you can provide a link to a SPARQL console. It's used in the flux detail panel context menu to jump to something like a YasGUI. Set it to null to remove the option from the context menu.
graphExplorerUrl - you can provide a link to an instance of Graph Explorer . It's used in the flux detail panel context menu to jump to graph explorer. Set it to null to remove the option from the context menu.
endpointUrl - the SPARQL endpoint URL. This is the URL where the SPARQL queries are sent to. It's used to fetch data from the triple store. The SPARQL endpoint must support CORS or you need to use a proxy for development. See below for more information.
fullTextSearchDialect - the full text search dialect. Currently only stardog, fuseki and neptune are supported. This is used to fetch full text search results.
In case you are using the neptune dialect you need to provide the OpenSearch endpoint to use in an additional configuration parameter neptune.ftsEndpoint:
{
// ...
"neptune": {
"ftsEndpoint": " https://YOUR-OPENSEARCH-ENDPOINT.es.amazonaws.com"
}
}You can use our Docker image to run Blueprint.
docker pull ghcr.io/zazuko/blueprint:latestIt will listen on port 80.
The following environment variables can be set:
ENDPOINT_URL: the SPARQL endpoint URL (required)SPARQL_CONSOLE_URL: the SPARQL console URL (default placeholder value:http://example.com/sparql/#query)GRAPH_EXPLORER_URL: the Graph Explorer URL (default placeholder value:http://example.com/graph-explorer/?resource)FULL_TEXT_SEARCH_DIALECT: the full text search dialect (default value:fuseki)NEPTUNE_FTS_ENDPOINT: the OpenSearch endpoint for the Neptune dialect (in case you are usingneptunedialect)
If any of the required environment variables are not set, the container will be started using the development configuration.
You can also mount a custom configuration file to /app/config.json.
You should make sure that ENDPOINT_URL, SPARQL_CONSOLE_URL and GRAPH_EXPLORER_URL are reachable from the browser.
Make sure that ENDPOINT_URL is configured to allow CORS requests.
You can use Trifid to proxy any SPARQL endpoint and to expose a SPARQL console and Graph Explorer. You can also use it to dereference URIs.
Before the Blueprint Angular App starts, it fetches the /config.json. It will then overwrite the values in src/environments/environment.development.ts or src/environments/environment.ts. At build time, src/environments/environment.development.ts will be replaced with the src/environments/environment.ts version.
You can still add configuration parameters to the environment files as usual. Internally, the Blueprint app only uses src/environments/environment.ts.
Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
Blueprint uses SPARQL to fetch data from a triple store. For development, the configuration parameter endpointUrl is set to http://localhost:4200/query. ng serve provides a proxy for SPARQL requests to the triple store. This way, CORS is not an issue, and it’s convenient to develop locally with a quickly configurable SPARQL endpoint.
The proxy is configured in ./proxy.conf.json.
{
"/query": {
"target": "https://ld.example.org/query",
"headers": {
"Connection": "keep-alive"
},
"secure": true,
"changeOrigin": true
}
}Note: This proxy uses HTTP/1.1 and is therefore a bit slower.
Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.
Run ng build to build the project. The build artifacts will be stored in the dist/ directory. Use the --prod flag for a production build.
Run ng test to execute the unit tests via Karma.
Run ng e2e to execute the end-to-end tests via Protractor.
To get more help on the Angular CLI, use ng help or check out the Angular CLI Overview and Command Reference page.
All source files in this project are licensed under the Apache License Version 2.0, unless otherwise noted in the file itself. For the full license text, see the LICENSE file included in this repository.
Copyright 2024 Zazuko GmbH
Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.