You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@skywalking.apache.org by GitBox <gi...@apache.org> on 2018/12/26 16:08:43 UTC
[GitHub] TinyAllen closed pull request #214: Feature: update spans display
TinyAllen closed pull request #214: Feature: update spans display
URL: https://github.com/apache/incubator-skywalking-ui/pull/214
This is a PR merged from a forked repository.
As GitHub hides the original diff on merge, it is displayed below for
the sake of provenance:
As this is a foreign pull request (from a fork), the diff is supplied
below (as it won't show otherwise due to GitHub magic):
diff --git a/.webpackrc.js b/.webpackrc.js
deleted file mode 100755
index aba80ef..0000000
--- a/.webpackrc.js
+++ /dev/null
@@ -1,54 +0,0 @@
-const path = require('path');
-
-const config = {
- entry: 'src/index.js',
- extraBabelPlugins: [['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }]],
- env: {
- development: {
- extraBabelPlugins: ['dva-hmr'],
- },
- },
- alias: {
- components: path.resolve(__dirname, 'src/components/'),
- },
- ignoreMomentLocale: true,
- theme: './src/theme.js',
- html: {
- template: './src/index.ejs',
- },
- lessLoaderOptions: {
- javascriptEnabled: true,
- },
- disableDynamicImport: false,
- publicPath: '/',
- hash: true,
- proxy: {
- '/img/node': {
- target: 'http://localhost:8000',
- changeOrigin: true,
- proxyTimeout: 500,
- onError: (err, req, res) => {
- console.info(err);
- if (err.code === 'ECONNRESET') {
- res.writeHead(301,
- {Location: '/img/node/UNDEFINED.png'}
- );
- res.end();
- }
- },
- },
- },
-};
-
-if (process.env.NO_MOCK) {
- config.proxy['/api'] = {
- target: 'http://localhost:12800',
- changeOrigin: true,
- pathRewrite: path => {
- console.log(path);
- return '/graphql';
- },
- };
-}
-
-export default config;
diff --git a/src/components/TraceTree/d3-trace.js b/src/components/TraceTree/d3-trace.js
index 1645581..f38363d 100644
--- a/src/components/TraceTree/d3-trace.js
+++ b/src/components/TraceTree/d3-trace.js
@@ -19,7 +19,7 @@
import * as d3 from 'd3';
import d3tip from 'd3-tip';
export default class TraceMap {
- constructor(el) {
+ constructor(el, showSpanModal,smax,smin,cmax,cmin) {
this.type = {
MQ: '#bf99f8',
Http: '#72a5fd',
@@ -28,26 +28,34 @@ export default class TraceMap {
Cache: '#00bcd4',
RPCFramework: '#ee4395',
};
+ this.smax = smax;
+ this.smin = smin;
+ this.cmax = cmax;
+ this.cmin = cmin;
+ this.showSpanModal = showSpanModal;
this.el = el;
+ this.i = 0;
+ this.j = 0;
this.width = el.clientWidth;
this.height = el.clientHeight;
+ this.body = d3
+ .select(this.el)
+ .append('svg')
+ .attr('width', this.width)
+ .attr('height', this.height);
+ this.tip = d3tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0])
+ .html(d => d.data.label);
+ this.timeTip = d3tip()
+ .attr('class', 'd3-tip')
+ .offset([-10, 0])
+ .html(d => d.data.label);
+ this.body.call(this.timeTip);
+ this.body.call(this.tip);
this.treemap = d3.tree().size([this.height * 0.7, this.width]);
- this.svg = '';
- this.timeGroup = '';
- this.root = '';
- this.i = 0;
- this.j = 0;
- }
- resize() {
- d3.select(this.el)
- .select('svg')
- .remove();
- this.width = this.el.clientWidth;
- this.height = this.el.clientHeight;
- this.draw(this.data, this.row);
}
- draw(data, row, showSpanModal) {
- this.showSpanModal = showSpanModal;
+ init(data, row) {
this.row = row;
this.data = data;
this.min = d3.min(this.row.map(i => i.startTime));
@@ -57,173 +65,93 @@ export default class TraceMap {
.scaleSequential()
.domain([0, this.list.length])
.interpolator(d3.interpolateCool);
+ this.svg = this.body.append('g').attr('transform', d => `translate(0, ${this.row.length * 10})`).append('g');
+ this.timeGroup = this.body.append('g').attr('class','timeGroup').attr('transform', d => 'translate(5,30)');
+ this.body.call(this.getZoomBehavior(this.svg));
+ this.root = d3.hierarchy(this.data, d => d.children);
+ this.root.x0 = this.height / 2;
+ this.root.y0 = 0;
+ }
+ resize() {
+ this.body
+ .select('.xAxis')
+ .remove();
+ this.body
+ .select('.timeGroup')
+ .remove();
+ this.width = this.el.clientWidth;
+ this.body.attr('width', this.width);
+ this.xScale = d3
+ .scaleLinear()
+ .domain([0, this.max])
+ .range([0, this.width - 10]);
+ this.xAxis = d3.axisTop(this.xScale).tickFormat(d => {
+ if (d === 0) return 0;
+ if (d >= 1000) return d / 1000 + 's';
+ return d + ' ms';
+ });
+ this.body
+ .append('g')
+ .attr('class', 'xAxis')
+ .attr('transform', `translate(5,20)`)
+ .call(this.xAxis);
+ this.timeGroup = this.body.append('g').attr('class','timeGroup').attr('transform', d => 'translate(5,30)');
+ this.updatexAxis(this.root);
+ }
+ draw() {
this.xScale = d3
.scaleLinear()
- .range([0, this.width - 10])
- .domain([0, this.max]);
+ .domain([0, this.max])
+ .range([0, this.width - 10]);
+
this.xAxis = d3.axisTop(this.xScale).tickFormat(d => {
if (d === 0) return 0;
if (d >= 1000) return d / 1000 + 's';
return d + ' ms';
});
-
- this.body = d3
- .select(this.el)
- .append('svg')
- .attr('width', this.width)
- .attr('height', this.height);
- this.timeGroup = this.body
- .append('g')
- .attr('transform', d => 'translate(5,30)');
- const main = this.body
- .append('g')
- .attr('transform', d => 'translate(0,' + this.row.length * 9 + ')');
- this.svg = main.append('g');
- this.root = d3.hierarchy(this.data, d => d.children);
- this.root.x0 = this.height / 2;
- this.root.y0 = 0;
this.body
- .append('g')
- .attr('transform', `translate(5,20)`)
- .call(this.xAxis);
-
+ .append('g')
+ .attr('class', 'xAxis')
+ .attr('transform', `translate(5,20)`)
+ .call(this.xAxis);
this.updatexAxis(this.root);
this.update(this.root);
}
- updatexAxis(source) {
- const treeData = this.treemap(this.root);
- const nodes = treeData.descendants(),
- links = treeData.descendants().slice(1);
- let index = -1;
- nodes.forEach(function(d) {
- d.y = d.depth * 200;
- d.timeX = ++index * 12;
- });
- // time
- const timeNode = this.timeGroup.selectAll('g.time').data(nodes, d => {
- return d.id;
+ update(source) {
+ const links = this.nodes.slice(1);
+ const node = this.svg.selectAll('g.node').data(this.nodes, d => {
+ return d.id|| (d.id = ++this.i);
});
- this.timeTip = d3tip()
- .attr('class', 'd3-tip')
- .offset([-10, 0])
- .html(function(d) {
- return d.data.label;
- });
- this.body.call(this.timeTip);
-
+ // node
const that = this;
- const timeEnter = timeNode
+ const nodeEnter = node
.enter()
.append('g')
- .attr('class', 'time')
- .attr('transform', d => 'translate(' + 0 + ',' + d.timeX + ')')
+ .attr('class', 'node')
+ .attr('transform', `translate(${source.y0},${source.x0})`)
.on('mouseover', function(d, i) {
- that.timeTip.show(d, that.timeUpdate._groups[0][i].children[1]);
- that.tip.show(d, that.nodeUpdate._groups[0][i]);
+ that.tip.show(d, this);
+ const _node = that.timeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
+ if(_node.length){
+ that.timeTip.show(d, _node[0].children[1]);
+ }
})
.on('mouseout', function(d, i) {
- that.timeTip.hide(d, that.timeUpdate._groups[0][i].children[1]);
- that.tip.hide(d, that.nodeUpdate._groups[0][i]);
+ that.tip.hide(d, this);
+ const _node = that.timeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
+ if(_node.length){
+ that.timeTip.hide(d, _node[0].children[1]);
+ }
})
.on('click', (d, i) => {
this.showSpanModal(
d.data,
{ width: '100%', top: -10, left: '0' },
- d3.select(that.timeUpdate._groups[0][i]).append('rect')
+ d3.select(nodeEnter._groups[0][i]).append('rect')
);
d3.event.stopPropagation();
});
- this.timeEnter = timeEnter;
- timeEnter
- .append('rect')
- .attr('height', 10)
- .attr('width', this.width)
- .attr('y', -4)
- .attr('class', 'time-bg');
- timeEnter
- .append('rect')
- .attr('class', 'time-inner')
- .attr('height', 8)
- .attr('width', d => {
- if (!d.data.endTime || !d.data.startTime) return 0;
- return this.xScale(d.data.endTime - d.data.startTime) + 1;
- })
- .attr('rx', 2)
- .attr('ry', 2)
- .attr('x', d =>
- !d.data.endTime || !d.data.startTime
- ? 0
- : this.xScale(d.data.startTime - this.min)
- )
- .attr('y', -3)
- .style(
- 'fill',
- d =>
- `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`
- );
- this.timeUpdate = timeEnter.merge(timeNode);
- this.timeUpdate
- .transition()
- .duration(600)
- .attr('transform', function(d) {
- return 'translate(' + 0 + ',' + d.timeX + ')';
- });
- const timeExit = timeNode
- .exit()
- .transition()
- .duration(600)
- .attr('transform', function(d) {
- return 'translate(' + 0 + ',' + 10 + ')';
- })
- .remove();
- }
- update(source) {
- const treeData = this.treemap(this.root);
- const nodes = treeData.descendants(),
- links = treeData.descendants().slice(1);
- let index = -1;
- nodes.forEach(function(d) {
- d.y = d.depth * 200;
- d.timeX = ++index * 10;
- });
- this.tip = d3tip()
- .attr('class', 'd3-tip')
- .offset([-10, 0])
- .html(function(d) {
- return d.data.label;
- });
-
- this.body.call(this.getZoomBehavior(this.svg));
- this.body.call(this.tip);
- const node = this.svg.selectAll('g.node').data(nodes, d => {
- return d.id || (d.id = ++this.i);
- });
- // node
- const that = this;
- const nodeEnter = node
- .enter()
- .append('g')
- .attr('class', 'node')
- .attr('transform', function(d) {
- return 'translate(' + source.y0 + ',' + source.x0 + ')';
- })
- .on('mouseover', function(d, i) {
- that.tip.show(d, this);
- that.timeTip.show(d, that.timeUpdate._groups[0][i].children[1]);
- })
- .on('mouseout', function(d, i) {
- that.tip.hide(d, this);
- that.timeTip.hide(d, that.timeUpdate._groups[0][i].children[1]);
- })
- .on('click', (d, i) => {
- this.showSpanModal(
- d.data,
- { width: '100%', top: -10, left: '0' },
- d3.select(nodeEnter._groups[0][i]).append('rect')
- );
- d3.event.stopPropagation();
- });
nodeEnter
.append('rect')
.attr('class', 'block')
@@ -231,15 +159,16 @@ export default class TraceMap {
.attr('y', '-20')
.attr('fill', d => (d.data.isError ? '#ff57221a' : '#f7f7f7'))
.attr('stroke', d => (d.data.isError ? '#ff5722aa' : '#e4e4e4'));
-
nodeEnter
.append('rect')
.attr('class', 'content')
- .style('fill', '#fff')
- .attr('stroke', d => {
- console.log(d);
- return d.data.isError ? '#ff5722aa' : '#e4e4e4';
- });
+ .attr('stroke', d => d.data.isError ? '#ff5722aa' : '#e4e4e4');
+ nodeEnter
+ .append('rect')
+ .attr('class', 'service')
+ .attr('x', '-0.5')
+ .attr('y', '-20.5')
+ .style('fill', d => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);
nodeEnter
.append('rect')
.attr('class', 'service')
@@ -255,54 +184,32 @@ export default class TraceMap {
.attr('dy', 13)
.attr('dx', 10)
.attr('stroke', '#333')
- .attr('text-anchor', function(d) {
- return 'start';
- })
- .text(function(d) {
- return d.data.label.length > 19
- ? d.data.label.slice(0, 19)
- : d.data.label;
- });
+ .attr('text-anchor', 'start')
+ .text(d => d.data.label.length > 19 ? d.data.label.slice(0, 19) : d.data.label);
nodeEnter
.append('text')
.attr('dy', -7)
.attr('dx', 12)
- .attr('text-anchor', function(d) {
- return 'start';
- })
- .attr('fill', d => {
- return this.type[d.data.layer];
- })
- .attr('stroke', d => {
- return this.type[d.data.layer];
- })
- .text(function(d) {
- return d.data.layer;
- });
+ .attr('text-anchor', 'start')
+ .attr('fill', d => this.type[d.data.layer])
+ .attr('stroke', d => this.type[d.data.layer])
+ .text(d => d.data.layer);
nodeEnter
.append('text')
.attr('dy', -7)
.attr('x', 95)
.attr('stroke', '#333')
- .attr('text-anchor', function(d) {
- return 'start';
- })
- .text(function(d) {
- return d.data.endTime
- ? d.data.endTime - d.data.startTime + ' ms'
- : d.data.traceId;
- });
+ .attr('text-anchor', 'start')
+ .text(d => d.data.endTime ? d.data.endTime - d.data.startTime + ' ms' : d.data.traceId);
nodeEnter
.append('circle')
.attr('class', 'node')
.attr('r', 4)
.attr('cx', '158')
- .style('fill', function(d) {
- return d._children ? '#8543e0aa' : '#fff';
- })
+ .style('fill', d => d._children ? '#8543e0aa' : '#fff')
.on('click', click);
this.nodeUpdate = nodeEnter.merge(node);
@@ -318,12 +225,10 @@ export default class TraceMap {
.select('circle.node')
.attr('r', 4)
.attr('cx', '158')
- .style('fill', function(d) {
- return d._children ? '#8543e0aa' : '#fff';
- })
+ .style('fill', d => d._children ? '#8543e0aa' : '#fff')
.attr('cursor', 'pointer');
- var nodeExit = node
+ const nodeExit = node
.exit()
.transition()
.duration(600)
@@ -332,13 +237,8 @@ export default class TraceMap {
})
.remove();
- nodeExit.select('circle').attr('r', 0);
-
- nodeExit.select('text').style('fill-opacity', 0);
-
- const link = this.svg.selectAll('path.link').data(links, function(d) {
- return d.id;
- });
+ // link
+ const link = this.svg.selectAll('path.link').data(links, d => d.id);
const linkEnter = link
.enter()
@@ -368,19 +268,14 @@ export default class TraceMap {
})
.remove();
- nodes.forEach(function(d) {
- d.x0 = d.x;
- d.y0 = d.y;
- });
-
function diagonal(s, d) {
return `M ${s.y} ${s.x}
C ${s.y - 30} ${s.x}, ${d.y + 188} ${d.x},
${d.y + 158} ${d.x}`;
}
function click(d, i) {
- that.tip.hide(d, this);
- that.timeTip.hide(d, that.timeUpdate._groups[0][i]);
+ // that.tip.hide(d, this);
+ // that.timeTip.hide(d, that.timeUpdate._groups[0][i]);
if (d.children) {
d._children = d.children;
d.children = null;
@@ -393,6 +288,105 @@ export default class TraceMap {
d3.event.stopPropagation();
}
}
+ updatexAxis(source) {
+ // time
+ const that = this;
+ this.nodes = this.treemap(this.root).descendants();
+ let index = -1;
+ this.nodes.forEach(function(d) {
+ d.y = d.depth * 200;
+ d.timeX = ++index * 12;
+ d.x0 = d.x;
+ d.y0 = d.y;
+ });
+ const timeNode = this.timeGroup.selectAll('g.time').data(this.nodes, d => {
+ return d.id|| (d.id = ++this.j);
+ });
+ this.timeNode = timeNode;
+ const timeEnter = timeNode
+ .enter()
+ .append('g')
+ .attr('class', 'time')
+ .attr('transform', d => `translate(0,${d.timeX})`)
+ .on('mouseover', function(d, i) {
+ that.timeTip.show(d, this);
+ const _node = that.nodeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
+ if(_node.length){
+ that.tip.show(d, _node[0]);
+ }
+ })
+ .on('mouseout', function(d, i) {
+ that.timeTip.hide(d, this);
+ const _node = that.nodeUpdate._groups[0].filter(group => group.__data__.id === (i+1));
+ if(_node.length){
+ that.tip.hide(d, _node[0]);
+ }
+ })
+ .on('click', (d, i) => {
+ this.showSpanModal(
+ d.data,
+ { width: '100%', top: -10, left: '0' },
+ d3.select(that.timeUpdate._groups[0][i]).append('rect')
+ );
+ d3.event.stopPropagation();
+ });
+ timeEnter
+ .append('rect')
+ .attr('height', 10)
+ .attr('width', this.width)
+ .attr('y', -4)
+ .attr('class', 'time-bg');
+ timeEnter
+ .append('rect')
+ .attr('class', 'time-inner')
+ .attr('height', 8)
+ .attr('width', d => {
+ if (!d.data.endTime || !d.data.startTime) return 0;
+ return this.xScale(d.data.endTime - d.data.startTime) + 1;
+ })
+ .attr('rx', 2)
+ .attr('ry', 2)
+ .attr(
+ 'x',
+ d => (!d.data.endTime || !d.data.startTime ? 0 : this.xScale(d.data.startTime - this.min))
+ )
+ .attr('y', -3)
+ .style('fill', d => `${this.sequentialScale(this.list.indexOf(d.data.serviceCode))}`);
+
+ this.timeUpdate = timeEnter.merge(timeNode);
+ this.timeUpdate
+ .transition()
+ .duration(600)
+ .attr('transform', d => `translate(0,${d.timeX})`);
+
+ const timeExit = timeNode
+ .exit()
+ .transition()
+ .duration(600)
+ .attr('transform', 'translate(0 ,10)')
+ .remove();
+ }
+ setDefault() {
+ this.nodeUpdate._groups[0].forEach(i => {
+ d3.select(i).style('opacity', 1);
+ })
+ }
+ topChild() {
+ this.nodeUpdate._groups[0].forEach(i => {
+ d3.select(i).style('opacity', .2);
+ if(i.__data__.data.childrenLength >= this.cmin || i.__data__.data.childrenLength <= this.cmax){
+ d3.select(i).style('opacity', 1);
+ }
+ })
+ }
+ topSlow() {
+ this.nodeUpdate._groups[0].forEach(i => {
+ d3.select(i).style('opacity', .2);
+ if(i.__data__.data.dur >= this.smin || i.__data__.data.dur <= this.smax){
+ d3.select(i).style('opacity', 1);
+ }
+ })
+ }
getZoomBehavior(g) {
return d3
.zoom()
diff --git a/src/components/TraceTree/index.js b/src/components/TraceTree/index.js
index 2a495c5..deaeae4 100644
--- a/src/components/TraceTree/index.js
+++ b/src/components/TraceTree/index.js
@@ -16,9 +16,12 @@
*/
import React, { Component } from 'react';
+import { Button } from 'antd';
import './style.less';
import Tree from './d3-trace';
+const ButtonGroup = Button.Group;
+
export default class Trace extends Component {
constructor(props) {
super(props);
@@ -94,23 +97,50 @@ export default class Trace extends Component {
if(segmentGroup[i].refs.length ===0 )
this.segmentId.push(segmentGroup[i]);
}
- this.tree = new Tree(this.echartsElement)
- this.tree.draw({label:`${this.traceId}`, children: this.segmentId}, rowData, propsData.showSpanModal);
+ this.topSlow = [];
+ this.topChild = [];
+
+ this.collapse(this.segmentId[0]);
+ this.topSlowMax = this.topSlow.sort().reverse()[0];
+ this.topSlowMin = this.topSlow.sort().reverse()[4];
+
+ this.topChildMax = this.topChild.sort().reverse()[0];
+ this.topChildMin = this.topChild.sort().reverse()[4];
+ this.tree = new Tree(this.echartsElement, propsData.showSpanModal, this.topSlowMax,this.topSlowMin,this.topChildMax,this.topChildMin)
+ this.tree.init({label:`${this.traceId}`, children: this.segmentId}, rowData);
+ this.tree.draw();
this.resize = this.tree.resize.bind(this.tree);
}
-
+ collapse(d) {
+ if(d.children){
+ const dur = d.endTime - d.startTime;
+ d.children.forEach(i => dur - i.endTime + i.startTime)
+ d.dur = dur;
+ this.topSlow.push(dur);
+ this.topChild.push(d.children.length);
+ d.childrenLength = d.children.length
+ d.children.forEach((i) => this.collapse(i));
+ }
+ }
render() {
const newStyle = {
- height: 700,
+ height: 800,
// ...style,
};
return (
- <div
- ref={(e) => { this.echartsElement = e; }}
- style={newStyle}
- className="trace-tree"
- />
+ <div>
+ <ButtonGroup>
+ <Button onClick={() => {this.tree.setDefault();}}>Default</Button>
+ <Button onClick={() => {this.tree.topSlow();}}>TopSlow 5</Button>
+ <Button onClick={() => {this.tree.topChild();}}>TopSpan 5</Button>
+ </ButtonGroup>
+ <div
+ ref={(e) => { this.echartsElement = e; }}
+ style={newStyle}
+ className="trace-tree"
+ />
+ </div>
)
}
}
diff --git a/src/components/TraceTree/style.less b/src/components/TraceTree/style.less
index 90093ff..3758c4b 100644
--- a/src/components/TraceTree/style.less
+++ b/src/components/TraceTree/style.less
@@ -1,92 +1,93 @@
-/*
- * Licensed to the Apache Software Foundation (ASF) under one or more
- * contributor license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright ownership.
- * The ASF licenses this file to You under the Apache License, Version 2.0
- * (the "License"); you may not use this file except in compliance with
- * the License. You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:global(.trace-tree) {
- height: 1000px;
-}
-:global(.trace-tree .node) {
- cursor: pointer;
-}
-:global(.trace-tree .node circle) {
- stroke: #ddd;
- stroke-width: 1.5px;
-}
-:global(.trace-tree .time-inner) {
- cursor: pointer;
-}
-:global(.trace-tree .time-bg) {
- fill: #fff;
- cursor: pointer;
-}
-:global(.trace-tree .time:hover) {
- :global(.time-bg){
- fill: rgba(0, 0, 0, 0.1);
- }
-}
-:global(.trace-tree .node text) {
- font-size: 12px;
- font-family: 'Courier New', Courier, monospace;
- stroke-width: 0.5;
-}
-:global(.trace-tree .node .block) {
- width: 158px;
- height: 40px;
-}
-:global(.trace-tree .node .content) {
- width: 158px;
- height: 20px;
-}
-:global(.trace-tree .node .service) {
- width: 7px;
- height: 41px;
-}
-:global(.trace-tree .link) {
- fill: none;
- stroke: #ddd;
- stroke-width: 1.5px;
-}
-:global(.trace-tree .domain) {
- opacity: 0;
-}
-:global(.d3-tip) {
- line-height: 1;
- padding: 6px;
- background: rgba(0, 0, 0, 0.8);
- color: #fff;
- border-radius: 4px;
- font-size: 12px;
-}
-
-/* Creates a small triangle extender for the tooltip */
-:global(.d3-tip:after) {
- box-sizing: border-box;
- display: inline;
- font-size: 10px;
- width: 100%;
- line-height: 1;
- color: rgba(0, 0, 0, 0.8);
- content: '\25BC';
- position: absolute;
- text-align: center;
-}
-
-/* Style northward tooltips specifically */
-:global(.d3-tip.n:after) {
- margin: -2px 0 0 0;
- top: 100%;
- left: 0;
-}
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:global(.trace-tree) {
+ height: 1000px;
+}
+:global(.trace-tree .node) {
+ cursor: pointer;
+}
+:global(.trace-tree .node circle) {
+ stroke: #ddd;
+ stroke-width: 1.5px;
+}
+:global(.trace-tree .time-inner) {
+ cursor: pointer;
+}
+:global(.trace-tree .time-bg) {
+ fill: #fff;
+ cursor: pointer;
+}
+:global(.trace-tree .time:hover) {
+ :global(.time-bg){
+ fill: rgba(0, 0, 0, 0.1);
+ }
+}
+:global(.trace-tree .node text) {
+ font-size: 12px;
+ font-family: 'Courier New', Courier, monospace;
+ stroke-width: 0.5;
+}
+:global(.trace-tree .node .block) {
+ width: 158px;
+ height: 40px;
+}
+:global(.trace-tree .node .content) {
+ width: 158px;
+ height: 20px;
+ fill: #fff;
+}
+:global(.trace-tree .node .service) {
+ width: 7px;
+ height: 41px;
+}
+:global(.trace-tree .link) {
+ fill: none;
+ stroke: #ddd;
+ stroke-width: 1.5px;
+}
+:global(.trace-tree .domain) {
+ opacity: 0;
+}
+:global(.d3-tip) {
+ line-height: 1;
+ padding: 6px;
+ background: rgba(0, 0, 0, 0.8);
+ color: #fff;
+ border-radius: 4px;
+ font-size: 12px;
+}
+
+/* Creates a small triangle extender for the tooltip */
+:global(.d3-tip:after) {
+ box-sizing: border-box;
+ display: inline;
+ font-size: 10px;
+ width: 100%;
+ line-height: 1;
+ color: rgba(0, 0, 0, 0.8);
+ content: '\25BC';
+ position: absolute;
+ text-align: center;
+}
+
+/* Style northward tooltips specifically */
+:global(.d3-tip.n:after) {
+ margin: -2px 0 0 0;
+ top: 100%;
+ left: 0;
+}
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
users@infra.apache.org
With regards,
Apache Git Services