comunica/comunica-packager

A tool for creating and editing Comunica configuration files

Comunica Packager

A tool for creating, editing and exporting Comunica configuration files.

Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# build for production and launch server
$ npm run build
$ npm run start

# generate static project
$ npm run generate

For detailed explanation on how things work, check out Nuxt.js docs.

This project makes use of TypeScript and Vuetify.

Development

For a detailed usage and development guide, please look at the corresponding wiki pages.

comunica-packager's Issues

Light up related components

When selecting an actor or mediator, all immediately connected actors and mediators should be lit up (e.g., a brighter color).

For example, when selecting actor A that makes use of mediator M, then mediator M should be visually lit up.

Export fails

Error: Request failed with status code 404

COMUNICA Sparql -> Comunica SPARQL

Show loading screen when importing a preset

The time to load a preset takes some time so a loading indicator shows the user that the application is doing something.

Ask user to fill in package information if not filled in yet

Improve maintainability of this app

Right now, several things are hardcoded in the application, which may make things hard to maintain if some Comunica-related things change.

I would suggest to improve this by looking in these directions:

• Create separate template files for mediator and actor configs (also package.json), so we can easily change these should Comunica's config structure change.
• Move URLs to a config file (such as https://linkedsoftwaredependencies.org/)
• Dynamically determine latest package versions (in particular, @comunica/actor-init-sparql is now fixed at 1.17.0, but this changes quite often, also components.js) (Note that the linkedsoftwaredependencies also include this version (only the major part, so ^1.17.0 -> ^1.0.0)
• ...

Add links to GitHub in footer

Add 2 links:

• Source code: to main GH repo.
• Report a bug: to the GH issues list.

Make shareable URL

A shareable URL would contain the necessary information to share a configuration so that another user can work on it

Unauthorized requests to GitHub API limited to 60 requests per hour

The current way of getting all the information about actors and mediators is through the GitHub API. These requests are unauthorized since the application is a client-side web app. Now the limit for unauthorized requests is only 60 requests per hour, not enough for making one config file.

Potential solution: create a custom API server that handles these requests in an authorized way

Show errors

If a crash occurs (like #37), it might be good to somehow indicate to the user.
Perhaps an on-screen popup? But there might be better solutions.

Improve lay-out

There seem to be some issues with the buttons on smaller screens:

I would suggest making the button text simpler, i.e.: Import, Export, and Reset.

While you're at it, I would also make the logo smaller, and add the text Packager next to it or below, in the same or similar font.
Because we should reserve as much space as possible for the form itself.

Make tutorial

For https://comunica.dev/

Use modules for big configurations

When importing a preset, the amount of actors and mediators will be a lot. Using modules to group them in the output will be more interpretable.

Fit more onto the screen

The application is not making optimal use of all available screen space at the moment.
As you will see when you load in actor-init-sparql's config, there are a lot of actors available, which would require the user to scroll a lot.

Some possibilities for solutions:

• Make font-size within form smaller.
• Hide id and params by default (and add toggle button).
  -> The toggle button could use this param icon you currently have, then you don't have to use it before every param name anymore, which would also save some space.
• Make table width responsive

Dropdown lists are sometimes not wide enough

The above causes not everything to be readable.

Search bar with auto-completion

The current way of adding actors is by choosing them from a large dropdown select.
A search bar with auto-completion support would be more feasible.

Add package.json on export

When exporting a required package.json file is missing

Add functionality for undoing en redoing

Developer documentation

Add a page with some basic usage information, perhaps behind a button "How to get started?"
This could for example be in the form of a short tutorial.

Change the way colors and assets are defined

On different browsers, the red background might be different.
The color in Firefox is more gloomier than on Chromium.
On Firefox the logo is not visible.

Prefetch actors

Adding an actor requires a few requests which each may take longer than normal. A way to avoid a user to wait until the actor has been successfully added is to prefetch the actor from the server while selecting/hovering/typing the required actor.

Clicking on an actor/mediator should open its settings

Right now, only the settings button opens the settings.
Opening it when clicking anywhere else on the actor may make things a bit more user-friendly.

Import sets

It would be nice to be able to import sets. At the moment you can only import complete configs, which overwrite the current configs. But there are use cases where you might wanna combine configs. For example, start from the RDFJS import and then add the HDT set to add the HDT feature.

Developer documentation

Add documentation (at least in the README), so that others have sufficient information to continue development and maintenance of this project.

Review the application

A first version of the application is live and should be heavily tested to check if all components work as intended. The output of the generated config file should also be tested for validity.

Testing

Look into unit and integration testing.

Both the app itself, and the resulting Comunica packages should be automatically tested.
We can setup Travis CI for this, so that upon each push all tests are run.

How to load packages from other repos?

Is it possible to somehow support the inclusion of modules from other repos, such as https://github.com/comunica/comunica-feature-amf/tree/master/packages?

If so, we should add this one by default.

It might also be good if we can somehow load a custom package by npm/github URL. (this will probably require some thinking)

Save current progress when refreshing the page

When refreshing the page all current progress will be lost. Saving this in for example the localStorage can fix this issue.

Convenience logic for mediator creation

When an actor has a mediator param, a New button should available that can create a new mediator, and automatically scrolls to that new mediator so that the user can modify it, and select the bus.

Don't make bottom bar float

The bottom bar with links to source code and issue tracker is fixed at the moment. It may be better if this would not float (may require scrolling)

Implement popup for confirmation when deleting or resetting

When a user accidentally presses reset, it will most definitely reset without asking the user for confirmation

Exported packages do not work after install

• Import default Comunica SPARQL
• Export it as zip without making any changes
• Unzip
• Install the package using npm install
• Run node bin/query.js produces the following error:

(node:18413) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)
/Users/rtaelman/Downloads/engine/bin/query.js:2
import {runArgsInProcessStatic} from "@comunica/runner-cli";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (internal/modules/cjs/loader.js:1117:16)
    at Module._compile (internal/modules/cjs/loader.js:1165:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1221:10)
    at Module.load (internal/modules/cjs/loader.js:1050:32)
    at Function.Module._load (internal/modules/cjs/loader.js:938:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47

I suspect this is because the files inside bin are .js files, while they should be .ts files.
We should have a test to confirm this always works.

Modify visualization of param types

Currently, required parameters are indicated with a *.
Instead, I would suggest making their labels bold, and setting optional params in italics.

Load from presets

Instead of having to load a config from file, most users will probably want to load from a given preset (like actor-init-sparql).

For this, I would suggest keeping a JSON configuration file in the packager app that contains a list of preset Comunica actors (including actor-init-sparql). Based on this list, the app should be able to load its configs, so that users can easily modify it, and export it as a custom config.

Performance

Think about how to reduce time to initial load

Popup only half shown when deleting actor.

When I want to delete an actor the popup is only half shown.

Sync red color

The red color appears to be slightly different than the color on https://comunica.dev/

Redo upload functionality

Add more loading icons

I like the loading icon during startup!
Would it be possible to also add this in a smaller format for other parts of the app that require additional HTTP requests?

Make dropdown for beforeActor parameter

The beforeActor refers to an already defined actor, a dropdown would be best to select this actor.

Allow default param values to be modified

Currently, some actors can have default param values, which are shown in a gray color.
However, if the user wants to enter a slightly modified value, it has to re-type the whole value.
It would be good if this value can be modified, and thereby causes the color to become black.

Use Mediator labels

For example: cma:Mediator/All -> MediatorAll.