openskope / skope-interface

The new SKOPE web portal interface.

SKOPE Web App

** ARCHIVED **

This repository and UI for SKOPE web services has been deprecated in favor of a new version developed at https://github.com/openskope/skopeui

To develop the app locally

Checkout this repo instead: https://github.com/openskope/skope-development, and follow the instructions in its readme.

To deploy the app

• Automated building is setup at https://hub.docker.com/r/openskope/webapp/.

• But if you need to manually build:

  • Run:

    bash build.manual.sh

    to build the Docker image. The new image will have tag openskope/web-app:<TAG>.

  • If you are on the master branch, TAG is the version inside meteor-app/package.json.

  • Otherwise, TAG will be the combination of the branch name and commit hash.

    See build.manual.sh for details.

  • You can also specify a custom tag with:

    TAG=x.y.z bash build.manual.sh

  • If needed, run:

    docker push openskope/web-app:<TAG>

    to push the new image to DockerHub.

• Head to the server, pull the image from DockerHub and run.

  Here's an example of the run configuration:

  #!/bin/bash
  
  TAG="1.2.3"
  repo="openskope/web-app"
  container_name="skope-webapp"
  host_port=8080
  root_url="http://staging.openskope.org/app"
  
  docker pull $repo:$TAG
  docker rm -f $container_name
  docker run --detach \
          --restart always \
          --name $container_name \
          --network=apps-bridge \
          -v /path/to/custom/config.json:/usr/share/meteor-app/app-settings.json
          --env MONGO_URL="mongodb://mongodb/$container_name" \
          --env PORT=3000 \
          --publish $host_port:3000 \
          --env ROOT_URL="$root_url" \
          $repo:$TAG

  You'll want to use a custom settings file. See meteor-app.settings.default.json in the root directory to learn about the configurable options.

skope-interface's Issues

In the model page, form validation should always block advancing.

Currently when submitting the form for each step, validation errors will block advancing. However, clicking on any step can still get around the blocking. This should be changed so clicking can only go back but not go forward if there's any validation error.

In Workspace, User would want to make the result easier to find/search in the future.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
Could be as simple as a "favorite" button.

User would like to compare the results of two runs.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Deploy current master

Target commit: 3d2c66a

• Create new OpenStack VM.
• Create new Data Volume.
• Attach Data Volume to VM.
• Write Dockerfile for app.
• Build and deploy docker image to DockerHub.
• Setup VM and run app container.

Compose result tiles

Result tiles should have the following content:

• title (1)
• model type
• creation date (yyyy-mm-dd)
• thumbnail
• creator
• ranking
• status
• period (2,4)
• input types (3,4)
• result types (3,4)

(1) Title should be a link as provided by the view data field
(2) Period is a new metadata field that describes the starting and ending date of the model in human readable format.
(3) Input type and result types are a list of nicknames that describe the types of data used as inputs and outputs of the model. This information is of lesser importance perhaps indicated by a smaller font.
(4) In the case of non-modeled data (i.e. model type == Data), period, input types, and result types may be empty strings in which case they should not be displayed.

In addition to the metadata displayed within a tile, a series of quick actions should be available along the bottom of the tile. Each quick action is represented by a link within the metadata. If a metadata field is empty the quick link should not be displayed.

Quick actions include -

• View - navigate to workspace page (use title as anchor)
• Info - navigate to information page on site
• Reference - navigate to external site
• Download - download data to host
• Create From - navigate to model form

Search Interface quirks

• Searching "https" should not match any urls.
• Other similar things that shouldn't match any nonsense.

Setup LESS/CSS linting

Running npm run lint should also lint any stylesheets.

Missing core-js npm package in meteor app?

I got the Meteor app running locally on both MacOS and Windows and am really impressed. I did not realize how much functionality was already implemented!

I did run into one issue on both MacOS and Windows that was easy to diagnose and resolve:

When running the meteor app for the first time by running the run-app.sh script in the skope-interface/local directory as instructed in the README, I got a blank page loading after http://localhost:3000/app in the browser (Safari, Chrome, and Edge all behaved the same way). Using the developers tools in Chrome I noted this error message in the console:

Uncaught Error: The core-js npm package could not be found in your node_modules 
directory. Please run the following command to install it:

  meteor npm install --save core-js

    at runtime.js (ecmascript-runtime-client.js?hash=236033036aa3b0629009d2af14113e2413052567:46)
    at fileEvaluate (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:343)
    at require (modules-runtime.js?hash=8587d188e038b75ecd27ed2469a52b269e38fb62:238)
    at ecmascript-runtime-client.js?hash=236033036aa3b0629009d2af14113e2413052567:97
    at ecmascript-runtime-client.js?hash=236033036aa3b0629009d2af14113e2413052567:110

Running the command meteor npm install --save core-js in the skope-interface/local directory where the run-app.sh script is located and restarting the web app had no effect (its not the actual meteor project directory). Instead I had to cd to the skope-interface/meteor-app directory and perform meteor npm install --save core-js. After doing this and restarting the app with the run-app.sh script the skope app appeared in the browser window and behaved correctly.

Is there something wrong with my local compute environments that requires the core-js package to be added explicitly to the meteor app? There are some warnings about invalid npm packages when starting the app (but these messages didn't change after installing the core-js package):

$ bash run-app.sh 
npm WARN Invalid version: "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/invariant/-/invariant-2.2.2.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.4.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/loose-envify/-/loose-envify-1.3.1.tgz"
npm WARN Invalid version: "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
[[[[[ ~/GitRepos/skope-interface/meteor-app ]]]]]

=> Started proxy.                             
                                              
Unable to resolve some modules:

  "indexof" in /Users/tmcphill/GitRepos/skope-interface/meteor-app/node_modules/rc-slider/node_modules/component-classes/index.js (web.browser)
                                              
If you notice problems related to these missing modules, consider running:
                                              
  meteor npm install --save indexof           
                                              
=> Meteor 1.6 is available. Update this project with 'meteor update'.
=> Started MongoDB.                           
=> Started your app.                          

=> App running at: http://localhost:3000/app

I'll let you know if I run into the same issue on Ubuntu and Centos. Thanks!

Receive a state object in workspace from searchpage to determine the content

User should be able to sort search results in different ways.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Decouple Workspace with Charts

Currently the Workspace component and Charts are tightly coupled. The Workspace component has to manage the state of the pop-up window. We need to offload those responsibilities so Workspace is much easier to understand.

Consider this strategy:

• State:

  {
    workspace: {
      chartsWindow: null
    },
    ...
  }

• Action WORKSPACE_INSPECT_POINT spawns new pop-up windows as needed or reuses old ones, and saves the reference to the window in the states.
• Workspace component has to trigger another action to clean things up.

When needed, user could expand the search result items to reveal more details, without leaving the page.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Close window function

I added this to render() -> return in imports/ui/pages/workspace/component.js:

<div className="welcome_info" display={welcomeWindowDisplay}>
            <h3>Model Run Metadata</h3>
            <button onClick={this._bound_closeWelcomeWindow}>Close</button>
</div>

Is there a simple way to define an onclick function that will toggle the welcomeWindowDisplay variable without editing 5 files?

Incorrect routing

Reproduction:

1. Go to http://skope-dev.roger.ncsa.illinois.edu/app.
2. Then go to any 404 page, say http://skope-dev.roger.ncsa.illinois.edu/app/foo.
3. Click on the "GO TO HOME" button.
4. See how the url is now http://skope-dev.roger.ncsa.illinois.edu/app/app.

User would like to define an area of interest in Workspace for quick view switching.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
For example, User would like to quickly switch from landmark A to landmark B.

Have an internal description for every search result.

UI ReactJS Source

Styling UI Component
https://material.io/components/web/docs/authoring-components/#who-this-document-is-for
Slider:
http://www.material-ui.com/#/components/slider
React Component
http://react-component.github.io/badgeboard/

Implementation in meteor app
Material Web Component
https://github.com/material-components/material-components-web
MUICSS
https://www.muicss.com/

Updating...

Turn radio buttons into checkboxes

Workspace needs a toolbar for common controls.

Things could go into the toolbar:

• Help
• Info
• Metadata
• Contextual controls

App Prototyping Exercise - Block Window Closing

Participate only if you find this interesting and/or challenging.

Make a simple app that would prevent the user from closing the window for at least once, but conditionally.

Goals:

0. Use React+Redux properly.
1. In the default state, the window should be able to be closed.
2. In an updated state, the window should not be able to be closed on the first attempt. But maybe closable if the user does a second attempt.
3. Optional Extra feature: try to make the window impossible to close.
4. Optional Requirement: Use CodePen if possible.
5. Optional Requirement: Use as little code as possible.
6. Optional Requirement: Make the app as realistic/meaningful as possible.

Potential scenario:

Say the user is editing something on the interface. If the changes are not saved, prevent the user from closing the window so he/she does not lose the changes.

Report your progress and questions below.

Have fun!

User would want to download data (result files) from Workspace.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
Could be a download button that links to the download page.

In Workspace, User would want to perform another model run with similar configs.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

User should be able to filter the search results with some spatial constraints.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
For example, for a specific bounding box, find all search results that collide with it or are contained within it.

Everything needs a help button

• Search page (may need multiple ones)
• Any modal
• Workspace
• Model page
• etc...

Put the info button in the toolbar.

"Reset Filter" doesn't clear spatial filter

Enable User Accounts

While much of the site is open, the SKOPE site will have users who should be able to authenticate, manage preferences, create new model runs, delete old model runs, comment and rate.

Consider providing input fields for filter values

Populate the Search Page Filtering Panel

The filtering panel should have the following elements:

• model name (title: Model)
• creator (title: Creator)
• status (title: Status)
• rank (title: Range, range=1-5)
• input types (title: Inputs)
• result types (title: Results)

Note: this issue has been edited to remove date fields. Date field filter will be handled at a later stage.

When possible, pages should have login controls.

In Workspace, User would like to see the metadata of the result.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Create static model page for paleocar

Implemented on 'modelpage'.

Workspace map dimensions

After resizing the map, its contents are squeezed. How can I make them adjust automatically or at least change their dimensions?

Result Component version2

https://codepen.io/stella123/pen/eRwxOW?editors=0110

Split workspace page into smaller components

Post below if you have any questions.

SearchKit overriding component

• The documentation of overriding component in SearchKit http://docs.searchkit.co/stable/setup/extending-components.html

• Source document --> Facet Filter Component
  https://github.com/searchkit/searchkit/blob/develop/src/components/search/filters/facet-filter/FacetFilter.tsx

Search Kit Exploration

Let's put down relevant resources, questions, discoveries and notes in this thread.

Model button on homepage should be removed

Right now, there's a Model button that leads to a form that collects the parameters for a PaleoCAR run. The original idea of this box on the front page with text "Contribute your paleoenvironmental model!" was to link to information on contributing an entirely new model to SKOPE. We haven't decided what that information will look like yet, but will probably be an page of text at first.

If we remove this button, there may be no other way to navigate to the PaleoCAR run configuration right now, but that's a separate issue.

Workspace should load data based on input data

• /workspace?dataset={id} where id specifies what dataset we are trying to load.
• When no valid dataset id is provided, workspace should show a proper warning/error message.
• Whenever dataset id is changed, workspace should reset the state and restart from the beginning.
• When the UI config data (manifest) for that dataset is being loaded, workspace should show a loading prompt.
• When loading the manifest encounters an error, a proper warning/error message should be displayed.
• Workspace should dynamically use different layouts according to the manifest.
• The current default layout should load layers and other info dynamically from the manifest.

Development branch: workspace-use-real-loading-logic

Setting extent on `map-view` doesn't result in proper zoom level.

Center seems to be set correctly but zoom level is wrong. You end up getting this:

Add a button to bring back info window

Use new mock data in search page

Updated

Use node load-data.js data.csv to import csv files exported from the spreadsheet.

The load-data.js helper script is available on master under the elasticsearch directory.

Searchpage Component: Resultlist

Version 1: https://codepen.io/xma29/pen/MoMLpo Demo: Result-item
Version 1: https://codepen.io/xma29/pen/XgGEXX Demo: Result-item-timeline (right side)

What docker image should local/elasticsearch/docker-run.sh start?

I'm setting up to run the skope web app on my various development machines. When I try to start elasticsearch using the command 'npm start' in the local/elasticsearch directory I get this output:

$ npm start

> [email protected] start /mnt/c/Users/tmcphill/GitRepos/skope-interface/local/elasticsearch
> bash docker-run.sh

Unable to find image 'elasticsearch:2' locally

There is a commented line in the docker-run.sh script that indicates that the image might be
docker.elastic.co/elasticsearch/elasticsearch:5.5.0, and indeed the command below does download and run a docker container running elasticsearch:

docker run docker.elastic.co/elasticsearch/elasticsearch:5.5.0

Is this the correct version to use, and do we want to host our own image at Docker Hub?

User would want to save the visualized layers.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
The saved image(s) could be either:

• a merged image,
• or one image per layer.

Model Page

TODO List:

• Navbar name correction from "Model" to "PaleoCAR"
• Prediction Years (400,100- 300)
  Add Components:
• Scenario Name
• Description
• Map
• Submit button

Remove Components:

• Latitude
• Longitude

Layout Design:

• Consistency with Workspace Page

Use prettier sliders written as React components

Display the charts in a pop-up window

Pros: users can resize the pop-up window anyway they want, to make them overlap or not.
Cons: pop-ups might be blocked by the browser, so some checking and hints could be helpful UX-wise.

Notes:

• You can actually name the pop-up window so you reuse it later instead of opening new ones every time.

Make sure workspace page has basic layout components like the nav bar

Comment below if you have any questions.

User would like to read and post comments about the model run.

This is a User Story. It needs to be expanded with context and detail. Create separate PRs for feature implementations that support this User Story. The goal here is to develop and finalize the story of how the user would accomplish the task.

Note:
Use the existing commenting system on Clowder.