Merge branch 'main' into 5269-task-move-data-card-from-mit-tr-to-goll…

…m-task

packages/client/hmi-client/src/assets/css/style.scss

@@ -99,9 +99,10 @@
 		color: var(--text-color-secondary);
 	}
 
-	/* Make button labels regular font weight */
+	/* Make button labels regular font weight and whitespace nowrap */
 	.p-button-label {
 		font-weight: var(--font-weight);
+		white-space: nowrap;
 	}
 
 	/* Make tab font size same as body */
@@ -126,6 +127,12 @@
 		font-weight: var(--font-weight);
 	}
 
+	/* Correct padding for messages */
+	.p-message .p-message-text {
+		padding: var(--gap-2);
+		color: var(--text-color)
+	}
+
 	/* Fill checkboxes with color when selected */
 	.p-checkbox .p-checkbox-box {
 		background-color: var(--surface-0);

packages/client/hmi-client/src/components/drilldown/tera-drilldown-header.vue

@@ -69,8 +69,7 @@ header > * {
 
 header .title {
 	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
+	min-width: fit-content;
 }
 
 header .tabs-row {

packages/client/hmi-client/src/components/extracting/tera-drag-n-drop-importer.vue

@@ -22,8 +22,8 @@
 				</div>
 				<div v-else class="drop-zone">
 					<div><i class="pi pi-upload" style="font-size: 2.5rem" /></div>
-					<div>
-						Drop resources here <br />
+					<div class="drop-zone-text">
+						Drop {{ acceptTypes[0] === AcceptedTypes.PROJECTCONFIG ? 'your project' : 'resources' }} here <br />
 						or <span class="text-link">click to open a file browser</span>
 					</div>
 				</div>
@@ -261,9 +261,13 @@ label.file-label {
 
 .drop-zone {
 	display: flex;
+	flex-direction: column;
 	gap: 1rem;
 	align-items: center;
 }
+.drop-zone-text {
+	text-align: center;
+}
 
 i {
 	color: var(--text-color-secondary);

packages/client/hmi-client/src/components/operator/tera-operator-placeholder.vue

@@ -23,8 +23,10 @@ aside {
 	flex-direction: column;
 	gap: var(--gap-6);
 	justify-content: center;
-	margin-top: var(--gap-8);
+	margin-top: var(--gap-3);
+	margin-bottom: var(--gap-3);
 	text-align: center;
+	font-size: var(--font-caption);
 }
 
 img {

packages/client/hmi-client/src/components/project/tera-resource-sidebar.vue

@@ -55,14 +55,23 @@
 						</header>
 						<!-- New asset buttons for some types -->
 						<Button
-							v-if="type === AssetType.Model || type === AssetType.Workflow"
+							v-if="type === AssetType.Model"
 							class="new-button"
 							icon="pi pi-plus"
 							label="New"
 							size="small"
 							text
 							@click.stop="emit('open-new-asset', type)"
 						/>
+						<Button
+							v-if="type === AssetType.Workflow"
+							class="new-button"
+							icon="pi pi-plus"
+							label="New"
+							size="small"
+							text
+							@click.stop="emit('open-new-workflow')"
+						/>
 					</div>
 				</template>
 				<!-- These are all the resources. They're buttons because they're click and draggable. -->
@@ -163,7 +172,7 @@ defineProps<{
 	assetId: string;
 }>();
 
-const emit = defineEmits(['open-asset', 'remove-asset', 'open-new-asset']);
+const emit = defineEmits(['open-asset', 'remove-asset', 'open-new-asset', 'open-new-workflow']);
 
 const overview = { assetId: '', pageType: ProjectPages.OVERVIEW };
 

packages/client/hmi-client/src/components/project/tera-upload-project-modal.vue

@@ -1,12 +1,11 @@
 <template>
 	<tera-modal v-if="visible" @modal-mask-clicked="() => emit('close')">
 		<template #header>
-			<h4>Upload resources</h4>
+			<h4>Upload project</h4>
 		</template>
 		<template #default>
 			<section class="main-section">
 				<section>
-					<label class="subheader">Add project here.</label>
 					<tera-drag-and-drop-importer
 						:accept-types="[AcceptedTypes.PROJECTCONFIG]"
 						:accept-extensions="[AcceptedExtensions.PROJECTCONFIG]"
@@ -71,6 +70,7 @@ function importCompleted() {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
+	padding-top: var(--gap-2);
 }
 
 .main-section section {

packages/client/hmi-client/src/components/project/tera-upload-resources-modal.vue

@@ -7,7 +7,7 @@
 			<section class="main-section">
 				<section>
 					<label class="subheader">Add documents, models or datasets to your project here.</label>
-					<div class="supported-resources">
+					<div class="supported-resources py-3">
 						<div><i class="pi pi-file" /><span>Documents</span><span>(PDF, md, txt)</span></div>
 						<div><i class="pi pi-share-alt" /><span>Models</span><span>(AMR, sbml, vensim, stella)</span></div>
 						<div><dataset-icon /><span>Datasets</span><span>(csv, netcdf)</span></div>
@@ -55,18 +55,6 @@
 						@imported-files-updated="(value) => (importedFiles = value)"
 					></tera-drag-and-drop-importer>
 				</section>
-				<section v-if="importedFiles.length < 1">
-					<label>Or upload from a Github repository URL</label>
-					<tera-input-text v-model="urlToUpload" class="upload-from-github-url" />
-				</section>
-				<tera-import-github-file
-					:visible="isImportGithubFileModalVisible"
-					:url-string="urlToUpload"
-					@close="
-						isImportGithubFileModalVisible = false;
-						emit('close');
-					"
-				/>
 			</section>
 		</template>
 		<template #footer>
@@ -90,13 +78,11 @@ import useAuthStore from '@/stores/auth';
 import { ref } from 'vue';
 import TeraDragAndDropImporter from '@/components/extracting/tera-drag-n-drop-importer.vue';
 import { useToastService } from '@/services/toast';
-import TeraImportGithubFile from '@/components/widgets/tera-import-github-file.vue';
 import { extractPDF } from '@/services/knowledge';
 import DatasetIcon from '@/assets/svg/icons/dataset.svg?component';
 import { uploadArtifactToProject } from '@/services/artifact';
 import { createModel, createModelAndModelConfig, processAndAddModelToProject, validateAMRFile } from '@/services/model';
 import { createProvenance, RelationshipType } from '@/services/provenance';
-import TeraInputText from '@/components//widgets/tera-input-text.vue';
 
 defineProps<{
 	visible: boolean;

packages/client/hmi-client/src/components/widgets/tera-common-modal-dialogs.vue

@@ -7,10 +7,15 @@
 		:project="menuProject"
 		@close-modal="isProjectConfigDialogVisible = false"
 	/>
-	<Dialog modal :header="`Delete ${projectName}?`" v-model:visible="isRemoveDialogVisible" style="max-width: 640px">
+	<Dialog
+		modal
+		:header="`Delete ${menuProject?.name}?`"
+		v-model:visible="isRemoveDialogVisible"
+		style="max-width: 640px"
+	>
 		<p style="margin-bottom: 0.5rem">
 			This action is irreversible and will permanently remove
-			<span style="font-weight: bold">{{ projectName }}</span>
+			<span style="font-weight: 600">{{ menuProject?.name }}</span>
 			from the system.
 		</p>
 		<p>Are you sure?</p>
@@ -42,8 +47,6 @@ const currentRoute = useCurrentRoute();
 // For non-project related modals we may want to create new composables or abstract project-menu.ts into a modal manager
 const { isShareDialogVisible, isRemoveDialogVisible, isProjectConfigDialogVisible, menuProject } = useProjectMenu();
 
-const projectName = menuProject?.value?.name || '';
-
 const removeProject = async () => {
 	if (!menuProject.value) return;
 	const { name, id } = menuProject.value;

packages/client/hmi-client/src/components/widgets/tera-pdf-panel.vue

@@ -1,5 +1,5 @@
 <template>
-	<TabView v-if="pdfs?.length" class="container">
+	<TabView v-if="pdfs?.length" class="container" :class="pdfs?.length < 2 ? 'hide-tab-selectors' : ''">
 		<TabPanel :header="pdf.name" v-for="pdf in pdfs" :key="pdf.name">
 			<tera-pdf-embed v-if="pdf.isPdf" ref="pdfRef" :pdf-link="pdf.data" :title="pdf.name || ''" />
 			<tera-text-editor v-else :initial-text="pdf.data" />
@@ -50,6 +50,7 @@ defineExpose({ pdfRef });
 	display: flex;
 	flex-direction: column;
 	flex: 1;
+	padding-top: 0;
 }
 :deep(.p-tabview-panel) {
 	flex: 1;
@@ -64,4 +65,8 @@ defineExpose({ pdfRef });
 	white-space: nowrap;
 	overflow: hidden;
 }
+/* Hide tab selectors if there is only one tab */
+.hide-tab-selectors :deep(.p-tabview-nav) {
+	display: none;
+}
 </style>

packages/client/hmi-client/src/components/widgets/tera-toggleable-input.vue

@@ -66,6 +66,7 @@ button.text-to-edit {
 	gap: var(--gap-3);
 	max-width: fit-content;
 	padding: var(--gap-2);
+	text-align: left;
 
 	& > .btn-content {
 		color: var(--text-color);

packages/client/hmi-client/src/components/workflow/ops/intervention-policy/tera-intervention-policy-drilldown.vue

@@ -11,7 +11,7 @@
 				v-if="pdfData.length"
 				v-model:is-open="isPdfSidebarOpen"
 				content-width="700px"
-				header="Document Viewer"
+				header="Document viewer"
 			>
 				<template #content>
 					<tera-drilldown-section :is-loading="isFetchingPDF">
@@ -30,7 +30,7 @@
 					<section>
 						<nav class="inline-flex">
 							<Button
-								class="flex-1 mr-1"
+								class="flex-1 mr-6"
 								outlined
 								severity="secondary"
 								label="Extract from inputs"
@@ -114,8 +114,8 @@
 							</Button>
 							<span v-else class="confirm-cancel">
 								<span>Description</span>
-								<Button icon="pi pi-times" text @click.stop="isEditingDescription = false" />
-								<Button icon="pi pi-check" text @click.stop="onConfirmEditDescription" />
+								<Button icon="pi pi-times" size="small" text @click.stop="isEditingDescription = false" />
+								<Button icon="pi pi-check" size="small" text @click.stop="onConfirmEditDescription" />
 							</span>
 						</template>
 						<p class="description text" v-if="!isEditingDescription">
@@ -654,8 +654,9 @@ onMounted(() => {
 
 <style scoped>
 .intervention-settings-section {
-	background-color: var(--surface-100);
+	background-color: var(--gray-200);
 	padding: 0 var(--gap-3);
+	gap: var(--gap-1);
 }
 
 .input-config {
@@ -690,7 +691,7 @@ button.start-edit {
 	display: flex;
 	gap: var(--gap-3);
 	width: fit-content;
-	padding: var(--gap-2);
+	padding: 0;
 
 	& > .btn-content {
 		color: var(--text-color);
@@ -723,4 +724,8 @@ button.start-edit {
 		margin-left: var(--gap-2);
 	}
 }
+
+.description {
+	margin-bottom: var(--gap-3);
+}
 </style>

packages/client/hmi-client/src/components/workflow/ops/model-comparison/tera-model-comparison.vue

@@ -587,10 +587,10 @@ ul {
 }
 
 .comparison-overview {
-	border: 1px solid var(--surface-border);
+	border: 1px solid var(--surface-border-light);
 	border-radius: var(--border-radius-medium);
 	padding: var(--gap-2);
-	margin: var(--gap-4) var(--gap-4) 0;
+	margin: var(--gap-4);
 }
 
 .subdued {

packages/client/hmi-client/src/components/workflow/ops/model-config/tera-model-config-drilldown.vue

@@ -10,7 +10,7 @@
 			<tera-slider-panel
 				v-if="pdfData.length"
 				v-model:is-open="isDocViewerOpen"
-				header="Document Viewer"
+				header="Document viewer"
 				content-width="700px"
 			>
 				<template #content>

packages/client/hmi-client/src/components/workflow/ops/model-from-equations/tera-model-from-equations-drilldown.vue

@@ -10,7 +10,7 @@
 			<tera-slider-panel
 				v-if="document"
 				v-model:is-open="isDocViewerOpen"
-				header="Document Viewer"
+				header="Document viewer"
 				content-width="100%"
 			>
 				<template #content>

packages/client/hmi-client/src/components/workflow/scenario-templates/base-scenario.ts

@@ -0,0 +1,19 @@
+import { Workflow } from '@/types/workflow';
+
+export abstract class BaseScenario {
+	public static templateId: string;
+
+	public static templateName: string;
+
+	workflowName: string;
+
+	constructor() {
+		this.workflowName = '';
+	}
+
+	abstract createWorkflow(): Workflow;
+
+	setWorkflowName(name: string) {
+		this.workflowName = name;
+	}
+}

packages/client/hmi-client/src/components/workflow/scenario-templates/blank-canvas/blank-canvas-scenario.ts

@@ -0,0 +1,20 @@
+import { BaseScenario } from '@/components/workflow/scenario-templates/base-scenario';
+import * as workflowService from '@/services/workflow';
+
+export class BlankCanvasScenario extends BaseScenario {
+	public static templateId = 'blank-canvas';
+
+	public static templateName = 'Blank Canvas';
+
+	constructor() {
+		super();
+		this.workflowName = 'Blank Canvas';
+	}
+
+	createWorkflow() {
+		const wf = new workflowService.WorkflowWrapper();
+		const workflow = wf.dump();
+		workflow.name = this.workflowName;
+		return workflow;
+	}
+}

packages/client/hmi-client/src/components/workflow/scenario-templates/blank-canvas/tera-blank-canvas-template.vue

@@ -0,0 +1,13 @@
+<template>
+	<label>What would you like to call this workflow?</label>
+	<tera-input-text :model-value="scenario.workflowName" @update:model-value="scenario.setWorkflowName($event)" />
+</template>
+
+<script setup lang="ts">
+import TeraInputText from '@/components/widgets/tera-input-text.vue';
+import { BlankCanvasScenario } from './blank-canvas-scenario';
+
+defineProps<{
+	scenario: BlankCanvasScenario;
+}>();
+</script>