Giter VIP home page Giter VIP logo

bluesky / bluesky-webclient Goto Github PK

View Code? Open in Web Editor NEW
12.0 10.0 8.0 76.69 MB

A React Material UI based web client developed in TypeScript to enable acquisition of data on the web with bluesky

License: BSD 3-Clause "New" or "Revised" License

Shell 0.20% HTML 1.52% TypeScript 97.55% Emacs Lisp 0.07% JavaScript 0.60% Dockerfile 0.07%
bluesky bluesky-webclient bluesky-queueserver hacktoberfest hacktoberfest2021

bluesky-webclient's Introduction

TypeScript React app using Material UI for a Bluesky queueserver client.

Install it:

yarn

Run with default variables:

yarn start

Run with custom REACT_APP_BEAMLINE variable: (changes the banner)

REACT_APP_BEAMLINE=beamline_name yarn start

To use the Preview server for displaying live plots and thumbnails:

Start kafka (MacOS instructions)

brew install kafka
brew services start kafka
brew services start zookeeper
brew services list  # to make sure both services have been started

Start the queueserver RE-manager with kafka.

start-re-manager --kafka_server 127.0.0.1:9092 --kafka_topic widgets_test.bluesky.documents

Start the queueserver HTTP server.

uvicorn bluesky_queueserver.server.server:app --host localhost --port 60610

Set environment variable for preview directory.

export THUMBNAIL_DIRECTORY=${TMPDIR}/bluesky_widgets_example

Start the kafka-consumer that generates the previews.

git clone https://github.com/bluesky/bluesky-widgets
cd bluesky-widgets
pip install -e .
python bluesky_widgets/examples/kafka_figures.py

Copy this file locally.

https://gist.github.com/gwbischof/26aedaec7cf997bde2b1cd0def757612

Start the preview server to serve the produced images.

uvicorn BlueskyPreviewServer:app

The client proxies to the server on port 60610, if it is running on a different port you will need to change that in the package.json (or just switch the server port to match using --port 60610 when launching it).

The queue server API prefix is set up to default to /qs when developing against pods or a deployed version, this can be overridden by creating a file in the root of the source tree .env.local where you define overrides to the entries in the .env file.

See the documentation on details about the variables.

bluesky-webclient's People

Contributors

cryos avatar dmgav avatar gwbischof avatar jklynch avatar junaishima avatar mrakitin avatar tacaswell avatar untzag avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

bluesky-webclient's Issues

Integrating with facility API - showing useful data

Creating this as a tracker for what the acquisition web client might want to pull from a facility API. These are just initial ideas that could use more input from @stuartcampbell and @JunAishima. Initial ideas:

  • Obtain a data_session_id from the facility API for the current set of runs
  • Obtain related data to the session such as the proposal_id, saf_id, etc
  • Obtain and display useful beamline information in the interface such as name, location, contact details for relevant staff, emergency phone/email in case of issues, current status of ?

Ideally some of these things would be obtainable in prototype API that might be hardwired, along with the link to get it, i.e. the queueserver would certainly know a beamline identifier such as its FXI, HXN, etc, that would then be used to call facility API to get more information to display about the active beamline. The beamline and user identifiers might be enough to get the proposal identifier, etc.

General UI polish

Task for 5LS demo.

  • Make bluesky-web-client console logging quieter or more configurable
  • If anything is in the History, the web app burns 0.5 CPU doing nothing
  • More things Tom noticed…

Enable CI for this repo

It would be great to enable CI for this repo (on TravisCI or Azure Pipelines). We'll need the manager/server running to test the client side.

Establish TypeScript/JavaScript code style conventions

Now that more of us are writing TypeScript/JavaScript code we should establish coding conventions, and maybe look at how we can automatically use some of the conventions. I would suggest using camelCase for functions/variable names, and capitalized CamelCase for class names. I think four spaces is conventional, and we should probably use either lower case filenames or (as seems more prevalent) CamelCase.tsx for classes etc. I already see Python snake_case sneaking in and making things look inconsistent.

Collapse button for items in the History list

We need a "Collapse" button to minimize all open cards in the History list to quickly close potentially a large number of expanded cards.

We discussed with @gwbischof that having an "Expand" button may bring an expensive operation, so at this time we will not be adding it. Alternatively, the "Expand" button may maximize only visible cards. That's an acceptable option.

Make the history of plans panel wider + add table

We need better-structured data displayed in the history of plans. The panel should be wider, or expandable, and should contain records in a tabular form, so that not only a uid[:8] is displayed, but also a timestamp and other useful info (scan_id, detectors, motors, etc.)

pip installs as UNKNOWN

With pip install git+https://github.com/bluesky/bluesky-webclient, this package installs as UNKNOWN-0.0.0.dist-info.

Since it's not yet on PyPI or a conda package, I mindlessly installed with pip from github, as above. The packaging needs attention. Realize this is pre-release but the concept has captured the attention of the APS now.

Login

Get login working

Detailed view of the queue

Make another object like PlanList that also shows detailed information about each queue item without the need to expand.

"Open Environment" button on Home page is misfunctional

When it's pressed on the "Home" page, the following message is appearing in the uvicorn log:

INFO:     127.0.0.1:65479 - "POST /environment/undefined HTTP/1.1" 404 Not Found

It works fine while pressed on the "Acquire" page.

Submitting and running a plan

Now that we have a base it is important to get to a minimum viable product defined by:

  • Button to add a plan
  • Ability to choose between allowed plans
  • Ability to edit some parameters in the plan
  • Creation of an acquisition environment
  • Starting, pausing, stopping the processing of the queue
  • Viewing the currently executing plan

There are other features that must follow, and pretty soon after this it will be useful to sketch this out for a minimal real beamline. This doesn't attempt to visualize any data at this stage, and concentrates on what already appears to be presently available as part of the queueserver API.

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.