Revize 1ae1e090

name of a diagram is displayed in Header

sources/src/main/webapp/css/components/header.css

@@ -12 +12 @@
 }
 
 .header-title {
+	width: 60%;
 	color: #0b548a;
 	margin: 0;
 	line-height: 60px;
+	white-space: nowrap;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.header .diagram-name:not(:empty)::before {
+	content: " - ";
 }
 
 .header .user-menu {

sources/src/main/webapp/js/components/header.js

@@ -1 +1 @@
 class Header {
 	constructor() {
+		document.addEventListener(DiagramUpdatedEvent.name, e => {
+			this._diagramNameLabel.innerText = e.detail.name;
+		});
+
 		document.addEventListener(LoggedInEvent.name, e => {
 			this._loggedInUserLabel.innerText = e.detail.username;
 		});
@@ -10 +14 @@
 	}
 
 	render() {
+		this._diagramNameLabel = DOM.h('span', {
+			class: 'diagram-name',
+		});
 		this._loggedInUserLabel = DOM.h('span', {
 			class: 'username',
 		});
@@ -28 +35 @@
 			DOM.h('h2', {
 				class: 'header-title',
 				innerText: 'Interactive Multimodal Graph Explorer',
-			}),
+			}, [
+				this._diagramNameLabel,
+			]),
 			DOM.h('div', {
 				class: 'user-menu loggedInOnly',
 			}, [

sources/src/main/webapp/js/components/sidebarNodeList.js

@@ -83 +83 @@
 		// content
 		const containerContent = DOM.h('div', {
 			class: 'node-container-content',
-			hidden: 'hidden',
 		}, [
 			this._buttonGroupElement,
 			this._sortOptionsElement,

sources/src/main/webapp/js/showGraphApp.js

@@ -151 +151 @@
 		} else {
 			const diagramData = await AJAX.getJSON(Constants.API.getDiagram + '?id=' + diagramId);
 
-			this.diagram = new Diagram(diagramData);
-
-			document.title = this.name + ' - ' + this.diagram.name;
+			document.dispatchEvent(new DiagramUpdatedEvent(diagramData));
 
 			loadGraphDataPromise = Promise.resolve(JSON.parse(diagramData.graph_json));
 		}