Update way to show a fetching data message to customize it more easily

TelescopeSt · Jul 7, 2022 · 599d8d1 · 599d8d1
1 parent 1e282bb
commit 599d8d1
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 17 deletions.
diff --git a/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st b/src/Telescope-Cytoscape-Libraries/CYSFileLibrary.class.st
@@ -2351,11 +2351,16 @@ CYSFileLibrary >> telescopeCss [
     z-index: 100000 !important;
 }
 
-.visualization.fetching::after {
-    content: "fetching";
+.visualization #fetching {
+    display: none;
     position: absolute;
     bottom: 0px;
     right: 0px;
+    z-index: 10;
+}
+
+.visualization.fetching #fetching {
+    display: block
 }
 
 .visualization.no-result::after {

diff --git a/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st b/src/Telescope-Cytoscape/TLCytoscapeComponent.class.st
@@ -126,29 +126,41 @@ TLCytoscapeComponent >> panzoom: anObject [
 
 { #category : #rendering }
 TLCytoscapeComponent >> renderContentOn: html [
+
 	| visuId div callback |
 	visuId := self visuDivId.
 	div := html div
-		id: visuId;
-		style: self style;
-		attributeAt: #isTelescopeVisu put: 'true';
-		attributeAt: #'data-port' put: self webSocketPort;
-		attributeAt: #'data-panzoom' put: self panzoom asString;
-		class: 'telescopeVisu';
-		with: [ html div
-				class: 'visualization';
-				style: 'height: 100%; width: 100%;'.
-			self waitingMessage value: html.
-			self renderOptionalButtonsOn: html ];
-		yourself.
+		       id: visuId;
+		       style: self style;
+		       attributeAt: #isTelescopeVisu put: 'true';
+		       attributeAt: #'data-port' put: self webSocketPort;
+		       attributeAt: #'data-panzoom' put: self panzoom asString;
+		       class: 'telescopeVisu';
+		       with: [ 
+			       html div
+				       class: 'visualization';
+				       style: 'height: 100%; width: 100%;';
+				       with: [ 
+					       html div
+						       id: #fetching;
+						       with: [ self renderFetchingDivOn: html ] ].
+			       self waitingMessage value: html.
+			       self renderOptionalButtonsOn: html ];
+		       yourself.
 	callback := WAValueCallback new.
 	TLCytoscapeWebSocketDelegate
 		registerVisualization: self visualization
 		underId: visuId
 		withCallBack: callback
-		callbackUrl:
-			{html actionUrl asString.
-			(div storeCallback: callback)}
+		callbackUrl: { 
+				html actionUrl asString.
+				(div storeCallback: callback) }
+]
+
+{ #category : #rendering }
+TLCytoscapeComponent >> renderFetchingDivOn: html [
+
+	html text: 'Fetching'
 ]
 
 { #category : #rendering }