UX revisions to drill down header (#4697)

Co-authored-by: Daniel Chang <[email protected]>

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

@@ -59,10 +59,6 @@
  :output="selectedOutputId"
  @update:selection="(e) => emit('update:selection', e)"
  />
- <section v-if="!isEmpty(menuItems)" class="mx-2">
- <Button icon="pi pi-ellipsis-v" rounded text @click.stop="toggleEllipsisMenu" />
- <Menu ref="ellipsisMenu" :model="menuItems" popup />
- </section>
  </template>
  </template>
  <template #actions>
@@ -141,7 +137,6 @@ import TeraTooltip from '@/components/widgets/tera-tooltip.vue';
 
 const props = defineProps<{
  node: WorkflowNode<any>;
- menuItems?: any[];
  title?: string;
  tooltip?: string;
  isDraft?: boolean;
@@ -198,9 +193,6 @@ const outputOptions = computed(() => {
  ];
 });
 
-const ellipsisMenu = ref();
-const toggleEllipsisMenu = (event: MouseEvent) => ellipsisMenu.value.toggle(event);
-
 // Drilldown navigation and animations
 const leftChevronButton = ref<ComponentPublicInstance<typeof Button> | null>(null);
 const rightChevronButton = ref<ComponentPublicInstance<typeof Button> | null>(null);

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

@@ -2,7 +2,6 @@
  <tera-drilldown
  v-bind="$attrs"
  :node="node"
- :menu-items="menuItems"
  @on-close-clicked="emit('close')"
  @update-state="(state: any) => emit('update-state', state)"
  hide-dropdown
@@ -259,17 +258,6 @@ const isEditingDescription = ref(false);
 const newDescription = ref('');
 const descriptionTextareaRef = ref<ComponentPublicInstance<typeof Textarea> | null>(null);
 
-const menuItems = computed(() => [
- {
- label: 'Download',
- icon: 'pi pi-download',
- disabled: isSaveDisabled.value,
- command: () => {
- downloadModelArchive();
- }
- }
-]);
-
 const emit = defineEmits(['append-output', 'update-state', 'select-output', 'close', 'update-output-port']);
 
 interface BasicKnobs {

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

@@ -3,7 +3,6 @@
  ref="drilldownRef"
  v-bind="$attrs"
  :node="node"
- :menu-items="menuItems"
  :is-draft="isDraft"
  @update:selection="onSelection"
  @on-close-clicked="emit('close')"
@@ -196,16 +195,6 @@ const executeResponse = ref({
  traceback: ''
 });
 
-const menuItems = computed(() => [
- {
- label: 'Save as new model',
- icon: 'pi pi-pencil',
- command: () => {
- showSaveModelModal.value = true;
- }
- }
-]);
-
 const updateLlmQuery = (query: string) => {
  llmThoughts.value = [];
  llmQuery.value = query;

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

@@ -1,7 +1,6 @@
 <template>
  <tera-drilldown
  :node="node"
- :menu-items="menuItems"
  @update:selection="onSelection"
  @on-close-clicked="emit('close')"
  @update-state="(state: any) => emit('update-state', state)"
@@ -324,17 +323,6 @@ function removeEquation(index: number) {
  emit('update-state', clonedState.value);
 }
 
-const menuItems = computed(() => [
- {
- label: 'Save as new model',
- icon: 'pi pi-download',
- disabled: !selectedModel.value,
- command: () => {
- showSaveModelModal.value = true;
- }
- }
-]);
-
 function getEquations() {
  const newEquations = multipleEquations.value.split('\n');
  newEquations.forEach((equation) => {

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

@@ -1,7 +1,6 @@
 <template>
  <tera-drilldown
  :node="node"
- :menu-items="menuItems"
  :is-draft="isDraft"
  @on-close-clicked="emit('close')"
  @update-state="(state: any) => emit('update-state', state)"
@@ -159,16 +158,6 @@ const props = defineProps<{
 }>();
 const emit = defineEmits(['append-output', 'update-state', 'close', 'update-output-port', 'select-output']);
 
-const menuItems = computed(() => [
- {
- label: 'Save as new model',
- icon: 'pi pi-pencil',
- command: () => {
- showSaveModelModal.value = true;
- }
- }
-]);
-
 enum StratifyTabs {
  Wizard = 'Wizard',
  Notebook = 'Notebook'

packages/client/hmi-client/src/components/workflow/ops/subset-data/tera-subset-data.vue

@@ -1,7 +1,6 @@
 <template>
  <tera-drilldown
  :node="node"
- :menu-items="menuItems"
  @update:selection="onSelection"
  @on-close-clicked="emit('close')"
  @update-state="(state: any) => emit('update-state', state)"
@@ -191,7 +190,7 @@ import TeraCarousel from '@/components/widgets/tera-carousel.vue';
 import { WorkflowNode } from '@/types/workflow';
 import { getDataset, getClimateDatasetPreview, getClimateSubsetId } from '@/services/dataset';
 import type { Dataset } from '@/types/Types';
-import { AssetType } from '@/types/Types';
+// import { AssetType } from '@/types/Types';
 import TabView from 'primevue/tabview';
 import TabPanel from 'primevue/tabpanel';
 // import InputText from 'primevue/inputtext';
@@ -201,7 +200,7 @@ import Calender from 'primevue/calendar';
 import Checkbox from 'primevue/checkbox';
 import Slider from 'primevue/slider';
 import { logger } from '@/utils/logger';
-import { useProjects } from '@/composables/project';
+// import { useProjects } from '@/composables/project';
 import { SubsetDataOperationState } from './subset-data-operation';
 
 const props = defineProps<{
@@ -338,17 +337,6 @@ function mutateLoadingState(isLoading: boolean) {
  emit('update-state', state);
 }
 
-const menuItems = computed(() => [
- {
- label: 'Add subset to project datasets',
- icon: 'pi pi-pencil',
- disabled: !subset.value,
- command: () => {
- addSubsetToProject();
- }
- }
-]);
-
 function updateState() {
  const state = cloneDeep(props.node.state);
  state.datasetId = dataset.value?.id ?? null;
@@ -365,15 +353,16 @@ function updateState() {
  emit('update-state', state);
 }
 
-async function addSubsetToProject() {
- const projectId = useProjects().activeProject.value?.id;
- if (subset.value?.id && projectId) {
- await useProjects().addAsset(AssetType.Dataset, subset.value.id, projectId);
- logger.info(`New dataset saved as ${subset.value.name}`);
- } else {
- logger.error('Subset ID not found.');
- }
-}
+// FIXME: removed drilldown hamburger menu
+// async function addSubsetToProject() {
+// const projectId = useProjects().activeProject.value?.id;
+// if (subset.value?.id && projectId) {
+// await useProjects().addAsset(AssetType.Dataset, subset.value.id, projectId);
+// logger.info(`New dataset saved as ${subset.value.name}`);
+// } else {
+// logger.error('Subset ID not found.');
+// }
+// }
 
 async function run() {
  console.log('running');