Visualizer layout improvements

kosat-web/src/jsMain/kotlin/components/Links.kt

@@ -0,0 +1,52 @@
+package components
+
+import kotlinx.browser.window
+import mui.icons.material.GitHub
+import mui.icons.material.YouTube
+import mui.material.Box
+import mui.material.IconButton
+import mui.material.Size
+import mui.system.sx
+import react.FC
+import react.Props
+import web.cssom.Display
+import web.cssom.NamedColor
+import web.cssom.Position
+import web.cssom.integer
+import web.cssom.pt
+
+val Links: FC<Props> = FC("Links") {
+    Box {
+        sx {
+            position = Position.absolute
+            display = Display.flex
+            top = (-0).pt
+            right = 8.pt
+            zIndex = integer(1)
+        }
+
+        IconButton {
+            size = Size.large
+            onClick = { _ ->
+                window.open("placeholder", "_blank")
+            }
+            YouTube {
+                sx {
+                    color = NamedColor.black
+                }
+            }
+        }
+
+        IconButton {
+            size = Size.large
+            onClick = { _ ->
+                window.open("https://github.com/UnitTestBot/kosat", "_blank")
+            }
+            GitHub {
+                sx {
+                    color = NamedColor.black
+                }
+            }
+        }
+    }
+}

kosat-web/src/jsMain/kotlin/routes/Solver.kt

@@ -5,6 +5,7 @@ import WrapperCommand
 import cdclDispatchContext
 import cdclWrapperContext
 import components.HelpTooltip
+import components.Links
 import js.core.jso
 import mui.material.Box
 import mui.material.Button
@@ -56,6 +57,8 @@ val Solver: FC<Props> = FC("Solver") {
     var errorShown by useState(false)
     val navigate = useNavigate()
 
+    Links {}
+
     Typography {
         sx {
             textAlign = TextAlign.center

kosat-web/src/jsMain/kotlin/routes/Visualizer.kt

@@ -4,6 +4,7 @@ import WrapperCommand
 import cdclDispatchContext
 import cdclWrapperContext
 import components.HelpTooltip
+import components.Links
 import emotion.react.css
 import js.core.jso
 import mui.material.Box
@@ -39,6 +40,7 @@ import web.cssom.TextAlign
 import web.cssom.array
 import web.cssom.fr
 import web.cssom.ident
+import web.cssom.minmax
 import web.cssom.pct
 import web.cssom.pt
 import web.dom.document
@@ -145,6 +147,8 @@ val Visualizer: FC<Props> = FC("Visualizer") { _ ->
         }
     }
 
+    Links {}
+
     Typography {
         variant = TypographyVariant.h1
 
@@ -160,16 +164,17 @@ val Visualizer: FC<Props> = FC("Visualizer") { _ ->
             display = Display.grid
             gap = 8.pt
             padding = 8.pt
-            gridTemplateColumns = array(30.pct, 1.fr, 20.pct)
-            gridTemplateRows = array(125.pt, 240.pt, 130.pt, 180.pt)
+            gridTemplateColumns = array(20.pct, minmax(100.pt, 1.fr), 20.pct)
+            gridTemplateRows = array(265.pt, 100.pt, 130.pt, 180.pt)
             gridTemplateAreas = GridTemplateAreas(
-                arrayOf(ident("input"), ident("state"), ident("trail")),
-                arrayOf(ident("input"), ident("db"), ident("trail")),
-                arrayOf(ident("assignment"), ident("assignment"), ident("trail")),
+                arrayOf(ident("state"), ident("db"), ident("trail")),
+                arrayOf(ident("history"), ident("db"), ident("trail")),
+                arrayOf(ident("history"), ident("assignment"), ident("trail")),
                 arrayOf(ident("history"), ident("analysis"), ident("actions")),
             )
         }
 
+        /*
         SectionPaper {
             gridArea = ident("input")
             title = "Input"
@@ -213,6 +218,7 @@ val Visualizer: FC<Props> = FC("Visualizer") { _ ->
                 }
             }
         }
+         */
 
         SectionPaper {
             gridArea = ident("history")

kosat-web/src/jsMain/kotlin/sections/ActionsSection.kt

@@ -8,9 +8,12 @@ import js.core.jso
 import mui.material.Box
 import mui.material.Button
 import mui.material.ButtonVariant
+import mui.material.Dialog
+import mui.material.Paper
 import mui.material.Stack
 import mui.material.Tooltip
 import mui.material.Typography
+import mui.material.styles.TypographyVariant
 import mui.system.responsive
 import mui.system.sx
 import react.FC
@@ -20,9 +23,16 @@ import react.create
 import react.dom.html.ReactHTML.span
 import react.router.useNavigate
 import react.useContext
+import react.useState
+import web.cssom.AlignSelf
+import web.cssom.Auto.Companion.auto
+import web.cssom.Display
+import web.cssom.FlexDirection
+import web.cssom.min
 import web.cssom.number
 import web.cssom.pct
 import web.cssom.pt
+import web.cssom.vh
 
 /**
  * Section of the visualizer that contains primary buttons to control the
@@ -33,13 +43,42 @@ val ActionsSection: FC<Props> = FC("ActionsSection") {
     val solver = useContext(cdclWrapperContext)!!
     val dispatch = useContext(cdclDispatchContext)!!
     val navigate = useNavigate()
+    var inputShown by useState(false);
+
+    Dialog {
+        open = inputShown
+        onClose = { _, _ -> inputShown = false }
+
+        Paper {
+            elevation = 3
+
+            sx {
+                padding = 16.pt
+                minWidth = 300.pt
+                maxHeight = min(500.pt, 80.vh)
+                display = Display.flex
+                flexDirection = FlexDirection.column
+            }
+
+            Typography {
+                sx {
+                    alignSelf = AlignSelf.center
+                }
+                variant = TypographyVariant.h2
+                +"Input"
+            }
+
+            InputSection {}
+        }
+    }
 
     Stack {
         sx {
             height = 100.pct
+            overflow = auto
         }
 
-        spacing = responsive(8.pt)
+        spacing = responsive(4.pt)
 
         CommandButton {
             command = SolverCommand.Search
@@ -95,12 +134,18 @@ val ActionsSection: FC<Props> = FC("ActionsSection") {
             sx { flexGrow = number(1.0) }
         }
 
+        Button {
+            variant = ButtonVariant.outlined
+            onClick = { inputShown = true }
+            +"Edit input"
+        }
+
         Button {
             variant = ButtonVariant.outlined
             onClick = {
                 navigate("/")
             }
-            +"Back to the landing page..."
+            +"Landing page"
         }
     }
 }

kosat-web/src/jsMain/kotlin/sections/AssignmentSection.kt

@@ -26,7 +26,9 @@ import web.cssom.AlignItems
 import web.cssom.Auto.Companion.auto
 import web.cssom.Display
 import web.cssom.Position
+import web.cssom.array
 import web.cssom.number
+import web.cssom.pct
 import web.cssom.pt
 
 private external interface AssignmentItemProps : PropsWithStyle {
@@ -118,7 +120,7 @@ val AssignmentSection: FC<Props> = FC("AssignmentSection") {
             }
 
             direction = responsive(StackDirection.row)
-            spacing = responsive(8.pt)
+            spacing = responsive(0.pt)
 
             // We fall back to a fixed size grid if there are too many variables
             if (assignment.numberOfVariables < 30) {

kosat-web/src/jsMain/kotlin/sections/ClauseDbSection.kt

@@ -24,6 +24,7 @@ import web.cssom.Display
 import web.cssom.FlexDirection
 import web.cssom.FlexWrap
 import web.cssom.number
+import web.cssom.pct
 import web.cssom.pt
 
 private external interface ClauseListProps : Props {
@@ -93,7 +94,7 @@ val ClauseDbSection: FC<Props> = FC("ClauseDbSection") {
             sx {
                 padding = 8.pt
                 flexGrow = number(1.0)
-                minWidth = 300.pt
+                minWidth = 30.pct
                 overflow = auto
             }
 
@@ -130,7 +131,7 @@ val ClauseDbSection: FC<Props> = FC("ClauseDbSection") {
             sx {
                 padding = 8.pt
                 flexGrow = number(1.0)
-                minWidth = 300.pt
+                minWidth = 30.pct
                 overflow = auto
             }
 

kosat-web/src/jsMain/kotlin/sections/InputSection.kt

@@ -96,7 +96,7 @@ val InputSection: FC<Props> = FC("InputSection") {
     }
 
     Button {
-        +"Start"
+        +"Visualize"
         variant = ButtonVariant.contained
         onClick = {
             recreate()

kosat-web/src/jsMain/kotlin/sections/StateSection.kt

@@ -65,7 +65,9 @@ val StateSection: FC<Props> = FC("StateSection") {
     Box {
         sx {
             display = Display.flex
+            flexDirection = FlexDirection.column
             gap = 8.pt
+            flexGrow = number(1.0)
         }
 
         StateCard {
@@ -96,7 +98,7 @@ val StateSection: FC<Props> = FC("StateSection") {
 
         solver.state.inner.run {
             StateCard {
-                title = "Decision Level"
+                title = "Level"
 
                 Typography {
                     variant = TypographyVariant.h1