Add secondary inputs to nodes UI (#863)

* Add secondary inputs to UI

* Fix add node

* Dragging nodes

* Add ParameterExposeButton component

Co-authored-by: Keavon Chambers <keavon@keavon.com>

frontend/src/components/widgets/WidgetRow.vue

@@ -26,6 +26,7 @@
 				@changeFont="(value: unknown) => updateLayout(component.widgetId, value)"
 				:sharpRightCorners="nextIsSuffix"
 			/>
+			<ParameterExposeButton v-if="component.props.kind === 'ParameterExposeButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" />
 			<IconButton v-if="component.props.kind === 'IconButton'" v-bind="component.props" :action="() => updateLayout(component.widgetId, undefined)" :sharpRightCorners="nextIsSuffix" />
 			<IconLabel v-if="component.props.kind === 'IconLabel'" v-bind="component.props" />
 			<LayerReferenceInput v-if="component.props.kind === 'LayerReferenceInput'" v-bind="component.props" @update:value="(value: BigUint64Array) => updateLayout(component.widgetId, value)" />
@@ -104,6 +105,7 @@ import { isWidgetColumn, isWidgetRow, type WidgetColumn, type WidgetRow } from "
 
 import PivotAssist from "@/components/widgets/assists/PivotAssist.vue";
 import IconButton from "@/components/widgets/buttons/IconButton.vue";
+import ParameterExposeButton from "@/components/widgets/buttons/ParameterExposeButton.vue";
 import PopoverButton from "@/components/widgets/buttons/PopoverButton.vue";
 import TextButton from "@/components/widgets/buttons/TextButton.vue";
 import CheckboxInput from "@/components/widgets/inputs/CheckboxInput.vue";
@@ -175,6 +177,7 @@ export default defineComponent({
 		LayerReferenceInput,
 		NumberInput,
 		OptionalInput,
+		ParameterExposeButton,
 		PivotAssist,
 		PopoverButton,
 		RadioInput,

frontend/src/components/widgets/buttons/ParameterExposeButton.vue

@@ -0,0 +1,73 @@
+<template>
+	<LayoutRow class="parameter-expose-button">
+		<button :class="{ exposed }" :style="{ '--data-type-color': dataTypeColor }" @click="(e: MouseEvent) => action(e)" :title="tooltip" :tabindex="0"></button>
+	</LayoutRow>
+</template>
+
+<style lang="scss">
+.parameter-expose-button {
+	display: flex;
+	align-items: center;
+	flex: 0 0 auto;
+
+	button {
+		flex: 0 0 auto;
+		width: 8px;
+		height: 8px;
+		margin: 0;
+		padding: 0;
+		border: none;
+		border-radius: 50%;
+
+		&:not(.exposed) {
+			background: none;
+			border: 1px solid var(--data-type-color);
+
+			&:hover {
+				background: var(--color-6-lowergray);
+			}
+		}
+
+		&.exposed {
+			background: var(--data-type-color);
+
+			&:hover {
+				border: 1px solid var(--color-f-white);
+			}
+		}
+	}
+}
+</style>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import LayoutRow from "@/components/layout/LayoutRow.vue";
+
+export default defineComponent({
+	props: {
+		exposed: { type: Boolean as PropType<boolean>, required: true },
+		dataType: { type: String as PropType<string>, required: true },
+		tooltip: { type: String as PropType<string | undefined>, required: false },
+
+		// Callbacks
+		action: { type: Function as PropType<(e?: MouseEvent) => void>, required: true },
+	},
+	computed: {
+		dataTypeColor(): string {
+			// TODO: Move this function somewhere where it can be reused by other components
+			const colorsMap = {
+				general: "var(--color-data-general)",
+				vector: "var(--color-data-vector)",
+				raster: "var(--color-data-raster)",
+				mask: "var(--color-data-mask)",
+				number: "var(--color-data-number)",
+				color: "var(--color-data-color)",
+			} as const;
+
+			return colorsMap[this.dataType as keyof typeof colorsMap] || colorsMap.general;
+		},
+	},
+	components: { LayoutRow },
+});
+</script>

frontend/src/components/widgets/groups/WidgetSection.vue

@@ -100,6 +100,10 @@
 				text-align: right;
 			}
 
+			> .parameter-expose-button ~ .text-label:first-of-type {
+				text-align: left;
+			}
+
 			> .text-button {
 				flex-grow: 1;
 			}

frontend/src/components/widgets/inputs/LayerReferenceInput.vue

@@ -58,7 +58,8 @@
 		text-align: center;
 
 		&.missing {
-			color: var(--color-data-unused1);
+			// TODO: Define this as a permanent color palette choice
+			color: #d6536e;
 		}
 
 		&.layer-name {