Added in summary panel of GUI 2 topo view
Change-Id: I5d325ff1dc2940e08ab9e6f970768b5fd0885e10
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.ts
index 56d62ab..c51af7a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/glyph.service.ts
@@ -190,19 +190,22 @@
}
addGlyph(elem: any, glyphId: string, size: number, overlay: any, trans: any) {
- const sz = size || 40,
- ovr = !!overlay,
- xns = this.fs.isA(trans),
- atr = {
- width: sz,
- height: sz,
- 'class': 'glyph',
- 'xlink:href': '#' + glyphId,
- };
+ const sz = size || 40;
+ const ovr = !!overlay;
+ const xns = this.fs.isA(trans);
+
+ const glyphUse = elem
+ .append('use')
+ .attr('width', sz)
+ .attr('height', sz)
+ .attr('class', 'glyph')
+ .attr('xlink:href', '#' + glyphId)
+ .classed('overlay', ovr);
if (xns) {
- atr.class = this.sus.translate(trans);
+ glyphUse.attr('transform', this.sus.translate(trans));
}
- return elem.append('use').attr(atr).classed('overlay', ovr);
+
+ return glyphUse;
}
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
index 6107d16..7510486 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/svgutil.service.ts
@@ -18,6 +18,34 @@
import { LogService } from '../log.service';
import * as d3 from 'd3';
+
+// --- Ordinal scales for 7 values.
+// TODO: migrate these colors to the theme service.
+
+// Colors per Mojo-Design's color palette.. (version one)
+// blue red dk grey steel lt blue lt red lt grey
+// var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
+// lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
+
+// Colors per Mojo-Design's color palette.. (version two)
+// blue lt blue red green brown teal lime
+const lightNorm: string[] = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+const lightMute: string[] = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+const darkNorm: string[] = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
+const darkMute: string[] = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
+
+const colors = {
+ light: {
+ norm: d3.scaleOrdinal().range(lightNorm),
+ mute: d3.scaleOrdinal().range(lightMute),
+ },
+ dark: {
+ norm: d3.scaleOrdinal().range(darkNorm),
+ mute: d3.scaleOrdinal().range(darkMute),
+ },
+};
+
/**
* ONOS GUI -- SVG -- Util Service
*
@@ -27,44 +55,13 @@
providedIn: 'root',
})
export class SvgUtilService {
- lightNorm: string[];
- lightMute: string[];
- darkNorm: string[];
- darkMute: string[];
- colors: any;
constructor(
private fs: FnService,
private log: LogService
) {
- // --- Ordinal scales for 7 values.
- // TODO: migrate these colors to the theme service.
- // Colors per Mojo-Design's color palette.. (version one)
- // blue red dk grey steel lt blue lt red lt grey
- // var lightNorm = ['#5b99d2', '#d05a55', '#716b6b', '#7e9aa8', '#66cef6', '#db7773', '#aeada8' ],
- // lightMute = ['#a8cceb', '#f1a7a7', '#b9b5b5', '#bdcdd5', '#a8e9fd', '#f8c9c9', '#d7d6d4' ],
-
- // Colors per Mojo-Design's color palette.. (version two)
- // blue lt blue red green brown teal lime
- this.lightNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
- this.lightMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
-
- this.darkNorm = ['#5b99d2', '#66cef6', '#d05a55', '#0f9d58', '#ba7941', '#3dc0bf', '#56af00'];
- this.darkMute = ['#9ebedf', '#abdef5', '#d79a96', '#7cbe99', '#cdab8d', '#96d5d5', '#a0c96d'];
-
-
- this.colors = {
- light: {
- norm: d3.scaleOrdinal().range(this.lightNorm),
- mute: d3.scaleOrdinal().range(this.lightMute),
- },
- dark: {
- norm: d3.scaleOrdinal().range(this.darkNorm),
- mute: d3.scaleOrdinal().range(this.darkMute),
- },
- };
this.log.debug('SvgUtilService constructed');
}
@@ -95,10 +92,10 @@
// NOTE: since we are lazily assigning domain ids, we need to
// get the color from all 4 scales, to keep the domains
// in sync.
- const ln = this.colors.light.norm(id);
- const lm = this.colors.light.mute(id);
- const dn = this.colors.dark.norm(id);
- const dm = this.colors.dark.mute(id);
+ const ln = colors.light.norm(id);
+ const lm = colors.light.mute(id);
+ const dn = colors.dark.norm(id);
+ const dm = colors.dark.mute(id);
if (theme === 'dark') {
return muted ? dm : dn;
} else {
@@ -126,32 +123,27 @@
muted = k % 2;
what = muted ? ' muted' : ' normal';
theme = k < 2 ? 'light' : 'dark';
- dom.forEach(function (id, i) {
+ dom.forEach((id, i) => {
const x = i * 20;
const y = k * 20;
- const f = getColor(id, muted, theme);
- g.append('circle').attr({
- cx: x,
- cy: y,
- r: 5,
- fill: f,
- });
+ g.append('circle')
+ .attr('cx', x)
+ .attr('cy', y)
+ .attr('r', 5)
+ .attr('fill', getColor(id, muted, theme));
});
- g.append('rect').attr({
- x: 140,
- y: k * 20 - 5,
- width: 32,
- height: 10,
- rx: 2,
- fill: '#888',
- });
+ g.append('rect')
+ .attr('x', 140)
+ .attr('y', k * 20 - 5)
+ .attr('width', 32)
+ .attr('height', 10)
+ .attr('rx', 2)
+ .attr('fill', '#888');
g.append('text').text(theme + what)
- .attr({
- x: 142,
- y: k * 20 + 2,
- fill: 'white',
- })
- .style('font-size', '4pt');
+ .attr('x', 142)
+ .attr('y', k * 20 + 2)
+ .attr('fill', 'white');
+ // .style('font-size', '4pt');
}
}
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts
index fdf08f9..8cbca5a 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/svg/zoom.service.ts
@@ -117,7 +117,7 @@
*/
// Remove zoom on double click (prevents a
// false zoom navigating regions)
- this.settings.svg.on('dblclick.zoom', null);
+ // this.settings.svg.on('dblclick.zoom', null);
return this.zoomer;
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
index 0377c47..628f84f 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/panel.base.ts
@@ -37,10 +37,10 @@
on: boolean;
- constructor(
+ protected constructor(
protected fs: FnService,
protected ls: LoadingService,
- protected log: LogService,
+ protected log: LogService
) {
// this.log.debug('Panel base class constructed');
}
diff --git a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
index 41ce239..e011057 100644
--- a/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
+++ b/web/gui2-fw-lib/projects/gui2-fw-lib/src/lib/widget/table.base.ts
@@ -91,13 +91,13 @@
autoRefresh: boolean = true;
autoRefreshTip: string = 'Toggle auto refresh'; // TODO: get LION string
- private root: string;
- private req: string;
- private resp: string;
+ readonly root: string;
+ readonly req: string;
+ readonly resp: string;
private refreshPromise: any = null;
private handlers: string[] = [];
- constructor(
+ protected constructor(
protected fs: FnService,
protected ls: LoadingService,
protected log: LogService,