Add jquery frontend #41

jan-xyz · 2017-10-20T16:36:33Z

This Pull Request adds the frontend at 127.0.0.1:5000/v2 as a single page web app. I tried to mimic the original website as much as possible in terms of elements.

fixes #24

I copied the layout from the existing files and begin to clean that stuff up so that it is easier to read and work with.

This isn't fully working yet. I still have to add the actual settings to it and make it work on the initial loading of the page. Currently you have to at least select something in the box before getting boxes for the options.

The UI loads now all necessary elements to properly send a visualize request.

Fixes the problem that the first element has 'undefinded' prepended to the string.

This new layout has all references to app_state removed in order to pull this information dynamically via REST from the backend.

for now it only uploads a single file and no information about the visualizer to use. Next step is to implement the backend for a post to visualize with a picture attached.

It is still without the visualization settings

The partial occlusion visualizer uses a different property than the others when delivering the image. This should be fixed in the backend.

…-jquery-frontend

By switching to blueprints for this as well I am able to use the factory pattern which is essential for Selenium testing.

Currently the integration tests have to run first. It's weird but the tests will hang if this is executed last. That is the reason why it has the *_a_* in it. I assume there is some collision in the fixtures that causes this behavior, probably related to app shutdown.

This is still broken in the travis file. We need to download a webdriver first.

rhsimplex · 2017-12-05T09:55:07Z

Yes you can definitely use an image diff. That would be a really great unit test that would probably prevent a lot of bugs.

I defer to your judgement on how to do front end testing. When you make a decision let me know and I'll try to help you integrate it into our CI. Maybe open a new issue if you want to discuss more =)

Is this PR ready for review or are you still planning some other stuff?

jan-xyz · 2017-12-05T12:33:35Z

I have a half working Selenium test in there. If you don't mind having it in master (it is currently disabled) then it's good to go. We can discuss the remainder in the new ticket (#42).

jan-xyz · 2017-12-05T12:37:20Z

#43 and #44 are also two tickets I created based on this discussion. I would start working on these tickets as my next project!

rhsimplex · 2017-12-08T12:59:09Z

Ok cool! I'll look through as soon as possible

This way it doesn't interfere with the unit tests and can also be triggered separately.

rhsimplex · 2017-12-15T17:15:35Z

Sorry for the delay, leaving for Christmas Monday and tons to do as usual =)

this still doesn't check parameters. relates to: #43

no checks of parameters relates to: #43

This only checks one set of settings as a reference check. relates to: #43

jan-xyz · 2018-01-01T19:27:55Z

This PR now also includes tests for #42 and #43 in a crude manner. The integration tests just check if the website builds up and the image diff tests are inspecting one set of settings and the default settings.

The integration tests are currently not part of the pipeline since I don't want to mess around with the .travis.yml too much. They can be run with pytest integration_tests if Firefox 57 and the correct geckodriver is installed. The travis file is already prepared for it and I would add the command to the script section if you permit.

jan-xyz · 2018-01-01T20:00:32Z

It looks like the reference images are exceeding the disk quota for travis docker images.

Edit: seems like this was en error on travis side not ours.

https://docs.travis-ci.com/user/build-stages/#Naming-your-Build-Stages

rhsimplex · 2018-01-04T11:09:44Z

Interesting -- is Travis still giving you problems? Do you want me to re-review now?

jan-xyz · 2018-01-04T11:46:04Z

Ready to review :)

rhsimplex · 2018-01-05T15:00:33Z

Classy stuff! I can't provide much review on the frontend files, but everything else looks good to me.

Next PR: replace the old frontend with this one??

jan-xyz · 2018-01-05T17:16:11Z

Sounds good, I'll add some more Selenium tests when doing the PR to make sure the frontend is properly tested.

Jan Steinke added 30 commits September 15, 2017 08:09

initial commit of Javascript front end

bb43ac6

implement getting list of visualisers from REST API

329f26d

clean up index.html for better readability

c198cd2

I copied the layout from the existing files and begin to clean that stuff up so that it is easier to read and work with.

dynamically add and remove vis settings boxes

80bcaef

This isn't fully working yet. I still have to add the actual settings to it and make it work on the initial loading of the page. Currently you have to at least select something in the box before getting boxes for the options.

follow a few best practices

5bd2aa4

only update the list once all elements are collected

74e5cb8

cache the visulalizer selector in the beginning and reference

ef4b258

trigger change event on visualizer selector once all vis are appended

a6d9f60

refactor AJAX calls into functions for better readability

320ebdb

move string containing new li elements into the appropriate scope

7a29cf6

remove bullet points in front of settings

5ac9d39

update jquery to the latest version

c355994

implement loading the setting options into the respective fields

d1a5979

The UI loads now all necessary elements to properly send a visualize request.

make sure elements for appending are properly defined.

efd5578

Fixes the problem that the first element has 'undefinded' prepended to the string.

reference new layout that doesn't have backend connection

76be7df

This new layout has all references to app_state removed in order to pull this information dynamically via REST from the backend.

further simplify the html document

e99591c

remove dependency on utility module from web frontend

33d4273

implement file uploading

52ee227

for now it only uploads a single file and no information about the visualizer to use. Next step is to implement the backend for a post to visualize with a picture attached.

request visualize via REST

0536e93

It is still without the visualization settings

add settings to query string

70416b7

add block for results

b7f352e

display input image when results come in

f2f2cd5

The partial occlusion visualizer uses a different property than the others when delivering the image. This should be fixed in the backend.

display probabilities

6c381d0

empty the probability list after every request

f0dc64c

append the output probabilities to the correct section

60580d7

fix reference to outputs according to latest API contract

cb4e2ae

display results based on the old layout

40c12e6

add selenium to test front-end

f401990

Merge branch 'master' of https://github.com/merantix/picasso into add…

242d67f

…-jquery-frontend

reduce the web app to only one document / remove layout.html

251fcb5

Jan Steinke added 4 commits December 4, 2017 20:56

refactor current website implementation to work with factory pattern

dafc5bf

By switching to blueprints for this as well I am able to use the factory pattern which is essential for Selenium testing.

rename app inside create_app to avoid shadowing the actual app

582aed3

Skip Selenium test

019e9f0

This is still broken in the travis file. We need to download a webdriver first.

Jan Steinke added 2 commits December 6, 2017 21:35

use firefox 56 instead of chrome for selenium tests

d98b862

fix requirements aka moving selenium to test_requirements

394533f

move integration test into its own step

6c8d088

This way it doesn't interfere with the unit tests and can also be triggered separately.

Jan Steinke added 6 commits December 31, 2017 17:13

fix typos and style warnings

6952f86

Add basic image verification

98aad69

this still doesn't check parameters. relates to: #43

verify output images

c40daff

no checks of parameters relates to: #43

Do not ask for confirmation when creating conda env

8b5c2d7

remove params from conda create

ef1ace6

verify output images based on settings parameters

21acb3a

This only checks one set of settings as a reference check. relates to: #43

Jan Steinke added 3 commits January 3, 2018 19:04

add integration tests to travis

303cfd8

put unit tests and integration tests into same stage

7b290a0

fix build stages according to tutorial

6c40f3f

https://docs.travis-ci.com/user/build-stages/#Naming-your-Build-Stages

rhsimplex merged commit 3d146b8 into merantix:master Jan 5, 2018

jan-xyz deleted the add-jquery-frontend branch February 9, 2018 19:12

jan-xyz mentioned this pull request Apr 9, 2018

Add image diff tests #43

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add jquery frontend #41

Add jquery frontend #41

jan-xyz commented Oct 20, 2017 •

edited

Loading

rhsimplex commented Dec 5, 2017

jan-xyz commented Dec 5, 2017

jan-xyz commented Dec 5, 2017

rhsimplex commented Dec 8, 2017

rhsimplex commented Dec 15, 2017

jan-xyz commented Jan 1, 2018

jan-xyz commented Jan 1, 2018 •

edited

Loading

rhsimplex commented Jan 4, 2018

jan-xyz commented Jan 4, 2018

rhsimplex commented Jan 5, 2018

jan-xyz commented Jan 5, 2018

Add jquery frontend #41

Add jquery frontend #41

Conversation

jan-xyz commented Oct 20, 2017 • edited Loading

rhsimplex commented Dec 5, 2017

jan-xyz commented Dec 5, 2017

jan-xyz commented Dec 5, 2017

rhsimplex commented Dec 8, 2017

rhsimplex commented Dec 15, 2017

jan-xyz commented Jan 1, 2018

jan-xyz commented Jan 1, 2018 • edited Loading

rhsimplex commented Jan 4, 2018

jan-xyz commented Jan 4, 2018

rhsimplex commented Jan 5, 2018

jan-xyz commented Jan 5, 2018

jan-xyz commented Oct 20, 2017 •

edited

Loading

jan-xyz commented Jan 1, 2018 •

edited

Loading