2183a93916
* Experimental. * Getting somewhere. * Good zooming behaviour. * Working timeline zooming & panning. * Clickable timestamps. * Dragging cursor * Timeline panning buttons. * Capping at current time. * Scale limits. * Better ticks. * Time tags fading in smoothly. * Removed seconds. * Better tick spacing. * Vertical panning as zooming. * Organizing the code.. * Replaced d3-zoom with native events. * Got rid of scaleX * More code beautified. * Almost done polishing the code. * Some cleanup. * Better request triggers. * More cleaning up. * Styled the timestamp input. * Final cleanup. * Update yarn.lock * Zoom tracking. * Animate timeline translations. * Fixed the PAUSE button glitch and updating the time control info. * Opacity fix and timeline arrows removed. * Fixed the red vertical bar. * Use preventDefault() on timeline scrolling.
Scope UI
Getting Started (using local node)
- You need at least Node.js 6.9.0 and a running
weavescopecontainer - Get Yarn:
npm install -g yarn - Setup:
yarn install - Develop:
BACKEND_HOST=<dockerhost-ip> yarn startand then openhttp://localhost:4042/
This will start a webpack-dev-server that serves the UI and proxies API requests to the container.
Getting Started (using node in a container)
- You need a running
weavescopecontainer - Develop:
make WEBPACK_SERVER_HOST=<dockerhost-ip> client-startand then openhttp://<dockerhost-ip>:4042/
This will start a webpack-dev-server that serves the UI from the UI build container and proxies API requests to the weavescope container.
Test Production Bundles Locally
- Build:
yarn run build, output will be inbuild/ - Serve files from
build/:BACKEND_HOST=<dockerhost-ip> yarn run start-productionand then openhttp://localhost:4042/
Coding
This directory has a .eslintrc, make sure your editor supports linter hints.
To run a linter, you also run yarn run lint.
Logging
To enable logging in the console, activate it via localStorage in the dev tools console:
localStorage["debug"] = "scope:*"
The Scope UI uses debug for logging, e.g.,:
const debug = require('debug')('scope:app-store');
debug('Store log message');
Gotchas
Got a blank screen when loading http://localhost:4042?
Make sure you are accessing the right machine:
If you're running yarn start on a virtual machine with IP 10.0.0.8, you need to point your browser to http://10.0.0.8:4042.
Also, you may need to manually configure the virtual machine to expose ports 4041 (webpack-dev-server) and 4042 (express proxy).