Git Product home page Git Product logo

onekin / wacline Goto Github PK

View Code? Open in Web Editor NEW
8.0 2.0 6.0 36.11 MB

WacLine is a software product line that allows configuration and derivation of web annotation browser extensions for specific domains using pure::variants

Home Page: https://onekin.github.io/WacLine/

License: MIT License

JavaScript 94.21% CSS 2.86% HTML 1.82% Shell 0.04% PowerShell 0.03% SCSS 1.04%
web annotation software-product-line pure-variants javascript chrome-extension browser-extension annotation-client chrome nodejs variants annotation-activity webannotation

wacline's Introduction

WacLine

Please note that this is a prototype under development. It is not thought to use in a production environment yet.

WacLine is a Software Product Line to manage heterogeneity in Web Annotation domain. Specifically, WacLine allows configuration and automatically generation of customized web annotation clients to conduct annotation activities in specific domains. Created annotation clients are browser extensions currently compatible with Chromium-like web browsers (Google Chrome, Opera,...).

Requirements for contributors and annotation clients developers

  • Pure::variants v5.0: Our SPL is build on top of pure::variants. Pure::variants is an eclipse plugin for development and deployment of products lines and software families.
  • NodeJS v16: required to compile the resultant generated products. We recommend you to use nvm for UNIX-like systems or for windows to manage multiple versions of nodeJS installed in your system.
  • Gulp v4: a javascript toolkit to manage build tasks over nodeJS. To install it globally run: npm install -g gulp
  • For MacOSX it is required to have installed and updated Xcode
  • Additional packages to develop:
    • eslint: npm install eslint -g

How to create your annotation client

You can follow this small video that creates a sample extension

Step 1. You can create a product variant in ./Variants/ folder in Eclipse. Configure with the features that your annotation client must have to conduct your annotation activity. You can view the full documentation of the feature model here.

Step 2. Generate the product, the resultant will be placed in ./output/<name_of_your_product>

Step 3. Resolve dependencies and compile:

  • In windows systems: Open a powershell and execute in ./output/<name_of_your_product> folder: ./dependencies.ps1
  • In UNIX-like systems: Open a shell and execute in ./output/<name_of_your_product> folder: ./dependencies.sh

Step 4. A compiled browser extension is created in ./output/<name_of_your_product>/dist folder. Drag and drop to your browser's extensions folder (remember that Developer mode must be activated)

Step 5. Test the installed extension in the browser

Examples

Community have created up to 6 variants that can be used as an example, where three of them are already available in Chrome Store:

  • Highlight&Go: a web annotation client to conduct Systematic Literature Reviews data extraction using Google Sheets
  • Mark&Go: a web annotation client to conduct assignments marking over Moodle using evaluation rubrics
  • Review&Go: a web annotation client to conduct papers review based on a customizable reviewing framework
  • ConceptAndGo: a web annotation client to develop mind maps based on capturing data over the web
  • Docal: a web annotation client to capture data from legal sentences
  • Fival: a web annotation client for bachelor degree thesis evaluation

You can find the latest version of each of them in their corresponding branch product/* (e.g., for Highlight&Go the branch is named product/highlightAndGo).

How to contribute

You can check contribution information in contributing notes.

Continuous delivery for application engineers and contributors

Each of the derived products from WacLine are ready to build, test and pack to delivery in browser extensions stores (e.g: Chrome Web Store). Here are described some gulp tasks to facilitate these activities:

Build

Note that ./dependencies.sh or ./dependencies.ps1 described above builts the browser extension to install as a developer in chrome. The following section describes other available options for building.

$ gulp
Option Description
--watch Starts a livereload server and watches all assets.
To reload the extension on change include livereload.js in your bundle.
--production Minifies all assets
--verbose Log additional data to the console.
--vendor Compile the extension for different vendors (chrome, firefox, opera, edge) Default: chrome
--sourcemaps Force the creation of sourcemaps. Default: !production

Pack

Zips your dist directory and saves it in the packages directory.

$ gulp pack --vendor=firefox

Testing

We are currently planning to automatize web annotation clients testing using puppeteer.

wacline's People

Contributors

haritzmedina avatar inigobereciartua avatar rmedeiros avatar xabigar avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

wacline's Issues

When deleting a code or theme, annotations done with that code are not shown and error is propagated

Steps to reproduce

Product configuration with themes + codes and Dynamic.
1.Create a theme, then a code
2.Annotate something with that code
3.Remove that code
4.Reload website/PDF

Some insights

Annotation must be removed or not? I don't think so, but it should be shown in grey color (annotation does not have a valid code (look mark&Go implementation).

It also gives a error here:
https://github.com/onekin/WebAnnotatorSPL/blob/a7020374e204cefb5d3fd3eb859d288f7b89dfa1/input/app/scripts/contentScript/AnnotatedContentManager.js#L299

Feature: deleteGroup. Not always all the annotations are removed

Steps to reproduce

Depending on the selected storage (especially it happens on remote annotation storage systems e.g: Hypothes.is), some of the annotations are not removed. Why? Because this operation is API intensive as it makes a call for each annotation to be removed.

How to solve

The idea is to support in all the annotation storage clients the operation deleteAnnotations, where it is given an annotation array list to be removed instead of doing this:
https://github.com/onekin/WebAnnotatorSPL/blob/75262aca9709c8c253c33aff3b492cb15cdba0c3/input/app/scripts/contentScript/contentAnnotators/TextAnnotator.js#L1237-L1253

Something similar to what we have in hypothesis-api-client:
https://github.com/haritzmedina/hypothesis-api-client/blob/c2ca35adef2cb969acfe92b3d22ca6a16aca6737/lib/index.js#L332

Implementation of feature: Target IEEE

IEEE is a Digital Library (DL) that it is hugely used in Computer Science. I think that it should be added as a possible target.
In this case, it is not recognized the DOI in HTML nor PDF version and it has some extra difficulties do to how is this DL implemented to annotate the PDF version (see below).

Use this article as an example:
https://ieeexplore.ieee.org/document/6916375

For HTML

Try to resolve the DOI. It can be retrieved when navigating from DOI URL:
https://doi.org/10.1109/U-MEDIA.2014.59

Or it is possible to scrap from the website, it appears usually in this place:
image

For PDF

Augment PDF download icon with the DOI scraped in previous step. When user clicks on PDF document, it is redirected to a new URL:
https://ieeexplore.ieee.org/stamp/stamp.jsp?tp=&arnumber=6916375#doi:10.1109/U-MEDIA.2014.59

It cannot be annotated, as the PDF is inside an iframe. A new redirection must be supported (or automatically opened), maintaining the #doi:10.1109/U-MEDIA.2014.59 in the URL of the iframe.

This is already implemented in Highlight&Go. See this file.

Compatibility of products' dependencies with nodejs v12

Steps to reproduce

After creating a product from the SPL $ npm install it is not working properly in node v12.

How to solve

There are some dependencies that must be updated in package.json file to the following versions:
"wdio-jasmine-framework": "^0.3.8", "wdio-selenium-standalone-service": "^0.0.12", "wdio-spec-reporter": "^0.1.5", "wdio-webpack-service": "^1.0.1", "webdriverio": "^5.12.5",

Duplicated propagation of actions done after using commenting form

Setting

Any product with commenting feature (e.g.: commenting + replying)

Steps to reproduce

Create an annotation and add a comment. The annotation is updated twice, what is doesn't affect to anything.

However, if you create a comment to reply another annotation, the annotation is created twice, creating two replies with the same value.

How to solve

Check why the callback of commenting form is executed twice, and take into account all the involved features of commenting, replying, assessing and moodle comments (which is listening to replying annotations).

Propagation of extension is active to other tabs

Steps to reproduce

If installing a tool, activating it in one tab, sometimes it makes that other tabs have the extension activated too, but the user have never clicked on them.

How to solve

Check how propagation of active tab and which are the tabs that have activated the extension. Check popup.js

If Google sheet producer or consumer is selected, configuration must require a google client id

Steps to reproduce

Configure a new product and select GoogleSheetProducer or GoogleSheetConsumer. Both have a clientId attribute to set.
Currently it is possible to choose any of these two features but leave the clientId attribute empty. It is must to define a clientId, otherwise the Google Sheets API won't work.

How to solve

Define a restriction or function that the attribute cannot be a empty string if the feature is selected

IRR sheet

Currently it is possible to create spreadsheets but not IRR or Inter Annotator Agreement like spreadsheets. The idea is to replicate this functionality already working in Highlight&Go standalone version:

Non-reliable annotations anchoring

Steps to reproduce

Get a document (e.g.: txt file) with repeated text among the whole text.
Annotate the same fragments but in different positions.
Created annotations are different, but they are drawn in the same place.

How to solve

Check if the algorithms are working properly, specifically textposition anchoring.

Built should ask for the name of the group if Manual is selected

Steps to reproduce

When Manual and BuiltIn is selected, the first time that the application is opened it is automatically created a group with the default name. However, it must ask you for a name for the first group, as the default group name is an AppBased feature's functionality.

How to solve

Reuse the functionality given in Create new codebook to ask user for the name of the group.

A mechanism to manage (visualize, edit or delete) page notes

Currently it is possible to create page notes, but it is not possible to delete, update or view (only a number in a sidebar denotes that the annotation exists) and if annotation server provides visualization mechanisms, it is possible to see there (e.g.: Hypothes.is or browserStorage), but it has some limitations to modify or delete it.

When setting manual group selection, it must be selected Create group feature

Steps to reproduce

In groupmanipulation, if manual is chosen, create group feature must be selected. Otherwise, when opening the generated product, it doesn't give user to do anything. They cannot create a group to annotate and the following error appears:
image

How to solve

Set a requirement if manual is selected to select create group feature.

Things to verify

Maybe it is possible to create a group if User feature is selected?

Marks are not translated to moodle if only annotation with mark is done

Marks must be translated to moodle automatically if teacher creates an annotation with a mark, if a comment is added or if an annotation is deleted.
In the last two cases works well and it is updated automatically moodle, but when user mark for the first time just highlighting with a mark, it is not updated in moodle

Focus is lost in input texts and textareas after some seconds in long PDF documents

Steps to reproduce

Open a long PDF document. E.g.: https://www.pure-systems.com/fileadmin/downloads/pure-variants/doc/pv-user-manual.pdf
Create annotations in two pages that are far one from the other. E.g: page 1 and 70
Open the comment form (for example, as it happens in all the forms). Start typing in the input text or textarea
After some seconds it will lose the focus.

How to solve

If swal form is opened, don't highlight annotations, as this functionality sometimes require to change the user focus to find where is the annotated content. In long PDF documents, PDF.js to save memory destroyes and creates dynamically PDF pages (DOM elements representing the PDF content) that the annotation system is trying to find, and if not found, it tries different mechanisms to find the annotated fragment. One of the most costly methods to find annotations changes the user focus programatically. The best solution is just not to try to load those annotations when a sweetalert exist or the annotated page does not exist.

Similar bug solved here: haritzmedina/MarkAndGo#14

Write a readme

It should be useful (for anybody who wants to use/reuse the SPL, but also for us) to document a bit at least the readme. Things to document:

  • What is this project about?
  • How to setup the environment to create a product: dependencies installation,...
  • How to setup for developing, contribute,...
  • How to extend the SPL with new features
  • Which one is the folder structure

No warning message shown when user is not logged in Hypothes.is

Steps to reproduce

Try to configure a highlighter (codebook) externally (e.g.: via moodle or sheets) without being logged in Hypothes.is in your browser.

The system will crash and won't show you any alert to log in Hypothes.is. Also after login it won't continue configuring the highlighter or doing further steps, requiring user to reload the website and relaunch the configuration

Definition->Target feature requires to use URN, DOI, NavigationScript or Moodle

Steps to reproduce

Create a vdm and disable all the targets in Definition->Target feature.

Result

It is said that there is an error because one of the Targets must be selected.

Expected behaviour

I think that it is a correct configuration for that variation model, because it is possible to have an annotator which only annotates websites. In addition, URL feature is already selected.

Sidebar for navigation issues

There are two navigation issues when clicking on sidebar buttons:

  • When clicking on a theme (or evaluation rubric criteria) it does not navigate through the evidences of the annotation. It should navigate through each annotation with that code
  • When clicking on a level (giving a mark), it navigates to the annotation and also marks the assignment. It should no navigate to the annotation, the teacher is only marking

Getting number of selected annotation servers in PV annotations is not working

Annotations with the following form:
AnnotationServer->pv:SelectedChildren()->pv:Size()
Must be changed by:
AnnotationServer->pv:SelectedChildren('ps:annotationServer')->pv:Size()
As servers are now classified as local or remote and later divided in possible options (browser storage, hypothesis, neo4j,...)

Some products may be affected by this bug (was detected in Mark&Go)

Refactor codeToAll in AnnotatedContentManager

Refactor the following method if and second if are similar and can be simplified:

if (annotatedTheme.hasAnnotations()) {
const themeAnnotations = annotatedTheme.annotations
// Update all annotations with new tags
_.forEach(themeAnnotations, (themeAnnotation) => {
themeAnnotation.tags = newTagList
const bodyClassifying = themeAnnotation.getBodyForPurpose(Classifying.purpose)
bodyClassifying.value = code.toObject()
annotatedCode.annotations.push(themeAnnotation)
})
this.updateAnnotationsInAnnotationServer(themeAnnotations, () => {
annotatedTheme.annotations = []
window.abwa.annotationManagement.annotationReader.updateAllAnnotations()
this.reloadTagsChosen()
// Dispatch updated content manager event
LanguageUtils.dispatchCustomEvent(Events.annotatedContentManagerUpdated, { annotatedThemes: this.annotatedThemes })
// Dispatch all coded event
LanguageUtils.dispatchCustomEvent(Events.allCoded, { annotatedThemes: this.annotatedThemes })
})

if (lastAnnotatedCode && (lastAnnotatedCode.code.id !== code.id)) {
const lastAnnotatedCodeAnnotations = lastAnnotatedCode.annotations
// Update all annotations with new tags
_.forEach(lastAnnotatedCodeAnnotations, (lastAnnotatedCodeAnnotation) => {
lastAnnotatedCodeAnnotation.tags = newTagList
const bodyClassifying = lastAnnotatedCodeAnnotation.getBodyForPurpose(Classifying.purpose)
bodyClassifying.value = code.toObject()
annotatedCode.annotations.push(lastAnnotatedCodeAnnotation)
})
this.updateAnnotationsInAnnotationServer(lastAnnotatedCodeAnnotations, () => {
lastAnnotatedCode.annotations = []
window.abwa.annotationManagement.annotationReader.updateAllAnnotations()
this.reloadTagsChosen()
// Dispatch updated content manager event
LanguageUtils.dispatchCustomEvent(Events.annotatedContentManagerUpdated, { annotatedThemes: this.annotatedThemes })
// Dispatch all coded event
LanguageUtils.dispatchCustomEvent(Events.allCoded, { annotatedThemes: this.annotatedThemes })
})
}

Default annotation server cannot be empty

When configuring annotation server, one or more annotation servers can be configured. If default annotation server is not defined (empty string), it should take the first one, but current function in refactoring branch does not allow to set as empty string the defaultAnnotationServer attribute for a variant model.

Back to moodle button in sidebar not working for students

Steps to reproduce

  • Login as a student in Moodle and join your teacher's created group
  • When clicking on back to moodle button in sidebar, it tries to redirect to moodle, but the URL to be redirected in case of teachers and students is different, so tries to redirect to teachers' where students doesn't have permission to access

Error packing a transformed product using gulp pack

Steps to reproduce

When packing a transformed product using gulp pack, it creates a .zip file that can be uploaded to the chrome store or install locally in another computer.
When trying to install in other computer (different system and maybe language) it throws an error unpacking it and later when trying to load it:
"localisation used, but default_locale wasn't specified in the manifest, could not load manifest"

Packing environment:
OS: Windows 10
NodeJS: -v 10
System lang: Spanish

Unpacking environment:
MacOSX
System lang: English

Annotation.serialize takes always the current opened URL as target in Hypothesis server, not the target within

Configuration

Hypothesis server must be selected and in use.

Steps to reproduce

Try to modify programatically an annotation from a different URL, when using Annotation.serialize before sending to the annotation server, it gets and saves current URL and not annotation former one, see:

const uris = window.abwa.targetManager.getDocumentURIs()

Thanks to @aitord97 for notifying and providing a patch to solve this issue.

Use images to describe features

Problem found

When we conducted a first evaluation of configuration of web annotation clients (based on already implemented features), we found that some of the features are not easy to understand by a simple name or description. Also, it is difficult to imagine which one is the resultant annotation tool before generating it.

How to solve

That's why we should add images to demonstrate how the interface is and facilitating comprehension of what is the product manager is selecting.

Improve interface when creating a new theme

Steps to reproduce

Create a product with option to create on runtime new themes or codes (aka Dynamic).
Feature:Dynamic
When creating a new theme the current interface is this one:
image
It can be improved for better looking (or at least to look homogeneous with other alerts.

Manual reclassification of annotations

Currently it is possible to update/modify annotations comment, assessment values, etc. but there is not a mechanism to reclassify it.

Proposal: make selectable an annotation and sidebar will open, if clicked in a button, the selected annotation changes it's classification code.

Implementation of feature: Target Springer

Springer is a DL that it is hugely used in Computer Science. I think that it should be added as a possible target. When annotating the HTML document, current implementation of DOI retrieves the DOI from the website, but not in case of a PDF document. It follows the same idea of ACM and ScienceDirect hosting services. See implementation of these features to replicate it for Springer.

If hypothesis token is unreachable (not logged in) system should ask for login but doesn't do that

Steps to reproduce

Try to install an annotation client without logged in Hypothes.is and try to use any of the functions (e.g.: getListOfGroups). The HypothesisClientManager won't initialize the client, return an error in console, but completely silent for the user, so won't know why the client is not working (reason: need to log in Hypothes.is website to get the token).

image

How to solve

Notify somehow the user about requiring to log in Hypothesis website.

The sidebar allows annotations with codes but not with themes

Steps to reproduce

It is not possible to annotate content only with the theme. It works with the code buttons, but it should work aswell with the theme button.

It must be checked if there is something in Buttons.js implementation which removes the groupHandler event from the button of the theme.

First time shown

After adding the counter of number of annotations for themes and codes it stops working.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.