This is an automated email from the ASF dual-hosted git repository.
ccondit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/yunikorn-web.git
The following commit(s) were added to refs/heads/master by this push:
new 20f66e5 [YUNIKORN-2723] Handle long queue names in QueuesV2 page
(#208)
20f66e5 is described below
commit 20f66e5c77ec253196c4fd8f46b19b2565a84cf4
Author: SP12893678 <[email protected]>
AuthorDate: Wed Oct 9 10:23:43 2024 -0600
[YUNIKORN-2723] Handle long queue names in QueuesV2 page (#208)
Closes: #208
Signed-off-by: Craig Condit <[email protected]>
---
src/app/components/queue-v2/queues-v2.component.ts | 82 +++++++++++++++++++++-
tsconfig.json | 2 +-
2 files changed, 80 insertions(+), 4 deletions(-)
diff --git a/src/app/components/queue-v2/queues-v2.component.ts
b/src/app/components/queue-v2/queues-v2.component.ts
index 1020e4f..fddd045 100644
--- a/src/app/components/queue-v2/queues-v2.component.ts
+++ b/src/app/components/queue-v2/queues-v2.component.ts
@@ -23,7 +23,7 @@ import { QueueInfo } from '@app/models/queue-info.model';
import { finalize } from 'rxjs/operators';
import { SchedulerService } from '@app/services/scheduler/scheduler.service';
-import { select } from "d3-selection";
+import { select, Selection } from "d3-selection";
import * as d3hierarchy from "d3-hierarchy";
import * as d3flextree from "d3-flextree";
import * as d3zoom from "d3-zoom";
@@ -199,6 +199,7 @@ function queueVisualization(rawData : QueueInfo ,
componentInstance: QueueV2Comp
nodeEnter.each(function(d) {
const group = select(this);
+ const queueName = d.data.queueName?.split(".").at(-1) ??
d.data.queueName;
group.append("rect")
.attr("width", 300)
@@ -242,8 +243,10 @@ function queueVisualization(rawData : QueueInfo ,
componentInstance: QueueV2Comp
.attr("y", 22.5)
.attr("font-size", "25px")
.attr("fill", "black")
- .text(d.data.queueName);
-
+ .text(queueName)
+ .call(ellipsis, 270)
+ .call(tooltip, group, queueName);
+
const plusCircle = group.append("circle")
.attr("cx", 150)
.attr("cy", 120)
@@ -411,4 +414,77 @@ function diagonal(s : any , d : any) {
V ${(sourceY + targetY) / 2}
H ${targetX}
V ${targetY}`;
+}
+
+function ellipsis(
+ selection: Selection<SVGTextElement, unknown, null, undefined>,
+ maxWidth: number
+) {
+ const text = selection.text();
+ selection.text(text);
+ const textNode = selection.node();
+
+ let count = 1;
+ while (textNode && maxWidth < textNode.getBBox().width) {
+ selection.text(`${text.slice(0, text.length - count)}...`);
+ count++;
+ }
+}
+
+function tooltip(
+ selection: Selection<SVGTextElement, unknown, null, undefined>,
+ container: Selection<SVGGElement, unknown, null, undefined>,
+ text: string,
+): Selection<SVGGElement, unknown, null, undefined> | null {
+ // if current text same as tooltip text, unnecessary render tooltip
+ if(selection.text() === text) return null;
+
+ const textNode = selection.node();
+ const bbox = textNode?.getBBox();
+ const textWidth = bbox?.width || 100;
+ const textHeight = bbox?.height || 30;
+
+ const x = bbox?.x || 0;
+ const y = bbox?.y || 0;
+ const padding = 10;
+ const radius = 8;
+
+ const tooltipGroup = container
+ .append("g")
+ .style("visibility", "hidden");
+
+ const tooltipBg = tooltipGroup.append("rect")
+ .attr("y", y - textHeight - padding)
+ .attr("width", textWidth + padding)
+ .attr("height", textHeight + padding / 2)
+ .attr("fill", "#00000099")
+ .attr("rx", radius)
+ .attr("ry", radius)
+ .attr("stroke", "none");
+
+ const tooltipText = tooltipGroup.append("text")
+ .attr("y", y - textHeight / 2)
+ .attr("font-size", "25px")
+ .attr("stroke", "white")
+ .attr("fill", "white")
+ .text(text);
+
+ const tooltipTextNode = tooltipText.node();
+ const tooltipTextWidth = tooltipTextNode?.getBBox().width || 100;
+
+ tooltipText.attr("x", x + (textWidth - tooltipTextWidth) / 2);
+ tooltipBg
+ .attr("x", x + (textWidth - tooltipTextWidth - padding) / 2)
+ .attr("width", tooltipTextWidth + padding);
+
+ selection.on("mouseover", function() {
+ tooltipGroup.style("visibility", "visible");
+ });
+
+ selection.on("mouseout", function() {
+ tooltipGroup.style("visibility", "hidden");
+ });
+
+ tooltipGroup.raise();
+ return tooltipGroup;
}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 14abf2d..5fe89cf 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -18,7 +18,7 @@
"target": "ES2022",
"module": "es2020",
"lib": [
- "es2020",
+ "es2022",
"dom"
],
"paths": {
---------------------------------------------------------------------
To unsubscribe, e-mail: [email protected]
For additional commands, e-mail: [email protected]
