Beautify the Virtual Thing configuration JSON, when the user hits the Save Button .

@adriankast was there a specific reason to implement the virtual thing tab as an organism and not as a template?

from Readme.md:

(o) Selection: Show error if input is not in correct format

from Readme.md:

(o) Sidebar: Implement filter functionality

from Readme.md:

(o) Sidebar: Drag and Drop of elements to change order 

Think about a good anchor + relation strategy to determine a good position for the copy VT-Link dropdown (especially given its different sized content and optimized for different size w-ade windows). Then implement the strategy 😉

from Readme.md:

(+) Errors: Show connection errors in statusbar

Indicate loading while fetching Uris in the editor, loading results in the 'Editor tab' or in the 'performance' / 'virtual thing' tab.

This could be a bit higher priority even if it doesn't seem like it. In the current state, the scrollbar falls back to GUI Framework that electron is using on the given platform. In macOS and Windows it might always be the same but in Linux, Ubuntu users might fall back to Gnome style, KDE users fall back to KDE style etc. This results in scrollbars appearing in and around text areas that the wade developer does not see in his/her environment

Comes up when

• npm install
• npm run electron:serve OR npm run electron:build

Problem

When the vuex dependency is installed in Version 3.1.2 by npm, multiple Errors are thrown during building (depending on wade-branch around 60 errors). They all have a similar reason (difference is only the involved variable), an throw in different files, e.g.:

137:42 Property 'currentTabId' does not exist on type 'CombinedVueInstance<Vue, unknown, unknown, { id: unknown; getTdTabbar: any; }, Readonly<Record<never, any>>>'.

Workaround

In package.json replace

vuex: "^3.1.1"

with

vuex: "3.1.1"

then run npm update vuex. Now building should work.

Fix

The workaround above is also applied to the ak_dev branch in private Fork and will be merged into the wade-master branch. Then the commit should be mentioned in this issue and the issue can be closed.

When you click on tab "config" and then editor, pasting an example-TD works always -> make it work always for every previous view

A minimum height and width of the electron window was added with this issue: #48
Due to this, the view is scrollable horizontally when the size expands the min. width.

Somehow the bg is not updated accordingly (see screenshot)

As seen in below, the interface does not scale down to the end of the window

from Readme.md:

(o) Output Results: Validating interaction response data schema: Error Message
(A WoT Thing Description MUST accurately describe the data returned and accepted by each interaction)

Bulk / overview ticket for all issues related to the Thing Description Interface in W-ADE. This includes the Editor view.
[Should be updated, when new tickets regarding the Editor arise or being updated.]

When working on new tickets please consider their priority.

Bug

#45 [Editor] Pasting an example-TD does not work after every previous view
#29 [Editor] Removing a selected part of the scrolls to the bottom of the editor
#65 [Interaction Selection] Reset of Selections does not work

Enhancement

#32 [TD Interface] Input Button -> click outer div
#27 [Editor] Real JSON editor
#13 [Editor] Add Td from local machine
#40 [Uri Bar] Error handling if Fetch timed out
#36 [Selection] Show error if input is not in correct format
#30 [Statusbar] History functionality
#33 [Statusbar] Make time length equal
#38 [Statusbar] Show connection errors in statusbar
#28 [Config] Config help is not copy-pasteable
#55 [Config] Implement feature 'Form-Fields'
#26 [Interaction Results] Array and Object type support
#25 [Interactions] Order and Drag n Drop

Improvement

#11 [Interactions] Invoke interaction timeout

from Readme.md:

(+) Results: Improve error handling (right now just the full response is shown)

When the config help is clicked, one gets a text as a js-only-JSON document, i.e. mqtt:number instead of "mqtt": "number". I would suggest that when the config help is copy-pasted the user only needs to change the property values and delete comments but not add quotes.

Proposed Solution Path

Update the @node-wot/coap-binding as soon as the problem is fixed in this package.

Workaround

Install node-aead-crypto to avoid failing dev build and build, because coap-binding seems to need it might be necessary (it isn't installed with current node version because it shouldn't be needed anymore):

npm install -f --no-save node-aead-crypto

After installing node-aead-crypto you should delete the dependency from your package.json, so it isn't added to the wade package on the next commit. Also installing a previous "node" version could solve the problem (but comes with other disadvantages)

from Readme.md:

(o) Folders: Create user interface for folders

Integrate the Virtual Thing Plugin via importing all necessary classes/functions with the import keyword instead of launching a subprocess. Before this is possible adaptions in VT have be made, to get an Interface for the output of VT which is currently handled via calls to console.

When I highlight and select and then delete a part of the TD, like one of the forms, the editor scrolls down to the end of the page.

Add a history functionality to the Statusbar

from Readme.md:

(o) Editor: Add td from local machine

Comments:

@egekorkan A quick way to implement this would be to include the File Client of node-wot and then let people type file://tdlocation to import their TDs. Later on, a GUI can be added that fills this string according to how the user explores

@adriankast I think the GUI could be added quickly as systems Dialog (using the OS native file selection, and receiving the selected file/path)

A TD with MQTT forms does not generate an interface when I don't configure the broker URI.
Some indication that W-ADE isn't able to connect to the Thing (or still is connecting) needs to be displayed for the user.
Also if the connection to the MQTT broker could not be established.

Add the possibility of multiple clients for performance measurements. To enhance the measurement feature, users should be able to add more clients for measuring performance. (See Postman Test Runner as example)

As seen at shadow-thing, only Linux pipeline should be executed automatically and Mac and Windows pipelines should be executed only on demand

Atm the 'Static Timing' input field can be clicked even when the button say it's disabled. Additionally it is not being enabled even though it should be (when one Action and Property are selected).

Bulk / overview ticket for all issues related to the UI wich do not fit into other overview tickets.
[Should be updated, when new tickets regarding the UI arise or are being updated.]

When working on new tickets please consider their priority.

Bug

#21 [Scrollbar] Restyle
#53 [UI] min-height / min-width not working correctly
#76 [UI] Consistent proper case texts throughout UI

Enhancement

#44 [Results UI] Make id smaller and response bigger
#39 [Dropdown] Hide all dropdowns if anything else was clicked
#31 [UI] Add throbber to Indicate loading
#12 [Folders] Create user interface for folders
#70 [UI] Dynamic tabs wrapper for views

Improvement

#58 [UI] Creating a new TD should make the name field active

As it does not make sense to measure the timing performance of Event interactions, they should be

• either be removed from the 'Timing Performance' side
• or disabled (hence, not selectable for measuring timing performance)

Basic validation for naming of Td (default node regex)
(Checking for duplicates is already implemented)

E.g.

• Min & max characters
• No special characters
• ... other?

This should be applied when creating

• Thing Description
• Mashup
• Folder

from Readme.md:

(o) Sidebar: Drag and Drop to add a td/ mashup to a folder/ mashup

Low Priority, only an UI improvement.

from Readme.md:

(+) Interaction Selection (UI): Input Button -> only click on outer div

Detailed explanation:
In TD/TD-Editor: when the given TD is parsed and buttons for each interaction (props/actions/events) are generated, these buttons (and therefor the attached interaction) can only be selected when the user clicks on the small circle on the button. Same with deselection. Only a click on the checked circle can deselect. The improvement would be to make the whole button clickable and trigger selection with that.

Two initial thoughts:

• fire an event whenever the user clicks somewhere outside a dropdown and listen to it in aDropdown
• listen to the existing event click on document if possible?

Add timing measurements for events in normal TD editor mode. Although events are not considered in the performance measurements, for each new arriving event the needed time until the next response could be viewed in the results area of the TD.

from Readme.md:

    - Invoke interaction -> timeout

Description

After installing wade using npm successfully, I tried to build the electron executible using npm run electron:build. Doing so resulted in an error:

This relative module was not found:

* ../../../example-tds/annotade_td.json in ./node_modules/cache-loader/dist/cjs.js??ref--13-0!./node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--13-3!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/04_templates/tPerformance.vue?vue&type=script&lang=ts&
 ERROR  Vue CLI build failed. Please resolve any issues with your build and try again.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] electron:build: `vue-cli-service electron:build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] electron:build 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!     C:\Users\fadyt\AppData\Roaming\npm-cache\_logs\2020-05-08T11_08_22_619Z-debug.log

The file is required in wade/src/components/04_templates/tPerformance.vue in lines 92 - 95:

const td = require('../../../example-tds/annotade_td.json');
            const name = `${getCurrentDate()}_annotated_td.json`;
            storage.set(name, td, (error) => {
                if (error) throw error;
            });

Bulk / overview ticket for all issues related to the Virtual Thing / Shadow Thing plugin.
[Should be updated, when new tickets regarding the VT plugin arise or being updated.]

When working on new tickets please consider their priority.

Improvement

#3 [VT Plugin] Virtual Thing should be a template

Enhancement

#47 [VT Plugin] JSON-Beautify virtual thing config at saving
#46 [VT Plugin] Place the dropdown field of copy VT-Link better
#15 [VT Plugin] Integrate Virtual Thing via import instead of launching a subprocess
#60 [VT Plugin] Change "Virtual Thing" to "Simulator"

from Readme.md:

(+) Uri Bar: Fetch error handling when connection timed out

Ideas:

• retry for x times
• stop trying and display error message if timed out always

from Readme.md:

(+) Results UI: Make id smaller (write -> w, read -> r ...) and response bigger -> display as obj

If an element is deleted this action should be confirmed first. (or w-ade should display the user a confirmation for the deletion? -> is less likely to be meant, because the user sees the element disappearing from the sidebar)

from Readme.md:

(+) Sidebar: Delete element -> confirm deletion

• Hide developer console on start.
• Do not allow resizing of window (to a very small window).
• Remove gap to window (Make "full screen") (removed from this Issue because it exists already -> see #22)

Node-wot automatically selects the first available form of an interaction affordance.
Therefore, users aren't able to select a specific form nor protocol
This needs to be implemented.

A possible solution / workaround for now: before consuming the TD remove all form elements and only leave the desired one.

When users can select the form/ protocol, the dynamic- and staticTiming elements need to be added to the specific form element.

from Readme.md:

(+) Refactor: Deleting / Adding / Merging sidebar elements: strict interface to add / remove in data and in GUI 

Some atoms are named like aButtonConfig whereas some are named like aConfigButton. It will be easier to navigate if they are always named from generic to specific, i.e. like aButtonConfig

The UI interactions are generated in the same order as they are in the TD provided.
It would be nice to change this order via drag and drop (and save it).

@neniman: In my opinion this has a really low priority + it is time-consuming to implement it.

Add zeros to current time in statusbar to prevent different length of statusbar-time
Maybe even change the first part of the statusbar (according to other existing/popular statusbars).

Statusbar should be reworked anyway (e.g. history functionality, more output, etc.)
See also #30

Atm the 'editor' in the TD interface of W-ADE is only a textarea.
It should be replaced with a real JSON editor, including line numbers, collapsing lines, maybe highlighting.
This real JSON editor needs to be compatible with vue.

Make 'size' information more consistent/ valuable / more obvious. As it sometimes is the input value, sometimes the response value size, this should be made more transparent to the user.

Add some kind of code prettyfier.

Add Array and Object type support for the Interaction Results.

• Array support
• Object support

from Readme.md:

(x) Interaction Results: Array and Object type support