Jamie redoing stratfify operator design tweaks

packages/client/hmi-client/src/components/stratification/tera-stratification-group-form.vue

@@ -1,23 +1,11 @@
 <template>
 	<div class="strata-group" :style="`border-left: 9px solid ${props.config.borderColour}`">
-		<div class="input-row">
-			<div class="sub-header">
-				<label class="multi-line-label">Create new transitions between stratum</label>
-				<InputSwitch @change="emit('update-self', updatedConfig)" v-model="useStructure" />
-			</div>
-			<div class="sub-header">
-				<label class="multi-line-label"
-					>Allow existing interactions to invole multiple stratum</label
-				>
-				<InputSwitch @change="emit('update-self', updatedConfig)" v-model="cartesianProduct" />
-			</div>
-		</div>
 		<div class="input-row">
 			<div class="label-and-input">
 				<label>Name of strata</label>
 				<InputText
 					v-model="strataName"
-					placeholder="Age group"
+					placeholder="e.g., Age group"
 					@focusout="emit('update-self', updatedConfig)"
 				/>
 			</div>
@@ -26,7 +14,7 @@
 				<MultiSelect
 					v-model="selectedVariables"
 					:options="props.modelNodeOptions"
-					placeholder="Model states"
+					placeholder="Click to select"
 					display="chip"
 					@update:model-value="emit('update-self', updatedConfig)"
 				></MultiSelect>
@@ -40,11 +28,21 @@
 				</label>
 				<InputText
 					v-model="labels"
-					placeholder="Young, Old"
+					placeholder="e.g., Young, Old"
 					@focusout="emit('update-self', updatedConfig)"
 				/>
 			</div>
 		</div>
+		<div class="input-row justify-space-between">
+			<div class="flex align-items-center gap-2">
+				<label>Create new transitions between stratum</label>
+				<InputSwitch @change="emit('update-self', updatedConfig)" v-model="useStructure" />
+			</div>
+			<div class="flex align-items-center gap-2">
+				<label>Allow existing interactions to invole multiple stratum</label>
+				<InputSwitch @change="emit('update-self', updatedConfig)" v-model="cartesianProduct" />
+			</div>
+		</div>
 	</div>
 </template>
 
@@ -124,17 +122,13 @@ watch(
 	color: var(--text-color-subdued);
 }
 
-.multi-line-label {
-	max-width: 12rem;
-}
-
 .input-row {
 	width: 100%;
 	display: flex;
 	flex-direction: row;
-	flex-wrap: wrap;
 	align-items: center;
 	gap: var(--gap-small);
+	margin-bottom: var(--gap-small);
 
 	& > * {
 		flex: 1;
@@ -145,5 +139,6 @@ watch(
 	display: flex;
 	flex-direction: column;
 	gap: var(--gap-small);
+	width: 0; /* CSS is weird but for some reason this prevents the Multiselect from going nuts */
 }
 </style>

packages/client/hmi-client/src/workflow/ops/stratify-mira/stratify-mira-operation.ts

@@ -50,7 +50,7 @@ export const blankStratifyGroup: StratifyGroup = {
 
 export const StratifyMiraOperation: Operation = {
 	name: WorkflowOperationTypes.STRATIFY_MIRA,
-	displayName: 'Stratify MIRA',
+	displayName: 'Stratify model',
 	description: 'Stratify a model',
 	inputs: [{ type: 'modelId', label: 'Model', acceptMultiple: false }],
 	outputs: [{ type: 'model' }],

packages/client/hmi-client/src/workflow/ops/stratify-mira/tera-stratify-mira.vue

@@ -3,40 +3,50 @@
 		<div :tabName="StratifyTabs.Wizard">
 			<tera-drilldown-section>
 				<div class="form-section">
-					<h4>Stratify Model <i class="pi pi-info-circle" /></h4>
+					<h4>Stratify model</h4>
 					<p>The model will be stratified with the following settings.</p>
 					<p v-if="node.state.hasCodeBeenRun" class="code-executed-warning">
 						Note: Code has been executed which may not be reflected here.
 					</p>
 					<tera-stratification-group-form
+						class="mt-2"
 						:modelNodeOptions="modelNodeOptions"
 						:config="node.state.strataGroup"
 						@update-self="updateStratifyGroupForm"
 					/>
 				</div>
 				<template #footer>
-					<Button outlined label="Stratify" icon="pi pi-play" @click="stratifyModel" />
-					<Button style="margin-right: auto" label="Reset" @click="resetModel" />
+					<Button outlined label="Stratify" size="large" icon="pi pi-play" @click="stratifyModel" />
+					<Button
+						style="margin-right: auto"
+						size="large"
+						severity="secondary"
+						outlined
+						label="Reset"
+						@click="resetModel"
+					/>
 				</template>
 			</tera-drilldown-section>
 		</div>
 		<div :tabName="StratifyTabs.Notebook">
 			<tera-drilldown-section>
-				<h4>Code Editor - Python</h4>
+				<p>Code Editor - Python</p>
 				<v-ace-editor
 					v-model:value="codeText"
 					@init="initialize"
 					lang="python"
 					theme="chrome"
 					style="flex-grow: 1; width: 100%"
 					class="ace-editor"
+					:options="{ showPrintMargin: false }"
 				/>
 
 				<template #footer>
 					<Button
 						outlined
 						style="margin-right: auto"
 						label="Run"
+						size="large"
 						icon="pi pi-play"
 						@click="runCodeStratify"
 					/>
@@ -45,30 +55,30 @@
 		</div>
 		<template #preview>
 			<tera-drilldown-preview
-				title="Stratify output"
+				title="Preview"
 				:options="outputs"
 				@update:selection="onSelection"
 				v-model:output="selectedOutputId"
 				is-selectable
 			>
-				<div>
+				<div class="h-full">
 					<template v-if="stratifiedAmr">
 						<tera-model-diagram :model="stratifiedAmr" :is-editable="false" />
 						<TeraModelSemanticTables :model="stratifiedAmr" :is-editable="false" />
 					</template>
-					<div v-else>
-						<img src="@assets/svg/plants.svg" alt="" draggable="false" />
-						<h4>No Model Provided</h4>
+					<div v-else class="flex flex-column h-full justify-content-center">
+						<tera-operator-placeholder :operation-type="node.operationType" />
 					</div>
 				</div>
 				<template #footer>
 					<Button
 						:disabled="!amr"
 						outlined
+						size="large"
 						label="Save as new Model"
 						@click="isNewModelModalVisible = true"
 					/>
-					<Button label="Close" @click="emit('close')" />
+					<Button label="Close" size="large" @click="emit('close')" />
 				</template>
 			</tera-drilldown-preview>
 		</template>
@@ -87,8 +97,13 @@
 			/>
 		</form>
 		<template #footer>
-			<Button label="Save" @click="() => saveNewModel(newModelName)" />
-			<Button class="p-button-secondary" label="Cancel" @click="isNewModelModalVisible = false" />
+			<Button label="Save" size="large" @click="() => saveNewModel(newModelName)" />
+			<Button
+				class="p-button-secondary"
+				size="large"
+				label="Cancel"
+				@click="isNewModelModalVisible = false"
+			/>
 		</template>
 	</tera-modal>
 </template>
@@ -100,6 +115,7 @@ import TeraDrilldownPreview from '@/components/drilldown/tera-drilldown-preview.
 import TeraDrilldownSection from '@/components/drilldown/tera-drilldown-section.vue';
 import TeraDrilldown from '@/components/drilldown/tera-drilldown.vue';
 import TeraModelDiagram from '@/components/model/petrinet/model-diagrams/tera-model-diagram.vue';
+import TeraOperatorPlaceholder from '@/components/operator/tera-operator-placeholder.vue';
 import TeraModelSemanticTables from '@/components/model/petrinet/tera-model-semantic-tables.vue';
 import teraStratificationGroupForm from '@/components/stratification/tera-stratification-group-form.vue';
 import TeraModal from '@/components/widgets/tera-modal.vue';