From f8352b246969df1cfc57538bf098d4f4828ee7c9 Mon Sep 17 00:00:00 2001 From: "Daniel A. Bekan" Date: Fri, 4 Aug 2023 12:52:27 +0200 Subject: [PATCH 1/2] fix label overlap --- src/Morphir/Visual/ViewApply.elm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Morphir/Visual/ViewApply.elm b/src/Morphir/Visual/ViewApply.elm index 925f9dbd6..fe6511ae4 100644 --- a/src/Morphir/Visual/ViewApply.elm +++ b/src/Morphir/Visual/ViewApply.elm @@ -371,9 +371,9 @@ pipeVisualisation config applyValue viewValue= , Element.centerY , tooltip Element.below (functionOutput config fqName mapFunctionValue args viewValue) , htmlAttribute (style "z-index" "10000") - , width (Element.shrink |> Element.minimum (config.state.theme.fontSize * 3) |> Element.maximum (config.state.theme.fontSize * 5)) + , width (Element.shrink |> Element.minimum (config.state.theme.fontSize * 3) |> Element.maximum (config.state.theme.fontSize * 15)) ] <| DecisionTree.rightArrow config False in - row [ spacing <| Theme.smallSpacing config.state.theme ] <|( getMapsRec applyValue) ++ [el [Font.italic] <| text " output "] \ No newline at end of file + row [ spacing <| Theme.smallSpacing config.state.theme, Element.paddingEach {top = Theme.largePadding config.state.theme, bottom = 0, left = 0, right = 0} ] <|( getMapsRec applyValue) ++ [el [Font.italic] <| text " output "] \ No newline at end of file From 136bf3fb24152cfe0b9c776be78dfaf35c9a0b3e Mon Sep 17 00:00:00 2001 From: "Daniel A. Bekan" Date: Fri, 4 Aug 2023 16:03:34 +0200 Subject: [PATCH 2/2] cleaner record visualisation --- cli/src/Morphir/Web/DevelopApp.elm | 4 +- cli/src/Morphir/Web/TryMorphir.elm | 2 +- .../Visual/Components/DrillDownPanel.elm | 3 +- src/Morphir/Visual/Components/FieldList.elm | 16 ++- src/Morphir/Visual/Theme.elm | 4 +- src/Morphir/Visual/ValueEditor.elm | 25 +++-- src/Morphir/Visual/ViewApply.elm | 99 ++++++++++--------- src/Morphir/Visual/ViewRecord.elm | 11 +-- src/Morphir/Visual/ViewValue.elm | 4 +- 9 files changed, 88 insertions(+), 80 deletions(-) diff --git a/cli/src/Morphir/Web/DevelopApp.elm b/cli/src/Morphir/Web/DevelopApp.elm index 80521be54..64d1c61a0 100644 --- a/cli/src/Morphir/Web/DevelopApp.elm +++ b/cli/src/Morphir/Web/DevelopApp.elm @@ -1303,7 +1303,7 @@ viewDecorationValues model node = editorState ) ) - |> FieldList.view + |> FieldList.view model.theme in column [ spacing (model.theme |> Theme.scaled 5) ] [ attributeToEditors ] @@ -2040,7 +2040,7 @@ viewDefinitionDetails model = (argState |> Dict.get argName |> Maybe.withDefault (ValueEditor.initEditorState ir argType Nothing)) ) ) - |> FieldList.view + |> FieldList.view model.theme buttonStyles : List (Element.Attribute msg) buttonStyles = diff --git a/cli/src/Morphir/Web/TryMorphir.elm b/cli/src/Morphir/Web/TryMorphir.elm index 7ee7ee482..93ab3b344 100644 --- a/cli/src/Morphir/Web/TryMorphir.elm +++ b/cli/src/Morphir/Web/TryMorphir.elm @@ -427,7 +427,7 @@ viewValue valueState ir fullyQualifiedName irView valueDef = (ValueEditor.initEditorState ir argType Nothing) ) ) - |> FieldList.view + |> FieldList.view theme in column [] [ editors diff --git a/src/Morphir/Visual/Components/DrillDownPanel.elm b/src/Morphir/Visual/Components/DrillDownPanel.elm index 76c968a74..b6e4d3f86 100644 --- a/src/Morphir/Visual/Components/DrillDownPanel.elm +++ b/src/Morphir/Visual/Components/DrillDownPanel.elm @@ -58,7 +58,7 @@ drillDownPanel theme config = , blur = 4 , color = rgba 0 0 0 0.2 } - , Background.color (rgba 1 1 1 1) + , Background.color theme.colors.lightest , htmlAttribute (style "filter" "brightness(97%)") , htmlAttribute (style "z-index" (String.fromInt config.zIndex)) ] @@ -74,6 +74,7 @@ drillDownPanel theme config = , Border.rounded 4 , Border.width 2 , Border.color (rgba 0 0 0 0.1) + , Background.color theme.colors.lightest ] [ el [ width (theme |> Theme.largeSpacing |> px) ] (expandIcon theme) , config.closedElement diff --git a/src/Morphir/Visual/Components/FieldList.elm b/src/Morphir/Visual/Components/FieldList.elm index 2ca04022f..e36324f52 100644 --- a/src/Morphir/Visual/Components/FieldList.elm +++ b/src/Morphir/Visual/Components/FieldList.elm @@ -1,15 +1,15 @@ module Morphir.Visual.Components.FieldList exposing (..) -import Element exposing (Element, centerY, el, fill, paddingXY, rgb, shrink, spacingXY, table, text, width) -import Element.Background as Background +import Element exposing (Element, centerY, el, fill, padding, shrink, spacingXY, table, text, width) import Element.Border as Border import Element.Font as Font import Morphir.IR.Name exposing (Name) import Morphir.Visual.Common exposing (nameToText) +import Morphir.Visual.Theme as Theme exposing (Theme) -view : List ( Name, Element msg ) -> Element msg -view fields = +view : Theme -> List ( Name, Element msg ) -> Element msg +view theme fields = table [ width fill , spacingXY 0 5 @@ -20,12 +20,10 @@ view fields = , view = \( fieldName, _ ) -> el - [ width fill - , paddingXY 10 5 + [ width shrink , centerY - , Font.color (rgb 1 1 1) , Font.bold - , Background.color (rgb 0.2 0.3 0.4) + , padding <| Theme.smallPadding theme , Border.roundEach { topLeft = 6 , bottomLeft = 6 @@ -33,7 +31,7 @@ view fields = , bottomRight = 0 } ] - (text (nameToText fieldName)) + (text <| (nameToText fieldName) ++ " : ") } , { header = text "" , width = shrink diff --git a/src/Morphir/Visual/Theme.elm b/src/Morphir/Visual/Theme.elm index 7a804ad8c..65e05871a 100644 --- a/src/Morphir/Visual/Theme.elm +++ b/src/Morphir/Visual/Theme.elm @@ -89,9 +89,9 @@ fromConfig maybeConfig = , mediumGray = rgb 0.5 0.5 0.5 , lightGray = rgba 0.9 0.9 0.9 0.5 , brandPrimary = rgb 0 0.639 0.882 - , brandPrimaryLight = rgba 0 0.639 0.882 0.3 + , brandPrimaryLight = rgba 0 0.639 0.882 0.2 , brandSecondary = rgb 1 0.411 0 - , brandSecondaryLight = rgba 1 0.411 0 0.3 + , brandSecondaryLight = rgba 1 0.411 0 0.2 , warning = rgba255 238 210 2 0.9 , highlighted = rgb255 0 163 255 , notHighlighted = rgb255 120 120 120 diff --git a/src/Morphir/Visual/ValueEditor.elm b/src/Morphir/Visual/ValueEditor.elm index ed0499412..8dc2a5b25 100644 --- a/src/Morphir/Visual/ValueEditor.elm +++ b/src/Morphir/Visual/ValueEditor.elm @@ -60,6 +60,10 @@ import Element , table , text , width + , centerX + , shrink + , minimum + , maximum ) import Element.Background as Background import Element.Border as Border @@ -88,7 +92,7 @@ import Morphir.Visual.Components.DatePickerComponent as DatePicker import Morphir.Visual.Components.FieldList as FieldList import Morphir.Visual.Components.InputComponent as InputComponent import Morphir.Visual.Components.Picklist as Picklist -import Morphir.Visual.Theme exposing (Theme) +import Morphir.Visual.Theme as Theme exposing (Theme) import Svg import Svg.Attributes @@ -588,7 +592,12 @@ view theme ir valueType updateEditorState editorState = labelStyle : List (Element.Attr () msg) labelStyle = - [ Background.color (rgb 0.2 0.3 0.4), centerY, Font.color (rgb 0.7 0.7 0.7), paddingEach { top = 5, bottom = 5, right = 10, left = 0 } ] + [ centerY + , centerX + , paddingEach { top = 5, bottom = 5, right = 10, left = 0 } + , width (shrink |> minimum (Theme.scaled 10 theme) |> maximum (Theme.scaled 15 theme)) + , Font.italic + ] in case editorState.componentState of TextEditor currentText -> @@ -730,13 +739,13 @@ view theme ir valueType updateEditorState editorState = RecordEditor fieldEditorStates -> row [] <| - [ el [ Background.color (rgb 0.2 0.3 0.4), centerY, Font.color (rgb 0.7 0.7 0.7), paddingXY 10 5 ] (text "record") + [ el [ Font.italic, paddingXY 10 5 ] (text "record") , el - [ padding 7 - , Background.color (rgb 0.7 0.8 0.9) - , Border.rounded 7 + [ padding <| Theme.largePadding theme + , Background.color theme.colors.brandPrimaryLight + , Theme.borderRounded theme ] - (FieldList.view + (FieldList.view theme (fieldEditorStates |> Dict.toList |> List.map @@ -866,7 +875,7 @@ view theme ir valueType updateEditorState editorState = itemEditorState in row [] <| - [ el [ Background.color (rgb 0.2 0.3 0.4), centerY, Font.color (rgb 0.7 0.7 0.7), paddingXY 0 5 ] (text "optional ") + [ el [ centerY, paddingXY 0 5, Font.italic ] (text "optional ") , itemEditor (maybeItemEditorState |> Maybe.withDefault (initEditorState ir itemType Nothing) diff --git a/src/Morphir/Visual/ViewApply.elm b/src/Morphir/Visual/ViewApply.elm index fe6511ae4..8bdda216a 100644 --- a/src/Morphir/Visual/ViewApply.elm +++ b/src/Morphir/Visual/ViewApply.elm @@ -81,7 +81,7 @@ view config viewDefinitionBody viewValue functionValue argValues applyValue = ( (Value.Constructor _ fQName) as constr, _ ) -> case config.ir |> Distribution.lookupTypeSpecification (config.ir |> Distribution.resolveAliases fQName) of Just (Type.TypeAliasSpecification _ (Type.Record _ fields)) -> - FieldList.view + FieldList.view config.state.theme (List.map2 (\field arg -> ( field.name @@ -324,56 +324,57 @@ functionOutput config fqName functionValue argValues viewValue = _ -> Element.none + pipeVisualisation : Config msg -> EnrichedValue -> (EnrichedValue -> Element msg) -> Element msg -pipeVisualisation config applyValue viewValue= +pipeVisualisation config applyValue viewValue = let - getMapsRec : EnrichedValue -> List (Element msg) - getMapsRec v = - let - recursiveCall : FQName -> EnrichedValue -> EnrichedValue -> EnrichedValue -> String -> List (Element msg) - recursiveCall currentFQName currentFunctionValue currentFunction src label = - getMapsRec src - ++ [ el - [ Border.width 2 - , Border.color config.state.theme.colors.brandSecondaryLight - , Theme.borderRounded config.state.theme - , Element.above <| el [ Font.color config.state.theme.colors.mediumGray, padding 4, Element.centerX, Element.centerY ] (text label) - ] - <| - viewValue currentFunction - , arrow currentFQName currentFunctionValue [ currentFunction, src ] - ] - in - case v of - Value.Apply _ applyFunction applyArgs -> - case Value.uncurryApply applyFunction applyArgs of - ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "map" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> - recursiveCall fqName mapFunctionValue mapfunc source "map" - - ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "filter" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> - recursiveCall fqName mapFunctionValue mapfunc source "filter" - - ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "filter", "map" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> - recursiveCall fqName mapFunctionValue mapfunc source "filter & map" - - _ -> - [ viewValue v ] + getMapsRec : EnrichedValue -> List (Element msg) + getMapsRec v = + let + recursiveCall : FQName -> EnrichedValue -> EnrichedValue -> EnrichedValue -> String -> List (Element msg) + recursiveCall currentFQName currentFunctionValue currentFunction src label = + getMapsRec src + ++ [ Element.column + [ Border.width 2 + , Border.color config.state.theme.colors.brandSecondaryLight + , Theme.borderRounded config.state.theme + ] + [ el [ Font.color config.state.theme.colors.mediumGray, padding 3, Element.centerX, Element.centerY ] (text label) + , viewValue currentFunction + ] + , arrow currentFQName currentFunctionValue [ currentFunction, src ] + ] + in + case v of + Value.Apply _ applyFunction applyArgs -> + case Value.uncurryApply applyFunction applyArgs of + ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "map" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> + recursiveCall fqName mapFunctionValue mapfunc source "map" + + ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "filter" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> + recursiveCall fqName mapFunctionValue mapfunc source "filter" + + ( (Value.Reference _ (( [ [ "morphir" ], [ "s", "d", "k" ] ], _, [ "filter", "map" ] ) as fqName)) as mapFunctionValue, [ mapfunc, source ] ) -> + recursiveCall fqName mapFunctionValue mapfunc source "filter & map" _ -> - [ viewValue v - , arrow ( [], [], [] ) v [] - ] + [ viewValue v ] - arrow : FQName -> EnrichedValue -> List EnrichedValue -> Element msg - arrow fqName mapFunctionValue args = - el - [ Element.centerX - , Element.centerY - , tooltip Element.below (functionOutput config fqName mapFunctionValue args viewValue) - , htmlAttribute (style "z-index" "10000") - , width (Element.shrink |> Element.minimum (config.state.theme.fontSize * 3) |> Element.maximum (config.state.theme.fontSize * 15)) - ] - <| - DecisionTree.rightArrow config False - in - row [ spacing <| Theme.smallSpacing config.state.theme, Element.paddingEach {top = Theme.largePadding config.state.theme, bottom = 0, left = 0, right = 0} ] <|( getMapsRec applyValue) ++ [el [Font.italic] <| text " output "] \ No newline at end of file + _ -> + [ viewValue v + , arrow ( [], [], [] ) v [] + ] + + arrow : FQName -> EnrichedValue -> List EnrichedValue -> Element msg + arrow fqName mapFunctionValue args = + el + [ Element.centerX + , Element.centerY + , tooltip Element.below (functionOutput config fqName mapFunctionValue args viewValue) + , htmlAttribute (style "z-index" "10000") + , width (Element.shrink |> Element.minimum (config.state.theme.fontSize * 3) |> Element.maximum (config.state.theme.fontSize * 5)) + ] + <| + DecisionTree.rightArrow config False + in + row [ spacing <| Theme.smallSpacing config.state.theme ] <| getMapsRec applyValue ++ [ el [ Font.italic ] <| text " output " ] diff --git a/src/Morphir/Visual/ViewRecord.elm b/src/Morphir/Visual/ViewRecord.elm index 05be86cf9..8450dab04 100644 --- a/src/Morphir/Visual/ViewRecord.elm +++ b/src/Morphir/Visual/ViewRecord.elm @@ -1,14 +1,13 @@ module Morphir.Visual.ViewRecord exposing (..) import Dict exposing (Dict) -import Element exposing (Element, el, none, padding, rgb) +import Element exposing (Element, el, none, padding) import Element.Background as Background -import Element.Border as Border import Morphir.IR.Name exposing (Name) import Morphir.Visual.Components.FieldList as FieldList import Morphir.Visual.Config exposing (Config) import Morphir.Visual.EnrichedValue exposing (EnrichedValue) -import Morphir.Visual.Theme exposing (smallPadding) +import Morphir.Visual.Theme exposing (smallPadding, borderRounded) view : Config msg -> (EnrichedValue -> Element msg) -> Dict Name EnrichedValue -> Element msg @@ -23,7 +22,7 @@ view config viewValue items = else el [ smallPadding config.state.theme |> padding - , Background.color (rgb 0.7 0.8 0.9) - , Border.rounded 7 + , Background.color config.state.theme.colors.brandPrimaryLight + , borderRounded config.state.theme ] - (FieldList.view fields) + (FieldList.view config.state.theme fields) diff --git a/src/Morphir/Visual/ViewValue.elm b/src/Morphir/Visual/ViewValue.elm index c93e77a54..b644cde69 100644 --- a/src/Morphir/Visual/ViewValue.elm +++ b/src/Morphir/Visual/ViewValue.elm @@ -341,8 +341,8 @@ viewValueByLanguageFeature config value = el [ Element.centerX, Element.centerY, smallPadding config.state.theme |> padding ] (text "not set") Value.UpdateRecord _ record newFields -> - Element.column [ Element.height fill ] - [ Element.row [ smallPadding config.state.theme |> padding ] [ text "updating ", viewValue config record, text " with" ] + Element.column [ Background.color config.state.theme.colors.lightest, Theme.borderRounded config.state.theme ] + [ Element.row [ smallPadding config.state.theme |> padding ] [ text "updating the following fields of ", viewValue config record] , ViewRecord.view config (viewValue config) newFields ]