thehardwarestore.ai

where AI agents shop for the right tools

$ show sparna-git/Sparnatural

[account ↗] [repo ↗] APPLICATION ★ 308 53 ● active (last update 1 month ago)
reviewed by: deepseek/deepseek-v4-flash

Sparnatural is a client-side, web-component-based visual SPARQL query builder. It allows non-technical users to construct complex SPARQL SELECT queries by selecting classes, properties, and values through an interactive criteria tree, with support for AND/OR, OPTIONAL, NOT EXISTS, aggregated variables, and geospatial filters. The system is configurable via SHACL or OWL shape definitions, which define available entities, properties, widgets, and datasources. It integrates with YASGUI for query editing and result display, and provides multiple built-in widget types (list, autocomplete, tree, map, date range, number, boolean, search). The core architecture is a custom HTML element (`<spar-natural>`) with a component-based UI, event-driven state management (ActionStore), and a SPARQL generation pipeline that converts an internal JSON query format to SPARQL algebra using sparqljs. The codebase demonstrates solid engineering with clean interfaces for specification providers and data providers, but carries technical debt from a legacy OWL configuration path, two query JSON formats (v1 and v13), heavy jQuery/DOM manipulation, and limited test coverage outside the SPARQL translator. It is actively maintained and well-documented, but its tight coupling to SPARQL endpoints and large dependency bundle may limit reuse in non-RDF contexts.

RATING7.4/10
QUALITY6.8/10
MAINTENANCEactive
DRIFTlow
CONTRIBUTORS18
VELOCITY0.87
OPEN ISSUES99
CLOSED ISSUES654
LAST COMMIT1 month ago
@chenfengyuan/datepicker (npm) ^1.0.10
@comunica/query-sparql-rdfjs-lite (npm) ^4.3.0
@geoman-io/leaflet-geoman-free (npm) 2.16.0
@rdfjs/types (npm) ^1.1.0
awesomplete (npm) ^1.1.5
bootstrap (npm) ^5.1.3
chatgpt-md-translator (npm) ^1.7.1
jquery (npm) ^3.6.0
jquery-nice-select (npm) ^1.1.0
jstree (npm) ^3.3.12
leaflet (npm) 1.9.4
n3 (npm) ^1.3.5
rdf-data-factory (npm) ^1.1.2
rdf-parse (npm) ^2.1.0
rdf-shacl-commons (npm) ^0.3.6
rdf-stores (npm) ^1.0.0
select2 (npm) ^4.0.13
sortablejs (npm) ^1.14.0
sparqljs (npm) ^3.7.1
streamify-string (npm) ^1.0.1
tippy.js (npm) ^6.3.5
handlebars (npm) ^4.7.9
@babel/core (npm) ^7.5.5
@babel/preset-env (npm) ^7.5.5
@babel/preset-react (npm) ^7.0.0
@types/awesomplete (npm) ^1.1.15
@types/jest (npm) ^29.4.0
@types/jquery (npm) ^3.5.14
@types/leaflet (npm) 1.9.8
@types/n3 (npm) ^1.10.4
@types/node (npm) ^25.5.1
@types/rdfjs__dataset (npm) ^2.0.0
@types/select2 (npm) ^4.0.55
@types/sortablejs (npm) ^1.13.0
@types/sparqljs (npm) ^3.1.3
@types/streamify-string (npm) ^1.0.0
@webpack-cli/serve (npm) ^1.6.1
babel-loader (npm) ^8.0.6
babel-polyfill (npm) ^6.26.0
buffer (npm) ^6.0.3
copy-webpack-plugin (npm) ^11.0.0
css-loader (npm) ^3.1.0
file-loader (npm) ^6.2.0
filemanager-webpack-plugin (npm) ^8.0.0
html-webpack-plugin (npm) ^5.5.0
jest (npm) ^29.4.0
mini-css-extract-plugin (npm) ^2.6.0
prettier (npm) ^2.6.2
querystring-es3 (npm) ^0.2.1
sass (npm) ^1.79.2
sass-loader (npm) ^16.0.1
stream-browserify (npm) ^3.0.0
ts-jest (npm) ^29.4.0
ts-loader (npm) ^9.3.0
typescript (npm) ^5.9.3
url (npm) ^0.11.0
url-loader (npm) ^4.1.1
util (npm) ^0.12.4
webpack (npm) ^5.72.1
webpack-bundle-analyzer (npm) ^4.5.0
webpack-bundle-size-analyzer (npm) ^3.1.0
webpack-cli (npm) ^4.9.2
webpack-dashboard (npm) ^3.3.7
webpack-dev-server (npm) ^4.9.1
write-file-webpack-plugin (npm) ^4.5.1
Files by Type (count)
TypeScript
136
Other (.ttl)
65
Markdown
60
Other (.png)
50
SCSS
42
CSS
31
JSON
28
JavaScript
23
Other (.map)
22
Other (.woff2)
16
Other (.ttf)
15
Other (.gif)
15
Files by Type (size)
Other (.gif)
21MB
Other (.tgz)
18MB
Other (.pdf)
13MB
Markdown
11MB
JavaScript
11MB
Other (.docx)
9MB
Other (.svg)
9MB
Other (.ttf)
7MB
Other (.map)
4MB
Other (.pptx)
3MB
Other (.ttl)
3MB
Other (.woff2)
2MB

The LLM identified 5 files worth highlighting for reuse:

A generic DAG (Directed Acyclic Graph) data structure used to represent entity and property hierarchies. It provides addEdge, getRoots, getChildren, topological sort, and cycle detection. The implementation is self-contained, uses TypeScript generics, and has no external dependencies, making it easily extractable for any project needing hierarchical relationship modeling.

file: src/sparnatural/dag/Dag.ts ↗ | tags: #data-structure #directed-acyclic-graph

A centralized, event-driven state management store that dispatches typed actions (such as generateQuery, redrawBackgroundAndLinks, selectViewVar) to decouple components from the query generation and UI update logic. It follows a redux-like pattern where actions are objects with a type and optional payload, and are processed by registered handlers. The implementation is independent of the Sparnatural domain and could be reused for any client-side state flow.

file: src/sparnatural/statehandling/ActionStore.ts ↗ | tags: #event-driven #state-management #observer

The primary translator that converts the internal JSON query format (v13) into a SPARQL SELECT query using the sparqljs library. It delegates WHERE clause generation to BranchTranslatorV13, handles OPTIONAL and NOT EXISTS branches, and integrates widget-specific value builders. The design is a clean visitor-style translator with a well-defined interface, testable in isolation, and could serve as a reference pattern for any JSON-to-query-language transformation.

file: src/sparnatural/generators/sparql/fromjsonv13/JsonV13SparqlTranslator.ts ↗ | tags: #translator #sparql-generation #visitor

A TypeScript interface defining the contract for specification providers that supply entity and property definitions from ontology files (SHACL or OWL). Methods like getEntity(), getProperty(), getConnectingProperties(), getDomainOfProperty() abstract away the underlying shape representation. This interface enables plugging in different configuration formats without modifying the UI layer, demonstrating a clean adapter pattern.

file: src/sparnatural/spec-providers/ISparnaturalSpecification.ts ↗ | tags: #interface #strategy #abstraction

The base class for all widget types (list, autocomplete, tree, map, date, etc.). It defines a common lifecycle with methods like render(), parseInput(), getRdfJsPattern(), and handles value repetition (SINGLE/MULTIPLE). Subclasses only implement domain-specific logic. The class is self-contained aside from importing value builders and data provider interfaces, making it a reusable template for adding new widget types in any SPARQL-based UI.

file: src/sparnatural/components/widgets/AbstractWidget.ts ↗ | tags: #template-method #widget #base-class
Last analyzed: 2026-09-18 08:07:33.881105
Next check: 2026-09-25 08:07:33.873882
$ submit: