feat: floating windows example (#1834)

packages/client/hmi-client/src/components/asset/tera-asset.vue

@@ -1,5 +1,5 @@
 <template>
-	<main @scroll="updateScrollPosition" id="tango">
+	<main @scroll="updateScrollPosition">
 		<slot name="nav" />
 		<header v-if="shrinkHeader || showStickyHeader" class="shrinked">
 			<h4 v-html="name" />

packages/client/hmi-client/src/components/code/tera-code.vue

@@ -154,7 +154,7 @@ async function saveCode() {
 		toast.success('', `File saved as ${codeName.value}`);
 		codeAsset.value = newCodeAsset;
 		router.push({
-			name: RouteName.ProjectRoute,
+			name: RouteName.Project,
 			params: {
 				pageType: AssetType.Code,
 				projectId: props.project.id,
@@ -175,7 +175,7 @@ async function extractModel() {
 		);
 		if (extractedModelId) {
 			router.push({
-				name: RouteName.ProjectRoute,
+				name: RouteName.Project,
 				params: {
 					pageType: AssetType.Models,
 					projectId: props.project.id,

packages/client/hmi-client/src/components/navbar/tera-navbar.vue

@@ -315,21 +315,21 @@ const clearEvaluationScenario = () => {
 };
 
 const homeItem: MenuItem = {
-	label: RouteMetadata[RouteName.HomeRoute].displayName,
-	icon: RouteMetadata[RouteName.HomeRoute].icon,
+	label: RouteMetadata[RouteName.Home].displayName,
+	icon: RouteMetadata[RouteName.Home].icon,
 	command: () => router.push(RoutePath.Home)
 };
 const explorerItem: MenuItem = {
-	label: RouteMetadata[RouteName.DataExplorerRoute].displayName,
-	icon: RouteMetadata[RouteName.DataExplorerRoute].icon,
+	label: RouteMetadata[RouteName.DataExplorer].displayName,
+	icon: RouteMetadata[RouteName.DataExplorer].icon,
 	command: () => router.push(RoutePath.DataExplorer)
 };
 const navMenuItems = ref<MenuItem[]>([homeItem, explorerItem]);
 const showNavigationMenu = (event) => {
 	navigationMenu.value.toggle(event);
 };
 const currentRoute = useCurrentRoute();
-const isDataExplorer = computed(() => currentRoute.value.name === RouteName.DataExplorerRoute);
+const isDataExplorer = computed(() => currentRoute.value.name === RouteName.DataExplorer);
 
 /*
  * User Menu
@@ -411,8 +411,7 @@ watch(
 				items.push({
 					label: project.name,
 					icon: 'pi pi-folder',
-					command: () =>
-						router.push({ name: RouteName.ProjectRoute, params: { projectId: project.id } })
+					command: () => router.push({ name: RouteName.Project, params: { projectId: project.id } })
 				});
 			});
 			navMenuItems.value = [homeItem, explorerItem, { label: 'Projects', items }];

packages/client/hmi-client/src/components/navbar/tera-searchbar.vue

@@ -167,7 +167,7 @@ function clearQuery() {
 
 const initiateSearch = () => {
 	emit('query-changed', query.value);
-	router.push({ name: RouteName.DataExplorerRoute, query: { q: query.value } });
+	router.push({ name: RouteName.DataExplorer, query: { q: query.value } });
 	EventService.create(EventType.Search, resources.activeProject?.id, query.value);
 };
 
@@ -179,7 +179,7 @@ function initiateSearchByExample() {
 	// used to update the search bar text with the name of the search by example asset
 	query.value = extractResourceName(searchByExampleItem.value);
 	router.push({
-		name: RouteName.DataExplorerRoute,
+		name: RouteName.DataExplorer,
 		query: { resourceId: getResourceID(searchByExampleItem.value!) }
 	});
 }
@@ -253,7 +253,7 @@ watch(
 // Clear the query if not on the data explorer view
 watch(
 	() => route.name,
-	(name) => name !== RouteName.DataExplorerRoute && clearQuery()
+	(name) => name !== RouteName.DataExplorer && clearQuery()
 );
 </script>
 

packages/client/hmi-client/src/components/workflow/tera-calibrate-ensemble-ciemss.vue

@@ -53,10 +53,11 @@
 					@click="saveAsName = ''"
 				></i>
 				<i
+					v-if="project?.id"
 					class="pi pi-check i"
 					:class="{ save: hasValidDatasetName }"
 					@click="
-						saveDataset(projectId, completedRunId, saveAsName);
+						saveDataset(project.id, completedRunId, saveAsName);
 						showSaveInput = false;
 					"
 				></i>
@@ -236,7 +237,7 @@ const dataLabelPlugin = [ChartDataLabels];
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 
 enum EnsembleTabs {
@@ -275,7 +276,6 @@ const extra = ref<EnsembleCalibrateExtraCiemss>(props.node.state.extra);
 const completedRunId = computed<string>(
 	() => props?.node?.outputs?.[0]?.value?.[0].runId as string
 );
-const projectId = ref<string>(props.project.id);
 
 const customWeights = ref<boolean>(false);
 // TODO: Does AMR contain weights? Can i check all inputs have the weights parameter filled in or the calibration boolean checked off?

packages/client/hmi-client/src/components/workflow/tera-dataset-transformer.vue

@@ -29,7 +29,7 @@ import { cloneDeep } from 'lodash';
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 const showKernels = ref(<boolean>false);
 const showChatThoughts = ref(<boolean>false);

packages/client/hmi-client/src/components/workflow/tera-dataset-workflow-wrapper.vue

@@ -11,6 +11,6 @@ import TeraDataset from '@/components/dataset/tera-dataset.vue';
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 </script>

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

@@ -17,7 +17,7 @@ import { workflowEventBus } from '@/services/workflow';
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 
 // Send refresh event onto the eventBus

packages/client/hmi-client/src/components/workflow/tera-simulate-ciemss.vue

@@ -97,10 +97,11 @@
 					@click="saveAsName = ''"
 				></i>
 				<i
+					v-if="project?.id"
 					class="pi pi-check i"
 					:class="{ save: hasValidDatasetName }"
 					@click="
-						saveDataset(projectId, completedRunId, saveAsName);
+						saveDataset(project.id, completedRunId, saveAsName);
 						showSaveInput = false;
 					"
 				></i>
@@ -192,7 +193,7 @@ import InputText from 'primevue/inputtext';
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 
 const hasValidDatasetName = computed<boolean>(() => saveAsName.value !== '');
@@ -218,7 +219,6 @@ const selectedCols = ref<string[]>([]);
 const paginatorRows = ref(10);
 const paginatorFirst = ref(0);
 const completedRunId = computed<string | undefined>(() => props?.node?.outputs?.[0]?.value?.[0]);
-const projectId = ref<string>(props.project.id);
 
 const configurationChange = (index: number, config: ChartConfig) => {
 	const state: SimulateCiemssOperationState = _.cloneDeep(props.node.state);

packages/client/hmi-client/src/components/workflow/tera-simulate-ensemble-ciemss.vue

@@ -52,10 +52,11 @@
 					@click="saveAsName = ''"
 				></i>
 				<i
+					v-if="project?.id"
 					class="pi pi-check i"
 					:class="{ save: hasValidDatasetName }"
 					@click="
-						saveDataset(projectId, completedRunId, saveAsName);
+						saveDataset(project.id, completedRunId, saveAsName);
 						showSaveInput = false;
 					"
 				></i>
@@ -227,7 +228,7 @@ const dataLabelPlugin = [ChartDataLabels];
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 
 enum EnsembleTabs {
@@ -258,7 +259,6 @@ const numSamples = ref<number>(props.node.state.numSamples);
 const completedRunId = computed<string>(
 	() => props?.node?.outputs?.[0]?.value?.[0].runId as string
 );
-const projectId = ref<string>(props.project.id);
 
 const hasValidDatasetName = computed<boolean>(() => saveAsName.value !== '');
 const showSaveInput = ref(<boolean>false);

packages/client/hmi-client/src/components/workflow/tera-simulate-julia.vue

@@ -57,10 +57,11 @@
 					@click="saveAsName = ''"
 				></i>
 				<i
+					v-if="project?.id"
 					class="pi pi-check i"
 					:class="{ save: hasValidDatasetName }"
 					@click="
-						saveDataset(projectId, completedRunId, saveAsName);
+						saveDataset(project.id, completedRunId, saveAsName);
 						showSaveInput = false;
 					"
 				></i>
@@ -128,7 +129,7 @@ import TeraSimulateChart from './tera-simulate-chart.vue';
 
 const props = defineProps<{
 	node: WorkflowNode;
-	project: IProject;
+	project?: IProject;
 }>();
 
 const timespan = ref<TimeSpan>(props.node.state.currentTimespan);
@@ -143,7 +144,6 @@ const activeTab = ref(SimulateTabs.input);
 const model = ref<Model | null>(null);
 const runResults = ref<RunResults>({});
 const modelConfiguration = ref<ModelConfiguration | null>(null);
-const projectId = ref<string>(props.project.id);
 const completedRunId = computed<string | undefined>(() => props?.node?.outputs?.[0]?.value?.[0]);
 const hasValidDatasetName = computed<boolean>(() => saveAsName.value !== '');
 const showSaveInput = ref(<boolean>false);

packages/client/hmi-client/src/components/workflow/tera-workflow-node.vue

@@ -8,6 +8,11 @@
 					class="p-button-icon-only p-button-text p-button-rounded"
 					@click="showNodeDrilldown"
 				/>
+				<Button
+					icon="pi pi-bolt"
+					class="p-button-icon-only p-button-text p-button-rounded"
+					@click="openDrilldown"
+				/>
 				<!-- 3-dot options menu -->
 				<Button
 					icon="pi pi-ellipsis-v"
@@ -83,9 +88,13 @@ import {
 import { ref, computed, onMounted, onBeforeUnmount } from 'vue';
 import Button from 'primevue/button';
 import Menu from 'primevue/menu';
+import floatingWindow from '@/utils/floating-window';
+import router from '@/router';
+import { RouteName } from '@/router/routes';
 
 const props = defineProps<{
 	node: WorkflowNode;
+	workflowId: string;
 	canDrag: boolean;
 	isActive: boolean;
 }>();
@@ -176,6 +185,14 @@ function showNodeDrilldown() {
 	emit('drilldown', props.node);
 }
 
+function openDrilldown() {
+	const url = router.resolve({
+		name: RouteName.WorkflowNode,
+		params: { nodeId: props.node.id, workflowId: props.workflowId }
+	}).href;
+	floatingWindow.open(url);
+}
+
 function mouseoverPort(event) {
 	const el = event.target as HTMLElement;
 	const portElement = (el.firstChild as HTMLElement) ?? el;

packages/client/hmi-client/src/components/workflow/tera-simulation-workflow.vue → packages/client/hmi-client/src/components/workflow/tera-workflow.vue

@@ -51,6 +51,7 @@
 				v-for="(node, index) in wf.nodes"
 				:key="index"
 				:node="node"
+				:workflowId="assetId"
 				@port-selected="(port: WorkflowPort, direction: WorkflowDirection) => createNewEdge(node, port, direction)"
 				@port-mouseover="onPortMouseover"
 				@port-mouseleave="onPortMouseleave"

packages/client/hmi-client/src/page/Home.vue

@@ -280,7 +280,7 @@ const scroll = (direction: 'right' | 'left', event: MouseEvent) => {
 };
 
 function openProject(projectId: string) {
-	router.push({ name: RouteName.ProjectRoute, params: { projectId } });
+	router.push({ name: RouteName.Project, params: { projectId } });
 }
 
 async function createNewProject() {

packages/client/hmi-client/src/page/WorkflowNode.vue

@@ -0,0 +1,63 @@
+<template>
+	<template v-if="node">
+		<tera-model-workflow-wrapper v-if="isNodeType(OperationType.MODEL)" :node="node" />
+		<tera-stratify v-else-if="isNodeType(OperationType.STRATIFY)" :node="node" />
+		<tera-dataset-transformer
+			v-else-if="isNodeType(OperationType.DATASET_TRANSFORMER)"
+			:node="node"
+		/>
+		<tera-dataset-workflow-wrapper v-else-if="isNodeType(OperationType.DATASET)" :node="node" />
+		<tera-calibration-julia v-else-if="isNodeType(OperationType.CALIBRATION_JULIA)" :node="node" />
+		<tera-simulate-julia v-else-if="isNodeType(OperationType.SIMULATE_JULIA)" :node="node" />
+		<tera-calibration-ciemss
+			v-else-if="isNodeType(OperationType.CALIBRATION_CIEMSS)"
+			:node="node"
+		/>
+		<tera-calibrate-ensemble-ciemss
+			v-else-if="isNodeType(OperationType.CALIBRATE_ENSEMBLE_CIEMSS)"
+			:node="node"
+		/>
+		<tera-simulate-ciemss v-else-if="isNodeType(OperationType.SIMULATE_CIEMSS)" :node="node" />
+		<tera-simulate-ensemble-ciemss
+			v-else-if="isNodeType(OperationType.SIMULATE_ENSEMBLE_CIEMSS)"
+			:node="node"
+		/>
+	</template>
+	<template v-else>{{ node }}</template>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from 'vue';
+import { WorkflowNode, WorkflowOperationTypes as OperationType } from '@/types/workflow';
+import TeraModelWorkflowWrapper from '@/components/workflow/tera-model-workflow-wrapper.vue';
+import TeraDatasetWorkflowWrapper from '@/components/workflow/tera-dataset-workflow-wrapper.vue';
+import TeraDatasetTransformer from '@/components/workflow/tera-dataset-transformer.vue';
+import TeraCalibrationJulia from '@/components/workflow/tera-calibration-julia.vue';
+import TeraSimulateJulia from '@/components/workflow/tera-simulate-julia.vue';
+import TeraCalibrationCiemss from '@/components/workflow/tera-calibration-ciemss.vue';
+import TeraCalibrateEnsembleCiemss from '@/components/workflow/tera-calibrate-ensemble-ciemss.vue';
+import TeraSimulateCiemss from '@/components/workflow/tera-simulate-ciemss.vue';
+import TeraSimulateEnsembleCiemss from '@/components/workflow/tera-simulate-ensemble-ciemss.vue';
+import TeraStratify from '@/components/workflow/tera-stratify.vue';
+import * as workflowService from '@/services/workflow';
+
+const props = defineProps<{ nodeId: string; workflowId: string }>();
+
+const node = ref<WorkflowNode>();
+
+function isNodeType(type: OperationType): boolean {
+	return node.value?.operationType === type;
+}
+
+async function updateNode() {
+	const workflow = await workflowService.getWorkflow(props.workflowId);
+	const foundNode = workflow.nodes.find((n) => n.id === props.nodeId);
+	if (foundNode) node.value = foundNode;
+}
+
+watch(
+	() => props.nodeId,
+	() => updateNode(),
+	{ immediate: true }
+);
+</script>

packages/client/hmi-client/src/page/project/components/code-editor.vue

@@ -244,7 +244,7 @@ async function createModelFromCode() {
 			await ProjectService.addAsset(props.project.id, AssetType.Models, model.id.toString());
 
 			router.push({
-				name: RouteName.ProjectRoute,
+				name: RouteName.Project,
 				params: {
 					assetName: newModelName,
 					assetId: model.id,

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

@@ -75,7 +75,7 @@ async function createNewModel() {
 	const modelId = await addNewModelToProject(newModelName.value.trim(), props.project);
 	if (modelId) {
 		router.push({
-			name: RouteName.ProjectRoute,
+			name: RouteName.Project,
 			params: {
 				pageType: AssetType.Models,
 				assetId: modelId

packages/client/hmi-client/src/page/project/components/tera-project-overview.vue

@@ -467,7 +467,7 @@ async function editProject() {
 }
 
 async function openResource(data) {
-	router.push({ name: RouteName.ProjectRoute, params: data });
+	router.push({ name: RouteName.Project, params: data });
 }
 
 async function updateProjectName() {