Commit Graph

44 Commits

Author SHA1 Message Date
Simon Howe
af3f18b933 Don't draw svg labels when we don't need them.
Having the DOM nodes w/ display:none is still expensive. We only need
them briefly for svg export.
2016-05-11 18:08:59 +02:00
David Kaltschmidt
749571ebe9 Review feedback
* Fix node-details-test for search
* Label spacing and matched text truncation
* Delete pinned search on backspace, add hint for metrics, escape % in URL
* Fix text-bg on node highlight
* Added tests for search-utils
* Fix matching of other topologies, added comment re quick clear
* s/cx/classnames/
* Ignore MoC keys when search in focus, blur on Esc
* Fixes search term highlighting on-hover
* Fix SVG exports
* Fine-tuned search item rendering
* Fixed search highlighting in the details panel
* Dont throb node on hover
* Hotkey for search: '/'
* Keep focus on search when tabbing away from the browser
* bring hovered node to top
* background for search results on hover
* fixed height for foreign object to prevent layout glitches
* Dont blur focused nodes on search
* More robust metric matchers
* More meaningful search hints
2016-05-11 18:08:59 +02:00
David Kaltschmidt
3ee802a516 Search all fields by default, gray out nodes if no match 2016-05-11 18:08:59 +02:00
David Kaltschmidt
5a325e46fa Search on canvas
* adds a search field next to the topologies
* highlight results on canvas as you type
* non-matching nodes are grayed out
* "prefix:" limits search to field label
2016-05-11 18:08:59 +02:00
David Kaltschmidt
96aae9bc99 Migrate from Flux to Redux
* better state visibility
* pure state changes
* state debug panel (show: crtl-h, move: ctrl-w)
2016-04-27 17:21:46 +02:00
Simon Howe
dcfb7f0c2c Fixes flickering when mouse moves between nodes labels
w/ a secret rect!
2016-04-12 12:45:09 +02:00
Simon Howe
fd193d7edd Untruncate only the hovered node's text, not its adjacents. 2016-04-12 10:28:16 +02:00
Simon
689e06b216 Merge pull request #1259 from weaveworks/1244-focused-node-size
Don't enlarge focused nodes.
2016-04-11 15:34:32 +02:00
Simon Howe
b9ce725561 Don't enlarge focused nodes.
- Calculate size based on number of nodes that come up into the
  selection area.
2016-04-11 15:11:03 +02:00
David Kaltschmidt
c5ea970674 Dont trunctate node labels on hover
* makes it easier to read long node labels on demand
2016-04-11 11:59:04 +02:00
David Kaltschmidt
d520cffec7 Performance tweaks
Add debug.html to show toolbar

Perfjankie test runner

Playing w/ the pure mixin for perf. improvements

* Works well! Smoother zooming/panning when things have settled.
* Extract node movement to node-container, make nodes pure

Extracted node chart elements into own components

Keep control objects immutable while in components

Keep layout state objects alive

Made other components pure, removed mixin from stateless components

Remove font size adjustment from scaling

Fix zoomscale

Move node transform to node

* makes more sense there because the coords are rounded in the container

dynamic coords precision based on topology size

Make edge points immutable

Remove nodes maximum for layout engine

Dont send all canvas state down to next component

moving layout handling back to nodes-chart.js

Omit some props for edges/nodes, dont animate edges on low precision

Moved AppStore access out of lower components
2016-04-05 15:45:13 +02:00
Tom Wilkie
7e2e4c9c45 Fix spelling mistakes in the codebase. 2016-03-23 10:51:27 +00:00
David Kaltschmidt
c517a6cf5d Downgrade react-motion
* caused lots of lag when dev tools were open
2016-03-17 18:11:53 +01:00
David Kaltschmidt
e4270f69b7 Upgraded dev deps and linted JS according to latest airbnb rules 2016-03-15 18:09:45 +01:00
David Kaltschmidt
658a38f40a Upgrade npm app dependencies 2016-03-15 13:45:57 +01:00
Simon Howe
569ca9d3d9 Pentagon -> Heptagon! 2016-02-25 16:27:13 +01:00
Simon Howe
292a56dc1d Adds support for the septagon node shape 2016-02-25 16:05:50 +01:00
Simon Howe
54988c1101 Revert "Testing out more shapes."
This reverts commit 9a2504119def6b9afb1ac5897655793a84754152.
2016-02-22 12:42:37 +01:00
Simon Howe
d3283555b9 Testing out more shapes. 2016-02-22 12:42:36 +01:00
David Kaltschmidt
476b7917e4 Let shape be determined by backend 2016-02-22 12:42:36 +01:00
Simon Howe
a34d9c97b8 Adds node-shapes to the canvas
- circle
- rect (w/ radius)
- fluffy cloud shape
- hexagons
- stacks
2016-02-22 12:42:36 +01:00
Simon Howe
2c74196c1c Fixes host node/details panel color mismatch
- 'label_major' has been changed to 'label' in the details api response.
- getNodeColorDark was giving up too early if a rank wasn't provided.
  The topo diagram which uses getNodeColor will select a color even w/
  no rank. Hosts don't have ranks at the mo.
2016-01-29 11:26:59 +01:00
David Kaltschmidt
d39fd847b7 Details Panel UI Redesign
Refactored nodedetails to support multiple data sets, probably broke some tests
  Allow api requests to out-of-view topologies
  Fix ESC behavior with details panel
  Stack details panel like cards
  Details pain side-by-side
  Details panel piles
  Fix node details table header styles
  Render load and not-found captions like relatives
  Fix topology click action
  Make node detail tables sortable
  Grouped metrics for details health
  Group metrics in same style
  Link node details children
  Fix scroll issues on double-details
  Fix DESC sort order for node details table
  Save selected node labels in state - allows rendering of node labels from other topologies before details are loaded
  Change detail card UX, newest one at top, pile at bottom
  Details panel one pile w/ animation
  Sort details table nodes by metadata too
  Animate sidepanel from children too
  Fix radial layout
  Dont set origin if a node was already selected, suppresses animation
  stack effect: shift top cards to the left, shrink lower cards vertically
  Clear details card stack if sibling is selected
  Check if node is still selected on API response
  Make detail table sorters robust against non-uniform metadata
  Dont show scrollbar all the time, fix sort icon issue
  Button to show topology for relative
  Overflow metrics for details panel health
  Fix JS error when no metrics are available for container image details
  Column-based rendering of node details table
  Fix JS tests
  Review feedback (UI)
2016-01-19 16:47:05 +01:00
David Kaltschmidt
6b445466ef Move JS to ES2015
Refactored mixins into utils

ES2015 module exports

ES2015-style imports

WIP Fixing tests

Fixes tests after es2015 code migrations.

We we're require()ing an ES2015 module[1]. Have to make sure you account
for the .default in this case.

[1] We had to use ES5 `require` in Jest:
(https://github.com/babel/babel-jest/issues/16)
2015-12-01 14:35:22 +01:00
David Kaltschmidt
bf9b5bf947 Procedural color creation for nodes
* color hue is based on the first 2 letters of node rank
* color lightness is based on the first 2 letters of node label
2015-11-20 14:47:05 +01:00
David Kaltschmidt
9fb3099a89 Dont scale graph on resize, only selected nodes 2015-11-12 17:22:33 +01:00
David Kaltschmidt
117f8b8444 Fix sublabel sizing 2015-11-12 16:18:19 +01:00
David Kaltschmidt
3ca7415d47 Always center selected node
* dont allow panning while node is selected
* Shift nodes, not canvas on circling selection
* scale nodes on window resize
* Scale selected node to viewable size
2015-11-12 13:59:26 +01:00
David Kaltschmidt
acbf8a665d Upgrade eslint, react and react-motion
* get rid of material-ui
* reduced bundle size by 20%
2015-11-11 15:51:27 +01:00
David Kaltschmidt
abcb94b1f1 UI for controls.
- Make backend address configurable via env variable
- `BACKEND_HOST=1.2.3.4:4040 npm start` points the frontend to the app on that server. Just for development
- Render control icons
  - removed close x for details panel
  - added control icons in its space
  - closing of panel still works by clicking on same node, or background
- Dont allow control while pending
- Render and auto-dismiss control error
- Make tests pass
2015-11-06 17:44:28 +00:00
David Kaltschmidt
1cce7e514e animate node zoom on focus 2015-09-18 17:58:34 +02:00
David Kaltschmidt
5b4e084c01 Dont cover other nodes on radial layout
* shift center of radial layout a bit
* shrink blurred nodes
* blow up focused nodes a bit
2015-09-16 21:05:12 +02:00
David Kaltschmidt
2c554fe273 blur nodes that not selected nor adjacent 2015-09-09 18:12:02 +02:00
David Kaltschmidt
8dbb13a972 slow animation down a bit 2015-09-08 14:00:52 +02:00
David Kaltschmidt
c0b0e5f807 animate edges via react-motion
edges can have different point counts between updates, that throws
Spring off, therefor I'm making sure the number of points is always 10.
If anyone can find out how many points dagre maximally puts, please
change this (my guess is max. 4).
2015-09-08 13:23:46 +02:00
David Kaltschmidt
4584bed4b7 WIP use react-motion to animate edges 2015-09-08 13:23:46 +02:00
David Kaltschmidt
44e62e3c19 color nodes by rank 2015-09-04 11:31:17 +02:00
David Kaltschmidt
a439c7ca97 trim node titles in graph via JS
fix for #413

Sadly, the title attribute to show something on hover does not work in
SVG. So we might need another solution for that.
2015-09-02 18:53:04 +02:00
Tom Wilkie
498bfd4b18 Make pseudo nodes clickable. 2015-08-24 14:05:01 +00:00
David Kaltschmidt
b9563f35d7 Styled pseudonodes pale and remove interaction 2015-06-12 09:23:32 +02:00
David Kaltschmidt
e6f4a8ce71 highlight connected nodes on hover 2015-05-29 16:53:05 +02:00
David Kaltschmidt
7d1ee40a2b Fixed lint errors in all js files
- Also added linter configuration, and make linter fail on error
- fixing ES6 errors and added ES6 transformer
- gulp target to try local build
- linted gulpfile
- cant hook into gulp lint yet, because gulp does currently not support
  ES6 which some rules demand, since gulp cant transpile itself, we have a
  chicken and egg problem.
- ES6 transpiler for test runner
- removed old linter config
- adapted editorconfig to reflect linter config
2015-05-28 15:07:13 +00:00
David Kaltschmidt
99c76dc4c8 fix indentation to 2 spaces in js/less/html 2015-05-28 15:05:01 +00:00
Tom Wilkie
d50e827fd5 Intial commit 2015-05-19 10:02:02 +00:00