Add tooltips to status bar messages

typedb · May 30, 2022 · 33c0e14 · 33c0e14
1 parent 8e3064c
commit 33c0e14
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 14 deletions.
diff --git a/state/app/StatusManager.kt b/state/app/StatusManager.kt
@@ -30,9 +30,10 @@ class StatusManager {
      * The order of keys defined in this enum determine the order in which they
      * get displayed on the status bar.
      */
-    enum class Key {
-        TEXT_POSITION,
-        QUERY_RESPONSE_TIME,
+    enum class Key(val displayName: String) {
+        TEXT_CURSOR_POSITION("Text Cursor Position"),
+        OUTPUT_RESPONSE_TIME("Output (Log/Table/Graph) Response Time"),
+        QUERY_RESPONSE_TIME("Query Response Time"),
     }
 
     val statuses: SnapshotStateMap<Key, String> = mutableStateMapOf()

diff --git a/view/StatusBar.kt b/view/StatusBar.kt
@@ -25,15 +25,19 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.width
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
+import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.input.pointer.pointerMoveFilter
 import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
 import com.vaticle.typedb.studio.state.GlobalState
 import com.vaticle.typedb.studio.state.app.StatusManager
 import com.vaticle.typedb.studio.view.common.theme.Theme
 import com.vaticle.typedb.studio.view.material.Form
 import com.vaticle.typedb.studio.view.material.Separator
+import com.vaticle.typedb.studio.view.material.Tooltip
 
 object StatusBar {
 
@@ -52,21 +56,27 @@ object StatusBar {
             Spacer(Modifier.weight(1f))
             Spacer(Modifier.width(PADDING))
             StatusManager.Key.values().reversed().forEach {
-                val status = statusMgr.statuses[it]
-                if (!status.isNullOrEmpty()) {
+                val statusValue = statusMgr.statuses[it]
+                if (!statusValue.isNullOrEmpty()) {
                     Separator.Vertical()
-                    StatusDisplay(status, fontStyle)
+                    StatusDisplay(it.displayName, statusValue, fontStyle)
                 }
             }
         }
     }
 
+    @OptIn(ExperimentalComposeUiApi::class)
     @Composable
-    private fun StatusDisplay(status: String, fontStyle: TextStyle) {
-        Column {
+    private fun StatusDisplay(statusName: String, statusValue: String, fontStyle: TextStyle) {
+        val tooltipState: Tooltip.State = remember { Tooltip.State(Tooltip.Arg(statusName)) }
+        Tooltip.Popup(tooltipState)
+        Column(Modifier.pointerMoveFilter(
+            onEnter = { tooltipState.mayShowOnTargetHover(); false },
+            onExit = { tooltipState.mayHideOnTargetExit(); false }
+        )) {
             Row {
                 Spacer(Modifier.width(PADDING))
-                Form.Text(value = status, textStyle = fontStyle)
+                Form.Text(value = statusValue, textStyle = fontStyle)
                 Spacer(Modifier.width(PADDING))
             }
             Spacer(Modifier.height(2.dp))

diff --git a/view/editor/InputTarget.kt b/view/editor/InputTarget.kt
@@ -32,7 +32,7 @@ import androidx.compose.ui.text.TextRange
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import com.vaticle.typedb.studio.state.GlobalState
-import com.vaticle.typedb.studio.state.app.StatusManager.Key.TEXT_POSITION
+import com.vaticle.typedb.studio.state.app.StatusManager.Key.TEXT_CURSOR_POSITION
 import com.vaticle.typedb.studio.view.common.Util.toDP
 import kotlin.coroutines.EmptyCoroutineContext
 import kotlin.math.floor
@@ -235,11 +235,11 @@ internal class InputTarget constructor(
     }
 
     internal fun updateStatus() {
-        GlobalState.status.publish(TEXT_POSITION, selection?.label() ?: cursor.label())
+        GlobalState.status.publish(TEXT_CURSOR_POSITION, selection?.label() ?: cursor.label())
     }
 
     internal fun clearStatus() {
-        GlobalState.status.clear(TEXT_POSITION)
+        GlobalState.status.clear(TEXT_CURSOR_POSITION)
     }
 
     private fun mayScrollToCursor() {

diff --git a/view/material/Tooltip.kt b/view/material/Tooltip.kt
@@ -92,7 +92,7 @@ object Tooltip {
             isOpen = true
         }
 
-        internal fun mayShowOnTargetHover() {
+        fun mayShowOnTargetHover() {
             if (mouseHoverDisabled.get()) return
             mouseHoverTarget.set(true)
             coroutineScope.launch {
@@ -101,7 +101,7 @@ object Tooltip {
             }
         }
 
-        internal fun mayHideOnTargetExit() {
+        fun mayHideOnTargetExit() {
             mouseHoverTarget.set(false)
             delayHide()
         }