From 4e0a561a07d43aaf6143c9b2e8607a543f18a5e9 Mon Sep 17 00:00:00 2001 From: Francisco Javier Arceo Date: Tue, 16 Jun 2026 09:15:14 -0400 Subject: [PATCH] fix: Resolve UI build warnings Signed-off-by: Francisco Javier Arceo --- ui/src/components/PermissionsDisplay.tsx | 4 -- ui/src/components/RegistrySearch.tsx | 7 ++- ui/src/custom-tabs/TabsRegistryContext.tsx | 1 - ui/src/pages/Layout.tsx | 49 ------------------- .../feature-views/FeatureViewVersionsTab.tsx | 17 ++++--- .../FeatureViewProjectionDisplayPanel.tsx | 1 - ui/src/pages/label-views/BatchUploadTab.tsx | 4 +- .../label-views/ClassificationMethod.tsx | 37 +++++++++----- ui/src/pages/label-views/EntityFormMethod.tsx | 17 ++++--- ui/src/pages/label-views/IntegrationsTab.tsx | 3 -- ui/src/pages/label-views/LabelBrowseTab.tsx | 2 +- .../pages/label-views/TrainingExportTab.tsx | 3 +- .../pages/monitoring/FeatureMetricsDetail.tsx | 1 - .../monitoring/components/HistogramChart.tsx | 2 - ui/src/utils/permissionUtils.ts | 1 - 15 files changed, 52 insertions(+), 97 deletions(-) diff --git a/ui/src/components/PermissionsDisplay.tsx b/ui/src/components/PermissionsDisplay.tsx index 47af120a1cd..d4b35cb5d33 100644 --- a/ui/src/components/PermissionsDisplay.tsx +++ b/ui/src/components/PermissionsDisplay.tsx @@ -3,13 +3,9 @@ import { EuiBadge, EuiFlexGroup, EuiFlexItem, - EuiPanel, EuiText, - EuiTitle, - EuiHorizontalRule, EuiToolTip, } from "@elastic/eui"; -import { formatPermissions } from "../utils/permissionUtils"; interface PermissionsDisplayProps { permissions: any[] | undefined; diff --git a/ui/src/components/RegistrySearch.tsx b/ui/src/components/RegistrySearch.tsx index 46d72966713..ed3b987240e 100644 --- a/ui/src/components/RegistrySearch.tsx +++ b/ui/src/components/RegistrySearch.tsx @@ -3,6 +3,7 @@ import React, { useRef, forwardRef, useImperativeHandle, + useCallback, } from "react"; import { EuiText, @@ -17,8 +18,6 @@ import { } from "@elastic/eui"; import EuiCustomLink from "./EuiCustomLink"; -import { css } from "@emotion/react"; - const searchResultsStyles = { searchResults: { marginTop: "8px", @@ -68,11 +67,11 @@ const RegistrySearch = forwardRef( const [searchText, setSearchText] = useState(""); const inputRef = useRef(null); - const focusSearchInput = () => { + const focusSearchInput = useCallback(() => { if (inputRef.current) { inputRef.current.focus(); } - }; + }, []); useImperativeHandle( ref, diff --git a/ui/src/custom-tabs/TabsRegistryContext.tsx b/ui/src/custom-tabs/TabsRegistryContext.tsx index 38c9ccea486..4152edd832d 100644 --- a/ui/src/custom-tabs/TabsRegistryContext.tsx +++ b/ui/src/custom-tabs/TabsRegistryContext.tsx @@ -16,7 +16,6 @@ import FeatureCustomTabLoadingWrapper from "../utils/custom-tabs/FeatureCustomTa import DataSourceCustomTabLoadingWrapper from "../utils/custom-tabs/DataSourceCustomTabLoadingWrapper"; import EntityCustomTabLoadingWrapper from "../utils/custom-tabs/EntityCustomTabLoadingWrapper"; import DatasetCustomTabLoadingWrapper from "../utils/custom-tabs/DatasetCustomTabLoadingWrapper"; -import CurlGeneratorTab from "../pages/feature-views/CurlGeneratorTab"; import { RegularFeatureViewCustomTabRegistrationInterface, diff --git a/ui/src/pages/Layout.tsx b/ui/src/pages/Layout.tsx index 9825159aa96..d59c865ad88 100644 --- a/ui/src/pages/Layout.tsx +++ b/ui/src/pages/Layout.tsx @@ -54,55 +54,6 @@ const Layout = () => { // Load unfiltered data for global search (across all projects) const { data: globalData } = useLoadRegistry(globalRegistryPath); - // Categories for page-level search (filtered to current project) - const categories = data - ? [ - { - name: "Data Sources", - data: data.objects.dataSources || [], - getLink: (item: any) => `/p/${projectName}/data-source/${item.name}`, - }, - { - name: "Entities", - data: data.objects.entities || [], - getLink: (item: any) => `/p/${projectName}/entity/${item.name}`, - }, - { - name: "Features", - data: data.allFeatures || [], - getLink: (item: any) => { - const featureView = item?.featureView; - return featureView - ? `/p/${projectName}/feature-view/${featureView}/feature/${item.name}` - : "#"; - }, - }, - { - name: "Feature Views", - data: data.mergedFVList || [], - getLink: (item: any) => `/p/${projectName}/feature-view/${item.name}`, - }, - { - name: "Label Views", - data: data.objects.labelViews || [], - getLink: (item: any) => { - const lvName = item?.name || item?.spec?.name; - return `/p/${projectName}/label-view/${lvName}`; - }, - }, - { - name: "Feature Services", - data: data.objects.featureServices || [], - getLink: (item: any) => { - const serviceName = item?.name || item?.spec?.name; - return serviceName - ? `/p/${projectName}/feature-service/${serviceName}` - : "#"; - }, - }, - ] - : []; - // Helper function to extract project ID from an item const getProjectId = (item: any): string => { // Try different possible locations for the project field diff --git a/ui/src/pages/feature-views/FeatureViewVersionsTab.tsx b/ui/src/pages/feature-views/FeatureViewVersionsTab.tsx index 188bc8d7a3a..f388d247da4 100644 --- a/ui/src/pages/feature-views/FeatureViewVersionsTab.tsx +++ b/ui/src/pages/feature-views/FeatureViewVersionsTab.tsx @@ -6,7 +6,6 @@ import { EuiTitle, EuiHorizontalRule, EuiCodeBlock, - EuiSpacer, EuiFlexGroup, EuiFlexItem, EuiBadge, @@ -161,11 +160,17 @@ const FeatureViewVersionsTab = ({ const registryQuery = useLoadRegistry(registryUrl, projectName); const [expandedRows, setExpandedRows] = useState>({}); - const records = - registryQuery.data?.objects?.featureViewVersionHistory?.records?.filter( - (r: feast.core.IFeatureViewVersionRecord) => - r.featureViewName === featureViewName, - ) || []; + const records = useMemo( + () => + registryQuery.data?.objects?.featureViewVersionHistory?.records?.filter( + (r: feast.core.IFeatureViewVersionRecord) => + r.featureViewName === featureViewName, + ) || [], + [ + registryQuery.data?.objects?.featureViewVersionHistory?.records, + featureViewName, + ], + ); const decodedVersions: DecodedVersion[] = useMemo( () => records.map(decodeVersionProto), diff --git a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx index 6307de29c39..a80f8039e19 100644 --- a/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx +++ b/ui/src/pages/feature-views/components/FeatureViewProjectionDisplayPanel.tsx @@ -4,7 +4,6 @@ import { EuiBasicTable, EuiPanel, EuiSpacer, - EuiText, EuiTitle, } from "@elastic/eui"; import { useParams } from "react-router-dom"; diff --git a/ui/src/pages/label-views/BatchUploadTab.tsx b/ui/src/pages/label-views/BatchUploadTab.tsx index b85cc31521c..6f3930c5d92 100644 --- a/ui/src/pages/label-views/BatchUploadTab.tsx +++ b/ui/src/pages/label-views/BatchUploadTab.tsx @@ -3,7 +3,6 @@ import { useParams } from "react-router-dom"; import { EuiPanel, EuiTitle, - EuiHorizontalRule, EuiForm, EuiFormRow, EuiButton, @@ -18,7 +17,6 @@ import { EuiFilePicker, EuiBasicTable, EuiBasicTableColumn, - EuiIcon, EuiCodeBlock, } from "@elastic/eui"; import RegistryPathContext from "../../contexts/RegistryPathContext"; @@ -28,7 +26,7 @@ const BatchUploadTab = () => { const { labelViewName } = useParams(); const registryUrl = useContext(RegistryPathContext); const name = labelViewName || ""; - const { isLoading, isSuccess, data } = useLoadLabelView(name); + const { isLoading, data } = useLoadLabelView(name); const [fileData, setFileData] = useState(null); const [fileName, setFileName] = useState(""); diff --git a/ui/src/pages/label-views/ClassificationMethod.tsx b/ui/src/pages/label-views/ClassificationMethod.tsx index 3a0f34c236a..9d4366f2e00 100644 --- a/ui/src/pages/label-views/ClassificationMethod.tsx +++ b/ui/src/pages/label-views/ClassificationMethod.tsx @@ -1,4 +1,10 @@ -import React, { useState, useContext, useEffect } from "react"; +import React, { + useState, + useContext, + useEffect, + useCallback, + useMemo, +} from "react"; import { useParams } from "react-router-dom"; import { EuiCallOut, @@ -7,7 +13,6 @@ import { EuiFlexItem, EuiButton, EuiPanel, - EuiTitle, EuiText, EuiLoadingSpinner, EuiBasicTable, @@ -45,17 +50,23 @@ const ClassificationMethod = () => { const [pageSize, setPageSize] = useState(25); const spec = data?.object?.spec || data?.spec || {}; - const labelFields: { name: string; valueType?: string }[] = - spec.features || []; - const entities: string[] = spec.entityColumns?.length - ? spec.entityColumns.map((ec: { name: string }) => ec.name) - : spec.entities || []; + const labelFields: { name: string; valueType?: string }[] = useMemo( + () => spec.features || [], + [spec.features], + ); + const entities: string[] = useMemo( + () => + spec.entityColumns?.length + ? spec.entityColumns.map((ec: { name: string }) => ec.name) + : spec.entities || [], + [spec.entityColumns, spec.entities], + ); const configuredValues = annotationConfig?.label_values || {}; const fieldRoles = annotationConfig?.field_roles || {}; const labelWidgets = annotationConfig?.label_widgets || {}; - const fetchLabels = async () => { + const fetchLabels = useCallback(async () => { setIsLoading(true); setError(null); try { @@ -84,13 +95,13 @@ const ClassificationMethod = () => { } finally { setIsLoading(false); } - }; + }, [labelViewName, registryUrl]); useEffect(() => { if (labelViewName) { fetchLabels(); } - }, [labelViewName]); + }, [labelViewName, fetchLabels]); const handleFieldChange = (rowId: string, field: string, value: string) => { setRows((prev) => @@ -186,7 +197,7 @@ const ClassificationMethod = () => { URL.revokeObjectURL(url); }; - const filteredRows = React.useMemo(() => { + const filteredRows = useMemo(() => { if (!searchQuery.trim()) return rows; const q = searchQuery.toLowerCase(); return rows.filter((row) => @@ -198,12 +209,12 @@ const ClassificationMethod = () => { ); }, [rows, searchQuery]); - const paginatedRows = React.useMemo(() => { + const paginatedRows = useMemo(() => { const start = pageIndex * pageSize; return filteredRows.slice(start, start + pageSize); }, [filteredRows, pageIndex, pageSize]); - const uniqueValuesForField = React.useMemo(() => { + const uniqueValuesForField = useMemo(() => { const result: Record = {}; labelFields.forEach((field) => { const values = new Set(); diff --git a/ui/src/pages/label-views/EntityFormMethod.tsx b/ui/src/pages/label-views/EntityFormMethod.tsx index d659a38b08f..025f08b277c 100644 --- a/ui/src/pages/label-views/EntityFormMethod.tsx +++ b/ui/src/pages/label-views/EntityFormMethod.tsx @@ -9,7 +9,6 @@ import { EuiPanel, EuiTitle, EuiText, - EuiLoadingSpinner, EuiFormRow, EuiFieldText, EuiFieldNumber, @@ -35,11 +34,17 @@ const EntityFormMethod = ({ annotationConfig }: EntityFormMethodProps) => { const { data } = useLoadLabelView(labelViewName || ""); const spec = data?.object?.spec || data?.spec || {}; - const entities: string[] = spec.entityColumns?.length - ? spec.entityColumns.map((ec: { name: string }) => ec.name) - : spec.entities || []; - const labelFields: { name: string; valueType?: string }[] = - spec.features || []; + const entities: string[] = useMemo( + () => + spec.entityColumns?.length + ? spec.entityColumns.map((ec: { name: string }) => ec.name) + : spec.entities || [], + [spec.entityColumns, spec.entities], + ); + const labelFields: { name: string; valueType?: string }[] = useMemo( + () => spec.features || [], + [spec.features], + ); const fieldRoles = annotationConfig.field_roles; const labelValues = annotationConfig.label_values; diff --git a/ui/src/pages/label-views/IntegrationsTab.tsx b/ui/src/pages/label-views/IntegrationsTab.tsx index 70078644443..feca543bd10 100644 --- a/ui/src/pages/label-views/IntegrationsTab.tsx +++ b/ui/src/pages/label-views/IntegrationsTab.tsx @@ -3,7 +3,6 @@ import { useParams } from "react-router-dom"; import { EuiPanel, EuiTitle, - EuiHorizontalRule, EuiText, EuiLoadingSpinner, EuiCallOut, @@ -12,8 +11,6 @@ import { EuiFlexGroup, EuiFlexItem, EuiBadge, - EuiCopy, - EuiButton, EuiIcon, } from "@elastic/eui"; import RegistryPathContext from "../../contexts/RegistryPathContext"; diff --git a/ui/src/pages/label-views/LabelBrowseTab.tsx b/ui/src/pages/label-views/LabelBrowseTab.tsx index d1ee9013a92..7ed1b51a8b1 100644 --- a/ui/src/pages/label-views/LabelBrowseTab.tsx +++ b/ui/src/pages/label-views/LabelBrowseTab.tsx @@ -83,7 +83,7 @@ const LabelBrowseTab = () => { const entities: string[] = spec.entityColumns?.length ? spec.entityColumns.map((ec: { name: string }) => ec.name) : spec.entities || []; - const features: any[] = spec.features || []; + const features: any[] = useMemo(() => spec.features || [], [spec.features]); const conflictPolicy = spec.conflictPolicy || spec.conflict_policy || "LAST_WRITE_WINS"; const policyLabel = diff --git a/ui/src/pages/label-views/TrainingExportTab.tsx b/ui/src/pages/label-views/TrainingExportTab.tsx index 6580825231d..7a19741c182 100644 --- a/ui/src/pages/label-views/TrainingExportTab.tsx +++ b/ui/src/pages/label-views/TrainingExportTab.tsx @@ -28,7 +28,7 @@ const TrainingExportTab = () => { const { labelViewName } = useParams(); const registryUrl = useContext(RegistryPathContext); const name = labelViewName || ""; - const { isLoading, isSuccess, data } = useLoadLabelView(name); + const { isLoading, data } = useLoadLabelView(name); const { data: registryData } = useLoadRegistry(registryUrl); const [featureService, setFeatureService] = useState(""); @@ -38,7 +38,6 @@ const TrainingExportTab = () => { moment().subtract(30, "days"), ); const [endDate, setEndDate] = useState(moment()); - const [exportFormat, setExportFormat] = useState("csv"); const [exporting, setExporting] = useState(false); const [exportResult, setExportResult] = useState(null); const [error, setError] = useState(null); diff --git a/ui/src/pages/monitoring/FeatureMetricsDetail.tsx b/ui/src/pages/monitoring/FeatureMetricsDetail.tsx index 88d464d8faa..51f690ffa55 100644 --- a/ui/src/pages/monitoring/FeatureMetricsDetail.tsx +++ b/ui/src/pages/monitoring/FeatureMetricsDetail.tsx @@ -18,7 +18,6 @@ import { useBaselineMetrics, } from "../../queries/useMonitoringApi"; import type { - FeatureMetric, NumericHistogram, CategoricalHistogram, } from "../../queries/useMonitoringApi"; diff --git a/ui/src/pages/monitoring/components/HistogramChart.tsx b/ui/src/pages/monitoring/components/HistogramChart.tsx index bed612df0dc..a716b025021 100644 --- a/ui/src/pages/monitoring/components/HistogramChart.tsx +++ b/ui/src/pages/monitoring/components/HistogramChart.tsx @@ -291,12 +291,10 @@ const NumericHistogramChart = ({ const LABEL_WIDTH = 60; const BAR_MAX_WIDTH = 320; const COUNT_PAD = 80; -const CAT_SVG_WIDTH = LABEL_WIDTH + BAR_MAX_WIDTH + COUNT_PAD; const LABEL_WIDTH_EXP = 120; const BAR_MAX_WIDTH_EXP = 560; const COUNT_PAD_EXP = 100; -const CAT_SVG_WIDTH_EXP = LABEL_WIDTH_EXP + BAR_MAX_WIDTH_EXP + COUNT_PAD_EXP; const renderCategoricalSvg = ( histogram: CategoricalHistogram, diff --git a/ui/src/utils/permissionUtils.ts b/ui/src/utils/permissionUtils.ts index 9caa162ec1c..c4c4cef032e 100644 --- a/ui/src/utils/permissionUtils.ts +++ b/ui/src/utils/permissionUtils.ts @@ -1,5 +1,4 @@ import { FEAST_FCO_TYPES } from "../parsers/types"; -import { feast } from "../protos"; /** * Get permissions for a specific entity