From 9b7aedcf13dfc1fee088b161e795420cca93ce4b Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Tue, 25 Nov 2025 16:56:30 +1300 Subject: [PATCH 1/9] Partially model disposition intermediate representation. --- doc/src/SUMMARY.md | 2 + doc/src/side_projects/disposition.md | 464 +-------- .../disposition/example_input.md | 476 ++++++++++ .../example_intermediate_representation.md | 892 ++++++++++++++++++ .../peer_data_attribute_experiment.svg | 409 ++++++++ 5 files changed, 1799 insertions(+), 444 deletions(-) create mode 100644 doc/src/side_projects/disposition/example_input.md create mode 100644 doc/src/side_projects/disposition/example_intermediate_representation.md create mode 100644 doc/src/side_projects/disposition/peer_data_attribute_experiment.svg diff --git a/doc/src/SUMMARY.md b/doc/src/SUMMARY.md index 4e6b0428b..32cee6d2d 100644 --- a/doc/src/SUMMARY.md +++ b/doc/src/SUMMARY.md @@ -74,6 +74,8 @@ - [Side Projects](side_projects.md) - [✒ī¸ Dot IX](side_projects/dot_ix.md) - [📐 disposition](side_projects/disposition.md) + - [Example Input](side_projects/disposition/example_input.md) + - [Example Intermediate Representation](side_projects/disposition/example_intermediate_representation.md) --- diff --git a/doc/src/side_projects/disposition.md b/doc/src/side_projects/disposition.md index d1c8a5db6..a240e5301 100644 --- a/doc/src/side_projects/disposition.md +++ b/doc/src/side_projects/disposition.md @@ -102,7 +102,7 @@ We need to choose one or a combination of: * HTML DOM * [`taffy`][`taffy`] format. -ℹī¸ **Note:** we also need to consider edge descriptions -- how do we place these in the DOM? `taffy` will be used for flex / grid layout, but where would we place edge DOM elements? +ℹī¸ **Note:** we also need to consider edge descriptions -- how do we place these in the DOM? `taffy` will be used for flex layout, but where would we place edge DOM elements? ### 4. Layout @@ -222,452 +222,28 @@ Probably: ## Example Input -````yaml ---- -# Things in the diagram. -# -# This map defines the `ThingId`s and their display names. -things: &things - aws: "☁ī¸ Amazon Web Services" - aws_iam: "🖊ī¸ Identity and Access Management" - aws_iam_ecs_policy: "🗒ī¸ ECS IAM Policy" - aws_ecr: "🗄ī¸ Elastic Container Registry" - aws_ecr_repo: "đŸ’Ŋ web_app repo" - aws_ecr_repo_image_1: "đŸ’ŋ Image 1" - aws_ecr_repo_image_2: "đŸ’ŋ Image 2" - aws_ecs: "đŸ’ģ Elastic Container Service" - aws_ecs_cluster_app: "🎛ī¸ web_app cluster" - aws_ecs_cluster_app_task: "🖨ī¸ web_app task version 1" - github: "🐙 GitHub" - github_user_repo: "azriel91/web_app" - localhost: "🧑‍đŸ’ģ Localhost" - localhost_repo: "📂 ~/work/web_app" - localhost_repo_src: "📝 src" - localhost_repo_target: "📂 target" - localhost_repo_target_file_zip: "📝 file.zip" - localhost_repo_target_dist_dir: "📁 dist" - -# Render a copy text button, and, when clicked, what text to place on the clipboard. -thing_copy_text: - <<: *things - localhost_repo: "~/work/web_app" - localhost_repo_src: "~/work/web_app/src" - localhost_repo_target: "~/work/web_app/target" - localhost_repo_target_file_zip: "~/work/web_app/target/file.zip" - localhost_repo_target_dist_dir: "~/work/web_app/target/dist" - -# Hierarchy of `thing`s. -# -# The `ThingHierarchy` is a tree structure stored as a map of `ThingId` to `ThingHierarchy`. This structure is strictly unidirectional. -# -# This defines the nesting, but perhaps we should use it to define the relative positioning as well. -# -# Do we want users to have control, e.g. placing the things in a grid? -# -# Other question, the positioning for a software dependency tree is different to the positioning -# for deployment topology. Maybe we allow the user to specify either "rank" based layout or "flow" -# based layout. -thing_hierarchy: - aws: - aws_iam: - aws_iam_ecs_policy: {} - aws_ecr: - aws_ecr_repo: - aws_ecr_repo_image_1: {} - aws_ecr_repo_image_2: {} - - github: - github_user_repo: {} - - localhost: - localhost_repo: - localhost_repo_src: {} - localhost_repo_target: - localhost_repo_target_file_zip: {} - localhost_repo_target_dist_dir: {} - -# How to position things on the diagram. -# -# Not sure if this is the right approach yet, but ideas: -# -# * `rank`: `thing_dependencies`' edges affect how far a `thing` is from the beginning position. -# * `flex`: `thing_hierarchy` alternates between horizontal and vertical flex axes. -# -# ```yaml -# thing_layout: -# # one of: -# flex: "row" -# # flex: "column" -# # rank: "horizontal" -# # rank: "vertical" -# ``` - -# Dependencies between things can be one way, or cyclic. -# -# Dependencies are static relationships between things, and should be rendered as "on" or "off" -# depending on whether a `thing` is focused / targeted, and whether the user wants to see: -# -# * Predecessors / successors linked to this thing. -# * Immediate dependencies vs transitive (maybe closest `n` neighbours). -# -# * When B depends on A, it means A must exist before B. -# * Changes to A means B is out of date. -# -# How we render dependencies (forward / backward / undirected / bidirectional arrows) can be -# defined separately from the meaning of the dependency. -# -# We want to make it easy to define dependencies between chains of things. -thing_dependencies: &thing_dependencies - edge_localhost__github_user_repo__pull: - # Last thing in the list has an edge back to first thing. - # - # Should have at least one `thing`. - cyclic: - - localhost - - github_user_repo - edge_localhost__github_user_repo__push: - # 2 or more things - sequence: - - localhost - - github_user_repo - edge_localhost__localhost__within: - cyclic: - - localhost - edge_github_user_repo__github_user_repo__within: - cyclic: - - github_user_repo - edge_github_user_repo__aws_ecr_repo__push: - sequence: - - github_user_repo - - aws_ecr_repo - edge_aws_ecr_repo__aws_ecs_service__push: - sequence: - - aws_ecr_repo - - aws_ecs_service - -# Descriptions to render next to each arrow. -# -# This is intended to take markdown text. -thing_dependencies_descs: - edge_localhost__github_user_repo__pull: |- - `git pull` - edge_localhost__github_user_repo__push: |- - `git push` - edge_localhost__localhost__within: ~ - edge_github_user_repo__github_user_repo__within: ~ - edge_github_user_repo__aws_ecr_repo__push: ~ - edge_aws_ecr_repo__aws_ecs_service__push: ~ - -# Interactions between things can be one way, or cyclic. -# -# Interactions have the same data structure as dependencies, but are conceptually different: -# `thing_dependencies` is intended to represent dependencies between software libraries, -# while interactions are communication between applications. -# -# There *are* ordering dependencies between interactions, but *when* it is useful to render -# `thing_dependencies` and `thing_interactions` differ. Dependencies are static at a point in time, -# so it is useful to render the links between multiple `thing`s; interactions are present when a -# step in a process is executing, so they are rendered when the step is focused. -# -# IDs here can be the same as the ones in `thing_dependencies`. -# -# We want to make it easy to define interactions between chains of things. -thing_interactions: *thing_dependencies # cheat and use yaml reference - -# Processes are groupings of interactions between things sequenced over time. -# -# We want to make it easy to see which things are involved (in each step of) a process. By -# highlighting the things / edges when a user focuses on a step in a process, it brings clarity to -# the user. -processes: - proc_app_dev: - name: "App Development" - desc: |- - Development of the web application. - - * [🐙 Repo](https://github.com/azriel91/web_app) - steps: - proc_app_dev_step_repository_clone: "Clone repository" - proc_app_dev_step_project_build: "Build project" - step_descs: - proc_app_dev_step_repository_clone: |- - ```bash - git clone https://github.com/azriel91/web_app.git - ``` - - proc_app_dev_step_project_build: |- - Develop the app: - - * Always link to issue. - * Open PR. - - # Thing interactions that should be actively highlighted when this step is focused. - # - # The things associated with all of the interaction IDs in the list should be highlighted. - # - # optional, references IDs in `thing_interactions` top level element. - step_thing_interactions: - proc_app_dev_step_repository_clone: [edge_localhost__github_user_repo__pull] - proc_app_dev_step_project_build: [edge_localhost__localhost__within] - - proc_app_release: - steps: - proc_app_release_step_crate_version_update: "Update crate versions" - proc_app_release_step_pull_request_open: "Open PR" - proc_app_release_step_tag_and_push: "Tag and push" - proc_app_release_step_gh_actions_build: "Github Actions build" - proc_app_release_step_gh_actions_publish: "Github Actions publish" - - step_descs: - proc_app_release_step_crate_version_update: |- - ```bash - sd -s 'version = "0.3.0"' 'version = "0.3.0"' $(fd -tf -F toml) README.md src/lib.rs - ``` - proc_app_release_step_pull_request_open: |- - Create a pull request as usual. - proc_app_release_step_gh_actions_build: |- - Github Actions will build the image. - proc_app_release_step_tag_and_push: |- - When the PR is merged, tag the commit and push the tag to GitHub. - - ```bash - git tag 0.3.0 - git push origin 0.3.0 - ``` - - The build will push the new version to ECR automatically. - proc_app_release_step_gh_actions_publish: |- - Github Actions will publish the image to AWS ECR. - - step_thing_interactions: - proc_app_release_step_crate_version_update: [edge_localhost__localhost__within] - proc_app_release_step_pull_request_open: [edge_localhost__github_user_repo__pull] - proc_app_release_step_tag_and_push: [edge_localhost__github_user_repo__push] - proc_app_release_step_gh_actions_build: [edge_github_user_repo__github_user_repo__within] - proc_app_release_step_gh_actions_publish: [edge_github_user_repo__aws_ecr_repo__push] - - # Some processes not defined yet. - # - # proc_i12e_global_deploy: {} - # proc_i12e_region_mgmt_deploy: {} - # proc_i12e_region_tier_subnets_deploy: {} - proc_i12e_region_tier_app_deploy: - steps: - proc_i12e_region_tier_app_deploy_step_ecs_service_update: "Update ECS service" - - step_descs: - proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- - Deploy or update the existing ECS service with the new image. - step_thing_interactions: - proc_i12e_region_tier_app_deploy_step_ecs_service_update: [edge_aws_ecr_repo__aws_ecs_service__push] - -# Tags are labels that can be associated with things, so that the things can be highlighted when -# the tag is focused. -tags: - tag_app_development: "Application Development" - tag_deployment: "Deployment" - -# Things and edges that are associated with each tag. -# -# It probably makes sense to specify the `things` for each tag, than the tags associated with each -# thing. i.e. the key being the tag, instead of the key being the `thing` IDs. -tag_things: - tag_app_development: - - github_user_repo - - localhost - tag_deployment: - - edge_aws_ecr_repo__aws_ecs_service__push - -# `type`s we attach to `things` / `thing_dependencies` / `tags`, so they can be styled in common. -# -# This is like a tag, but doesn't require the user to click on the tag to apply the style. -# -# Unlike tags, each `thing` / `thing_dependency` / `tag` can only have one `type`, so this map is keyed by the `thing` ID. -types: - aws: "type_organisation" - aws_iam: "type_service" - aws_iam_ecs_policy: ~ - aws_ecr: "type_service" - aws_ecr_repo: ~ - aws_ecr_repo_image_1: "type_docker_image" - aws_ecr_repo_image_2: "type_docker_image" - aws_ecs: "type_service" - aws_ecs_cluster_app: ~ - aws_ecs_cluster_app_task: ~ - github: "type_organisation" - github_user_repo: ~ - localhost: ~ - localhost_repo: ~ - localhost_repo_src: ~ - localhost_repo_target: ~ - localhost_repo_target_file_zip: ~ - localhost_repo_target_dist_dir: ~ - - edge_localhost__github_user_repo__pull: ~ - edge_localhost__github_user_repo__push: ~ - edge_localhost__localhost__within: ~ - edge_github_user_repo__github_user_repo__within: ~ - edge_github_user_repo__aws_ecr_repo__push: ~ - edge_aws_ecr_repo__aws_ecs_service__push: ~ - - tag_app_development: tag_type_default - tag_deployment: tag_type_default - -# Styles when the diagram has no user interaction. -# -# It's important for UX that the field nesting level (and hence indentation level) is consistent -# with the other `theme_*` data. -# -# `style_aliases` here are available to all the other `theme_*` data. -theme_default: - # `StyleAliases` will have well-known keys, and is extendable to have custom keys. - # - # i.e. a `StyleAlias` enum, with a final variant of `Custom(String)`. - style_aliases: - padding_none: - padding_top: "0" - padding_bottom: "0" - padding_left: "0" - padding_right: "0" - padding_tight: - padding_top: "2" - padding_bottom: "2" - padding_left: "2" - padding_right: "2" - padding_normal: - padding_top: "4" - padding_bottom: "4" - padding_left: "4" - padding_right: "4" - padding_wide: - padding_top: "6" - padding_bottom: "6" - padding_left: "6" - padding_right: "6" - shade_pale: - fill_shade_hover: "50" - fill_shade_normal: "100" - fill_shade_focus: "200" - fill_shade_active: "300" - stroke_shade_hover: "100" - stroke_shade_normal: "200" - stroke_shade_focus: "300" - stroke_shade_active: "400" - shade_light: - fill_shade_hover: "200" - fill_shade_normal: "300" - fill_shade_focus: "400" - fill_shade_active: "500" - stroke_shade_hover: "300" - stroke_shade_normal: "400" - stroke_shade_focus: "500" - stroke_shade_active: "600" - shade_medium: - fill_shade_hover: "400" - fill_shade_normal: "500" - fill_shade_focus: "600" - fill_shade_active: "700" - stroke_shade_hover: "500" - stroke_shade_normal: "600" - stroke_shade_focus: "700" - stroke_shade_active: "800" - shade_dark: - fill_shade_hover: "600" - fill_shade_normal: "700" - fill_shade_focus: "800" - fill_shade_active: "900" - stroke_shade_hover: "700" - stroke_shade_normal: "800" - stroke_shade_focus: "900" - stroke_shade_active: "950" - stroke_dashed_animated: - stroke_style: "dashed" - stroke_width: "2" - animate: "[stroke-dashoffset-move_2s_linear_infinite]" - - # The keys in this map can be: - # - # * `thing_defaults`: Applies to all things. - # * `edge_defaults`: Applies to all edges. - # * `thing_id`: Applies to the particular thing. - # * `edge_id`: Applies to the particular edge. - # * `tag_id`: Applies to the tag. - base_styles: - thing_defaults: - # Vector of style aliases to apply. - style_aliases_applied: [shade_light] - # Used for both fill and stroke colors. - shape_color: "slate" - stroke_style: "solid" - stroke_width: "1" - visibility: "visible" - edge_defaults: - stroke_width: "1" - visibility: "visible" - edge_localhost__github_user_repo__pull: - style_aliases_applied: [shade_light] - shape_color: "blue" - -# Styles applied to things / edges of a particular `type` specified in `thing_types`. -theme_types_styles: - type_organisation: - thing_defaults: - stroke_style: "dotted" - style_aliases_applied: [shade_pale] - - type_docker_image: - thing_defaults: - shape_color: "blue" - -# Styles when a `thing` is focused. -# -# Depending on which button is pressed, when a `thing` is focused, these same styles may be used to -# show: -# -# * Predecessors / successors linked to this `thing`. -# * Immediate dependencies vs transitive (maybe closest `n` neighbours). -theme_thing_dependencies_styles: - things_excluded_styles: - thing_defaults: - visibility: "hidden" - edge_defaults: - visibility: "hidden - things_included_styles: - thing_defaults: - visibility: "visible" - -# When a tag is focused, things and edges associated with the tag are highlighted. -# -# We also want to allow things that are not associated with the tag to be styled, but having one -# layer with the tag ID, and one layer of `things_included_styles` and `things_excluded_styles` -# makes it one nesting level deeper than the other `theme_*` keys. -# -# So we have a `theme_tag_things_focus` map that applies to all tags' styles, and if the consumer -# wants to style things differently per tag, they can do so in the -# `theme_tag_things_focus_specific` map. -theme_tag_things_focus: - things_included_styles: - thing_defaults: - opacity: "0.5" - things_excluded_styles: - thing_defaults: - style_aliases_applied: [stroke_dashed_animated] - -theme_tag_things_focus_specific: - tag_app_development: - thing_defaults: - style_aliases_applied: [stroke_dashed_animated] - -# Additional CSS to place in the SVG's inline `` section. -css: |- - @keyframes stroke-dashoffset-move { - 0% { stroke-dashoffset: 30; } - 100% { stroke-dashoffset: 0; } - } -```` +See [`example_input.md`](example_input.md) for an example. + + +## Example Intermediate Representation (IR) + +See [`example_intermediate_representation.md`](example_intermediate_representation.md) for an example. + + +## Experiments + +### Group Focus
+ +### Peer Data Attribute + + +
diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md new file mode 100644 index 000000000..f9eca3e43 --- /dev/null +++ b/doc/src/side_projects/disposition/example_input.md @@ -0,0 +1,476 @@ +# Example Input + +````yaml +--- +# Things in the diagram. +# +# This map defines the `ThingId`s and their display names. +things: &things + t_aws: "☁ī¸ Amazon Web Services" + t_aws_iam: "🖊ī¸ Identity and Access Management" + t_aws_iam_ecs_policy: "🗒ī¸ ECS IAM Policy" + t_aws_ecr: "🗄ī¸ Elastic Container Registry" + t_aws_ecr_repo: "đŸ’Ŋ web_app repo" + t_aws_ecr_repo_image_1: "đŸ’ŋ Image 1" + t_aws_ecr_repo_image_2: "đŸ’ŋ Image 2" + t_aws_ecs: "đŸ’ģ Elastic Container Service" + t_aws_ecs_cluster_app: "🎛ī¸ web_app cluster" + t_aws_ecs_cluster_app_task: "🖨ī¸ web_app task version 1" + t_github: "🐙 GitHub" + t_github_user_repo: "azriel91/web_app" + t_localhost: "🧑‍đŸ’ģ Localhost" + t_localhost_repo: "📂 ~/work/web_app" + t_localhost_repo_src: "📝 src" + t_localhost_repo_target: "📂 target" + t_localhost_repo_target_file_zip: "📝 file.zip" + t_localhost_repo_target_dist_dir: "📁 dist" + +# Render a copy text button, and, when clicked, what text to place on the clipboard. +thing_copy_text: + <<: *things + t_localhost_repo: "~/work/web_app" + t_localhost_repo_src: "~/work/web_app/src" + t_localhost_repo_target: "~/work/web_app/target" + t_localhost_repo_target_file_zip: "~/work/web_app/target/file.zip" + t_localhost_repo_target_dist_dir: "~/work/web_app/target/dist" + +# Hierarchy of `thing`s. +# +# The `ThingHierarchy` is a tree structure stored as a map of `ThingId` to `ThingHierarchy`. This structure is strictly unidirectional. +# +# This defines the nesting, but perhaps we should use it to define the relative positioning as well. +# +# Do we want users to have control? Probably some, e.g. the order of declaration affects the +# position of the `thing` in a flex box. +# +# Other question, the positioning for a software dependency tree is different to the positioning +# for deployment topology. Maybe we allow the user to specify either "rank" based layout or "flow" +# based layout. +thing_hierarchy: + t_aws: + t_aws_iam: + t_aws_iam_ecs_policy: {} + t_aws_ecr: + t_aws_ecr_repo: + t_aws_ecr_repo_image_1: {} + t_aws_ecr_repo_image_2: {} + + t_github: + t_github_user_repo: {} + + t_localhost: + t_localhost_repo: + t_localhost_repo_src: {} + t_localhost_repo_target: + t_localhost_repo_target_file_zip: {} + t_localhost_repo_target_dist_dir: {} + +# How to position things on the diagram. +# +# Not sure if this is the right approach yet, but ideas: +# +# * `rank`: `thing_dependencies`' edges affect how far a `thing` is from the beginning position. +# * `flex`: `thing_hierarchy` alternates between horizontal and vertical flex axes. +# +# ```yaml +# thing_layout: +# # one of: +# flex: "row" +# # flex: "column" +# # rank: "horizontal" +# # rank: "vertical" +# ``` + +# Dependencies between things can be one way, or cyclic. +# +# Dependencies are static relationships between things, and should be rendered as "on" or "off" +# depending on whether a `thing` is focused / targeted, and whether the user wants to see: +# +# * Predecessors / successors linked to this thing. +# * Immediate dependencies vs transitive (maybe closest `n` neighbours). +# +# * When B depends on A, it means A must exist before B. +# * Changes to A means B is out of date. +# +# How we render dependencies (forward / backward / undirected / bidirectional arrows) can be +# defined separately from the meaning of the dependency. +# +# We want to make it easy to define dependencies between chains of things. +thing_dependencies: &thing_dependencies + edge_t_localhost__t_github_user_repo__pull: + # Last thing in the list has an edge back to first thing. + # + # Should have at least one `thing`. + cyclic: + - t_localhost + - t_github_user_repo + edge_t_localhost__t_github_user_repo__push: + # 2 or more things + sequence: + - t_localhost + - t_github_user_repo + edge_t_localhost__t_localhost__within: + cyclic: + - t_localhost + edge_t_github_user_repo__t_github_user_repo__within: + cyclic: + - t_github_user_repo + edge_t_github_user_repo__t_aws_ecr_repo__push: + sequence: + - t_github_user_repo + - t_aws_ecr_repo + edge_t_aws_ecr_repo__t_aws_ecs_service__push: + sequence: + - t_aws_ecr_repo + - t_aws_ecs_service + +# Descriptions to render next to each arrow. +# +# This is intended to take markdown text. +thing_dependencies_descs: + edge_t_localhost__t_github_user_repo__pull: |- + `git pull` + edge_t_localhost__t_github_user_repo__push: |- + `git push` + edge_t_localhost__t_localhost__within: ~ + edge_t_github_user_repo__t_github_user_repo__within: ~ + edge_t_github_user_repo__t_aws_ecr_repo__push: ~ + edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ + +# Interactions between things can be one way, or cyclic. +# +# Interactions have the same data structure as dependencies, but are conceptually different: +# `thing_dependencies` is intended to represent dependencies between software libraries, +# while interactions are communication between applications. +# +# There *are* ordering dependencies between interactions, but *when* it is useful to render +# `thing_dependencies` and `thing_interactions` differ. Dependencies are static at a point in time, +# so it is useful to render the links between multiple `thing`s; interactions are present when a +# step in a process is executing, so they are rendered when the step is focused. +# +# IDs here can be the same as the ones in `thing_dependencies`. +# +# We want to make it easy to define interactions between chains of things. +thing_interactions: *thing_dependencies # cheat and use yaml reference + +# Processes are groupings of interactions between things sequenced over time. +# +# We want to make it easy to see which things are involved (in each step of) a process. By +# highlighting the things / edges when a user focuses on a step in a process, it brings clarity to +# the user. +processes: + proc_app_dev: + name: "App Development" + desc: |- + Development of the web application. + + * [🐙 Repo](https://github.com/azriel91/web_app) + steps: + proc_app_dev_step_repository_clone: "Clone repository" + proc_app_dev_step_project_build: "Build project" + step_descs: + proc_app_dev_step_repository_clone: |- + ```bash + git clone https://github.com/azriel91/web_app.git + ``` + + proc_app_dev_step_project_build: |- + Develop the app: + + * Always link to issue. + * Open PR. + + # Thing interactions that should be actively highlighted when this step is focused. + # + # The things associated with all of the interaction IDs in the list should be highlighted. + # + # optional, references IDs in `thing_interactions` top level element. + step_thing_interactions: + proc_app_dev_step_repository_clone: [edge_t_localhost__t_github_user_repo__pull] + proc_app_dev_step_project_build: [edge_t_localhost__t_localhost__within] + + proc_app_release: + name: "App Release" + steps: + proc_app_release_step_crate_version_update: "Update crate versions" + proc_app_release_step_pull_request_open: "Open PR" + proc_app_release_step_tag_and_push: "Tag and push" + proc_app_release_step_gh_actions_build: "Github Actions build" + proc_app_release_step_gh_actions_publish: "Github Actions publish" + + step_descs: + proc_app_release_step_crate_version_update: |- + ```bash + sd -s 'version = "0.3.0"' 'version = "0.3.0"' $(fd -tf -F toml) README.md src/lib.rs + ``` + proc_app_release_step_pull_request_open: |- + Create a pull request as usual. + proc_app_release_step_gh_actions_build: |- + Github Actions will build the image. + proc_app_release_step_tag_and_push: |- + When the PR is merged, tag the commit and push the tag to GitHub. + + ```bash + git tag 0.3.0 + git push origin 0.3.0 + ``` + + The build will push the new version to ECR automatically. + proc_app_release_step_gh_actions_publish: |- + Github Actions will publish the image to AWS ECR. + + step_thing_interactions: + proc_app_release_step_crate_version_update: [edge_t_localhost__t_localhost__within] + proc_app_release_step_pull_request_open: [edge_t_localhost__t_github_user_repo__pull] + proc_app_release_step_tag_and_push: [edge_t_localhost__t_github_user_repo__push] + proc_app_release_step_gh_actions_build: [edge_t_github_user_repo__t_github_user_repo__within] + proc_app_release_step_gh_actions_publish: [edge_t_github_user_repo__t_aws_ecr_repo__push] + + # Some processes not defined yet. + # + # proc_i12e_global_deploy: {} + # proc_i12e_region_mgmt_deploy: {} + # proc_i12e_region_tier_subnets_deploy: {} + proc_i12e_region_tier_app_deploy: + name: "Prod App Deploy" + steps: + proc_i12e_region_tier_app_deploy_step_ecs_service_update: "Update ECS service" + + step_descs: + proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- + Deploy or update the existing ECS service with the new image. + step_thing_interactions: + proc_i12e_region_tier_app_deploy_step_ecs_service_update: [edge_t_aws_ecr_repo__t_aws_ecs_service__push] + +# Tags are labels that can be associated with things, so that the things can be highlighted when +# the tag is focused. +tags: + tag_app_development: "Application Development" + tag_deployment: "Deployment" + +# Things and edges that are associated with each tag. +# +# It probably makes sense to specify the `things` for each tag, than the tags associated with each +# thing. i.e. the key being the tag, instead of the key being the `thing` IDs. +tag_things: + tag_app_development: + - t_github_user_repo + - t_localhost + tag_deployment: + - edge_t_aws_ecr_repo__t_aws_ecs_service__push + +# `Type`s that are automatically attached to each entity: +# +# * `things` +# * `thing_dependencies` +# * `tags` +# * `processes` +# * `process_steps` +# +# These allow us to +# +# Note: these do not actually appear in the diagram schema, but are listed so we know what default +# types are available. +# +# ```yaml +# types: +# - type_thing_default +# - type_edge_dependency_sequence_request_default +# - type_edge_dependency_sequence_response_default +# - type_edge_dependency_cyclic_default +# - type_edge_interaction_sequence_request_default +# - type_edge_interaction_sequence_response_default +# - type_edge_interaction_cyclic_default +# - type_tag_default +# - type_process_default +# - type_process_step_default +# ``` + +# Additional `type`s we attach to `things` / `thing_dependencies` / `tags`, so they can be styled +# in common. +# +# This is like a tag, but doesn't require the user to click on the tag to apply the style. +# +# Unlike tags, each `thing` / `thing_dependency` / `tag` can only have one `type`, so this map is keyed by the `thing` ID. +entity_types: + t_aws: "type_organisation" + t_aws_iam: "type_service" + t_aws_iam_ecs_policy: ~ + t_aws_ecr: "type_service" + t_aws_ecr_repo: ~ + t_aws_ecr_repo_image_1: "type_docker_image" + t_aws_ecr_repo_image_2: "type_docker_image" + t_aws_ecs: "type_service" + t_aws_ecs_cluster_app: ~ + t_aws_ecs_cluster_app_task: ~ + t_github: "type_organisation" + t_github_user_repo: ~ + t_localhost: ~ + t_localhost_repo: ~ + t_localhost_repo_src: ~ + t_localhost_repo_target: ~ + t_localhost_repo_target_file_zip: ~ + t_localhost_repo_target_dist_dir: ~ + + edge_t_localhost__t_github_user_repo__pull: ~ + edge_t_localhost__t_github_user_repo__push: ~ + edge_t_localhost__t_localhost__within: ~ + edge_t_github_user_repo__t_github_user_repo__within: ~ + edge_t_github_user_repo__t_aws_ecr_repo__push: ~ + edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ + + tag_app_development: tag_type_default + tag_deployment: tag_type_default + +# Styles when the diagram has no user interaction. +# +# It's important for UX that the field nesting level (and hence indentation level) is consistent +# with the other `theme_*` data. +# +# `style_aliases` here are available to all the other `theme_*` data. +theme_default: + # `StyleAliases` will have well-known keys, and is extendable to have custom keys. + # + # i.e. a `StyleAlias` enum, with a final variant of `Custom(String)`. + style_aliases: + padding_none: + padding_top: "0" + padding_bottom: "0" + padding_left: "0" + padding_right: "0" + padding_tight: + padding_top: "2" + padding_bottom: "2" + padding_left: "2" + padding_right: "2" + padding_normal: + padding_top: "4" + padding_bottom: "4" + padding_left: "4" + padding_right: "4" + padding_wide: + padding_top: "6" + padding_bottom: "6" + padding_left: "6" + padding_right: "6" + shade_pale: + fill_shade_hover: "50" + fill_shade_normal: "100" + fill_shade_focus: "200" + fill_shade_active: "300" + stroke_shade_hover: "100" + stroke_shade_normal: "200" + stroke_shade_focus: "300" + stroke_shade_active: "400" + shade_light: + fill_shade_hover: "200" + fill_shade_normal: "300" + fill_shade_focus: "400" + fill_shade_active: "500" + stroke_shade_hover: "300" + stroke_shade_normal: "400" + stroke_shade_focus: "500" + stroke_shade_active: "600" + shade_medium: + fill_shade_hover: "400" + fill_shade_normal: "500" + fill_shade_focus: "600" + fill_shade_active: "700" + stroke_shade_hover: "500" + stroke_shade_normal: "600" + stroke_shade_focus: "700" + stroke_shade_active: "800" + shade_dark: + fill_shade_hover: "600" + fill_shade_normal: "700" + fill_shade_focus: "800" + fill_shade_active: "900" + stroke_shade_hover: "700" + stroke_shade_normal: "800" + stroke_shade_focus: "900" + stroke_shade_active: "950" + stroke_dashed_animated: + stroke_style: "dashed" + stroke_width: "2" + animate: "[stroke-dashoffset-move_2s_linear_infinite]" + + # The keys in this map can be: + # + # * `thing_defaults`: Applies to all things. + # * `edge_defaults`: Applies to all edges. + # * `thing_id`: Applies to the particular thing. + # * `edge_id`: Applies to the particular edge. + # * `tag_id`: Applies to the tag. + base_styles: + thing_defaults: + # Vector of style aliases to apply. + style_aliases_applied: [shade_light] + # Used for both fill and stroke colors. + shape_color: "slate" + stroke_style: "solid" + stroke_width: "1" + visibility: "visible" + edge_defaults: + stroke_width: "1" + visibility: "visible" + edge_t_localhost__t_github_user_repo__pull: + style_aliases_applied: [shade_light] + shape_color: "blue" + +# Styles applied to things / edges of a particular `type` specified in `thing_types`. +theme_types_styles: + type_organisation: + thing_defaults: + stroke_style: "dotted" + style_aliases_applied: [shade_pale] + + type_docker_image: + thing_defaults: + shape_color: "blue" + +# Styles when a `thing` is focused. +# +# Depending on which button is pressed, when a `thing` is focused, these same styles may be used to +# show: +# +# * Predecessors / successors linked to this `thing`. +# * Immediate dependencies vs transitive (maybe closest `n` neighbours). +theme_thing_dependencies_styles: + things_excluded_styles: + thing_defaults: + visibility: "hidden" + edge_defaults: + visibility: "hidden + things_included_styles: + thing_defaults: + visibility: "visible" + +# When a tag is focused, things and edges associated with the tag are highlighted. +# +# We also want to allow things that are not associated with the tag to be styled, but having one +# layer with the tag ID, and one layer of `things_included_styles` and `things_excluded_styles` +# makes it one nesting level deeper than the other `theme_*` keys. +# +# So we have a `theme_tag_things_focus` map that applies to all tags' styles, and if the consumer +# wants to style things differently per tag, they can do so in the +# `theme_tag_things_focus_specific` map. +theme_tag_things_focus: + things_included_styles: + thing_defaults: + opacity: "0.5" + things_excluded_styles: + thing_defaults: + style_aliases_applied: [stroke_dashed_animated] + +theme_tag_things_focus_specific: + tag_app_development: + thing_defaults: + style_aliases_applied: [stroke_dashed_animated] + +# Additional CSS to place in the SVG's inline `` section. +css: |- + @keyframes stroke-dashoffset-move { + 0% { stroke-dashoffset: 30; } + 100% { stroke-dashoffset: 0; } + } +```` diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md new file mode 100644 index 000000000..23839c370 --- /dev/null +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -0,0 +1,892 @@ +# Example Intermediate Representation + +This is the computed data structure from combining the layered values from the input data. + +````yaml +# Everything that needs to be represented as a `node` on the diagram, including: +# +# * `things` +# * `tags` +# * `processes` +# * `steps` +nodes: &nodes + # things + t_aws: "☁ī¸ Amazon Web Services" + t_aws_iam: "🖊ī¸ Identity and Access Management" + t_aws_iam_ecs_policy: "🗒ī¸ ECS IAM Policy" + t_aws_ecr: "🗄ī¸ Elastic Container Registry" + t_aws_ecr_repo: "đŸ’Ŋ web_app repo" + t_aws_ecr_repo_image_1: "đŸ’ŋ Image 1" + t_aws_ecr_repo_image_2: "đŸ’ŋ Image 2" + t_aws_ecs: "đŸ’ģ Elastic Container Service" + t_aws_ecs_cluster_app: "🎛ī¸ web_app cluster" + t_aws_ecs_cluster_app_task: "🖨ī¸ web_app task version 1" + t_github: "🐙 GitHub" + t_github_user_repo: "azriel91/web_app" + t_localhost: "🧑‍đŸ’ģ Localhost" + t_localhost_repo: "📂 ~/work/web_app" + t_localhost_repo_src: "📝 src" + t_localhost_repo_target: "📂 target" + t_localhost_repo_target_file_zip: "📝 file.zip" + t_localhost_repo_target_dist_dir: "📁 dist" + + # tags + tag_app_development: "Application Development" + tag_deployment: "Deployment" + + # processes + proc_app_dev: "App Development" + proc_app_release: "App Release" + proc_i12e_region_tier_app_deploy: "Prod App Deploy" + + # steps + proc_app_dev_step_repository_clone: "Clone repository" + proc_app_dev_step_project_build: "Build project" + + proc_app_release_step_crate_version_update: "Update crate versions" + proc_app_release_step_pull_request_open: "Open PR" + proc_app_release_step_tag_and_push: "Tag and push" + proc_app_release_step_gh_actions_build: "Github Actions build" + proc_app_release_step_gh_actions_publish: "Github Actions publish" + + proc_i12e_region_tier_app_deploy_step_ecs_service_update: "Update ECS service" + +# Render a copy text button, and, when clicked, what text to place on the clipboard. +# +# This differs from the input schema by only including the `thing`s, not all `node`s. +# +# Note that all nodes' text will still be selectable and copyable with the regular hotkeys. +node_copy_text: + # things + t_aws: "☁ī¸ Amazon Web Services" + t_aws_iam: "🖊ī¸ Identity and Access Management" + t_aws_iam_ecs_policy: "🗒ī¸ ECS IAM Policy" + t_aws_ecr: "🗄ī¸ Elastic Container Registry" + t_aws_ecr_repo: "đŸ’Ŋ web_app repo" + t_aws_ecr_repo_image_1: "đŸ’ŋ Image 1" + t_aws_ecr_repo_image_2: "đŸ’ŋ Image 2" + t_aws_ecs: "đŸ’ģ Elastic Container Service" + t_aws_ecs_cluster_app: "🎛ī¸ web_app cluster" + t_aws_ecs_cluster_app_task: "🖨ī¸ web_app task version 1" + t_github: "🐙 GitHub" + t_github_user_repo: "azriel91/web_app" + t_localhost: "🧑‍đŸ’ģ Localhost" + t_localhost_repo: "📂 ~/work/web_app" + t_localhost_repo_src: "📝 src" + t_localhost_repo_target: "📂 target" + t_localhost_repo_target_file_zip: "📝 file.zip" + t_localhost_repo_target_dist_dir: "📁 dist" + + t_localhost_repo: "~/work/web_app" + t_localhost_repo_src: "~/work/web_app/src" + t_localhost_repo_target: "~/work/web_app/target" + t_localhost_repo_target_file_zip: "~/work/web_app/target/file.zip" + t_localhost_repo_target_dist_dir: "~/work/web_app/target/dist" + +# Rich level of detail for a given node. +node_descs: + # process steps + proc_app_release_step_crate_version_update: |- + ```bash + sd -s 'version = "0.3.0"' 'version = "0.3.0"' $(fd -tf -F toml) README.md src/lib.rs + ``` + proc_app_release_step_pull_request_open: |- + Create a pull request as usual. + proc_app_release_step_gh_actions_build: |- + Github Actions will build the image. + proc_app_release_step_tag_and_push: |- + When the PR is merged, tag the commit and push the tag to GitHub. + + ```bash + git tag 0.3.0 + git push origin 0.3.0 + ``` + + The build will push the new version to ECR automatically. + proc_app_release_step_gh_actions_publish: |- + Github Actions will publish the image to AWS ECR. + proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- + Deploy or update the existing ECS service with the new image. + +# Hierarchy of all nodes, to be laid out based on `node_layout`. +# +# This should be roughly the same as the DOM element hierarchy, which has the following constraints +# over the input schema: +# +# * `process` nodes have to come before `thing` nodes in order for the sibling selector (tailwind +# peers) to work. +# * `process_step` nodes have to be descendents of `process` nodes, to allow the `process` nodes to +# be visible when the `process_step` nodes have focus (via `focus-within`). +# * `thing` nodes may have wrapping nodes, so that we don't exceed the limit of CSS classes per +# element. +# +# One difference between the input schema and the IR schema is, the IR schema needs to specify the +# hierarchy for nodes that are not only `thing`s, e.g. `process` and `process_step`s. +# +# ⚠ī¸ The order of node declaration is important -- `process` nodes must come earlier than `thing` +# nodes in the DOM structure for the peer/sibling CSS selectors to work correctly. *However*, +# visually the `process` nodes may be placed to the right of the `thing` nodes. +# +# The DOM structure *may* also differ in this way: just because the `node_hierarchy` indicates +# nesting, does not mean the actual DOM hierarchy must have its elements nested. i.e. they may be +# siblings, just positioned and sized such that they visually appear to be nested. +node_hierarchy: + # Tags before everything else (required for peer selector to target processes/things/edges) + tag_app_development: {} + tag_deployment: {} + + # Processes before things/edges (required for peer selector to target things/edges) + proc_app_dev: + proc_app_dev_step_repository_clone: {} + proc_app_dev_step_project_build: {} + proc_app_release: + proc_app_release_step_crate_version_update: {} + proc_app_release_step_pull_request_open: {} + proc_app_release_step_tag_and_push: {} + proc_app_release_step_gh_actions_build: {} + proc_app_release_step_gh_actions_publish: {} + proc_i12e_region_tier_app_deploy: + proc_i12e_region_tier_app_deploy_step_ecs_service_update: {} + + # Things (same hierarchy as input `thing_hierarchy`) + t_aws: + t_aws_iam: + t_aws_iam_ecs_policy: {} + t_aws_ecr: + t_aws_ecr_repo: + t_aws_ecr_repo_image_1: {} + t_aws_ecr_repo_image_2: {} + t_aws_ecs: + t_aws_ecs_cluster_app: + t_aws_ecs_cluster_app_task: {} + t_github: + t_github_user_repo: {} + t_localhost: + t_localhost_repo: + t_localhost_repo_src: {} + t_localhost_repo_target: + t_localhost_repo_target_file_zip: {} + t_localhost_repo_target_dist_dir: {} + +# Edges derived from `thing_dependencies` and `thing_interactions`. +# +# Each edge has: +# - `from`: source node ID +# - `to`: target node ID +edge_groups: + edge_t_localhost__t_github_user_repo: + - from: t_github_user_repo + to: t_localhost + - from: t_localhost + to: t_github_user_repo + edge_t_localhost__t_github_user_repo__push: + - from: t_localhost + to: t_github_user_repo + edge_t_localhost__t_localhost__within: + - from: t_localhost + to: t_localhost + edge_t_github_user_repo__t_github_user_repo__within: + - from: t_github_user_repo + to: t_github_user_repo + edge_t_github_user_repo__t_aws_ecr_repo__push: + - from: t_github_user_repo + to: t_aws_ecr_repo + edge_t_aws_ecr_repo__t_aws_ecs_service__push: + - from: t_aws_ecr_repo + to: t_aws_ecs_cluster_app_task + +# Text placed next to the edges. +# +# We may need to factor these in as a DOM node so that there is space reserved for these descriptions alongside the `node` DOM nodes. +edge_group_descs: + edge_t_localhost__t_github_user_repo__pull: "`git pull`" + edge_t_localhost__t_github_user_repo__push: "`git push`" + edge_t_localhost__t_localhost__within: ~ + edge_t_github_user_repo__t_github_user_repo__within: ~ + edge_t_github_user_repo__t_aws_ecr_repo__push: ~ + edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ + +entity_types: + # things + t_aws: [type_thing_default, type_organisation] + t_aws_iam: [type_thing_default, type_service] + t_aws_iam_ecs_policy: [type_thing_default] + t_aws_ecr: [type_thing_default, type_service] + t_aws_ecr_repo: [type_thing_default] + t_aws_ecr_repo_image_1: [type_thing_default, type_docker_image] + t_aws_ecr_repo_image_2: [type_thing_default, type_docker_image] + t_aws_ecs: [type_thing_default, type_service] + t_aws_ecs_cluster_app: [type_thing_default] + t_aws_ecs_cluster_app_task: [type_thing_default] + t_github: [type_thing_default, type_organisation] + t_github_user_repo: [type_thing_default] + t_localhost: [type_thing_default] + t_localhost_repo: [type_thing_default] + t_localhost_repo_src: [type_thing_default] + t_localhost_repo_target: [type_thing_default] + t_localhost_repo_target_file_zip: [type_thing_default] + t_localhost_repo_target_dist_dir: [type_thing_default] + + # tags + tag_app_development: [tag_type_default] + tag_deployment: [tag_type_default] + + # processes + proc_app_dev: [type_process_default] + proc_app_release: [type_process_default] + proc_i12e_region_tier_app_deploy: [type_process_default] + + # process steps + proc_app_dev_step_repository_clone: [type_process_step_default] + proc_app_dev_step_project_build: [type_process_step_default] + + proc_app_release_step_crate_version_update: [type_process_step_default] + proc_app_release_step_pull_request_open: [type_process_step_default] + proc_app_release_step_tag_and_push: [type_process_step_default] + proc_app_release_step_gh_actions_build: [type_process_step_default] + proc_app_release_step_gh_actions_publish: [type_process_step_default] + + proc_i12e_region_tier_app_deploy_step_ecs_service_update: [type_process_step_default] + + # edges + edge_t_localhost__t_github_user_repo__pull: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_localhost__t_github_user_repo__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] + edge_t_localhost__t_localhost__within: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_github_user_repo__t_github_user_repo__within: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_github_user_repo__t_aws_ecr_repo__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] + edge_t_aws_ecr_repo__t_aws_ecs_service__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] + +# Tailwind CSS classes for interactive visibility behaviour. +# +# ## Visibility Patterns +# +# 1. Process -> Process Steps visibility: +# +# * Process node: `group/{process_id}` class +# * Process steps: `invisible group-focus-within/{process_id}:visible` +# * When process (or any child) has focus, steps become and remain visible +# +# 2. Process Step -> Edges visibility: +# +# * Process step: `peer/{step_id}` class +# * Edges: `invisible peer-focus/{step_id}:visible` +# * Edges must be DOM siblings AFTER the step element +# +# 3. **Alternative:** `:target` based visibility: +# +# * When element ID matches URL fragment (e.g. `#step_id`) +# * Use `invisible target:visible` on the element +# * Use `[&:has(~_#step_id:target)]:visible` on edges +# * Use `peer-[:where([data-step='3']):target]:visible` on edges +# +# # Notes +# +# * `[stroke-dasharray:2]` in an SVG approximates `border-dotted` on HTML elements. +tailwind_classes: + # Processes - act as group containers for their steps + proc_app_dev: >- + group/proc_app_dev + proc_app_release: >- + group/proc_app_release + proc_i12e_region_tier_app_deploy: >- + group/proc_i12e_region_tier_app_deploy + + # Process steps - visible when parent process has focus, act as peers for edges + proc_app_dev_step_repository_clone: >- + peer/proc_app_dev_step_repository_clone + invisible + group-focus-within/proc_app_dev:visible + proc_app_dev_step_project_build: >- + peer/proc_app_dev_step_project_build + invisible + group-focus-within/proc_app_dev:visible + + proc_app_release_step_crate_version_update: >- + peer/proc_app_release_step_crate_version_update + invisible + group-focus-within/proc_app_release:visible + proc_app_release_step_pull_request_open: >- + peer/proc_app_release_step_pull_request_open + invisible + group-focus-within/proc_app_release:visible + proc_app_release_step_tag_and_push: >- + peer/proc_app_release_step_tag_and_push + invisible + group-focus-within/proc_app_release:visible + proc_app_release_step_gh_actions_build: >- + peer/proc_app_release_step_gh_actions_build + invisible + group-focus-within/proc_app_release:visible + proc_app_release_step_gh_actions_publish: >- + peer/proc_app_release_step_gh_actions_publish + invisible + group-focus-within/proc_app_release:visible + + proc_i12e_region_tier_app_deploy_step_ecs_service_update: >- + peer/proc_i12e_region_tier_app_deploy_step_ecs_service_update + invisible + group-focus-within/proc_i12e_region_tier_app_deploy:visible + + # Edges - visible when their associated step has focus + # Maps edge_id -> list of step_ids that trigger visibility + edge_t_localhost__t_github_user_repo__pull: >- + invisible + peer-focus/proc_app_dev_step_repository_clone:visible + peer-focus/proc_app_release_step_pull_request_open:visible + edge_t_localhost__t_github_user_repo__push: >- + invisible + peer-focus/proc_app_release_step_tag_and_push:visible + edge_t_localhost__t_localhost__within: >- + invisible + peer-focus/proc_app_dev_step_project_build:visible + peer-focus/proc_app_release_step_crate_version_update:visible + edge_t_github_user_repo__t_github_user_repo__within: >- + invisible + peer-focus/proc_app_release_step_gh_actions_build:visible + edge_t_github_user_repo__t_aws_ecr_repo__push: >- + invisible + peer-focus/proc_app_release_step_gh_actions_publish:visible + edge_t_aws_ecr_repo__t_aws_ecs_service__push: >- + invisible + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:visible + + # Styles for things are as follows: + # + # For the inner `` element: + # + # * `hover:stroke-{color}-{shade}` when hovered. + # * `stroke-{color}-{shade}` for normal state. + # * `focus:stroke-{color}-{shade}` when focused. + # * `active:stroke-{color}-{shade}` when pressed. + # * `hover:fill-{color}-{shade}` when hovered. + # * `fill-{color}-{shade}` for normal state. + # * `focus:fill-{color}-{shade}` when focused. + # * `active:fill-{color}-{shade}` when pressed. + # + # For the inner `` element: + # + # * `[&>text]:fill-{color}-{shade}` for text in all states. + # + # The following classes are used to highlight the `thing`'s `` when a related process step + # is focused: + # + # * `animate-[stroke-dashoffset-move_2s_linear_infinite]` + # * `stroke-{color}-{shade}` where `shade` is the "normal" shade, but brighter by one level. + # * `fill-{color}-{shade}` where `shade` is the "normal" shade, but brighter by one level. + # + # They are applied to each thing, just with the appropriate `peer-focus/{process_step}` prefix. + # + # We could collapse the `stroke-dashoffset` into the animation, but we can't collapse the `shade` + # because they are part of the stroke and fill colors -- we have to choose between duplication + # either here, or in animations. + t_aws: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_iam: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_iam_ecs_policy: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecr: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecr_repo: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + + peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_gh_actions_publish:stroke-slate-500 + peer-focus/proc_app_release_step_gh_actions_publish:fill-slate-100 + + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-slate-500 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-slate-100 + + t_aws_ecr_repo_image_1: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecr_repo_image_2: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecs: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecs_cluster_app: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_aws_ecs_cluster_app_task: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_github: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_github_user_repo: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + + peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 + peer-focus/proc_app_dev_step_repository_clone:fill-slate-100 + + peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_pull_request_open:stroke-slate-500 + peer-focus/proc_app_release_step_pull_request_open:fill-slate-100 + + peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_tag_and_push:stroke-slate-500 + peer-focus/proc_app_release_step_tag_and_push:fill-slate-100 + + peer-focus/proc_app_release_step_gh_actions_build:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_gh_actions_build:stroke-slate-500 + peer-focus/proc_app_release_step_gh_actions_build:fill-slate-100 + + peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_gh_actions_publish:stroke-slate-500 + peer-focus/proc_app_release_step_gh_actions_publish:fill-slate-100 + + t_localhost: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + + peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 + peer-focus/proc_app_dev_step_repository_clone:fill-slate-100 + + peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_pull_request_open:stroke-slate-500 + peer-focus/proc_app_release_step_pull_request_open:fill-slate-100 + + peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_tag_and_push:stroke-slate-500 + peer-focus/proc_app_release_step_tag_and_push:fill-slate-100 + + peer-focus/proc_app_dev_step_project_build:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_dev_step_project_build:stroke-slate-500 + peer-focus/proc_app_dev_step_project_build:fill-slate-100 + + peer-focus/proc_app_release_step_crate_version_update:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/proc_app_release_step_crate_version_update:stroke-slate-500 + peer-focus/proc_app_release_step_crate_version_update:fill-slate-100 + + t_localhost_repo: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_localhost_repo_src: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_localhost_repo_target: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_localhost_repo_target_file_zip: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + t_localhost_repo_target_dist_dir: >- + stroke-1 + visible + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + hover:fill-slate-200 + fill-slate-300 + focus:fill-slate-400 + active:fill-slate-500 + [&>text]:fill-slate-950 + +# Layout configuration for each node. +# +# Variants: +# +# * `flex`: { direction: "row" | "row_reverse" | "column" | "column_reverse", wrap: bool, gap: string } +# * `none`: (no children to lay out) +# +# The layout cascades: if not specified, inherits from parent or uses default. +node_layout: + # Root container + # + # This is in `column_reverse` order so tag node state controls `things` and `processes`: + # + # ```text + # .------------------------------------. + # | 1. _things_and_processes_container | + # | -----------------------------------| + # | 0. _tags_container | + # '------------------------------------' + # ``` + _root: + flex: + direction: "column_reverse" + wrap: true + gap: "4" + + # Things and Processes container. + # + # This is in `row_reverse` order so process node state controls `things`: + # + # ```text + # .------------------------------------------------. + # | 1. _things_container | 0. _processes_container | + # '------------------------------------------------' + # ``` + _things_and_processes_container: + flex: + direction: "row_reverse" + wrap: true + gap: "4" + + # Processes container (groups all processes horizontally) + # + # This is in `row` order so processs are laid out left to right: + # + # ```text + # .-----------------------------------------------------------------------------. + # | 0. proc_app_dev | 1. proc_app_release | 2. proc_i12e_region_tier_app_deploy | + # '-----------------------------------------------------------------------------' + # ``` + _processes_container: + flex: + direction: "row" + wrap: true + gap: "4" + + # Individual processes (steps stacked vertically) + # + # This is in `column` order so steps are laid out top to bottom: + # + # ```text + # .---------------------------------------. + # | 0. proc_app_dev_step_repository_clone | + # |---------------------------------------| + # | 1. proc_app_dev_step_project_build | + # '---------------------------------------' + # ``` + proc_app_dev: + flex: + direction: "column" + wrap: false + gap: "2" + proc_app_release: + flex: + direction: "column" + wrap: false + gap: "2" + proc_i12e_region_tier_app_deploy: + flex: + direction: "column" + wrap: false + gap: "2" + + # Process steps are leaves + proc_app_dev_step_repository_clone: none + proc_app_dev_step_project_build: none + proc_app_release_step_crate_version_update: none + proc_app_release_step_pull_request_open: none + proc_app_release_step_tag_and_push: none + proc_app_release_step_gh_actions_build: none + proc_app_release_step_gh_actions_publish: none + proc_i12e_region_tier_app_deploy_step_ecs_service_update: none + + # Tags container + # + # This is in `row` order so tags are laid out left to right: + # + # ```text + # .--------------------------------------------. + # | 0. tag_app_development | 1. tag_deployment | + # '--------------------------------------------' + # ``` + _tags_container: + flex: + direction: "row" + wrap: true + gap: "2" + + # Tags are leaves + tag_app_development: none + tag_deployment: none + + # Things container (top-level things arranged in a row) + _things_container: + flex: + direction: "row" + wrap: true + gap: "4" + + # Top-level things (children alternate between columns and rows) + t_aws: + flex: + direction: "column" + wrap: false + gap: "2" + t_aws_iam: + flex: + direction: "row" + wrap: false + gap: "1" + t_aws_iam_ecs_policy: none + t_aws_ecr: + flex: + direction: "row" + wrap: false + gap: "1" + t_aws_ecr_repo: + flex: + direction: "column" + wrap: true + gap: "1" + t_aws_ecr_repo_image_1: none + t_aws_ecr_repo_image_2: none + t_aws_ecs: + flex: + direction: "row" + wrap: false + gap: "1" + t_aws_ecs_cluster_app: + flex: + direction: "column" + wrap: false + gap: "1" + t_aws_ecs_cluster_app_task: none + + t_github: + flex: + direction: "row" + wrap: false + gap: "2" + t_github_user_repo: none + + t_localhost: + flex: + direction: "row" + wrap: false + gap: "2" + t_localhost_repo: + flex: + direction: "column" + wrap: false + gap: "1" + t_localhost_repo_src: none + t_localhost_repo_target: + flex: + direction: "row" + wrap: true + gap: "1" + t_localhost_repo_target_file_zip: none + t_localhost_repo_target_dist_dir: none + +# Types specify which template styles to use for each: +# +# * `node` +# * `edge` +# +# This should be a `Set` as `Type`s should be stackable. +entity_types: + # things + t_aws: ["type_thing_default"] + t_aws_iam: ["type_thing_default"] + t_aws_iam_ecs_policy: ["type_thing_default"] + t_aws_ecr: ["type_thing_default"] + t_aws_ecr_repo: ["type_thing_default"] + t_aws_ecr_repo_image_1: ["type_thing_default"] + t_aws_ecr_repo_image_2: ["type_thing_default"] + t_aws_ecs: ["type_thing_default"] + t_aws_ecs_cluster_app: ["type_thing_default"] + t_aws_ecs_cluster_app_task: ["type_thing_default"] + t_github: ["type_thing_default"] + t_github_user_repo: ["type_thing_default"] + t_localhost: ["type_thing_default"] + t_localhost_repo: ["type_thing_default"] + t_localhost_repo_src: ["type_thing_default"] + t_localhost_repo_target: ["type_thing_default"] + t_localhost_repo_target_file_zip: ["type_thing_default"] + t_localhost_repo_target_dist_dir: ["type_thing_default"] + + # tags + tag_app_development: ["type_tag_default"] + tag_deployment: ["type_tag_default"] + + # processes + proc_app_dev: ["type_process_default"] + proc_app_release: ["type_process_default"] + proc_i12e_region_tier_app_deploy: ["type_process_default"] + + # steps + proc_app_dev_step_repository_clone: ["type_process_step_default"] + proc_app_dev_step_project_build: ["type_process_step_default"] + + proc_app_release_step_crate_version_update: ["type_process_step_default"] + proc_app_release_step_pull_request_open: ["type_process_step_default"] + proc_app_release_step_tag_and_push: ["type_process_step_default"] + proc_app_release_step_gh_actions_build: ["type_process_step_default"] + proc_app_release_step_gh_actions_publish: ["type_process_step_default"] + + proc_i12e_region_tier_app_deploy_step_ecs_service_update: "type_process_step_default" + +css: >- + @keyframes stroke-dashoffset-move { + 0% { stroke-dasharray: 3; stroke-dashoffset: 30; } + 100% { stroke-dasharray: 3; stroke-dashoffset: 0; } + } + @keyframes stroke-dashoffset-move-request { + 0% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: 228; } + } + @keyframes stroke-dashoffset-move-response { + 0% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: -248; } + } +```` diff --git a/doc/src/side_projects/disposition/peer_data_attribute_experiment.svg b/doc/src/side_projects/disposition/peer_data_attribute_experiment.svg new file mode 100644 index 000000000..59b99bfd4 --- /dev/null +++ b/doc/src/side_projects/disposition/peer_data_attribute_experiment.svg @@ -0,0 +1,409 @@ + + + + Peer focus using named groups works: + + + Step 1 + + + + Step 2 + + + + + + Peer focus with data attribute: + (works with tailwind, not with encrecss) + + + Step 3 + + + + Step 4 + + + + + From 7430e7d9c8e2c497aeff1b45ea57e91eec6a6d22 Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Wed, 3 Dec 2025 07:56:36 +1300 Subject: [PATCH 2/9] Add more tailwind classes to IR. --- .../disposition/example_input.md | 103 ++++- .../example_intermediate_representation.md | 367 +++++++++++------- 2 files changed, 307 insertions(+), 163 deletions(-) diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md index f9eca3e43..9fb33dd79 100644 --- a/doc/src/side_projects/disposition/example_input.md +++ b/doc/src/side_projects/disposition/example_input.md @@ -275,15 +275,15 @@ tag_things: # ```yaml # types: # - type_thing_default +# - type_tag_default +# - type_process_default +# - type_process_step_default # - type_edge_dependency_sequence_request_default # - type_edge_dependency_sequence_response_default # - type_edge_dependency_cyclic_default # - type_edge_interaction_sequence_request_default # - type_edge_interaction_sequence_response_default # - type_edge_interaction_cyclic_default -# - type_tag_default -# - type_process_default -# - type_process_step_default # ``` # Additional `type`s we attach to `things` / `thing_dependencies` / `tags`, so they can be styled @@ -362,6 +362,7 @@ theme_default: stroke_shade_normal: "200" stroke_shade_focus: "300" stroke_shade_active: "400" + text_shade: "800" shade_light: fill_shade_hover: "200" fill_shade_normal: "300" @@ -371,6 +372,7 @@ theme_default: stroke_shade_normal: "400" stroke_shade_focus: "500" stroke_shade_active: "600" + text_shade: "900" shade_medium: fill_shade_hover: "400" fill_shade_normal: "500" @@ -380,6 +382,7 @@ theme_default: stroke_shade_normal: "600" stroke_shade_focus: "700" stroke_shade_active: "800" + text_shade: "950" shade_dark: fill_shade_hover: "600" fill_shade_normal: "700" @@ -389,6 +392,7 @@ theme_default: stroke_shade_normal: "800" stroke_shade_focus: "900" stroke_shade_active: "950" + text_shade: "50" stroke_dashed_animated: stroke_style: "dashed" stroke_width: "2" @@ -396,13 +400,13 @@ theme_default: # The keys in this map can be: # - # * `thing_defaults`: Applies to all things. + # * `node_defaults`: Applies to all things. # * `edge_defaults`: Applies to all edges. # * `thing_id`: Applies to the particular thing. # * `edge_id`: Applies to the particular edge. # * `tag_id`: Applies to the tag. base_styles: - thing_defaults: + node_defaults: # Vector of style aliases to apply. style_aliases_applied: [shade_light] # Used for both fill and stroke colors. @@ -416,17 +420,88 @@ theme_default: edge_t_localhost__t_github_user_repo__pull: style_aliases_applied: [shade_light] shape_color: "blue" + t_aws: + shape_color: "yellow" + t_github: + shape_color: "neutral" # Styles applied to things / edges of a particular `type` specified in `thing_types`. theme_types_styles: + # These are default styles that are built into `disposition`, but may be overridden by users. + type_thing_default: + node_defaults: + style_aliases_applied: [shade_light] + stroke_style: "solid" + shape_color: "slate" + stroke_width: "1" + type_tag_default: + node_defaults: + style_aliases_applied: [shade_medium] + stroke_style: "solid" + shape_color: "emerald" + stroke_width: "1" + type_process_default: + node_defaults: + style_aliases_applied: [shade_medium] + stroke_style: "solid" + shape_color: "blue" + stroke_width: "1" + type_process_step_default: + node_defaults: + style_aliases_applied: [shade_medium] + stroke_style: "solid" + shape_color: "sky" + stroke_width: "1" + type_edge_dependency_sequence_request_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" + shape_color: "violet" + stroke_width: "2" + type_edge_dependency_sequence_response_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,120,1,2,1,2,2,2,4,2,8,2,20,80" + shape_color: "violet" + stroke_width: "2" + type_edge_dependency_cyclic_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" + shape_color: "violet" + stroke_width: "2" + type_edge_interaction_sequence_request_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" + shape_color: "violet" + stroke_width: "2" + type_edge_interaction_sequence_response_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,120,1,2,1,2,2,2,4,2,8,2,20,80" + shape_color: "violet" + stroke_width: "2" + type_edge_interaction_cyclic_default: + edge_defaults: + style_aliases_applied: [shade_dark] + stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" + shape_color: "violet" + stroke_width: "2" + + + # custom styles that users can provide type_organisation: - thing_defaults: - stroke_style: "dotted" + node_defaults: style_aliases_applied: [shade_pale] + stroke_style: "dotted" + type_service: + node_defaults: + stroke_style: "dashed" type_docker_image: - thing_defaults: - shape_color: "blue" + node_defaults: + shape_color: "sky" # Styles when a `thing` is focused. # @@ -437,12 +512,12 @@ theme_types_styles: # * Immediate dependencies vs transitive (maybe closest `n` neighbours). theme_thing_dependencies_styles: things_excluded_styles: - thing_defaults: + node_defaults: visibility: "hidden" edge_defaults: visibility: "hidden things_included_styles: - thing_defaults: + node_defaults: visibility: "visible" # When a tag is focused, things and edges associated with the tag are highlighted. @@ -456,15 +531,15 @@ theme_thing_dependencies_styles: # `theme_tag_things_focus_specific` map. theme_tag_things_focus: things_included_styles: - thing_defaults: + node_defaults: opacity: "0.5" things_excluded_styles: - thing_defaults: + node_defaults: style_aliases_applied: [stroke_dashed_animated] theme_tag_things_focus_specific: tag_app_development: - thing_defaults: + node_defaults: style_aliases_applied: [stroke_dashed_animated] # Additional CSS to place in the SVG's inline `` section. diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md index 23839c370..6fa18da21 100644 --- a/doc/src/side_projects/disposition/example_intermediate_representation.md +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -193,7 +193,7 @@ edge_groups: to: t_aws_ecr_repo edge_t_aws_ecr_repo__t_aws_ecs_service__push: - from: t_aws_ecr_repo - to: t_aws_ecs_cluster_app_task + to: t_aws_ecs_service # Text placed next to the edges. # @@ -285,10 +285,43 @@ entity_types: tailwind_classes: # Processes - act as group containers for their steps proc_app_dev: >- + stroke-1 + visible + hover:fill-blue-200 + fill-blue-300 + focus:fill-blue-400 + active:fill-blue-500 + hover:stroke-blue-300 + stroke-blue-400 + focus:stroke-blue-500 + active:stroke-blue-600 + group/proc_app_dev proc_app_release: >- + stroke-1 + visible + hover:fill-blue-200 + fill-blue-300 + focus:fill-blue-400 + active:fill-blue-500 + hover:stroke-blue-300 + stroke-blue-400 + focus:stroke-blue-500 + active:stroke-blue-600 + group/proc_app_release proc_i12e_region_tier_app_deploy: >- + stroke-1 + visible + hover:fill-blue-200 + fill-blue-300 + focus:fill-blue-400 + active:fill-blue-500 + hover:stroke-blue-300 + stroke-blue-400 + focus:stroke-blue-500 + active:stroke-blue-600 + group/proc_i12e_region_tier_app_deploy # Process steps - visible when parent process has focus, act as peers for edges @@ -380,191 +413,196 @@ tailwind_classes: # because they are part of the stroke and fill colors -- we have to choose between duplication # either here, or in animations. t_aws: >- + [stroke-dasharray:2] stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-50 + fill-yellow-100 + focus:fill-yellow-200 + active:fill-yellow-300 + hover:stroke-yellow-100 + stroke-yellow-200 + focus:stroke-yellow-300 + active:stroke-yellow-400 + [&>text]:fill-yellow-800 t_aws_iam: >- + [stroke-dasharray:3] stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_aws_iam_ecs_policy: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_aws_ecr: >- + [stroke-dasharray:3] stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_aws_ecr_repo: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-slate-500 - peer-focus/proc_app_release_step_gh_actions_publish:fill-slate-100 + peer-focus/proc_app_release_step_gh_actions_publish:stroke-yellow-500 + peer-focus/proc_app_release_step_gh_actions_publish:fill-yellow-100 peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-slate-500 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-slate-100 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-yellow-500 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-yellow-100 t_aws_ecr_repo_image_1: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + [&>text]:fill-sky-900 t_aws_ecr_repo_image_2: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + [&>text]:fill-sky-900 t_aws_ecs: >- + [stroke-dasharray:3] stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_aws_ecs_cluster_app: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_aws_ecs_cluster_app_task: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-yellow-200 + fill-yellow-300 + focus:fill-yellow-400 + active:fill-yellow-500 + hover:stroke-yellow-300 + stroke-yellow-400 + focus:stroke-yellow-500 + active:stroke-yellow-600 + [&>text]:fill-yellow-900 t_github: >- + [stroke-dasharray:3] stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-neutral-50 + fill-neutral-100 + focus:fill-neutral-200 + active:fill-neutral-300 + hover:stroke-neutral-100 + stroke-neutral-200 + focus:stroke-neutral-300 + active:stroke-neutral-400 + [&>text]:fill-neutral-800 t_github_user_repo: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - [&>text]:fill-slate-950 + hover:fill-neutral-200 + fill-neutral-300 + focus:fill-neutral-400 + active:fill-neutral-500 + hover:stroke-neutral-300 + stroke-neutral-400 + focus:stroke-neutral-500 + active:stroke-neutral-600 + [&>text]:fill-neutral-900 peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 - peer-focus/proc_app_dev_step_repository_clone:fill-slate-100 + peer-focus/proc_app_dev_step_repository_clone:stroke-neutral-500 + peer-focus/proc_app_dev_step_repository_clone:fill-neutral-100 peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_pull_request_open:stroke-slate-500 - peer-focus/proc_app_release_step_pull_request_open:fill-slate-100 + peer-focus/proc_app_release_step_pull_request_open:stroke-neutral-500 + peer-focus/proc_app_release_step_pull_request_open:fill-neutral-100 peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_tag_and_push:stroke-slate-500 - peer-focus/proc_app_release_step_tag_and_push:fill-slate-100 + peer-focus/proc_app_release_step_tag_and_push:stroke-neutral-500 + peer-focus/proc_app_release_step_tag_and_push:fill-neutral-100 peer-focus/proc_app_release_step_gh_actions_build:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_build:stroke-slate-500 - peer-focus/proc_app_release_step_gh_actions_build:fill-slate-100 + peer-focus/proc_app_release_step_gh_actions_build:stroke-neutral-500 + peer-focus/proc_app_release_step_gh_actions_build:fill-neutral-100 peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-slate-500 - peer-focus/proc_app_release_step_gh_actions_publish:fill-slate-100 + peer-focus/proc_app_release_step_gh_actions_publish:stroke-neutral-500 + peer-focus/proc_app_release_step_gh_actions_publish:fill-neutral-100 t_localhost: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + [&>text]:fill-slate-900 peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 @@ -589,63 +627,94 @@ tailwind_classes: t_localhost_repo: >- stroke-1 visible - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 - t_localhost_repo_src: >- - stroke-1 - visible hover:stroke-slate-300 stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 + [&>text]:fill-slate-900 + t_localhost_repo_src: >- + stroke-1 + visible hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 - t_localhost_repo_target: >- - stroke-1 - visible hover:stroke-slate-300 stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 + [&>text]:fill-slate-900 + t_localhost_repo_target: >- + stroke-1 + visible hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 - t_localhost_repo_target_file_zip: >- - stroke-1 - visible hover:stroke-slate-300 stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 + [&>text]:fill-slate-900 + t_localhost_repo_target_file_zip: >- + stroke-1 + visible hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 - t_localhost_repo_target_dist_dir: >- - stroke-1 - visible hover:stroke-slate-300 stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 + [&>text]:fill-slate-900 + t_localhost_repo_target_dist_dir: >- + stroke-1 + visible hover:fill-slate-200 fill-slate-300 focus:fill-slate-400 active:fill-slate-500 - [&>text]:fill-slate-950 + hover:stroke-slate-300 + stroke-slate-400 + focus:stroke-slate-500 + active:stroke-slate-600 + [&>text]:fill-slate-900 + + # Tags - act as group containers for highlighting associated things + tag_app_development: >- + stroke-1 + visible + hover:fill-emerald-400 + fill-emerald-500 + focus:fill-emerald-600 + active:fill-emerald-700 + hover:stroke-emerald-500 + stroke-emerald-600 + focus:stroke-emerald-700 + active:stroke-emerald-800 + [&>text]:fill-emerald-950 + + peer/tag_app_development + + tag_deployment: >- + stroke-1 + visible + hover:fill-emerald-400 + fill-emerald-500 + focus:fill-emerald-600 + active:fill-emerald-700 + hover:stroke-emerald-500 + stroke-emerald-600 + focus:stroke-emerald-700 + active:stroke-emerald-800 + [&>text]:fill-emerald-950 + + peer/tag_deployment # Layout configuration for each node. # From 5f29684a73202a9f59e67ef2062ba0ff2388ccfd Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Wed, 3 Dec 2025 18:00:04 +1300 Subject: [PATCH 3/9] Add tailwind styles for edges, processes, and process steps. --- .../disposition/example_input.md | 23 +- .../example_intermediate_representation.md | 278 ++++++++++++++++-- 2 files changed, 271 insertions(+), 30 deletions(-) diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md index 9fb33dd79..3b34f47d1 100644 --- a/doc/src/side_projects/disposition/example_input.md +++ b/doc/src/side_projects/disposition/example_input.md @@ -248,7 +248,7 @@ tags: tag_app_development: "Application Development" tag_deployment: "Deployment" -# Things and edges that are associated with each tag. +# Things associated with each tag. # # It probably makes sense to specify the `things` for each tag, than the tags associated with each # thing. i.e. the key being the tag, instead of the key being the `thing` IDs. @@ -257,7 +257,8 @@ tag_things: - t_github_user_repo - t_localhost tag_deployment: - - edge_t_aws_ecr_repo__t_aws_ecs_service__push + - t_aws_ecr_repo + - t_github_user_repo # `Type`s that are automatically attached to each entity: # @@ -455,21 +456,21 @@ theme_types_styles: type_edge_dependency_sequence_request_default: edge_defaults: style_aliases_applied: [shade_dark] - stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" - shape_color: "violet" - stroke_width: "2" + stroke_style: solid + shape_color: "neutral" + stroke_width: "1" type_edge_dependency_sequence_response_default: edge_defaults: style_aliases_applied: [shade_dark] - stroke_style: "dasharray:0,120,1,2,1,2,2,2,4,2,8,2,20,80" - shape_color: "violet" - stroke_width: "2" + stroke_style: solid + shape_color: "neutral" + stroke_width: "1" type_edge_dependency_cyclic_default: edge_defaults: style_aliases_applied: [shade_dark] - stroke_style: "dasharray:0,80,12,2,4,2,2,2,1,2,1,120" - shape_color: "violet" - stroke_width: "2" + stroke_style: solid + shape_color: "neutral" + stroke_width: "1" type_edge_interaction_sequence_request_default: edge_defaults: style_aliases_applied: [shade_dark] diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md index 6fa18da21..4bf2abea9 100644 --- a/doc/src/side_projects/disposition/example_intermediate_representation.md +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -326,62 +326,306 @@ tailwind_classes: # Process steps - visible when parent process has focus, act as peers for edges proc_app_dev_step_repository_clone: >- - peer/proc_app_dev_step_repository_clone + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_dev_step_repository_clone group-focus-within/proc_app_dev:visible proc_app_dev_step_project_build: >- - peer/proc_app_dev_step_project_build + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_dev_step_project_build group-focus-within/proc_app_dev:visible proc_app_release_step_crate_version_update: >- - peer/proc_app_release_step_crate_version_update + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_release_step_crate_version_update group-focus-within/proc_app_release:visible proc_app_release_step_pull_request_open: >- - peer/proc_app_release_step_pull_request_open + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_release_step_pull_request_open group-focus-within/proc_app_release:visible proc_app_release_step_tag_and_push: >- - peer/proc_app_release_step_tag_and_push + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_release_step_tag_and_push group-focus-within/proc_app_release:visible proc_app_release_step_gh_actions_build: >- - peer/proc_app_release_step_gh_actions_build + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_release_step_gh_actions_build group-focus-within/proc_app_release:visible proc_app_release_step_gh_actions_publish: >- - peer/proc_app_release_step_gh_actions_publish + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_app_release_step_gh_actions_publish group-focus-within/proc_app_release:visible proc_i12e_region_tier_app_deploy_step_ecs_service_update: >- - peer/proc_i12e_region_tier_app_deploy_step_ecs_service_update + stroke-1 invisible + hover:fill-sky-200 + fill-sky-300 + focus:fill-sky-400 + active:fill-sky-500 + hover:stroke-sky-300 + stroke-sky-400 + focus:stroke-sky-500 + active:stroke-sky-600 + + peer/proc_i12e_region_tier_app_deploy_step_ecs_service_update group-focus-within/proc_i12e_region_tier_app_deploy:visible # Edges - visible when their associated step has focus - # Maps edge_id -> list of step_ids that trigger visibility + # + # If an edge is used as a dependency, then the `dependency` set of tailwind classes are applied, + # and the edge is `visible` by default. + # If it is also used as an interaction, then the `interaction` set of tailwind classes are + # generated as peer classes to override the first set. + # + # If an edge is only used as an interaction, then the `interaction` set of tailwind classes are + # generated as regular tailwind classes, and the edge is `invisible` by default. + # The only peer class needed then is making the edge `visible` when the peer has focus. edge_t_localhost__t_github_user_repo__pull: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_dev_step_repository_clone:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_dev_step_repository_clone:stroke-[2px] peer-focus/proc_app_dev_step_repository_clone:visible + peer-focus/proc_app_dev_step_repository_clone:hover:fill-violet-600 + peer-focus/proc_app_dev_step_repository_clone:fill-violet-700 + peer-focus/proc_app_dev_step_repository_clone:focus:fill-violet-800 + peer-focus/proc_app_dev_step_repository_clone:active:fill-violet-900 + peer-focus/proc_app_dev_step_repository_clone:hover:stroke-violet-700 + peer-focus/proc_app_dev_step_repository_clone:stroke-violet-800 + peer-focus/proc_app_dev_step_repository_clone:focus:stroke-violet-900 + peer-focus/proc_app_dev_step_repository_clone:active:stroke-violet-950 + + peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_release_step_pull_request_open:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_release_step_pull_request_open:stroke-[2px] peer-focus/proc_app_release_step_pull_request_open:visible + peer-focus/proc_app_release_step_pull_request_open:hover:fill-violet-600 + peer-focus/proc_app_release_step_pull_request_open:fill-violet-700 + peer-focus/proc_app_release_step_pull_request_open:focus:fill-violet-800 + peer-focus/proc_app_release_step_pull_request_open:active:fill-violet-900 + peer-focus/proc_app_release_step_pull_request_open:hover:stroke-violet-700 + peer-focus/proc_app_release_step_pull_request_open:stroke-violet-800 + peer-focus/proc_app_release_step_pull_request_open:focus:stroke-violet-900 + peer-focus/proc_app_release_step_pull_request_open:active:stroke-violet-950 edge_t_localhost__t_github_user_repo__push: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_release_step_tag_and_push:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_release_step_tag_and_push:stroke-[2px] peer-focus/proc_app_release_step_tag_and_push:visible + peer-focus/proc_app_release_step_tag_and_push:hover:fill-violet-600 + peer-focus/proc_app_release_step_tag_and_push:fill-violet-700 + peer-focus/proc_app_release_step_tag_and_push:focus:fill-violet-800 + peer-focus/proc_app_release_step_tag_and_push:active:fill-violet-900 + peer-focus/proc_app_release_step_tag_and_push:hover:stroke-violet-700 + peer-focus/proc_app_release_step_tag_and_push:stroke-violet-800 + peer-focus/proc_app_release_step_tag_and_push:focus:stroke-violet-900 + peer-focus/proc_app_release_step_tag_and_push:active:stroke-violet-950 edge_t_localhost__t_localhost__within: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_app_dev_step_project_build:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_dev_step_project_build:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_dev_step_project_build:stroke-[2px] peer-focus/proc_app_dev_step_project_build:visible + peer-focus/proc_app_dev_step_project_build:hover:fill-violet-600 + peer-focus/proc_app_dev_step_project_build:fill-violet-700 + peer-focus/proc_app_dev_step_project_build:focus:fill-violet-800 + peer-focus/proc_app_dev_step_project_build:active:fill-violet-900 + peer-focus/proc_app_dev_step_project_build:hover:stroke-violet-700 + peer-focus/proc_app_dev_step_project_build:stroke-violet-800 + peer-focus/proc_app_dev_step_project_build:focus:stroke-violet-900 + peer-focus/proc_app_dev_step_project_build:active:stroke-violet-950 + + peer-focus/proc_app_release_step_crate_version_update:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_release_step_crate_version_update:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_release_step_crate_version_update:stroke-[2px] peer-focus/proc_app_release_step_crate_version_update:visible + peer-focus/proc_app_release_step_crate_version_update:hover:fill-violet-600 + peer-focus/proc_app_release_step_crate_version_update:fill-violet-700 + peer-focus/proc_app_release_step_crate_version_update:focus:fill-violet-800 + peer-focus/proc_app_release_step_crate_version_update:active:fill-violet-900 + peer-focus/proc_app_release_step_crate_version_update:hover:stroke-violet-700 + peer-focus/proc_app_release_step_crate_version_update:stroke-violet-800 + peer-focus/proc_app_release_step_crate_version_update:focus:stroke-violet-900 + peer-focus/proc_app_release_step_crate_version_update:active:stroke-violet-950 edge_t_github_user_repo__t_github_user_repo__within: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_app_release_step_gh_actions_build:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_release_step_gh_actions_build:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_release_step_gh_actions_build:stroke-[2px] peer-focus/proc_app_release_step_gh_actions_build:visible + peer-focus/proc_app_release_step_gh_actions_build:hover:fill-violet-600 + peer-focus/proc_app_release_step_gh_actions_build:fill-violet-700 + peer-focus/proc_app_release_step_gh_actions_build:focus:fill-violet-800 + peer-focus/proc_app_release_step_gh_actions_build:active:fill-violet-900 + peer-focus/proc_app_release_step_gh_actions_build:hover:stroke-violet-700 + peer-focus/proc_app_release_step_gh_actions_build:stroke-violet-800 + peer-focus/proc_app_release_step_gh_actions_build:focus:stroke-violet-900 + peer-focus/proc_app_release_step_gh_actions_build:active:stroke-violet-950 edge_t_github_user_repo__t_aws_ecr_repo__push: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_app_release_step_gh_actions_publish:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_app_release_step_gh_actions_publish:stroke-[2px] peer-focus/proc_app_release_step_gh_actions_publish:visible + peer-focus/proc_app_release_step_gh_actions_publish:hover:fill-violet-600 + peer-focus/proc_app_release_step_gh_actions_publish:fill-violet-700 + peer-focus/proc_app_release_step_gh_actions_publish:focus:fill-violet-800 + peer-focus/proc_app_release_step_gh_actions_publish:active:fill-violet-900 + peer-focus/proc_app_release_step_gh_actions_publish:hover:stroke-violet-700 + peer-focus/proc_app_release_step_gh_actions_publish:stroke-violet-800 + peer-focus/proc_app_release_step_gh_actions_publish:focus:stroke-violet-900 + peer-focus/proc_app_release_step_gh_actions_publish:active:stroke-violet-950 edge_t_aws_ecr_repo__t_aws_ecs_service__push: >- - invisible + stroke-1 + [stroke-dasharray:none] + visible + hover:fill-neutral-600 + fill-neutral-700 + focus:fill-neutral-800 + active:fill-neutral-900 + hover:stroke-neutral-700 + stroke-neutral-800 + focus:stroke-neutral-900 + active:stroke-neutral-950 + + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:animate-[stroke-dashoffset-move-request_2s_linear_infinite] + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-[2px] peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:visible + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:hover:fill-violet-600 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-violet-700 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:focus:fill-violet-800 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:active:fill-violet-900 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:hover:stroke-violet-700 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-violet-800 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:focus:stroke-violet-900 + peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:active:stroke-violet-950 # Styles for things are as follows: # @@ -954,8 +1198,4 @@ css: >- 0% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: 228; } } - @keyframes stroke-dashoffset-move-response { - 0% { stroke-dashoffset: 0; } - 100% { stroke-dashoffset: -248; } - } ```` From eaa5516c7278e1fcb1153c5cf6f71d99d1af74f7 Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Wed, 3 Dec 2025 19:01:04 +1300 Subject: [PATCH 4/9] Add peer tailwind classes for tags. --- .../example_intermediate_representation.md | 101 ++++++++++++------ 1 file changed, 71 insertions(+), 30 deletions(-) diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md index 4bf2abea9..89aa3f949 100644 --- a/doc/src/side_projects/disposition/example_intermediate_representation.md +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -283,6 +283,37 @@ entity_types: # # * `[stroke-dasharray:2]` in an SVG approximates `border-dotted` on HTML elements. tailwind_classes: + # Tags - act as group containers for highlighting associated things + tag_app_development: >- + stroke-1 + visible + hover:fill-emerald-400 + fill-emerald-500 + focus:fill-emerald-600 + active:fill-emerald-700 + hover:stroke-emerald-500 + stroke-emerald-600 + focus:stroke-emerald-700 + active:stroke-emerald-800 + [&>text]:fill-emerald-950 + + peer/tag_app_development + + tag_deployment: >- + stroke-1 + visible + hover:fill-emerald-400 + fill-emerald-500 + focus:fill-emerald-600 + active:fill-emerald-700 + hover:stroke-emerald-500 + stroke-emerald-600 + focus:stroke-emerald-700 + active:stroke-emerald-800 + [&>text]:fill-emerald-950 + + peer/tag_deployment + # Processes - act as group containers for their steps proc_app_dev: >- stroke-1 @@ -720,6 +751,16 @@ tailwind_classes: active:stroke-yellow-600 [&>text]:fill-yellow-900 + peer-focus/tag_deployment:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/tag_deployment:hover:fill-yellow-50 + peer-focus/tag_deployment:fill-yellow-100 + peer-focus/tag_deployment:focus:fill-yellow-200 + peer-focus/tag_deployment:active:fill-yellow-300 + peer-focus/tag_deployment:hover:stroke-yellow-100 + peer-focus/tag_deployment:stroke-yellow-200 + peer-focus/tag_deployment:focus:stroke-yellow-300 + peer-focus/tag_deployment:active:stroke-yellow-400 + peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/proc_app_release_step_gh_actions_publish:stroke-yellow-500 peer-focus/proc_app_release_step_gh_actions_publish:fill-yellow-100 @@ -815,6 +856,26 @@ tailwind_classes: active:stroke-neutral-600 [&>text]:fill-neutral-900 + peer-focus/tag_app_development:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/tag_app_development:hover:fill-neutral-50 + peer-focus/tag_app_development:fill-neutral-100 + peer-focus/tag_app_development:focus:fill-neutral-200 + peer-focus/tag_app_development:active:fill-neutral-300 + peer-focus/tag_app_development:hover:stroke-neutral-100 + peer-focus/tag_app_development:stroke-neutral-200 + peer-focus/tag_app_development:focus:stroke-neutral-300 + peer-focus/tag_app_development:active:stroke-neutral-400 + + peer-focus/tag_deployment:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/tag_deployment:hover:fill-neutral-50 + peer-focus/tag_deployment:fill-neutral-100 + peer-focus/tag_deployment:focus:fill-neutral-200 + peer-focus/tag_deployment:active:fill-neutral-300 + peer-focus/tag_deployment:hover:stroke-neutral-100 + peer-focus/tag_deployment:stroke-neutral-200 + peer-focus/tag_deployment:focus:stroke-neutral-300 + peer-focus/tag_deployment:active:stroke-neutral-400 + peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/proc_app_dev_step_repository_clone:stroke-neutral-500 peer-focus/proc_app_dev_step_repository_clone:fill-neutral-100 @@ -848,6 +909,16 @@ tailwind_classes: active:stroke-slate-600 [&>text]:fill-slate-900 + peer-focus/tag_app_development:animate-[stroke-dashoffset-move_2s_linear_infinite] + peer-focus/tag_app_development:hover:fill-slate-50 + peer-focus/tag_app_development:fill-slate-100 + peer-focus/tag_app_development:focus:fill-slate-200 + peer-focus/tag_app_development:active:fill-slate-300 + peer-focus/tag_app_development:hover:stroke-slate-100 + peer-focus/tag_app_development:stroke-slate-200 + peer-focus/tag_app_development:focus:stroke-slate-300 + peer-focus/tag_app_development:active:stroke-slate-400 + peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 peer-focus/proc_app_dev_step_repository_clone:fill-slate-100 @@ -929,36 +1000,6 @@ tailwind_classes: active:stroke-slate-600 [&>text]:fill-slate-900 - # Tags - act as group containers for highlighting associated things - tag_app_development: >- - stroke-1 - visible - hover:fill-emerald-400 - fill-emerald-500 - focus:fill-emerald-600 - active:fill-emerald-700 - hover:stroke-emerald-500 - stroke-emerald-600 - focus:stroke-emerald-700 - active:stroke-emerald-800 - [&>text]:fill-emerald-950 - - peer/tag_app_development - - tag_deployment: >- - stroke-1 - visible - hover:fill-emerald-400 - fill-emerald-500 - focus:fill-emerald-600 - active:fill-emerald-700 - hover:stroke-emerald-500 - stroke-emerald-600 - focus:stroke-emerald-700 - active:stroke-emerald-800 - [&>text]:fill-emerald-950 - - peer/tag_deployment # Layout configuration for each node. # From 14a4f39d8991f711425df09936a1544a1d44ea0b Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Fri, 5 Dec 2025 17:10:51 +1300 Subject: [PATCH 5/9] Fix some styling in `example_input.md`. --- .../disposition/example_input.md | 28 ++++++------------- 1 file changed, 9 insertions(+), 19 deletions(-) diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md index 3b34f47d1..603809345 100644 --- a/doc/src/side_projects/disposition/example_input.md +++ b/doc/src/side_projects/disposition/example_input.md @@ -335,25 +335,13 @@ theme_default: # i.e. a `StyleAlias` enum, with a final variant of `Custom(String)`. style_aliases: padding_none: - padding_top: "0" - padding_bottom: "0" - padding_left: "0" - padding_right: "0" + padding: "0" padding_tight: - padding_top: "2" - padding_bottom: "2" - padding_left: "2" - padding_right: "2" + padding: "2" padding_normal: - padding_top: "4" - padding_bottom: "4" - padding_left: "4" - padding_right: "4" + padding: "4" padding_wide: - padding_top: "6" - padding_bottom: "6" - padding_left: "6" - padding_right: "6" + padding: "6" shade_pale: fill_shade_hover: "50" fill_shade_normal: "100" @@ -414,9 +402,11 @@ theme_default: shape_color: "slate" stroke_style: "solid" stroke_width: "1" + text_color: "neutral" visibility: "visible" edge_defaults: stroke_width: "1" + text_color: "neutral" visibility: "visible" edge_t_localhost__t_github_user_repo__pull: style_aliases_applied: [shade_light] @@ -516,7 +506,7 @@ theme_thing_dependencies_styles: node_defaults: visibility: "hidden" edge_defaults: - visibility: "hidden + visibility: "hidden" things_included_styles: node_defaults: visibility: "visible" @@ -533,10 +523,10 @@ theme_thing_dependencies_styles: theme_tag_things_focus: things_included_styles: node_defaults: - opacity: "0.5" + style_aliases_applied: [shade_pale, stroke_dashed_animated] things_excluded_styles: node_defaults: - style_aliases_applied: [stroke_dashed_animated] + opacity: "0.5" theme_tag_things_focus_specific: tag_app_development: From 3fc29b735e7628e9a1fd429c62b4dd1071d20460 Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Fri, 5 Dec 2025 17:20:59 +1300 Subject: [PATCH 6/9] Make `example_input.md` consistent with `disposition_model` crate. --- .../disposition/example_input.md | 54 ++++++++++--------- 1 file changed, 29 insertions(+), 25 deletions(-) diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md index 603809345..1428c3c9f 100644 --- a/doc/src/side_projects/disposition/example_input.md +++ b/doc/src/side_projects/disposition/example_input.md @@ -132,10 +132,10 @@ thing_dependencies_descs: `git pull` edge_t_localhost__t_github_user_repo__push: |- `git push` - edge_t_localhost__t_localhost__within: ~ - edge_t_github_user_repo__t_github_user_repo__within: ~ - edge_t_github_user_repo__t_aws_ecr_repo__push: ~ - edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ + # edge_t_localhost__t_localhost__within: ~ + # edge_t_github_user_repo__t_github_user_repo__within: ~ + # edge_t_github_user_repo__t_aws_ecr_repo__push: ~ + # edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ # Interactions between things can be one way, or cyclic. # @@ -217,7 +217,7 @@ processes: The build will push the new version to ECR automatically. proc_app_release_step_gh_actions_publish: |- - Github Actions will publish the image to AWS ECR. + Github Actions will publish the image to AWS ECR. step_thing_interactions: proc_app_release_step_crate_version_update: [edge_t_localhost__t_localhost__within] @@ -240,7 +240,8 @@ processes: proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- Deploy or update the existing ECS service with the new image. step_thing_interactions: - proc_i12e_region_tier_app_deploy_step_ecs_service_update: [edge_t_aws_ecr_repo__t_aws_ecs_service__push] + proc_i12e_region_tier_app_deploy_step_ecs_service_update: + [edge_t_aws_ecr_repo__t_aws_ecs_service__push] # Tags are labels that can be associated with things, so that the things can be highlighted when # the tag is focused. @@ -296,29 +297,29 @@ tag_things: entity_types: t_aws: "type_organisation" t_aws_iam: "type_service" - t_aws_iam_ecs_policy: ~ + # t_aws_iam_ecs_policy: ~ t_aws_ecr: "type_service" - t_aws_ecr_repo: ~ + # t_aws_ecr_repo: ~ t_aws_ecr_repo_image_1: "type_docker_image" t_aws_ecr_repo_image_2: "type_docker_image" t_aws_ecs: "type_service" - t_aws_ecs_cluster_app: ~ - t_aws_ecs_cluster_app_task: ~ + # t_aws_ecs_cluster_app: ~ + # t_aws_ecs_cluster_app_task: ~ t_github: "type_organisation" - t_github_user_repo: ~ - t_localhost: ~ - t_localhost_repo: ~ - t_localhost_repo_src: ~ - t_localhost_repo_target: ~ - t_localhost_repo_target_file_zip: ~ - t_localhost_repo_target_dist_dir: ~ - - edge_t_localhost__t_github_user_repo__pull: ~ - edge_t_localhost__t_github_user_repo__push: ~ - edge_t_localhost__t_localhost__within: ~ - edge_t_github_user_repo__t_github_user_repo__within: ~ - edge_t_github_user_repo__t_aws_ecr_repo__push: ~ - edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ + # t_github_user_repo: ~ + # t_localhost: ~ + # t_localhost_repo: ~ + # t_localhost_repo_src: ~ + # t_localhost_repo_target: ~ + # t_localhost_repo_target_file_zip: ~ + # t_localhost_repo_target_dist_dir: ~ + + # edge_t_localhost__t_github_user_repo__pull: ~ + # edge_t_localhost__t_github_user_repo__push: ~ + # edge_t_localhost__t_localhost__within: ~ + # edge_t_github_user_repo__t_github_user_repo__within: ~ + # edge_t_github_user_repo__t_aws_ecr_repo__push: ~ + # edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ tag_app_development: tag_type_default tag_deployment: tag_type_default @@ -480,7 +481,6 @@ theme_types_styles: shape_color: "violet" stroke_width: "2" - # custom styles that users can provide type_organisation: node_defaults: @@ -539,4 +539,8 @@ css: |- 0% { stroke-dashoffset: 30; } 100% { stroke-dashoffset: 0; } } + @keyframes stroke-dashoffset-move-request { + 0% { stroke-dashoffset: 0; } + 100% { stroke-dashoffset: 228; } + } ```` From 4c1e29e9399baee660d983b02edf25b55169d3e6 Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Fri, 5 Dec 2025 17:22:27 +1300 Subject: [PATCH 7/9] Use `neutral` for the text color in `example_intermediate_representation.md`. --- .../example_intermediate_representation.md | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md index 89aa3f949..ab00016c0 100644 --- a/doc/src/side_projects/disposition/example_intermediate_representation.md +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -295,7 +295,7 @@ tailwind_classes: stroke-emerald-600 focus:stroke-emerald-700 active:stroke-emerald-800 - [&>text]:fill-emerald-950 + [&>text]:fill-neutral-950 peer/tag_app_development @@ -310,7 +310,7 @@ tailwind_classes: stroke-emerald-600 focus:stroke-emerald-700 active:stroke-emerald-800 - [&>text]:fill-emerald-950 + [&>text]:fill-neutral-950 peer/tag_deployment @@ -699,7 +699,7 @@ tailwind_classes: stroke-yellow-200 focus:stroke-yellow-300 active:stroke-yellow-400 - [&>text]:fill-yellow-800 + [&>text]:fill-neutral-800 t_aws_iam: >- [stroke-dasharray:3] stroke-1 @@ -712,7 +712,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_aws_iam_ecs_policy: >- stroke-1 visible @@ -724,7 +724,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_aws_ecr: >- [stroke-dasharray:3] stroke-1 @@ -737,7 +737,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_aws_ecr_repo: >- stroke-1 visible @@ -749,7 +749,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 peer-focus/tag_deployment:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/tag_deployment:hover:fill-yellow-50 @@ -780,7 +780,7 @@ tailwind_classes: stroke-sky-400 focus:stroke-sky-500 active:stroke-sky-600 - [&>text]:fill-sky-900 + [&>text]:fill-neutral-900 t_aws_ecr_repo_image_2: >- stroke-1 visible @@ -792,7 +792,7 @@ tailwind_classes: stroke-sky-400 focus:stroke-sky-500 active:stroke-sky-600 - [&>text]:fill-sky-900 + [&>text]:fill-neutral-900 t_aws_ecs: >- [stroke-dasharray:3] stroke-1 @@ -805,7 +805,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_aws_ecs_cluster_app: >- stroke-1 visible @@ -817,7 +817,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_aws_ecs_cluster_app_task: >- stroke-1 visible @@ -829,7 +829,7 @@ tailwind_classes: stroke-yellow-400 focus:stroke-yellow-500 active:stroke-yellow-600 - [&>text]:fill-yellow-900 + [&>text]:fill-neutral-900 t_github: >- [stroke-dasharray:3] stroke-1 @@ -907,7 +907,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 peer-focus/tag_app_development:animate-[stroke-dashoffset-move_2s_linear_infinite] peer-focus/tag_app_development:hover:fill-slate-50 @@ -950,7 +950,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 t_localhost_repo_src: >- stroke-1 visible @@ -962,7 +962,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 t_localhost_repo_target: >- stroke-1 visible @@ -974,7 +974,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 t_localhost_repo_target_file_zip: >- stroke-1 visible @@ -986,7 +986,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 t_localhost_repo_target_dist_dir: >- stroke-1 visible @@ -998,7 +998,7 @@ tailwind_classes: stroke-slate-400 focus:stroke-slate-500 active:stroke-slate-600 - [&>text]:fill-slate-900 + [&>text]:fill-neutral-900 # Layout configuration for each node. From 49e822a11843863745c04d1c6565e7dea48bec0c Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Sat, 6 Dec 2025 13:29:33 +1300 Subject: [PATCH 8/9] Update `disposition` `example_input.md` and `example_intermediate_representation.md`. --- .../disposition/example_input.md | 72 +- .../example_intermediate_representation.md | 1014 ++--------------- 2 files changed, 142 insertions(+), 944 deletions(-) diff --git a/doc/src/side_projects/disposition/example_input.md b/doc/src/side_projects/disposition/example_input.md index 1428c3c9f..7b377a8bc 100644 --- a/doc/src/side_projects/disposition/example_input.md +++ b/doc/src/side_projects/disposition/example_input.md @@ -98,14 +98,14 @@ thing_hierarchy: # We want to make it easy to define dependencies between chains of things. thing_dependencies: &thing_dependencies edge_t_localhost__t_github_user_repo__pull: - # Last thing in the list has an edge back to first thing. + # Cyclic dependencies are where the last thing in the list has an edge back to first thing. # # Should have at least one `thing`. cyclic: - t_localhost - t_github_user_repo edge_t_localhost__t_github_user_repo__push: - # 2 or more things + # Can have 2 or more things sequence: - t_localhost - t_github_user_repo @@ -124,18 +124,33 @@ thing_dependencies: &thing_dependencies - t_aws_ecr_repo - t_aws_ecs_service -# Descriptions to render next to each arrow. +# Descriptions to render next to each node, edge group, or edge. # # This is intended to take markdown text. -thing_dependencies_descs: +# +# # Notes +# +# 1. Edge group IDs are from either `thing_dependencies` or `thing_interactions`. +# 2. Edge IDs are their edge group IDs, suffixed with "__" and the zero-based index of that edge in its group. +# 3. Descriptions for processes are not currently supported. +# 4. Descriptions for process steps are defined within the `process`'s `step_descs`. +entity_descs: + # things + t_localhost: "User's computer" + + # edge groups + # + # Shown when any of the edges in this group are focused. edge_t_localhost__t_github_user_repo__pull: |- - `git pull` + Fetch from GitHub edge_t_localhost__t_github_user_repo__push: |- + Push to GitHub + + # edges + edge_t_localhost__t_github_user_repo__pull__0: |- + `git pull` + edge_t_localhost__t_github_user_repo__push__0: |- `git push` - # edge_t_localhost__t_localhost__within: ~ - # edge_t_github_user_repo__t_github_user_repo__within: ~ - # edge_t_github_user_repo__t_aws_ecr_repo__push: ~ - # edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ # Interactions between things can be one way, or cyclic. # @@ -261,7 +276,7 @@ tag_things: - t_aws_ecr_repo - t_github_user_repo -# `Type`s that are automatically attached to each entity: +# `Type`s are automatically attached to each entity: # # * `things` # * `thing_dependencies` @@ -269,7 +284,8 @@ tag_things: # * `processes` # * `process_steps` # -# These allow us to +# These allow us to apply a common set of styles to the entities in the diagram with less +# duplication. # # Note: these do not actually appear in the diagram schema, but are listed so we know what default # types are available. @@ -287,13 +303,36 @@ tag_things: # - type_edge_interaction_sequence_response_default # - type_edge_interaction_cyclic_default # ``` - +# # Additional `type`s we attach to `things` / `thing_dependencies` / `tags`, so they can be styled # in common. # # This is like a tag, but doesn't require the user to click on the tag to apply the style. # -# Unlike tags, each `thing` / `thing_dependency` / `tag` can only have one `type`, so this map is keyed by the `thing` ID. +# Built-in types that are automatically attached to entities unless overridden: +# +# * `type_thing_default` +# * `type_tag_default` +# * `type_process_default` +# * `type_process_step_default` +# +# For edges, multiple edges are generated for each dependency / interaction, +# and each edge is assigned a type from the following: +# +# * `type_edge_dependency_sequence_request_default` +# * `type_edge_dependency_sequence_response_default` +# * `type_edge_dependency_cyclic_default` +# * `type_edge_interaction_sequence_request_default` +# * `type_edge_interaction_sequence_response_default` +# * `type_edge_interaction_cyclic_default` +# +# The edge ID will be the edge group ID specified in `thing_dependencies` / +# `thing_interactions`, suffixed with the zero-based index of the edge like +# so: +# +# ```text +# edge_id = edge_group_id + "__" + edge_index +# ``` entity_types: t_aws: "type_organisation" t_aws_iam: "type_service" @@ -314,15 +353,16 @@ entity_types: # t_localhost_repo_target_file_zip: ~ # t_localhost_repo_target_dist_dir: ~ - # edge_t_localhost__t_github_user_repo__pull: ~ + # edge_t_localhost__t_github_user_repo__pull__0: "type_edge_dependency_sequence_request_default" + # edge_t_localhost__t_github_user_repo__pull__1: "type_edge_dependency_sequence_response_default" # edge_t_localhost__t_github_user_repo__push: ~ # edge_t_localhost__t_localhost__within: ~ # edge_t_github_user_repo__t_github_user_repo__within: ~ # edge_t_github_user_repo__t_aws_ecr_repo__push: ~ # edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ - tag_app_development: tag_type_default - tag_deployment: tag_type_default + # tag_app_development: "tag_type_default" + # tag_deployment: "tag_type_default" # Styles when the diagram has no user interaction. # diff --git a/doc/src/side_projects/disposition/example_intermediate_representation.md b/doc/src/side_projects/disposition/example_intermediate_representation.md index ab00016c0..a8cc1f874 100644 --- a/doc/src/side_projects/disposition/example_intermediate_representation.md +++ b/doc/src/side_projects/disposition/example_intermediate_representation.md @@ -3,13 +3,20 @@ This is the computed data structure from combining the layered values from the input data. ````yaml +--- +# Example Intermediate Representation +# +# This is the computed data from combining the layered values from +# the example input. + # Everything that needs to be represented as a `node` on the diagram, including: # # * `things` # * `tags` # * `processes` -# * `steps` +# * `process_steps` nodes: &nodes + # # things t_aws: "☁ī¸ Amazon Web Services" t_aws_iam: "🖊ī¸ Identity and Access Management" @@ -42,100 +49,42 @@ nodes: &nodes # steps proc_app_dev_step_repository_clone: "Clone repository" proc_app_dev_step_project_build: "Build project" - proc_app_release_step_crate_version_update: "Update crate versions" proc_app_release_step_pull_request_open: "Open PR" proc_app_release_step_tag_and_push: "Tag and push" proc_app_release_step_gh_actions_build: "Github Actions build" proc_app_release_step_gh_actions_publish: "Github Actions publish" - proc_i12e_region_tier_app_deploy_step_ecs_service_update: "Update ECS service" -# Render a copy text button, and, when clicked, what text to place on the clipboard. -# -# This differs from the input schema by only including the `thing`s, not all `node`s. -# -# Note that all nodes' text will still be selectable and copyable with the regular hotkeys. +# Text to copy to clipboard when a node's copy button is clicked. node_copy_text: - # things - t_aws: "☁ī¸ Amazon Web Services" - t_aws_iam: "🖊ī¸ Identity and Access Management" - t_aws_iam_ecs_policy: "🗒ī¸ ECS IAM Policy" - t_aws_ecr: "🗄ī¸ Elastic Container Registry" - t_aws_ecr_repo: "đŸ’Ŋ web_app repo" - t_aws_ecr_repo_image_1: "đŸ’ŋ Image 1" - t_aws_ecr_repo_image_2: "đŸ’ŋ Image 2" - t_aws_ecs: "đŸ’ģ Elastic Container Service" - t_aws_ecs_cluster_app: "🎛ī¸ web_app cluster" - t_aws_ecs_cluster_app_task: "🖨ī¸ web_app task version 1" - t_github: "🐙 GitHub" + <<: *nodes + t_aws: "Amazon Web Services" + t_aws_iam: "Identity and Access Management" + t_aws_iam_ecs_policy: "ECS IAM Policy" + t_aws_ecr: "Elastic Container Registry" + t_aws_ecr_repo: "web_app repo" + t_aws_ecr_repo_image_1: "Image 1" + t_aws_ecr_repo_image_2: "Image 2" + t_aws_ecs: "Elastic Container Service" + t_aws_ecs_cluster_app: "web_app cluster" + t_aws_ecs_cluster_app_task: "web_app task version 1" + t_github: "GitHub" t_github_user_repo: "azriel91/web_app" - t_localhost: "🧑‍đŸ’ģ Localhost" - t_localhost_repo: "📂 ~/work/web_app" - t_localhost_repo_src: "📝 src" - t_localhost_repo_target: "📂 target" - t_localhost_repo_target_file_zip: "📝 file.zip" - t_localhost_repo_target_dist_dir: "📁 dist" - + t_localhost: "Localhost" t_localhost_repo: "~/work/web_app" t_localhost_repo_src: "~/work/web_app/src" t_localhost_repo_target: "~/work/web_app/target" t_localhost_repo_target_file_zip: "~/work/web_app/target/file.zip" t_localhost_repo_target_dist_dir: "~/work/web_app/target/dist" -# Rich level of detail for a given node. -node_descs: - # process steps - proc_app_release_step_crate_version_update: |- - ```bash - sd -s 'version = "0.3.0"' 'version = "0.3.0"' $(fd -tf -F toml) README.md src/lib.rs - ``` - proc_app_release_step_pull_request_open: |- - Create a pull request as usual. - proc_app_release_step_gh_actions_build: |- - Github Actions will build the image. - proc_app_release_step_tag_and_push: |- - When the PR is merged, tag the commit and push the tag to GitHub. - - ```bash - git tag 0.3.0 - git push origin 0.3.0 - ``` - - The build will push the new version to ECR automatically. - proc_app_release_step_gh_actions_publish: |- - Github Actions will publish the image to AWS ECR. - proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- - Deploy or update the existing ECS service with the new image. - -# Hierarchy of all nodes, to be laid out based on `node_layout`. -# -# This should be roughly the same as the DOM element hierarchy, which has the following constraints -# over the input schema: -# -# * `process` nodes have to come before `thing` nodes in order for the sibling selector (tailwind -# peers) to work. -# * `process_step` nodes have to be descendents of `process` nodes, to allow the `process` nodes to -# be visible when the `process_step` nodes have focus (via `focus-within`). -# * `thing` nodes may have wrapping nodes, so that we don't exceed the limit of CSS classes per -# element. -# -# One difference between the input schema and the IR schema is, the IR schema needs to specify the -# hierarchy for nodes that are not only `thing`s, e.g. `process` and `process_step`s. -# -# ⚠ī¸ The order of node declaration is important -- `process` nodes must come earlier than `thing` -# nodes in the DOM structure for the peer/sibling CSS selectors to work correctly. *However*, -# visually the `process` nodes may be placed to the right of the `thing` nodes. -# -# The DOM structure *may* also differ in this way: just because the `node_hierarchy` indicates -# nesting, does not mean the actual DOM hierarchy must have its elements nested. i.e. they may be -# siblings, just positioned and sized such that they visually appear to be nested. +# Hierarchy of all nodes. node_hierarchy: - # Tags before everything else (required for peer selector to target processes/things/edges) + # Tags before everything else tag_app_development: {} tag_deployment: {} - # Processes before things/edges (required for peer selector to target things/edges) + # Processes before things/edges proc_app_dev: proc_app_dev_step_repository_clone: {} proc_app_dev_step_project_build: {} @@ -148,7 +97,7 @@ node_hierarchy: proc_i12e_region_tier_app_deploy: proc_i12e_region_tier_app_deploy_step_ecs_service_update: {} - # Things (same hierarchy as input `thing_hierarchy`) + # Things t_aws: t_aws_iam: t_aws_iam_ecs_policy: {} @@ -168,11 +117,7 @@ node_hierarchy: t_localhost_repo_target_file_zip: {} t_localhost_repo_target_dist_dir: {} -# Edges derived from `thing_dependencies` and `thing_interactions`. -# -# Each edge has: -# - `from`: source node ID -# - `to`: target node ID +# Edge groups with explicit from/to edges. edge_groups: edge_t_localhost__t_github_user_repo: - from: t_github_user_repo @@ -195,17 +140,41 @@ edge_groups: - from: t_aws_ecr_repo to: t_aws_ecs_service -# Text placed next to the edges. -# -# We may need to factor these in as a DOM node so that there is space reserved for these descriptions alongside the `node` DOM nodes. -edge_group_descs: - edge_t_localhost__t_github_user_repo__pull: "`git pull`" - edge_t_localhost__t_github_user_repo__push: "`git push`" - edge_t_localhost__t_localhost__within: ~ - edge_t_github_user_repo__t_github_user_repo__within: ~ - edge_t_github_user_repo__t_aws_ecr_repo__push: ~ - edge_t_aws_ecr_repo__t_aws_ecs_service__push: ~ +# Descriptions for entities. +entity_descs: + # nodes + # process_steps + proc_app_release_step_crate_version_update: |- + ```bash + sd -s 'version = "0.3.0"' 'version = "0.3.0"' $(fd -tf -F toml) README.md src/lib.rs + ``` + proc_app_release_step_pull_request_open: |- + Create a pull request as usual. + proc_app_release_step_gh_actions_build: |- + Github Actions will build the image. + proc_app_release_step_tag_and_push: |- + When the PR is merged, tag the commit and push the tag to GitHub. + + ```bash + git tag 0.3.0 + git push origin 0.3.0 + ``` + + The build will push the new version to ECR automatically. + proc_app_release_step_gh_actions_publish: |- + Github Actions will publish the image to AWS ECR. + proc_i12e_region_tier_app_deploy_step_ecs_service_update: |- + Deploy or update the existing ECS service with the new image. + + # edge groups + edge_t_localhost__t_github_user_repo__pull: "Fetch from GitHub" + edge_t_localhost__t_github_user_repo__push: "Push to GitHub" + + # edges + edge_t_localhost__t_github_user_repo__pull__0: "`git pull`" + edge_t_localhost__t_github_user_repo__push__0: "`git push`" +# Entity types for styling. entity_types: # things t_aws: [type_thing_default, type_organisation] @@ -239,51 +208,33 @@ entity_types: # process steps proc_app_dev_step_repository_clone: [type_process_step_default] proc_app_dev_step_project_build: [type_process_step_default] - proc_app_release_step_crate_version_update: [type_process_step_default] proc_app_release_step_pull_request_open: [type_process_step_default] proc_app_release_step_tag_and_push: [type_process_step_default] proc_app_release_step_gh_actions_build: [type_process_step_default] proc_app_release_step_gh_actions_publish: [type_process_step_default] - proc_i12e_region_tier_app_deploy_step_ecs_service_update: [type_process_step_default] # edges - edge_t_localhost__t_github_user_repo__pull: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] - edge_t_localhost__t_github_user_repo__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] - edge_t_localhost__t_localhost__within: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] - edge_t_github_user_repo__t_github_user_repo__within: [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] - edge_t_github_user_repo__t_aws_ecr_repo__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] - edge_t_aws_ecr_repo__t_aws_ecs_service__push: [type_edge_dependency_sequence_default, type_edge_interaction_sequence_default] + # + # These IDs are the `edge_group` IDs suffixed with "__" and the edge's index within the group. + edge_t_localhost__t_github_user_repo__pull__0: + [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_localhost__t_github_user_repo__pull__1: + [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_localhost__t_github_user_repo__push__0: + [type_edge_dependency_sequence_request_default, type_edge_interaction_sequence_request_default] + edge_t_localhost__t_localhost__within__0: + [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_github_user_repo__t_github_user_repo__within: + [type_edge_dependency_cyclic_default, type_edge_interaction_cyclic_default] + edge_t_github_user_repo__t_aws_ecr_repo__push__0: + [type_edge_dependency_sequence_request_default, type_edge_interaction_sequence_request_default] + edge_t_aws_ecr_repo__t_aws_ecs_service__push__0: + [type_edge_dependency_sequence_request_default, type_edge_interaction_sequence_request_default] -# Tailwind CSS classes for interactive visibility behaviour. -# -# ## Visibility Patterns -# -# 1. Process -> Process Steps visibility: -# -# * Process node: `group/{process_id}` class -# * Process steps: `invisible group-focus-within/{process_id}:visible` -# * When process (or any child) has focus, steps become and remain visible -# -# 2. Process Step -> Edges visibility: -# -# * Process step: `peer/{step_id}` class -# * Edges: `invisible peer-focus/{step_id}:visible` -# * Edges must be DOM siblings AFTER the step element -# -# 3. **Alternative:** `:target` based visibility: -# -# * When element ID matches URL fragment (e.g. `#step_id`) -# * Use `invisible target:visible` on the element -# * Use `[&:has(~_#step_id:target)]:visible` on edges -# * Use `peer-[:where([data-step='3']):target]:visible` on edges -# -# # Notes -# -# * `[stroke-dasharray:2]` in an SVG approximates `border-dotted` on HTML elements. +# Computed Tailwind CSS classes. tailwind_classes: - # Tags - act as group containers for highlighting associated things tag_app_development: >- stroke-1 visible @@ -291,12 +242,6 @@ tailwind_classes: fill-emerald-500 focus:fill-emerald-600 active:fill-emerald-700 - hover:stroke-emerald-500 - stroke-emerald-600 - focus:stroke-emerald-700 - active:stroke-emerald-800 - [&>text]:fill-neutral-950 - peer/tag_app_development tag_deployment: >- @@ -304,863 +249,136 @@ tailwind_classes: visible hover:fill-emerald-400 fill-emerald-500 - focus:fill-emerald-600 - active:fill-emerald-700 - hover:stroke-emerald-500 - stroke-emerald-600 - focus:stroke-emerald-700 - active:stroke-emerald-800 - [&>text]:fill-neutral-950 - peer/tag_deployment - # Processes - act as group containers for their steps proc_app_dev: >- stroke-1 visible hover:fill-blue-200 fill-blue-300 - focus:fill-blue-400 - active:fill-blue-500 - hover:stroke-blue-300 - stroke-blue-400 - focus:stroke-blue-500 - active:stroke-blue-600 - group/proc_app_dev + proc_app_release: >- stroke-1 visible hover:fill-blue-200 fill-blue-300 - focus:fill-blue-400 - active:fill-blue-500 - hover:stroke-blue-300 - stroke-blue-400 - focus:stroke-blue-500 - active:stroke-blue-600 - group/proc_app_release + proc_i12e_region_tier_app_deploy: >- stroke-1 visible hover:fill-blue-200 fill-blue-300 - focus:fill-blue-400 - active:fill-blue-500 - hover:stroke-blue-300 - stroke-blue-400 - focus:stroke-blue-500 - active:stroke-blue-600 - group/proc_i12e_region_tier_app_deploy - # Process steps - visible when parent process has focus, act as peers for edges proc_app_dev_step_repository_clone: >- stroke-1 invisible hover:fill-sky-200 fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - peer/proc_app_dev_step_repository_clone group-focus-within/proc_app_dev:visible + proc_app_dev_step_project_build: >- stroke-1 invisible hover:fill-sky-200 fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - peer/proc_app_dev_step_project_build group-focus-within/proc_app_dev:visible - proc_app_release_step_crate_version_update: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_app_release_step_crate_version_update - group-focus-within/proc_app_release:visible - proc_app_release_step_pull_request_open: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_app_release_step_pull_request_open - group-focus-within/proc_app_release:visible - proc_app_release_step_tag_and_push: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_app_release_step_tag_and_push - group-focus-within/proc_app_release:visible - proc_app_release_step_gh_actions_build: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_app_release_step_gh_actions_build - group-focus-within/proc_app_release:visible - proc_app_release_step_gh_actions_publish: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_app_release_step_gh_actions_publish - group-focus-within/proc_app_release:visible - - proc_i12e_region_tier_app_deploy_step_ecs_service_update: >- - stroke-1 - invisible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - - peer/proc_i12e_region_tier_app_deploy_step_ecs_service_update - group-focus-within/proc_i12e_region_tier_app_deploy:visible - - # Edges - visible when their associated step has focus - # - # If an edge is used as a dependency, then the `dependency` set of tailwind classes are applied, - # and the edge is `visible` by default. - # If it is also used as an interaction, then the `interaction` set of tailwind classes are - # generated as peer classes to override the first set. - # - # If an edge is only used as an interaction, then the `interaction` set of tailwind classes are - # generated as regular tailwind classes, and the edge is `invisible` by default. - # The only peer class needed then is making the edge `visible` when the peer has focus. - edge_t_localhost__t_github_user_repo__pull: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_dev_step_repository_clone:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_dev_step_repository_clone:stroke-[2px] - peer-focus/proc_app_dev_step_repository_clone:visible - peer-focus/proc_app_dev_step_repository_clone:hover:fill-violet-600 - peer-focus/proc_app_dev_step_repository_clone:fill-violet-700 - peer-focus/proc_app_dev_step_repository_clone:focus:fill-violet-800 - peer-focus/proc_app_dev_step_repository_clone:active:fill-violet-900 - peer-focus/proc_app_dev_step_repository_clone:hover:stroke-violet-700 - peer-focus/proc_app_dev_step_repository_clone:stroke-violet-800 - peer-focus/proc_app_dev_step_repository_clone:focus:stroke-violet-900 - peer-focus/proc_app_dev_step_repository_clone:active:stroke-violet-950 - - peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_release_step_pull_request_open:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_release_step_pull_request_open:stroke-[2px] - peer-focus/proc_app_release_step_pull_request_open:visible - peer-focus/proc_app_release_step_pull_request_open:hover:fill-violet-600 - peer-focus/proc_app_release_step_pull_request_open:fill-violet-700 - peer-focus/proc_app_release_step_pull_request_open:focus:fill-violet-800 - peer-focus/proc_app_release_step_pull_request_open:active:fill-violet-900 - peer-focus/proc_app_release_step_pull_request_open:hover:stroke-violet-700 - peer-focus/proc_app_release_step_pull_request_open:stroke-violet-800 - peer-focus/proc_app_release_step_pull_request_open:focus:stroke-violet-900 - peer-focus/proc_app_release_step_pull_request_open:active:stroke-violet-950 - edge_t_localhost__t_github_user_repo__push: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_release_step_tag_and_push:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_release_step_tag_and_push:stroke-[2px] - peer-focus/proc_app_release_step_tag_and_push:visible - peer-focus/proc_app_release_step_tag_and_push:hover:fill-violet-600 - peer-focus/proc_app_release_step_tag_and_push:fill-violet-700 - peer-focus/proc_app_release_step_tag_and_push:focus:fill-violet-800 - peer-focus/proc_app_release_step_tag_and_push:active:fill-violet-900 - peer-focus/proc_app_release_step_tag_and_push:hover:stroke-violet-700 - peer-focus/proc_app_release_step_tag_and_push:stroke-violet-800 - peer-focus/proc_app_release_step_tag_and_push:focus:stroke-violet-900 - peer-focus/proc_app_release_step_tag_and_push:active:stroke-violet-950 - edge_t_localhost__t_localhost__within: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_app_dev_step_project_build:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_dev_step_project_build:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_dev_step_project_build:stroke-[2px] - peer-focus/proc_app_dev_step_project_build:visible - peer-focus/proc_app_dev_step_project_build:hover:fill-violet-600 - peer-focus/proc_app_dev_step_project_build:fill-violet-700 - peer-focus/proc_app_dev_step_project_build:focus:fill-violet-800 - peer-focus/proc_app_dev_step_project_build:active:fill-violet-900 - peer-focus/proc_app_dev_step_project_build:hover:stroke-violet-700 - peer-focus/proc_app_dev_step_project_build:stroke-violet-800 - peer-focus/proc_app_dev_step_project_build:focus:stroke-violet-900 - peer-focus/proc_app_dev_step_project_build:active:stroke-violet-950 - - peer-focus/proc_app_release_step_crate_version_update:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_release_step_crate_version_update:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_release_step_crate_version_update:stroke-[2px] - peer-focus/proc_app_release_step_crate_version_update:visible - peer-focus/proc_app_release_step_crate_version_update:hover:fill-violet-600 - peer-focus/proc_app_release_step_crate_version_update:fill-violet-700 - peer-focus/proc_app_release_step_crate_version_update:focus:fill-violet-800 - peer-focus/proc_app_release_step_crate_version_update:active:fill-violet-900 - peer-focus/proc_app_release_step_crate_version_update:hover:stroke-violet-700 - peer-focus/proc_app_release_step_crate_version_update:stroke-violet-800 - peer-focus/proc_app_release_step_crate_version_update:focus:stroke-violet-900 - peer-focus/proc_app_release_step_crate_version_update:active:stroke-violet-950 - edge_t_github_user_repo__t_github_user_repo__within: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_app_release_step_gh_actions_build:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_build:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_release_step_gh_actions_build:stroke-[2px] - peer-focus/proc_app_release_step_gh_actions_build:visible - peer-focus/proc_app_release_step_gh_actions_build:hover:fill-violet-600 - peer-focus/proc_app_release_step_gh_actions_build:fill-violet-700 - peer-focus/proc_app_release_step_gh_actions_build:focus:fill-violet-800 - peer-focus/proc_app_release_step_gh_actions_build:active:fill-violet-900 - peer-focus/proc_app_release_step_gh_actions_build:hover:stroke-violet-700 - peer-focus/proc_app_release_step_gh_actions_build:stroke-violet-800 - peer-focus/proc_app_release_step_gh_actions_build:focus:stroke-violet-900 - peer-focus/proc_app_release_step_gh_actions_build:active:stroke-violet-950 - edge_t_github_user_repo__t_aws_ecr_repo__push: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-[2px] - peer-focus/proc_app_release_step_gh_actions_publish:visible - peer-focus/proc_app_release_step_gh_actions_publish:hover:fill-violet-600 - peer-focus/proc_app_release_step_gh_actions_publish:fill-violet-700 - peer-focus/proc_app_release_step_gh_actions_publish:focus:fill-violet-800 - peer-focus/proc_app_release_step_gh_actions_publish:active:fill-violet-900 - peer-focus/proc_app_release_step_gh_actions_publish:hover:stroke-violet-700 - peer-focus/proc_app_release_step_gh_actions_publish:stroke-violet-800 - peer-focus/proc_app_release_step_gh_actions_publish:focus:stroke-violet-900 - peer-focus/proc_app_release_step_gh_actions_publish:active:stroke-violet-950 - edge_t_aws_ecr_repo__t_aws_ecs_service__push: >- - stroke-1 - [stroke-dasharray:none] - visible - hover:fill-neutral-600 - fill-neutral-700 - focus:fill-neutral-800 - active:fill-neutral-900 - hover:stroke-neutral-700 - stroke-neutral-800 - focus:stroke-neutral-900 - active:stroke-neutral-950 - - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:animate-[stroke-dashoffset-move-request_2s_linear_infinite] - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-[dasharray:0,80,12,2,4,2,2,2,1,2,1,120] - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-[2px] - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:visible - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:hover:fill-violet-600 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-violet-700 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:focus:fill-violet-800 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:active:fill-violet-900 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:hover:stroke-violet-700 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-violet-800 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:focus:stroke-violet-900 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:active:stroke-violet-950 - - # Styles for things are as follows: - # - # For the inner `` element: - # - # * `hover:stroke-{color}-{shade}` when hovered. - # * `stroke-{color}-{shade}` for normal state. - # * `focus:stroke-{color}-{shade}` when focused. - # * `active:stroke-{color}-{shade}` when pressed. - # * `hover:fill-{color}-{shade}` when hovered. - # * `fill-{color}-{shade}` for normal state. - # * `focus:fill-{color}-{shade}` when focused. - # * `active:fill-{color}-{shade}` when pressed. - # - # For the inner `` element: - # - # * `[&>text]:fill-{color}-{shade}` for text in all states. - # - # The following classes are used to highlight the `thing`'s `` when a related process step - # is focused: - # - # * `animate-[stroke-dashoffset-move_2s_linear_infinite]` - # * `stroke-{color}-{shade}` where `shade` is the "normal" shade, but brighter by one level. - # * `fill-{color}-{shade}` where `shade` is the "normal" shade, but brighter by one level. - # - # They are applied to each thing, just with the appropriate `peer-focus/{process_step}` prefix. - # - # We could collapse the `stroke-dashoffset` into the animation, but we can't collapse the `shade` - # because they are part of the stroke and fill colors -- we have to choose between duplication - # either here, or in animations. t_aws: >- [stroke-dasharray:2] stroke-1 visible hover:fill-yellow-50 fill-yellow-100 - focus:fill-yellow-200 - active:fill-yellow-300 - hover:stroke-yellow-100 - stroke-yellow-200 - focus:stroke-yellow-300 - active:stroke-yellow-400 [&>text]:fill-neutral-800 - t_aws_iam: >- - [stroke-dasharray:3] - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - t_aws_iam_ecs_policy: >- - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - t_aws_ecr: >- - [stroke-dasharray:3] - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - t_aws_ecr_repo: >- - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - - peer-focus/tag_deployment:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/tag_deployment:hover:fill-yellow-50 - peer-focus/tag_deployment:fill-yellow-100 - peer-focus/tag_deployment:focus:fill-yellow-200 - peer-focus/tag_deployment:active:fill-yellow-300 - peer-focus/tag_deployment:hover:stroke-yellow-100 - peer-focus/tag_deployment:stroke-yellow-200 - peer-focus/tag_deployment:focus:stroke-yellow-300 - peer-focus/tag_deployment:active:stroke-yellow-400 - peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-yellow-500 - peer-focus/proc_app_release_step_gh_actions_publish:fill-yellow-100 - - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:stroke-yellow-500 - peer-focus/proc_i12e_region_tier_app_deploy_step_ecs_service_update:fill-yellow-100 - - t_aws_ecr_repo_image_1: >- - stroke-1 - visible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - [&>text]:fill-neutral-900 - t_aws_ecr_repo_image_2: >- - stroke-1 - visible - hover:fill-sky-200 - fill-sky-300 - focus:fill-sky-400 - active:fill-sky-500 - hover:stroke-sky-300 - stroke-sky-400 - focus:stroke-sky-500 - active:stroke-sky-600 - [&>text]:fill-neutral-900 - t_aws_ecs: >- - [stroke-dasharray:3] - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - t_aws_ecs_cluster_app: >- - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 - t_aws_ecs_cluster_app_task: >- - stroke-1 - visible - hover:fill-yellow-200 - fill-yellow-300 - focus:fill-yellow-400 - active:fill-yellow-500 - hover:stroke-yellow-300 - stroke-yellow-400 - focus:stroke-yellow-500 - active:stroke-yellow-600 - [&>text]:fill-neutral-900 t_github: >- [stroke-dasharray:3] stroke-1 visible hover:fill-neutral-50 fill-neutral-100 - focus:fill-neutral-200 - active:fill-neutral-300 - hover:stroke-neutral-100 - stroke-neutral-200 - focus:stroke-neutral-300 - active:stroke-neutral-400 [&>text]:fill-neutral-800 - t_github_user_repo: >- - stroke-1 - visible - hover:fill-neutral-200 - fill-neutral-300 - focus:fill-neutral-400 - active:fill-neutral-500 - hover:stroke-neutral-300 - stroke-neutral-400 - focus:stroke-neutral-500 - active:stroke-neutral-600 - [&>text]:fill-neutral-900 - - peer-focus/tag_app_development:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/tag_app_development:hover:fill-neutral-50 - peer-focus/tag_app_development:fill-neutral-100 - peer-focus/tag_app_development:focus:fill-neutral-200 - peer-focus/tag_app_development:active:fill-neutral-300 - peer-focus/tag_app_development:hover:stroke-neutral-100 - peer-focus/tag_app_development:stroke-neutral-200 - peer-focus/tag_app_development:focus:stroke-neutral-300 - peer-focus/tag_app_development:active:stroke-neutral-400 - - peer-focus/tag_deployment:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/tag_deployment:hover:fill-neutral-50 - peer-focus/tag_deployment:fill-neutral-100 - peer-focus/tag_deployment:focus:fill-neutral-200 - peer-focus/tag_deployment:active:fill-neutral-300 - peer-focus/tag_deployment:hover:stroke-neutral-100 - peer-focus/tag_deployment:stroke-neutral-200 - peer-focus/tag_deployment:focus:stroke-neutral-300 - peer-focus/tag_deployment:active:stroke-neutral-400 - - peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_dev_step_repository_clone:stroke-neutral-500 - peer-focus/proc_app_dev_step_repository_clone:fill-neutral-100 - - peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_pull_request_open:stroke-neutral-500 - peer-focus/proc_app_release_step_pull_request_open:fill-neutral-100 - - peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_tag_and_push:stroke-neutral-500 - peer-focus/proc_app_release_step_tag_and_push:fill-neutral-100 - - peer-focus/proc_app_release_step_gh_actions_build:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_build:stroke-neutral-500 - peer-focus/proc_app_release_step_gh_actions_build:fill-neutral-100 - - peer-focus/proc_app_release_step_gh_actions_publish:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_gh_actions_publish:stroke-neutral-500 - peer-focus/proc_app_release_step_gh_actions_publish:fill-neutral-100 t_localhost: >- stroke-1 visible hover:fill-slate-200 fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 [&>text]:fill-neutral-900 - peer-focus/tag_app_development:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/tag_app_development:hover:fill-slate-50 - peer-focus/tag_app_development:fill-slate-100 - peer-focus/tag_app_development:focus:fill-slate-200 - peer-focus/tag_app_development:active:fill-slate-300 - peer-focus/tag_app_development:hover:stroke-slate-100 - peer-focus/tag_app_development:stroke-slate-200 - peer-focus/tag_app_development:focus:stroke-slate-300 - peer-focus/tag_app_development:active:stroke-slate-400 - - peer-focus/proc_app_dev_step_repository_clone:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_dev_step_repository_clone:stroke-slate-500 - peer-focus/proc_app_dev_step_repository_clone:fill-slate-100 - - peer-focus/proc_app_release_step_pull_request_open:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_pull_request_open:stroke-slate-500 - peer-focus/proc_app_release_step_pull_request_open:fill-slate-100 - - peer-focus/proc_app_release_step_tag_and_push:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_tag_and_push:stroke-slate-500 - peer-focus/proc_app_release_step_tag_and_push:fill-slate-100 - - peer-focus/proc_app_dev_step_project_build:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_dev_step_project_build:stroke-slate-500 - peer-focus/proc_app_dev_step_project_build:fill-slate-100 - - peer-focus/proc_app_release_step_crate_version_update:animate-[stroke-dashoffset-move_2s_linear_infinite] - peer-focus/proc_app_release_step_crate_version_update:stroke-slate-500 - peer-focus/proc_app_release_step_crate_version_update:fill-slate-100 - - t_localhost_repo: >- - stroke-1 - visible - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - [&>text]:fill-neutral-900 - t_localhost_repo_src: >- - stroke-1 - visible - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - [&>text]:fill-neutral-900 - t_localhost_repo_target: >- - stroke-1 - visible - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - [&>text]:fill-neutral-900 - t_localhost_repo_target_file_zip: >- - stroke-1 - visible - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - [&>text]:fill-neutral-900 - t_localhost_repo_target_dist_dir: >- - stroke-1 - visible - hover:fill-slate-200 - fill-slate-300 - focus:fill-slate-400 - active:fill-slate-500 - hover:stroke-slate-300 - stroke-slate-400 - focus:stroke-slate-500 - active:stroke-slate-600 - [&>text]:fill-neutral-900 - - -# Layout configuration for each node. -# -# Variants: -# -# * `flex`: { direction: "row" | "row_reverse" | "column" | "column_reverse", wrap: bool, gap: string } -# * `none`: (no children to lay out) -# -# The layout cascades: if not specified, inherits from parent or uses default. +# Layout configuration for nodes. node_layout: - # Root container - # - # This is in `column_reverse` order so tag node state controls `things` and `processes`: - # - # ```text - # .------------------------------------. - # | 1. _things_and_processes_container | - # | -----------------------------------| - # | 0. _tags_container | - # '------------------------------------' - # ``` _root: flex: direction: "column_reverse" wrap: true gap: "4" - # Things and Processes container. - # - # This is in `row_reverse` order so process node state controls `things`: - # - # ```text - # .------------------------------------------------. - # | 1. _things_container | 0. _processes_container | - # '------------------------------------------------' - # ``` _things_and_processes_container: flex: direction: "row_reverse" wrap: true gap: "4" - # Processes container (groups all processes horizontally) - # - # This is in `row` order so processs are laid out left to right: - # - # ```text - # .-----------------------------------------------------------------------------. - # | 0. proc_app_dev | 1. proc_app_release | 2. proc_i12e_region_tier_app_deploy | - # '-----------------------------------------------------------------------------' - # ``` _processes_container: flex: direction: "row" wrap: true gap: "4" - # Individual processes (steps stacked vertically) - # - # This is in `column` order so steps are laid out top to bottom: - # - # ```text - # .---------------------------------------. - # | 0. proc_app_dev_step_repository_clone | - # |---------------------------------------| - # | 1. proc_app_dev_step_project_build | - # '---------------------------------------' - # ``` proc_app_dev: flex: direction: "column" wrap: false gap: "2" + proc_app_release: flex: direction: "column" wrap: false gap: "2" + proc_i12e_region_tier_app_deploy: flex: direction: "column" wrap: false gap: "2" - # Process steps are leaves proc_app_dev_step_repository_clone: none proc_app_dev_step_project_build: none - proc_app_release_step_crate_version_update: none - proc_app_release_step_pull_request_open: none - proc_app_release_step_tag_and_push: none - proc_app_release_step_gh_actions_build: none - proc_app_release_step_gh_actions_publish: none - proc_i12e_region_tier_app_deploy_step_ecs_service_update: none - # Tags container - # - # This is in `row` order so tags are laid out left to right: - # - # ```text - # .--------------------------------------------. - # | 0. tag_app_development | 1. tag_deployment | - # '--------------------------------------------' - # ``` _tags_container: flex: direction: "row" wrap: true gap: "2" - # Tags are leaves tag_app_development: none tag_deployment: none - # Things container (top-level things arranged in a row) _things_container: flex: direction: "row" wrap: true gap: "4" - # Top-level things (children alternate between columns and rows) t_aws: flex: direction: "column" wrap: false gap: "2" - t_aws_iam: - flex: - direction: "row" - wrap: false - gap: "1" - t_aws_iam_ecs_policy: none - t_aws_ecr: - flex: - direction: "row" - wrap: false - gap: "1" - t_aws_ecr_repo: - flex: - direction: "column" - wrap: true - gap: "1" - t_aws_ecr_repo_image_1: none - t_aws_ecr_repo_image_2: none - t_aws_ecs: - flex: - direction: "row" - wrap: false - gap: "1" - t_aws_ecs_cluster_app: - flex: - direction: "column" - wrap: false - gap: "1" - t_aws_ecs_cluster_app_task: none t_github: flex: direction: "row" wrap: false gap: "2" + t_github_user_repo: none t_localhost: @@ -1168,68 +386,8 @@ node_layout: direction: "row" wrap: false gap: "2" - t_localhost_repo: - flex: - direction: "column" - wrap: false - gap: "1" - t_localhost_repo_src: none - t_localhost_repo_target: - flex: - direction: "row" - wrap: true - gap: "1" - t_localhost_repo_target_file_zip: none - t_localhost_repo_target_dist_dir: none - -# Types specify which template styles to use for each: -# -# * `node` -# * `edge` -# -# This should be a `Set` as `Type`s should be stackable. -entity_types: - # things - t_aws: ["type_thing_default"] - t_aws_iam: ["type_thing_default"] - t_aws_iam_ecs_policy: ["type_thing_default"] - t_aws_ecr: ["type_thing_default"] - t_aws_ecr_repo: ["type_thing_default"] - t_aws_ecr_repo_image_1: ["type_thing_default"] - t_aws_ecr_repo_image_2: ["type_thing_default"] - t_aws_ecs: ["type_thing_default"] - t_aws_ecs_cluster_app: ["type_thing_default"] - t_aws_ecs_cluster_app_task: ["type_thing_default"] - t_github: ["type_thing_default"] - t_github_user_repo: ["type_thing_default"] - t_localhost: ["type_thing_default"] - t_localhost_repo: ["type_thing_default"] - t_localhost_repo_src: ["type_thing_default"] - t_localhost_repo_target: ["type_thing_default"] - t_localhost_repo_target_file_zip: ["type_thing_default"] - t_localhost_repo_target_dist_dir: ["type_thing_default"] - - # tags - tag_app_development: ["type_tag_default"] - tag_deployment: ["type_tag_default"] - - # processes - proc_app_dev: ["type_process_default"] - proc_app_release: ["type_process_default"] - proc_i12e_region_tier_app_deploy: ["type_process_default"] - - # steps - proc_app_dev_step_repository_clone: ["type_process_step_default"] - proc_app_dev_step_project_build: ["type_process_step_default"] - - proc_app_release_step_crate_version_update: ["type_process_step_default"] - proc_app_release_step_pull_request_open: ["type_process_step_default"] - proc_app_release_step_tag_and_push: ["type_process_step_default"] - proc_app_release_step_gh_actions_build: ["type_process_step_default"] - proc_app_release_step_gh_actions_publish: ["type_process_step_default"] - - proc_i12e_region_tier_app_deploy_step_ecs_service_update: "type_process_step_default" +# Additional CSS for animations. css: >- @keyframes stroke-dashoffset-move { 0% { stroke-dasharray: 3; stroke-dashoffset: 30; } From 01c49b8730f7d55526b103a2c995b24506cf3f9f Mon Sep 17 00:00:00 2001 From: Azriel Hoh Date: Sat, 6 Dec 2025 15:29:13 +1300 Subject: [PATCH 9/9] Update `wasm-bindgen` to `0.2.106`. --- .github/workflows/ci.yml | 6 +++--- Cargo.toml | 2 +- examples/download/Cargo.toml | 2 +- examples/envman/Cargo.toml | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 83a460a82..37c9aa112 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -233,9 +233,9 @@ jobs: uses: actions/cache/restore@v4 with: path: ~/.cargo/bin/wasm-bindgen - key: ${{ runner.os }}-wasm-bindgen-0-2-105 + key: ${{ runner.os }}-wasm-bindgen-0-2-106 - - run: cargo install --locked wasm-bindgen-cli --version="=0.2.105" + - run: cargo install --locked wasm-bindgen-cli --version="=0.2.106" if: steps.wasm_bindgen_cache_restore.outputs.cache-hit != 'true' - name: wasm-bindgen cache save @@ -244,7 +244,7 @@ jobs: if: always() && steps.wasm_bindgen_cache_restore.outputs.cache-hit != 'true' with: path: ~/.cargo/bin/wasm-bindgen - key: ${{ runner.os }}-wasm-bindgen-0-2-105 + key: ${{ runner.os }}-wasm-bindgen-0-2-106 - name: cargo-leptos cache restore id: cargo_leptos_cache_restore diff --git a/Cargo.toml b/Cargo.toml index 73885e514..2fb47fa52 100644 --- a/Cargo.toml +++ b/Cargo.toml @@ -226,7 +226,7 @@ tynm = "0.2.0" type_reg = { version = "0.9.0", features = ["debug", "untagged", "ordered"] } typed-builder = "0.23.1" url = "2.5.7" -wasm-bindgen = "0.2.105" +wasm-bindgen = "0.2.106" web-sys = "0.3.82" yaml_error_context_hack = "0.1.0" diff --git a/examples/download/Cargo.toml b/examples/download/Cargo.toml index ae22230d1..ea14af525 100644 --- a/examples/download/Cargo.toml +++ b/examples/download/Cargo.toml @@ -35,7 +35,7 @@ peace = { workspace = true, default-features = false } console_error_panic_hook = "0.1.7" serde-wasm-bindgen = "0.6.5" tokio = "1.48.0" -wasm-bindgen = "0.2.105" +wasm-bindgen = "0.2.106" wasm-bindgen-futures = "0.4.55" js-sys = "0.3.82" web-sys = "0.3.82" diff --git a/examples/envman/Cargo.toml b/examples/envman/Cargo.toml index 6f486f70e..667cad2e5 100644 --- a/examples/envman/Cargo.toml +++ b/examples/envman/Cargo.toml @@ -69,7 +69,7 @@ console_log = { version = "1.0.0", features = ["color"] } log = "0.4.28" serde-wasm-bindgen = "0.6.5" tokio = "1.48.0" -wasm-bindgen = "0.2.105" +wasm-bindgen = "0.2.106" wasm-bindgen-futures = "0.4.55" js-sys = "0.3.82" web-sys = "0.3.82"