rwth-acis/ocd-web-client

This repository contains the code of the Web client for the OCD service.

OCD-Web-Client

This repository contains the code of the web client for the OCD service at https://github.com/rwth-acis/REST-OCD-Services. As the WebClient only acts as the UI of WebOCD, you will need to have an instance of the service running as well.

Quick Set-Up Guide

Client Configuration at Learning Layers

To set up the Learning layers OIDC login, either use an existing Learning Layers client or register your own at https://auth.las2peer.org/auth/realms/main/account/ (You'll need a learning layers Account). The client at learning Layers has to have the following configurations:

• The web clients login page has to be mentioned as a Redirect URI
• The Access Type should be public and you should use Implicit Flow
• You need to have your clients' origin, e.g. http://localhost:<your-port>, and https://api.learning-layers.eu/* as an allowed Web Origin (Lazy People can just use * to allow any). Keep in mind that it needs to be the exact origin, an extra / may for example lead to a CORS policy block.

Adjusting the Files

You will then have to change the data-clientid field to your client id from Learning Layers and the data-redirecturi field to your web clients address (usually something like http://localhost:<your-port>). This has to be done in both.

• login.html
• JS/contentHandler.js

Finally, change the values of baseUrl to the services address in the following files so that requests are addressed to it:

• JS/requestHandler.js
• JS/simulation/requestHandler.js
• JS/simulation/jsonRequestHandler.js

Finally, dont forget to run npm install to get all the needed packages.

You can then for example use the http-server package dependency of the web client to have the server running: Do ./node_modules/.bin/http-server -p <your-port> (or npx http-server -p <your-port>) from the root directory of the project and optionally add -c-1 to disable caching. Now, the web client should be able to communicate with the OCD service and be reachable under http://localhost:<your-port>.

Now, the web client should be able to communicate with the OCD service.

Quickstart with a Docker Container

To build a docker image for the OCD-Web-Client that connects to the WebOCD Service running locally with the default parameters, you can navigate to the OCD-Web-Client directory and execute

docker build -t <image_name> .

To run a docker container interactively, based on the above created image that connects to the default address of http://localhost:<your-port> you can execute

docker run -it -p <your-port>:8090 <image_name> 

Now you should be able to navigate to http://localhost:<your-port> and communicate with the service as you would without docker

ocd-web-client's Issues

Display Creation Method and Graph Characteristics in Graph overview

Currently the creation method attribute is only displayed for running algorithms and can be set for graphs on graph import. But for graphs this attribute is never displayed in the graph overview or the graph tables.
The creation method therefore needs to be shown in the graph table and along with the graph characteristics it also needs to be shown in a graphs overview.

Show inactivity information

The service now has a maximum period of inactivity for users until content deletion. We should show that here as well

Learning layers connection not working anymore

Currently the login through learning layers does not work, this is because the uri to be used has changed now. We need to adapt our URI accordingly.

Show which graph types algorithms support

Currently, the user does not know which graph types are supported by which algorithm if they have no previous knowledge of the algorithm.
This could for example be alleviated by tags being displayed for the different graph types next to the name

Update to new OIDC_Connect Button

The web client currently seems to use an old version, thus we need to update to the one at https://github.com/rwth-acis/openidconnect-signin

Create a Dockerfile

Wrong navigation while going through the covers of a specific graph

When going to the page of the cover of a certain network. The right covers are displayed which is fine. But when going to 2. page of these covers, which in my case did not existed, I get navigated to the pages of all covers independent from the network type.

Notify clearly about Log-In Expiration

Currently, an expired Log-In yields a "Service Connection Failure"

It should be conveyed more clearly to the user that a re-log-in has to be done.

There could potentially also be an option to do such a re-log-in on refreshing the page.

Add a possibility to download graphs

There should be a button in the webclient that allows users to download graphs (similar to how they can download covers).

Change login procedures for new las2peer version

The service is being updated to las2peer 1.1.0 and thus the login now also requires basic authorization. This needs to be added.

Show parameter options for all metrics

Currently, for metrics like the combined newman modularity, parameter options are not shown. This has to be fixed

Add dropdown for enums to algorithm parameters form

Before running an algorithm, the user can modify certain parameters that are either int, double, or boolean. To change between enums of an algorithm a dropdown menu is required.

Add Option to Show Node Names per Default on Interactive Visualizations

Currently, node names are only shown on hover over. There should also be the option to show them all no matter whether the users mouse hovers over or not.

Dependency Management

Some kind of dependency management would be great, like npm. Currently, libraries are pasted in into the JS directory, it seems.

Redirect to Clicked Page on Opening a New Tab

Currently, the user is redirected to the login page (and if logged in, subsequently the network analysis page) when opening a new tab no matter which link they clicked on. They should be redirected to the actual clicked page.

Cover Export from the Web-Client

Currently, only the export from the cover graph in JSON format is possible, but not the actual cover itself.

The WebOCD Service offers 2 possibilities for cover export that make sense for this:

• Cover XML

• Labeled Membership Matrix

• Check both formats for correctness

• Implement export of labeled membership matrices (Done through #11)

• Implement export of Cover XMLs (Done through #16)

Make GraphML export possible through WebClient

The service offers export of graphs through GraphML but we do not account for this in the web client. As this likely is a useful feature it should be made possible to the users to access it. A good example of how to do this could be in the already covered cover export.

Do not display number of communities while still running

When an algorithm is running the number of communities is displayed on the page of the cover which is really odd. The number of communities is set to the number of nodes in the graph. This makes the impression that the algorithm has finished and it puts all nodes in their own community. It might be better to show something like "in progress" or "running " instead of a number because technically no communities have been found yet.

Add sorting over multiple pages

Currently, sorting covers/graphs/centralities by any column only sorts the entries on the site you are currently on. This can be annoying for people having more covers, centralities or graphs than one page allows for.
Multy-page sorting therefore needs to be added.

(originally mentioned in #19)

Better Responses on User Actions

Currently, a user can be left in the dark for a while when they upload a graph, run an algorithm or request a visualisation until the action is completed.

It would be good to show that the users actions were at least recognised by the Web Client and that a response from the service is yet to come, e.g. loading icons and notifications. A progress bar could also be of help, if possible

Notify people of next deletion date by login

With the new version of the service we offer the possibility to periodically delete data when users have not logged in after a certain time frame. It will be necessary to notify the users about when this happens (or if the option is switched off or not)

Overhaul Handling of 3D Interactive Visualization

Currently, panning and turning with 3D Interactive visualization can be way too fast and sometimes not register letting go of the right mousebutton. This should be fixed

Make the graph table in the import page sortable

The graph table in the graphs.html and import.html are almost same. And the graphs in the graphs.html can be sorted according to the name or nodes(edges) count. But that in the import.html seems to also have this function, but it doesn't work now according to some bugs, need to be fixed

.

Unexpected behaviour of the sorting functionality on the page Community Detection

The sorting functionality on the page Community Dection of the Web Client is somehow mixed up.
When clicking on Name or Creation in the head of the table, the entries are sorted by the graph's name.
When sorting by the column Graph, the entries are sorted by Name.
When sorting by communities, the entries are sorted by Creation method.

Another strange behavoir is that when there are at least 2 pages of detected communties on this site, sorting the covers bei any column only sorts the entries on the site you are currently on. In other word, the sorting functionality ignores entries which are not on the current visible page. It would be nice if all entries in this list regardless of their location are consider when sorting the entries.

Make use of http-server within WebClient

Documentation for OCD Algorithms

As of yet, only Centralities provide access to information about their original author/paper and a basic explanation.

This should also be the case with OCD algorithms.

Have option to show only compatible algorithms

Currently, all ocd algorithms are shown for a graph, no matter whether they are compatible or not. We should have at least an option (e.g. a tickable box) to show only those compatible.