mirror of
https://github.com/weaveworks/scope.git
synced 2026-03-04 02:30:45 +00:00
69fd397217
* Added resource view selector button * Showing resource boxes in the resource view * Crude CPU resource view prototype * Improved the viewMode state logic * Extracted zooming into a separate wrapper component * Split the layout selectors between graph-view and resource-view * Proper zooming logic for the resource view * Moved all node networks utils to selectors * Improved the zoom caching logic * Further refactoring of selectors * Added sticky labels to the resource boxes * Added panning translation limits in the resource view * Renamed GridModeSelector -> ViewModeSelector * Polished the topology resource view selection logic * Search bar hidden in the resource view * Added per-layer topology names to the resource view * Made metric selectors work for the resource view * Adjusted the viewport selectors * Renamed viewport selector to canvas (+ maximal zoom fix) * Showing more useful metric info in the resource box labels * Fetching only necessary nodes for the resource view * Refactored the resource view layer component * Addressed first batch UI comments (from the Scope meeting) * Switch to deep zooming transform in the resource view to avoid SVG precision errors * Renamed and moved resource view components * Polished all the resource view components * Changing the available metrics selection * Improved and polished the state transition logic for the resource view * Separated zoom limits from the zoom active state * Renaming and bunch of comments * Addressed all the UI comments (@davkal + @fons) * Made graph view selectors independent from resource view selectors
64 lines
1.5 KiB
JavaScript
64 lines
1.5 KiB
JavaScript
import { createSelector } from 'reselect';
|
|
|
|
import {
|
|
CANVAS_MARGINS,
|
|
DETAILS_PANEL_WIDTH,
|
|
DETAILS_PANEL_MARGINS
|
|
} from '../constants/styles';
|
|
|
|
|
|
export const canvasMarginsSelector = createSelector(
|
|
[
|
|
state => state.get('topologyViewMode'),
|
|
],
|
|
viewMode => CANVAS_MARGINS[viewMode] || { top: 0, left: 0, right: 0, bottom: 0 }
|
|
);
|
|
|
|
export const canvasWidthSelector = createSelector(
|
|
[
|
|
state => state.getIn(['viewport', 'width']),
|
|
canvasMarginsSelector,
|
|
],
|
|
(width, margins) => width - margins.left - margins.right
|
|
);
|
|
|
|
export const canvasHeightSelector = createSelector(
|
|
[
|
|
state => state.getIn(['viewport', 'height']),
|
|
canvasMarginsSelector,
|
|
],
|
|
(height, margins) => height - margins.top - margins.bottom
|
|
);
|
|
|
|
const canvasWithDetailsWidthSelector = createSelector(
|
|
[
|
|
canvasWidthSelector,
|
|
],
|
|
width => width - DETAILS_PANEL_WIDTH - DETAILS_PANEL_MARGINS.right
|
|
);
|
|
|
|
export const canvasDetailsHorizontalCenterSelector = createSelector(
|
|
[
|
|
canvasWithDetailsWidthSelector,
|
|
canvasMarginsSelector,
|
|
],
|
|
(width, margins) => (width / 2) + margins.left
|
|
);
|
|
|
|
export const canvasDetailsVerticalCenterSelector = createSelector(
|
|
[
|
|
canvasHeightSelector,
|
|
canvasMarginsSelector,
|
|
],
|
|
(height, margins) => (height / 2) + margins.top
|
|
);
|
|
|
|
// The narrower dimension of the viewport, used for the circular layout.
|
|
export const canvasCircularExpanseSelector = createSelector(
|
|
[
|
|
canvasWithDetailsWidthSelector,
|
|
canvasHeightSelector,
|
|
],
|
|
(width, height) => Math.min(width, height)
|
|
);
|