{"id":20631229,"url":"https://github.com/solidlabresearch/generic-data-viewer","last_synced_at":"2025-08-13T11:40:50.267Z","repository":{"id":176509545,"uuid":"658730401","full_name":"SolidLabResearch/generic-data-viewer","owner":"SolidLabResearch","description":"Generic query-based data viewer","archived":false,"fork":false,"pushed_at":"2023-08-09T06:10:15.000Z","size":1329,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-17T07:09:38.195Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SolidLabResearch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-06-26T11:28:35.000Z","updated_at":"2023-06-27T13:17:00.000Z","dependencies_parsed_at":null,"dependency_job_id":"447cf52a-43b0-47ba-917d-71dc99862593","html_url":"https://github.com/SolidLabResearch/generic-data-viewer","commit_stats":null,"previous_names":["solidlabresearch/generic-data-viewer"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fgeneric-data-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fgeneric-data-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fgeneric-data-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SolidLabResearch%2Fgeneric-data-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SolidLabResearch","download_url":"https://codeload.github.com/SolidLabResearch/generic-data-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242588431,"owners_count":20154203,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-16T14:11:36.566Z","updated_at":"2025-03-08T17:57:21.545Z","avatar_url":"https://github.com/SolidLabResearch.png","language":"JavaScript","readme":"# Generic Data Viewer\n\nThis Web app allows users to easily execute queries over multiple data sources (including Solid pods) and \ninspect the corresponding results.\nYou find a screencast of the app [here](https://cloud.ilabt.imec.be/index.php/s/AJomCGpLjYbxmCX).\n\n## Getting Started\n\nAfter installing, the following steps suffice to install the application:\n\n```bash\nnpm install\n```\n\nafter this you can execute\n\n```bash\nnpm start\n```\n\nWhich will start the web application\n\n## Static build\n\nIf you want a static build of the application execute\n\n```bash\nnpm run build\n```\n\nThis will create a static build in the `build` folder.\n\n\n### Logging in \n\nTo log in you need to provide an Identity Provider or a WebID.\nThe application will detect which one you use and redirect you to the login page of your Identity Provider.\nIf you use your WebID, the first OIDC issuer on your WebID is used when there are multiple. \n\n### Configuration file\n\nThe configuration file follows a simple structure.\n\n```js\n{\n    \"title\": \"Title shown at the top of the app.\",\n    \"logoLocation\": \"Image location of the logo shown at the top of the app (relative to public folder.).\",\n    \"logoRedirectURL\": \"The URL the Web application redirects to when a user clicks on the logo.\",\n    \"mainAppColor\": \"The main colors used in the app, can be any CSS color.\",\n    \"backgroundColor\": \"Background color of the app, can be any CSS color.\",\n    \"titleColor\": \"The color of the title, can be any CSS color\",\n    \"textColor\": \"The color of all the text in teh app body, this means all text except header and footer.\",\n    \"footer\": \"HTML components or text that will function as the footer (will be placed in the footer div.)\",\n    \"showMilliseconds\", \"True or false, whether the Runtime section should show milliseconds or not.\",\n    \"defaultIDP\": \"The default value used for IDP when logging in, this IDP can be manually changed in the Web app as well. \",\n    \"queryFolder\": \"The base location of the queries, all query locations will start from this folder (relative to public folder.)\",\n    \"httpProxy\": \"The http proxy through which the requests will be rerouted. When left empty, the Comunica query engine will handle it. This is useful when CORS headers are not set (correctly) on the queried source.\",\n    \"queries\": [\n        {\n            \"queryLocation\": \"path to the query location, relative to \"queryFolder\"\",\n            \"name\": \"A name for the query\",\n            \"description\": \"Description of the query\",\n            \"id\": \"A unique ID for the query\",\n            \"sources\": \"Sources over which the query should be executed\",\n            \"useProxy\": \"True or false, whether the query should be executed through the proxy or not. This field is optional and defaults to false.\",\n            \"askQuery\": {\n                \"trueText\": \"The text that is to be shown when the query result is true, only useful for ASK queries.\",\n                \"falseText\": \"The text that is to be shown when the query result is true, only useful for ASK queries.\"\n            }\n\n        }\n        ...\n    ]\n}\n```\n\n### Adding variable type\n\nWhen executing a query, it gives us either a URL, a literal value or [a blank node](https://www.w3.org/TR/rdf12-concepts/#section-blank-nodes).\nThese URLs could reference to anything e.g. a picture, spreadsheet, resume, and so on.\nAlso literals can be lots of things e.g. a float, integer, string, birthdate, price, and so on.\nBy clarifying what the expected type is of the query result corresponding to a given variable\nwe can fully interpret how we can display and represent the result.\n\nYou can specify the type of a variable by extending its name with the type in the query as such: `variableName_variableType`.\nThe underscore `_` here is crucial to make a clear distinction between name and type.\n\n### Representation Mapper\n\nIf you want to add your own type representations\nyou can do this by adding your representation to the [typeMapper.js](./src/typeMapper.js) file.\nThis can be useful for example when querying images.\nThe result of the query is a reference to the image.\nBy mapping a representation we can show the actual image instead of the reference.\n\nThe mapper follows a structure:\n\n```js\n{\n    \"typeName\": mapperFunction,\n    ...\n}\n```\n\nWith `typeName` being the name of the variable as defined in the `query`\nwhich is defined in [the configuration file](#configuration-file).\nThe function `mapperFunction` takes the query result for the corresponding variable and\nreturns either a string or a [React](https://react.dev/) component (see below).\nExamples of how you can do this can already be found in that same [file](./src/typeMapper.js).\n\nThe web application uses [gridjs-react](https://gridjs.io/docs/integrations/react) internally.\nThis allows us to add [html](https://nl.wikipedia.org/wiki/HyperText_Markup_Language) or\n[React](https://react.dev/) components as representations of the variable.\nTo do this you need to import `_` function from [gridjs-react module](https://www.npmjs.com/package/gridjs-react) and\ncall it with the component as its variable.\nAn example for this is also already provided in the [typeMapper.js](./src/typeMapper.js).\n\n### Sort Mapper\n\nTo support the sorting of the table you can also define sorting comparators for [variable types](#adding-variable-type).\nThis can be done in the [typeMapper.js](./src/typeMapper.js) file.\n\nThe `typeSortMapper` object follows the following structure:\n\n```js\n{\n    \"typeName\": sortFunction,\n    ...\n}\n```\n\nWith `typeName` being the name of the variable as defined in the query and\nthe sortFunction a comparator that takes 2 values of type `typeName`.\nIf a type has no comparator defined it gets sorted as a string.\n\n## Testing with local pods\n\nTo create a local pod with which you can test for example authentication you can follow the following steps:\n\n- Add your data and `.acl` files in the `initial-pod-data` folder.\n  These files will be available in the pod relative to `http://localhost:8080/example/`.\n  We already added files for the resource `favourite-books`.\n- Prepare the pods by executing `npm run prepare:pods`.\n- Start the pods by executing `npm run start:pods`.\n- Add your query as described in [the configuration file section](#configuration-file).\n  We already added a query to list books based on the resource `favourite-books` to `src/config.json`.\n- Log in with the IDP `http://localhost:8080` and\n  the credentials in the file `seeded-pod-config.json`.\n\n## Using a local http proxy \n\nTo use a local http proxy through which the requests will be rerouted execute the following command:\n\n```bash\nnpm run start:proxy\n```\n\nwhich will start a proxy on port `8000`.\n\n## Testing\n\nFor testing we use [Cypress](https://www.cypress.io/) and [React-Jest](https://jestjs.io/docs/tutorial-react).\nwe use [Cypress](https://www.cypress.io/) for user stories and [React-Jest](https://jestjs.io/docs/tutorial-react) for UI requirements.\nTo run all the tests you can execute the following:\n\n1. Prepare and start the Community Solid Server with the available pods as explained in the [Testing with local pods section](#testing-with-local-pods).\n\n   ```bash\n   npm run prepare:pods \u0026\u0026 npm run start:pods\n   ```\n\n   Keep the server running.\n\n2. Start the Web application\n   ```bash\n   npm start\n   ```\n   Also keep this process running.\n3. Start the http proxy\n   ```bash\n   npm run start:proxy\n   ```\n   This process must also be active throughout the tests.\n4. Finally, you can execute the tests by running\n   ```bash\n   npm test\n   ```\n\nAlternatively, you can run only the [React-Jest](https://jestjs.io/docs/tutorial-react) without running the Web application or the community server by executing\n\n```bash\nnpx react-scripts test --watchAll=false\n```\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidlabresearch%2Fgeneric-data-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsolidlabresearch%2Fgeneric-data-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsolidlabresearch%2Fgeneric-data-viewer/lists"}