The html-pages from edmcouncil

Dependabot alerts - Prototype Pollution in minimist

We do not have 'minimist' directly in the dependencies.
Should update the following packages that contain it:

@vue/cli-service
@vue/cli-plugin-eslint
@vue/eslint-config-airbnb

Is likely to return a problem with issuecomment-1046656161, backport to an older version fixes this problem, When dependencies are updated, cooperation with @mereolog will be required to check for compatibility in IOS system with docker.

IDMP pages

White logo in mobile view

Logo shouldn't be white in mobile-view, this should be like desktop view(blue-orange).

Orphaned Pages

Products.vue and other pages are orphaned, i.e., they cannot be reached from the landing pages.

All these pages need to found, reviewed, and relinked or removed.

Download ontology from ontology webpage

We should be able to download an ontology, for now as an RDF/XML file, from its webpage.
There should be an option to get all imports for this ontology - for now with turned off (i.e. greyed out).

Tree-view display of a resource's parents

User should be able to choose whether they want to display parents for a resource as breadcrumbs, which is currently implemented, or as a tree, like in Protege.

Automatic hyperlinkining URLs in all annotations

Add url detection and convert them into clickable links

Example:
idmp/ontology?query=https%3A%2F%2Fwww.omg.org%2Fspec%2FCommons%2FDatesAndTimes%2F

Implement new search GUI

New search must use the following API:
https://github.com/edmcouncil/onto-viewer/blob/develop/api-doc/rest_api.md#10-find-search

New GUI features:

Advanced search expand/collapse button
Multiselect bar where user can select "findProperties" options
useHighlighting toggle switch

If advanced search is expanded and at least one "findProperties" option is selected or useHighlighting is enabled then "advance" mode is used, otherwise "basic" mode is used.

Advanced search in mobile display

User should be able to configure search in mobile version.

Update of graphics for new GUI

New GUI needs to be updated with the EDMC graphics: banner, logo, etc.

For the time being I suggest we use the old files.

Vue application installation failure

Following instructions on https://github.com/edmcouncil/html-pages#running-the-content-of-website-locally fails to start yarn server.

After the following setup on a MS Windows Server 2016 machine:

node.js version 16.3.0 installed from https://nodejs.org/en/
yarn installed via `npm install --global yarn (got me 1.22.10 version)
I tried to run yarn in D:\projects\fibo\git\edmc\html-pages\fibo - this resulted in this error:

error D:\projects\fibo\git\edmc\html-pages\fibo\node_modules\node-sass: Command failed.
....
gyp verb check python checking for Python executable "c:\python27\python.exe" in the PATH
gyp verb `which` failed Error: not found: c:\python27\python.exe
gyp verb `which` failed     at getNotFoundError (D:\projects\fibo\git\edmc\html-pages\fibo\node_modules\which\which.js:13:12)

After installing python 2.7.18 and setting the path to the folder with python 2.7. the same error occurs.
One probably needs to run
npm config set python c:\python27\python.exe
as per https://stackoverflow.com/a/64486670 - this solve the previous error but 'discovers' a new one:

MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. Available tools versions are "4.0".

Build FAILED.

  MSBUILD : error MSB4132: The tools version "2.0" is unrecognized. Available tools versions are "4.0".

    0 Warning(s)
    1 Error(s)

I got similar issues on a MS W10 machine and different, but also critical, on a MacOs system.

Show more - add how many more

Add the count of hidden items in 'Show more' display:

No space beetween edge and module view in mobile view

I think it should be left alignment relative to the box above.

Carousel on the mobile version does not work

Carousel on the mobile version does not work, you can not move to the next slides and it does not happen automatically, it remains one and the same content and you can see that there are 3 slides

The 'how to use' button does not take you to the 'how to use' page

Display of deprecated resources

We should visually emphasize that a resource is deprecated, e.g., https://spec.edmcouncil.org/fibo/ontology/FND/Relations/Relations/hasTag.

To this end we can use something similar to the maturity level display:

We should say then something like 'This resource is deprecated and may be removed shortly' in red banner.

Need to update frontend

We need to updated frontend because of edmcouncil/onto-viewer#147.

Search window should not be displayed in resource window

Search window should not be displayed in resource window, i.e., it should disappear when the resource is found and displayed.

Collapse (unfolded) lists ('See less')

Collapse (unfolded) lists ('See less')

Update to the EDMC OKG landing page

Due to recent developments in the idea of the EDMC OKG Lab we should update the contents of https://spec.edmcouncil.org.

Implement /api/entity endpoint

When edmcouncil/onto-viewer#187 is merged, entity endpoint needs to be implemented by front-end.

Optimize queries to the api in hints

Optimize queries to the api in hints.

Ontology update log event visible to onto-viewer users - frontend

User should have access to information about viewer:

stats (documentation)
missing imports (documentation)

Unstable display of parameterized values

The current OV frequently displays parameters instead of their values when an IRI is called for the first time:

These 'arg's disappear when you refresh the page:

I got these results on macOS 12.0.1 using Safari and Chrome browsers.

Update vue & vue-cli etc

One of the most important issues and more difficult unfortunately it seems to me that is to update versions of vue and its derivatives, for example in the project we use vue version 2.6.10 (publicly available stable version 3.2.31), vue-cli we have 3.12 (last stable version is 5.0. 4), probably just updating these dependencies and code as it is a change of one or more versions will "fix" most dependabot alerts.

Move site content to Headless CMS + Auth server

Currently the site content is stored in vue files, to change it you need to create a pr, wait for reviews and only then the updated content is available. This increases the time it takes to implement content and changes and adds an extra step by involving additional people.

My suggestion would be to use headless cms and keep all the site content out of the templates.

A headless content management system, or headless CMS, is a back-end-only content management system. Such systems include their own dashboard, login and users, content can be added on your own defined templates and will be made available by endpoint or in the case of some headless cms, you can perform graphql queries.

On 'html-pages' side there would be only downloading data from api and displaying them. As headless cms do not have a front end, connecting them to our solutions in html pages will be easier as it will not interfere with the part of application which will download and display data from onto-viewer. Having separate front-end and back-end is also a standard that would be kept here.

The front-end would need a proper reformatting of the results, the menu could also be moved along with the possibility to manipulate the content using it.

What kind of content should be available to change from the cms should be discussed separately. Based on my limited experience with STRAPI(page, demo), I can say that there would be no need to create this cms for each site separately and it would be possible to manage them all from one panel by creating appropriate content types for each site.

The Strapi I mentioned earlier:

is open source,
we can make custom plugins,
we can use rest and graphQL,
it's writen in javascript,
supported db: SQLite, MongoDB, MySQL, Postgres,
have authentication & permissions system

Alternatives:

Stylling of `Browse FIBO domains`

The section with Select FIBO version in the content looks similar to the section with Browse FIBO domains, but the second does not have a frame. Should it perhaps be the same?

In mobile version of html-pages both have this frame:

Displays flag icons instead of language tags

Displays flag icons instead of language tags, e.g., @en

examples: Poland, jurisdiction of Poland, Car control ontology (CC)

ReadMe file needs an update

https://github.com/edmcouncil/html-pages/blob/develop/README.md needs an update regarding running html-pages in docker.
We need to tell explicitly how to build Docker image.

New maturity levels

As long as there are no new icons, provisonal and informative are treated the same (old dev type):

PROVISIONAL("https://spec.edmcouncil.org/fibo/ontology/FND/Utilities/AnnotationVocabulary/Provisional", "Provisional")
INFORMATIVE("https://spec.edmcouncil.org/fibo/ontology/FND/Utilities/AnnotationVocabulary/Informative", "Informative")

prod is now type with label Release
RELEASE("https://spec.edmcouncil.org/fibo/ontology/FND/Utilities/AnnotationVocabulary/Release", "Release")

Warnings on website should display only for provisonal and informative (release, not_set and mixed should be ignored)

MIXED("https://spec.edmcouncil.org/ontoviewer/Mixed", "Mixed")
NOT_SET("https://spec.edmcouncil.org/ontoviewer/NotSet", "Not Set")

there is no longer an icon in the json response

"maturityLevel": {
			"label": "NOT_SET",
			"iri": "https://spec.edmcouncil.org/ontoviewer/NotSet"
		},

For now, it should be:

release
provisional
informative
mixed
not_set - nothing

All information based on: PR-240(OV)

@mereolog do you accept this solution?

Update dependencies across html pages

dependecies should be updated to fix dependabot alerts

Adding links to IDMP products

https://spec.edmcouncil.org/idmp/products should be updated to provide links to IDMP products.

How to contribute dislocation

'How to contribute' section is dislocated:

Add linkifyjs dependency to FIBO

FIBO is missing linkifyjs dependency which leads to docker not building properly.

FIBO's package.json

IDMP's package.json

New GUI for Auto

We need to update auto pages to the new GUI design

Fancy display of lists and lists of lists etc.

Currently, we use plain bullets and hyphens to display lists and embedded lists.

Could we use some more fancy/more modern way?

Statistics should report time machine instance data

Link 'Auto Viewer' broken when PRODUCTS page browsed as '/auto/products'

Works on /auto/products/, but broken on /auto/products (this is canonical URL for PRODUCTS page - see top menu on main page)

Suggest a trivial change:

--- auto/src/views/Products.vue.orig
+++ auto/src/views/Products.vue
@@ -21,7 +21,7 @@
                             <td><strong>D01</strong></td>
                             <td>Auto schema.org ontology: A schema.org-compliant fundamental ontology for vehicle information in e-commerce</td>
                             <td>Released</td>
-                            <td><a href="../ontology?query=https%3A%2F%2Fspec.edmcouncil.org%2Fauto%2Fontology%2FEC%2FSchemaAutomotive%2FAutoSchemaOrg%2F">Auto Viewer</a></td>
+                            <td><router-link :to="{ path: router('ontology'), query: { query: encodeURI('https://spec.edmcouncil.org/auto/ontology/EC/SchemaAutomotive/AutoSchemaOrg/')} }">Auto Viewer</router-link></td>
                         </tr>
                         <tr>
                             <td><strong>D02</strong></td>

Show more/less on every level in enumeration

Show more/less on every level in enumeration.

How to use section revamp

'How to use' section seems to me too prominent - perhaps the header there should be smaller and less 'outstanding'
It should use the same style as other sections.

"How to use" button

The "how to use" button may confuse users as it does nothing when clicked in the "How to use" section - because the user is there already.

Skos resources are not returned/displayed

Results for iri containing '#' are returned incorrectly. Arguments are incorrectly parsed. The error is in processing the query.
JS get the query http://fibo-viewer.korora.makolab.net/fibo/ontology?query=http://www.w3.org/2004/02/skos/core#altLabel.
Js get the query value and processes what is inserted.
Then the query goes to the backend with the iri in which the ending is already cut off.
http://fibo-viewer.korora.makolab.net/fibo/ontology/api/entity?iri=http://www.w3.org/2004/02/skos/core
This needs to be handled on the frontend. Probably here:

html-pages/fibo/src/views/Ontology.vue

Line 1192 in 7827cb0

async fetchData(iri) {