diff --git a/kosat-web/src/jsMain/kotlin/components/Links.kt b/kosat-web/src/jsMain/kotlin/components/Links.kt new file mode 100644 index 0000000..c91bf7e --- /dev/null +++ b/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 = 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 + } + } + } + } +} diff --git a/kosat-web/src/jsMain/kotlin/routes/Solver.kt b/kosat-web/src/jsMain/kotlin/routes/Solver.kt index 8510fc1..84dbf63 100644 --- a/kosat-web/src/jsMain/kotlin/routes/Solver.kt +++ b/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 = FC("Solver") { var errorShown by useState(false) val navigate = useNavigate() + Links {} + Typography { sx { textAlign = TextAlign.center diff --git a/kosat-web/src/jsMain/kotlin/routes/Visualizer.kt b/kosat-web/src/jsMain/kotlin/routes/Visualizer.kt index ccf3539..061941d 100644 --- a/kosat-web/src/jsMain/kotlin/routes/Visualizer.kt +++ b/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 = FC("Visualizer") { _ -> } } + Links {} + Typography { variant = TypographyVariant.h1 @@ -160,16 +164,17 @@ val Visualizer: FC = 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 = FC("Visualizer") { _ -> } } } + */ SectionPaper { gridArea = ident("history") diff --git a/kosat-web/src/jsMain/kotlin/sections/ActionsSection.kt b/kosat-web/src/jsMain/kotlin/sections/ActionsSection.kt index 9b5263e..09db63f 100644 --- a/kosat-web/src/jsMain/kotlin/sections/ActionsSection.kt +++ b/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 = 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 = 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" } } } diff --git a/kosat-web/src/jsMain/kotlin/sections/AssignmentSection.kt b/kosat-web/src/jsMain/kotlin/sections/AssignmentSection.kt index 37d8829..0918e4f 100644 --- a/kosat-web/src/jsMain/kotlin/sections/AssignmentSection.kt +++ b/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 = 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) { diff --git a/kosat-web/src/jsMain/kotlin/sections/ClauseDbSection.kt b/kosat-web/src/jsMain/kotlin/sections/ClauseDbSection.kt index 2f6669b..adb0f88 100644 --- a/kosat-web/src/jsMain/kotlin/sections/ClauseDbSection.kt +++ b/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 = 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 = FC("ClauseDbSection") { sx { padding = 8.pt flexGrow = number(1.0) - minWidth = 300.pt + minWidth = 30.pct overflow = auto } diff --git a/kosat-web/src/jsMain/kotlin/sections/InputSection.kt b/kosat-web/src/jsMain/kotlin/sections/InputSection.kt index 4bd3b82..75ea132 100644 --- a/kosat-web/src/jsMain/kotlin/sections/InputSection.kt +++ b/kosat-web/src/jsMain/kotlin/sections/InputSection.kt @@ -96,7 +96,7 @@ val InputSection: FC = FC("InputSection") { } Button { - +"Start" + +"Visualize" variant = ButtonVariant.contained onClick = { recreate() diff --git a/kosat-web/src/jsMain/kotlin/sections/StateSection.kt b/kosat-web/src/jsMain/kotlin/sections/StateSection.kt index 0ded117..d6d61b0 100644 --- a/kosat-web/src/jsMain/kotlin/sections/StateSection.kt +++ b/kosat-web/src/jsMain/kotlin/sections/StateSection.kt @@ -65,7 +65,9 @@ val StateSection: FC = 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 = FC("StateSection") { solver.state.inner.run { StateCard { - title = "Decision Level" + title = "Level" Typography { variant = TypographyVariant.h1