Pipe visualisation

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 =

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

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

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,20 +20,18 @@ 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
                                 , topRight = 0
                                 , bottomRight = 0
                                 }
                             ]
-                            (text (nameToText fieldName))
+                            (text <| (nameToText fieldName) ++ " : ")
               }
             , { header = text ""
               , width = shrink

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

src/Morphir/Visual/ValueEditor.elm

@@ -60,9 +60,10 @@ import Element
         , table
         , text
         , width
+        , centerX
+        , shrink
         , minimum
         , maximum
-        , shrink
         )
 import Element.Background as Background
 import Element.Border as Border
@@ -91,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, scaled)
+import Morphir.Visual.Theme as Theme exposing (Theme, scaled)
 import Svg
 import Svg.Attributes
 
@@ -591,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 ->
@@ -733,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
@@ -868,7 +874,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)

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 * 5))
-                        ]
-                    <|
-                        DecisionTree.rightArrow config False
-            in
-            row [ spacing <| Theme.smallSpacing config.state.theme ] <|( getMapsRec applyValue) ++ [el [Font.italic] <| text " output "]
+                _ ->
+                    [ 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 " ]

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)

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
                         ]