From 85bb9a6c6b0a5d0d216b152ecaeed7a499bf48e6 Mon Sep 17 00:00:00 2001 From: Taras Hlukhovetskyi Date: Wed, 4 Feb 2026 13:02:38 +0200 Subject: [PATCH] [FIX] Inconsistent tab selection after page refresh in detail views --- src/components/Artifacts/Artifacts.jsx | 4 ++-- .../FeatureStore/FeatureSets/FeatureSets.jsx | 19 ++++++++++++++++--- .../FeatureVectors/FeatureVectors.jsx | 17 +++++++++++++++-- src/components/FunctionsPage/Functions.jsx | 4 ++-- .../FunctionsPageOld/FunctionsOld.jsx | 16 ++++++++++++++-- .../ModelEndpoints/ModelEndpointsTable.jsx | 18 ++++++++++++++++-- src/elements/JobsTable/JobsTable.jsx | 4 ++-- .../WorkflowsTable/WorkflowsTable.jsx | 16 ++++++++++++++-- 8 files changed, 81 insertions(+), 17 deletions(-) diff --git a/src/components/Artifacts/Artifacts.jsx b/src/components/Artifacts/Artifacts.jsx index 3046e528b2..92ec896c06 100644 --- a/src/components/Artifacts/Artifacts.jsx +++ b/src/components/Artifacts/Artifacts.jsx @@ -413,10 +413,10 @@ const Artifacts = ({ const tableHeaders = useMemo(() => tableContent[0]?.content ?? [], [tableContent]) useEffect(() => { - if (params.id && pageData.details.menu.length > 0) { + if (params.id && !isEmpty(selectedArtifact) && pageData.details.menu.length > 0) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, location, pageData.details.menu, params.tab, params.id]) + }, [navigate, location, pageData.details.menu, params.tab, params.id, selectedArtifact]) useEffect(() => { if (isEmpty(selectedArtifact)) { diff --git a/src/components/FeatureStore/FeatureSets/FeatureSets.jsx b/src/components/FeatureStore/FeatureSets/FeatureSets.jsx index 08b7eb3934..aad67d730d 100644 --- a/src/components/FeatureStore/FeatureSets/FeatureSets.jsx +++ b/src/components/FeatureStore/FeatureSets/FeatureSets.jsx @@ -20,7 +20,7 @@ such restriction. import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react' import { useLocation, useNavigate, useParams, useSearchParams } from 'react-router-dom' import { useSelector, useDispatch } from 'react-redux' -import { cloneDeep } from 'lodash' +import { cloneDeep, isEmpty } from 'lodash' import FeatureSetsView from './FeatureSetsView' import { FeatureStoreContext } from '../FeatureStore' @@ -391,10 +391,23 @@ const FeatureSets = () => { }, [featureStore.featureSets.allData, navigate, params.name, params.projectName, params.tag]) useEffect(() => { - if (params.name && params.tag && pageData.details.menu.length > 0) { + if ( + params.name && + params.tag && + !isEmpty(selectedFeatureSet) && + pageData.details.menu.length > 0 + ) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab]) + }, [ + navigate, + location, + pageData.details.menu, + params.name, + params.tag, + params.tab, + selectedFeatureSet + ]) useEffect(() => { checkTabIsValid(navigate, params, selectedFeatureSet, FEATURE_SETS_TAB) diff --git a/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx b/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx index 5090188d36..3ce68e58d0 100644 --- a/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx +++ b/src/components/FeatureStore/FeatureVectors/FeatureVectors.jsx @@ -458,10 +458,23 @@ const FeatureVectors = () => { }, [featureStore.featureVectors?.allData, navigate, params.name, params.projectName, params.tag]) useEffect(() => { - if (params.name && params.tag && pageData.details.menu.length > 0) { + if ( + params.name && + params.tag && + !isEmpty(selectedFeatureVector) && + pageData.details.menu.length > 0 + ) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab]) + }, [ + navigate, + location, + pageData.details.menu, + params.name, + params.tag, + params.tab, + selectedFeatureVector + ]) useEffect(() => { checkTabIsValid(navigate, params, setSelectedFeatureVector, FEATURE_VECTORS_TAB) diff --git a/src/components/FunctionsPage/Functions.jsx b/src/components/FunctionsPage/Functions.jsx index 4eb2fd9519..d86b0fc179 100644 --- a/src/components/FunctionsPage/Functions.jsx +++ b/src/components/FunctionsPage/Functions.jsx @@ -503,10 +503,10 @@ const Functions = ({ isAllVersions = false }) => { }, [params.projectName]) useEffect(() => { - if (params.id && pageData.details.menu.length > 0) { + if (params.id && !isEmpty(selectedFunction) && pageData.details.menu.length > 0) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, pageData.details.menu, location, params.id, params.tab]) + }, [navigate, pageData.details.menu, location, params.id, params.tab, selectedFunction]) useEffect(() => { dispatch(setFilters({ groupBy: GROUP_BY_NONE })) diff --git a/src/components/FunctionsPageOld/FunctionsOld.jsx b/src/components/FunctionsPageOld/FunctionsOld.jsx index d05b6530fd..830a168e00 100644 --- a/src/components/FunctionsPageOld/FunctionsOld.jsx +++ b/src/components/FunctionsPageOld/FunctionsOld.jsx @@ -537,10 +537,22 @@ const Functions = () => { }, [params.projectName]) useEffect(() => { - if ((params.funcName || params.hash) && pageData.details.menu.length > 0) { + if ( + (params.funcName || params.hash) && + !isEmpty(selectedFunction) && + pageData.details.menu.length > 0 + ) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, pageData.details.menu, location, params.hash, params.funcName, params.tab]) + }, [ + navigate, + pageData.details.menu, + location, + params.hash, + params.funcName, + params.tab, + selectedFunction + ]) useEffect(() => { checkForSelectedFunction( diff --git a/src/components/ModelsPage/ModelEndpoints/ModelEndpointsTable.jsx b/src/components/ModelsPage/ModelEndpoints/ModelEndpointsTable.jsx index a5b126b712..8d15dd38e8 100644 --- a/src/components/ModelsPage/ModelEndpoints/ModelEndpointsTable.jsx +++ b/src/components/ModelsPage/ModelEndpoints/ModelEndpointsTable.jsx @@ -21,6 +21,7 @@ import React, { useState, useRef, useCallback, useEffect, useMemo } from 'react' import { useDispatch, useSelector } from 'react-redux' import { useLocation, useNavigate, useParams } from 'react-router-dom' import PropTypes from 'prop-types' +import { isEmpty } from 'lodash' import ActionBar from '../../ActionBar/ActionBar' import ArtifactsTableRow from '../../../elements/ArtifactsTableRow/ArtifactsTableRow' @@ -205,10 +206,23 @@ const ModelEndpointsTable = React.forwardRef( ]) useEffect(() => { - if (params.name && params.tag && pageData.details.menu.length > 0) { + if ( + params.name && + params.tag && + !isEmpty(selectedModelEndpoint) && + pageData.details.menu.length > 0 + ) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, location, pageData.details.menu, params.name, params.tag, params.tab]) + }, [ + navigate, + location, + pageData.details.menu, + params.name, + params.tag, + params.tab, + selectedModelEndpoint + ]) const tableContent = useMemo(() => { return modelEndpoints.map(contentItem => diff --git a/src/elements/JobsTable/JobsTable.jsx b/src/elements/JobsTable/JobsTable.jsx index 572bdfe798..4ddb639c8b 100644 --- a/src/elements/JobsTable/JobsTable.jsx +++ b/src/elements/JobsTable/JobsTable.jsx @@ -218,10 +218,10 @@ const JobsTable = React.forwardRef( ) useEffect(() => { - if (params.jobId && pageData.details.menu.length > 0) { + if (params.jobId && !isEmpty(selectedJob) && pageData.details.menu.length > 0) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, pageData.details.menu, location, params.jobId, params.tab]) + }, [navigate, pageData.details.menu, location, params.jobId, params.tab, selectedJob]) const handleConfirmAbortJob = useCallback( job => { diff --git a/src/elements/WorkflowsTable/WorkflowsTable.jsx b/src/elements/WorkflowsTable/WorkflowsTable.jsx index 8849d32206..0d739fbc02 100644 --- a/src/elements/WorkflowsTable/WorkflowsTable.jsx +++ b/src/elements/WorkflowsTable/WorkflowsTable.jsx @@ -671,10 +671,22 @@ const WorkflowsTable = React.forwardRef( ]) useEffect(() => { - if ((params.jobId || params.functionHash) && pageData.details.menu.length > 0) { + if ( + (params.jobId || params.functionHash) && + !isEmpty(selectedJob) && + pageData.details.menu.length > 0 + ) { isDetailsTabExists(params.tab, pageData.details.menu, navigate, location) } - }, [navigate, pageData.details.menu, location, params.jobId, params.functionHash, params.tab]) + }, [ + navigate, + pageData.details.menu, + location, + params.jobId, + params.functionHash, + params.tab, + selectedJob + ]) useEffect(() => { const workflow = { ...workflowsStore.activeWorkflow?.data }