softwareunderstanding / somef-vider Goto Github PK

Web application for displaying the contents automatically retrieved from a code repository by applying the Software Metadata Extraction Framework (SOMEF)

License: Apache License 2.0

Python 8.62% JavaScript 5.33% HTML 2.50% Vue 81.78% Dockerfile 1.48% Shell 0.29%

demo software metadata codemeta scientific-software research-software open-science rdf knowledge-graphs

somef-vider's Introduction

SOMEF Vider

Web application for SOMEF

Description

SOMEF Vider is a web application based on Vue.js and Flask to visualize the metadata retrieved from the SOMEF API.

Demo

We have a running demo in https://somef.linkeddata.es. If the demo is down, please let us know by opening an issue.

Development Installation

In the development installation client and service are independent. They are mounted and executed separately from each other.

Dependencies

npm 6.14.8
Python 3.9

Installation

Clone this repository

$ git clone https://github.com/SoftwareUnderstanding/SOMEF-Vider.git

Client

Before installation, configure the target server in client/src/service/axiosService by changing the variable LOCAL_URL. For local tests, use 127.0.0.1:5000 (assuming the application is deployed in that port).

Install dependencies for client

$ cd SOMEF-Vider/client/

$ npm install

Run client

$ npm run serve

Service

Install dependencies for server

cd SOMEF-Vider/server/

python3.9 -m venv virtualenv/

source virtualenv/bin/activate

python -m pip install -r requirements.txt --no-dependencies

python -m nltk.downloader all

Run service. Ports can be configures in app.py

python app.py

Production installation

It follows roughly the same process as the development installation but, in this case, the client is compiled and integrated into the flask service.

Go to the client folder and install the dependencies if they are not installed.

$ cd SOMEF-Vider/client/
$ npm install

Now instead of running the client, execute the following command to build it:

$ npm run build

This will generate a new folder in the current directory called "dist" with all the client files compiled. To integrate this files in the service, just move the folder "dist" to the service folder and rename it to "static".

$ mv dist ../server/static

This last 2 mandates are (for now) the only difference between development and production. To run the tool follow the steps listed above at the "Service" section.

To generate the bundle with Docker, see the client deployment instructions.

Docker bundle

If you want an image of the whole application, you can generate a Docker image as follows:

First configure the GitHub token in the /server/installer.sh setting the property token to the desired GitHub token. (ensure that this file is marked as executable)

Then run the Docker command in the root directory

docker build -t somef-vider .

And run the container

docker run -p 5000:5000 somef-vider

Now you will have the complete application running on the port 5000

Authors

@Vitoriox: design and implementation
@dgarijo: supervision, testing and deployment

Contributing

If you find problems or if you wish to add new features, please let us know by opening an issue or submitting a pull request.

somef-vider's People

Contributors

Stargazers

Watchers

somef-vider's Issues

Code documentation

If someone else is to use this project, it should be documented enough to support it.

Dynamic color change in confidence chip

Currently, the values for the confidence chip to change color are fixed.

Color change could be dynamic depending on the threshold value given by the user

Codemeta representation has mixed keys

I just downloaded a codemeta representation for a project; and it mixes both the regular JSON keys with codemeta keys.

This is wrong: codemeta should only return codemeta values.

Title case for dropdowns headers

Rewrite the headers of the dropdown cards to Title Case

Create a "software card"

See https://lynx-project.eu/doc/api/ for inspiration.
The idea would be to use the summary on top to highlight the things (like docker, examples, installation instructions) supported by the repo and that you could copy/paste in your readme file.

Add result number on the headers of the dropdowns

Add some sort of position indicator at the entries with more than one result.
For example "citations 3 of 5" or indicators at the bottom of the card.

App crashed when rate limitation is reached/server errors

HTML client should not crash/load forever if the rate limitation from GitHub is reached.

In the about page, add a link to this repository

This is missing currently!

Add default value for header fields

Add default value for header fields instead of not showing it.
For example, "Not Available".

Small html improvements

Two small things:

The button for searching the repo does not have the same height as the threshold/repo panels.
There should be a small separation (maybe an horizontal line) between the title of the repo and the rest

Add .gitignore file

Gitignore contains all the extensions of the files to ignore, such as .idea

Path for server storage is a little hard to reach

I spent some time to understand why the server was not working in my machine.
This path should be better exposed and documented.

Make light theme selected by default

Logos look better on that theme, so I would like it selected by default

Fix visualization of objects in "excerpt" field

The application can manage arrays and strings in the excerpt but if instead of that, there is an Object it does not show properly in the screen (ex. [object Object] at the "field")

Update to new SOMEF version

Newer versions of SOMEF have additional fields.
We should move the newest SOMEF versions

Writable example URL

Give the user the capability to use the example URL without copying it from the source.

It is tedious to click on one-liners

Many sections have a one-liner (date created, forks, etc.). Maybe giving the option to expand all fields would help.

Realocate confidence and extraction method chips

In the fields with more than one result, remove the confidence chip from the header and put one in each result, alongside the extraction method used.

Maintain the extraction method chips in the header but, specify in each result, which one is used.

Server deployment is not correct

The server should be run with the following:
python app.py. That way you can control the ports where the app is deployed.

If I run it that way, I get a CORS error. This should be addressed.

Hide/show some fields

Filter by technique.

Footer with UPM and OEG logos

Please take the logos from here:
https://foops.linkeddata.es/FAIR_validator.html
You don't need to add the contact/creators, but we should have all logos.

When returning from "About" the app refreshes the page

If I have a result and go to the "About" page, when I come back the results are reset. I would like the results to be preserved

How to change ports?

What if I want to deploy the server in a different port? This is not specified.

Dockerfile for server-based part

With instructions to set up somef and configure it

Codemeta should be better highlighted

Maybe we can even have it as a unique feature of the API

Filters do not work

I tried to test the filters by clicking on the right part of the logo here:

but the requests to the server don't change and the content does not change, even after clicking "apply"

Show warning for repos

While waiting, I would like to show a message:
"We are analyzing your repository. Time may vary depending on its size. Please be patient"

Transition to FAST API?

Flask is not a proper server for deployment. Maybe we should consider creating a fast api server. This should have low priority.

Cannot run client in Node 17

Hello,
I have run into an issue when running the client. See stacktrace below:

dgarijo@pop-os:~/Documents/GitHub/SOMEF-Vider/client$ sudo npm run serve

> [email protected] serve /home/dgarijo/Documents/GitHub/SOMEF-Vider/client
> vue-cli-service serve

 INFO  Starting development server...
10% building 2/5 modules 3 active ...ents/GitHub/SOMEF-Vider/client/src/main.jsError: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at iterateNormalLoaders (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:236:3
    at runSyncOrAsync (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:130:11)
    at iterateNormalLoaders (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:232:2)
    at Array.<anonymous> (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
node:internal/crypto/hash:67
  this[kHandle] = new _Hash(algorithm, xofLen);
                  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:67:19)
    at Object.createHash (node:crypto:130:10)
    at module.exports (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/util/createHash.js:135:53)
    at NormalModule._initBuildHash (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:417:16)
    at handleParseError (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:471:10)
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:503:5
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/webpack/lib/NormalModule.js:358:12
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:373:3
    at iterateNormalLoaders (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
    at Array.<anonymous> (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/loader-runner/lib/LoaderRunner.js:205:4)
    at Storage.finished (/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:55:16)
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:91:9
    at /home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/graceful-fs/graceful-fs.js:123:16
    at FSReqCallback.readFileAfterClose [as oncomplete] (node:internal/fs/read_file_context:68:3) {
  opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.2.0
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /root/.npm/_logs/2021-12-14T16_35_15_008Z-debug.log

The log shows:

0 info it worked if it ends with ok
1 verbose cli [ '/usr/bin/node', '/usr/bin/npm', 'run', 'serve' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preserve', 'serve', 'postserve' ]
5 info lifecycle [email protected]~preserve: [email protected]
6 info lifecycle [email protected]~serve: [email protected]
7 verbose lifecycle [email protected]~serve: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~serve: PATH: /usr/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/home/dgarijo/Documents/GitHub/SOMEF-Vider/client/node_modules/.bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/snap/bin
9 verbose lifecycle [email protected]~serve: CWD: /home/dgarijo/Documents/GitHub/SOMEF-Vider/client
10 silly lifecycle [email protected]~serve: Args: [ '-c', 'vue-cli-service serve' ]
11 silly lifecycle [email protected]~serve: Returned: code: 1  signal: null
12 info lifecycle [email protected]~serve: Failed to exec serve script
13 verbose stack Error: [email protected] serve: `vue-cli-service serve`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (node:events:390:28)
13 verbose stack     at ChildProcess.<anonymous> (/usr/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (node:events:390:28)
13 verbose stack     at maybeClose (node:internal/child_process:1062:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:301:5)
14 verbose pkgid [email protected]
15 verbose cwd /home/dgarijo/Documents/GitHub/SOMEF-Vider/client
16 verbose Linux 5.15.5-76051505-generic
17 verbose argv "/usr/bin/node" "/usr/bin/npm" "run" "serve"
18 verbose node v17.2.0
19 verbose npm  v6.14.8
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] serve: `vue-cli-service serve`
22 error Exit status 1
23 error 22 error Exit status 1
23 error Failed at the [email protected] serve script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]
Failed at the [email protected] serve script.

NPM version: 6.14.8
Commands run: npm install, npm run serve

NPM run build gives the same error

Pick project license

Make it Apache 2 if everything is ok.

New version of SOMEF

The project uses an old version of somef.

The GitHub data is not showing correctly. Docker files neither. :(

Languages are not properly shown

Languages appear as a sting separated by spaces

It's not clear what threshold is

We should have an explanation stating that is a number between 0..1

Use a faster example

SOMEF is nice because it has docker images, notebooks, etc.

However, it takes around 10 sec. to show the results. We should either have a cache with this repo already analyzed; or have a faster example (i.e., a smaller repo)

Autocomplete information

You can autocomplete by pressing tab. But you have to know this.

We should indicate on the lower part of the box that if you press tab you can complete with an example

In the software description, add the link to the repo

I know it's redundant because it has been added in the search bar.
However, I think we should have the link to the repo just in case (using the GitHub logo)

If there is a logo, display it

In SOMEF I plan to add a small extension to capture the logo of the repo
Please add a small space in case the logo is detected.

Add instructions on how to update somef

And how to configure it so we don't run into api rate problems

Releases text is difficult to read

t the moment it's shown as a blob of text.

Improve how citations appear

For example, we see:

Garijo, D. (2017). WIDOCO: a wizard for documenting ontologies. International Semantic Web Conference, 94–102. https://doi.org/10.1007/978-3-319-68204-4_9

@inproceedings{garijo2017widoco, title={WIDOCO: a wizard for documenting ontologies}, author={Garijo, Daniel}, booktitle={International Semantic Web Conference}, pages={94--102}, year={2017}, organization={Springer, Cham}, doi = {10.1007/978-3-319-68204-4_9}, funding = {USNSF ICER-1541029, NIH 1R01GM117097-01}, url={http://dgarijo.com/papers/widoco-iswc2017.pdf} }

Instead, I would like to see the bibtex properly formatted as a text block. The citation would be great as something that could be copied/pasted in the model card.

TypeError: t.confidence is undefined
    buildPanelItem MetadataCard.vue:409
    generateTabs MetadataCard.vue:327
    created MetadataCard.vue:470
    VueJS 18