Skip to content

Commit 079bfdc

Browse files
enjalotenjalot
committed
fix warning for outdated scopes
1 parent c69281a commit 079bfdc

File tree

6 files changed

+70
-153
lines changed

6 files changed

+70
-153
lines changed

‎web/src/components/Explore/LeftPane.css‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -50,10 +50,11 @@
5050
.metadata-tooltip {
5151
position: absolute;
5252
left: 100%;
53-
bottom: 10px;
53+
bottom: 15px;
5454
margin-left: 8px;
55-
white-space: nowrap;
55+
/* white-space: nowrap; */
5656
background-color: white;
57+
min-width: 400px;
5758
z-index: 1000;
5859
}
5960

‎web/src/components/Explore/LeftPane.jsx‎

Lines changed: 16 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,23 @@
1-
import React, { useState } from 'react';
1+
import React, { useState, useEffect, useMemo } from 'react';
22
import './LeftPane.css';
33
import { Button } from 'react-element-forge';
4+
import { apiService } from '../../lib/apiService';
5+
import { compareVersions } from 'compare-versions';
46
import ScopeHeader from './ScopeHeader';
57

68
export default function LeftPane({ dataset, scope, scopes, tags, deletedIndices, onScopeChange }) {
79
const [showMetadata, setShowMetadata] = useState(false);
10+
const [lsVersion, setLsVersion] = useState(null);
11+
12+
useEffect(() => {
13+
apiService.fetchVersion().then(setLsVersion);
14+
}, []);
15+
16+
const isOutdatedScope = useMemo(
17+
() =>
18+
scope && lsVersion && scope?.ls_version && compareVersions(scope?.ls_version, lsVersion) < 0,
19+
[lsVersion, scope]
20+
);
821

922
return (
1023
<div className="left-pane-container">
@@ -38,13 +51,13 @@ export default function LeftPane({ dataset, scope, scopes, tags, deletedIndices,
3851
onMouseLeave={() => setShowMetadata(false)}
3952
>
4053
<Button
41-
className="left-pane-button"
54+
className={`left-pane-button ${isOutdatedScope ? 'warning-button' : ''}`}
4255
size="small"
4356
icon="info"
4457
color="secondary"
4558
title="Show scope metadata"
4659
/>
47-
{showMetadata && (
60+
{(showMetadata || isOutdatedScope) && (
4861
<div className="metadata-tooltip">
4962
<ScopeHeader
5063
dataset={dataset}

‎web/src/components/Explore/ScopeHeader.jsx‎

Lines changed: 40 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -46,63 +46,22 @@ function DatasetHeader({ dataset, scope, scopes, onScopeChange, tags, deletedInd
4646

4747
{isMobileDevice() && <i>Use a desktop browser for full interactivity!</i>}
4848

49-
{scope?.ls_version ? (
50-
<span>
51-
{lsVersion && compareVersions(scope?.ls_version, lsVersion) < 0 ? (
52-
<div className="scope-version-warning">
53-
<span className="warning-header">Outdated Scope</span>
54-
<span>
55-
{' '}
56-
This scope was created with Latent Scope version <code>{scope.ls_version}</code>,
57-
while you are running Latent Scope <code>{lsVersion}</code>
58-
</span>
59-
<span>
60-
{' '}
61-
please "Overwrite" the scope in the last step on the{' '}
62-
<Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure Page</Link> to
63-
update.
64-
</span>
65-
</div>
66-
) : null}
67-
<span>
68-
<span className="metadata-label">Dataset</span> {dataset?.id}
69-
</span>
70-
<br />
71-
<span>
72-
<span className="metadata-label">Scope</span> {scope?.id}
73-
</span>
74-
<br />
75-
<span>
76-
<span className="metadata-label">Description</span> {scope?.description}
77-
</span>
78-
<br />
79-
<span>
80-
<span className="metadata-label">Embedding</span> {scope?.embedding?.model_id}
81-
</span>
82-
83-
<br />
84-
<span>
85-
<span className="metadata-label">Version</span> {scope?.ls_version}
86-
</span>
87-
<br />
88-
{/* <div className="dataset-card"> */}
89-
<span>
90-
{dataset?.length - deletedIndices?.length}/{dataset?.length} rows
91-
{deletedIndices?.length > 0 && (
92-
<span className="metadata-label"> ({deletedIndices?.length} deleted)</span>
93-
)}
94-
</span>
95-
<br />
96-
{/* </div> */}
49+
{lsVersion && compareVersions(scope?.ls_version, lsVersion) < 0 ? (
50+
<div className="scope-version-warning">
51+
<span className="warning-header">Outdated Scope</span>
9752
<span>
98-
<span>{scope?.cluster_labels_lookup?.length} clusters</span>
53+
{' '}
54+
This scope was created with Latent Scope version <code>{scope.ls_version}</code>,
55+
while you are running Latent Scope <code>{lsVersion}</code>
9956
</span>
100-
<br />
10157
<span>
102-
<span>{tags.length} tags</span>
58+
{' '}
59+
please "Overwrite" the scope in the last step on the{' '}
60+
<Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure Page</Link> to
61+
update.
10362
</span>
104-
</span>
105-
) : (
63+
</div>
64+
) : !scope?.ls_version ? (
10665
<div className="scope-version-warning">
10766
<span className="warning-header">Outdated Scope!</span>
10867
<span>
@@ -112,7 +71,34 @@ function DatasetHeader({ dataset, scope, scopes, onScopeChange, tags, deletedInd
11271
update.
11372
</span>
11473
</div>
115-
)}
74+
) : null}
75+
<span>
76+
<span className="metadata-label">Dataset</span> {dataset?.id}
77+
</span>
78+
<span>
79+
<span className="metadata-label">Scope</span> {scope?.id}
80+
</span>
81+
<span>
82+
<span className="metadata-label">Description</span> {scope?.description}
83+
</span>
84+
<span>
85+
<span className="metadata-label">Embedding</span> {scope?.embedding?.model_id}
86+
</span>
87+
<span>
88+
<span className="metadata-label">Version</span> {scope?.ls_version}
89+
</span>
90+
<span>
91+
{dataset?.length - deletedIndices?.length}/{dataset?.length} rows
92+
{deletedIndices?.length > 0 && (
93+
<span className="metadata-label"> ({deletedIndices?.length} deleted)</span>
94+
)}
95+
</span>
96+
<span>
97+
<span>{scope?.cluster_labels_lookup?.length} clusters</span>
98+
</span>
99+
<span>
100+
<span>{tags.length} tags</span>
101+
</span>
116102
</div>
117103

118104
{/* <div className="dataset-card">

‎web/src/components/FilterDataTable.jsx‎

Lines changed: 2 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -281,6 +281,7 @@ function FilterDataTable({
281281

282282
return {
283283
...baseCol,
284+
width: col == 'ls_index' ? 60 : 150,
284285
renderCell,
285286
};
286287
});
@@ -307,69 +308,6 @@ function FilterDataTable({
307308
hydrateIndices(indicesToUse);
308309
}, [filteredIndices, page, defaultIndices, deletedIndices, hydrateIndices]);
309310

310-
const headerRef = useRef(null);
311-
const bodyRef = useRef(null);
312-
313-
const [scrollbarWidth, setScrollbarWidth] = useState(0);
314-
315-
const calculateScrollbarWidth = () => {
316-
if (bodyRef.current) {
317-
const width = bodyRef.current.offsetWidth - bodyRef.current.clientWidth;
318-
setScrollbarWidth(width);
319-
}
320-
};
321-
322-
// these useEffects seem janky. I want to have the table body scroll independently in Y but not in X
323-
useEffect(() => {
324-
calculateScrollbarWidth();
325-
// Recalculate on window resize
326-
window.addEventListener('resize', calculateScrollbarWidth);
327-
328-
// Adjust header width to match body's scrollWidth
329-
const adjustHeaderWidth = () => {
330-
if (headerRef.current && bodyRef.current) {
331-
const bodyScrollWidth = bodyRef.current.scrollWidth;
332-
headerRef.current.querySelector('table').style.width = `${bodyScrollWidth}px`;
333-
headerRef.current.style.overflowX = 'hidden'; // Hide horizontal overflow
334-
}
335-
};
336-
337-
// Call it initially and whenever the window resizes
338-
adjustHeaderWidth();
339-
window.addEventListener('resize', adjustHeaderWidth);
340-
const resizeObserver = new ResizeObserver((entries) => {
341-
for (let entry of entries) {
342-
if (entry.target === bodyRef.current) {
343-
adjustHeaderWidth();
344-
}
345-
}
346-
});
347-
348-
if (bodyRef.current) {
349-
resizeObserver.observe(bodyRef.current);
350-
}
351-
352-
// Start: Code to synchronize horizontal scroll
353-
const syncHorizontalScroll = () => {
354-
if (headerRef.current && bodyRef.current) {
355-
headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
356-
}
357-
};
358-
359-
const bodyEl = bodyRef.current;
360-
bodyEl.addEventListener('scroll', syncHorizontalScroll);
361-
362-
// End: Code to synchronize horizontal scroll
363-
364-
return () => {
365-
window.removeEventListener('resize', calculateScrollbarWidth);
366-
window.removeEventListener('resize', adjustHeaderWidth);
367-
// Clean up the scroll listener
368-
bodyEl.removeEventListener('scroll', syncHorizontalScroll);
369-
resizeObserver.disconnect();
370-
};
371-
}, []);
372-
373311
const renderRowWithHover = useCallback(
374312
(key, props) => {
375313
return <RowWithHover key={key} props={props} onHover={onHover} />;
@@ -395,11 +333,7 @@ function FilterDataTable({
395333
// style={{ visibility: indices.length ? 'visible' : 'hidden' }}
396334
>
397335
{/* Scrollable Table Body */}
398-
<div
399-
className="filter-table-scrollable-body table-body"
400-
style={{ overflowY: 'auto' }}
401-
ref={bodyRef}
402-
>
336+
<div className="filter-table-scrollable-body table-body" style={{ overflowY: 'auto' }}>
403337
<DataGrid
404338
rows={rows}
405339
columns={formattedColumns}

‎web/src/components/Setup/Preview.jsx‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -119,8 +119,10 @@ function Preview({ embedding, umap, cluster, labelId } = {}) {
119119
console.log('newHeight', newHeight, 'newWidth', newWidth);
120120
if (newHeight > 700) {
121121
setViewMode('both');
122-
} else {
122+
} else if (umap) {
123123
setViewMode('umap');
124+
} else {
125+
setViewMode('table');
124126
}
125127
setHeight(newHeight);
126128
setWidth(newWidth);
@@ -134,7 +136,7 @@ function Preview({ embedding, umap, cluster, labelId } = {}) {
134136
}, 100);
135137

136138
return () => window.removeEventListener('resize', updateDimensions);
137-
}, [setViewMode, setHeight, setWidth]);
139+
}, [setViewMode, setHeight, setWidth, umap]);
138140

139141
useEffect(() => {
140142
console.log('SCOPE', scope);
@@ -312,28 +314,6 @@ function Preview({ embedding, umap, cluster, labelId } = {}) {
312314
}, [pointSize]);
313315

314316
const [page, setPage] = useState(0);
315-
useEffect(() => {
316-
console.log('tableHeight', tableHeight);
317-
}, [tableHeight]);
318-
useEffect(() => {
319-
console.log('dataset', dataset);
320-
}, [dataset]);
321-
useEffect(() => {
322-
console.log('dataIndices', dataIndices);
323-
}, [dataIndices]);
324-
useEffect(() => {
325-
console.log('distances', distances);
326-
}, [distances]);
327-
useEffect(() => {
328-
console.log('clusterMap', clusterMap);
329-
}, [clusterMap]);
330-
useEffect(() => {
331-
console.log('clusterLabels', clusterLabels);
332-
}, [clusterLabels]);
333-
334-
useEffect(() => {
335-
console.log('viewMode', viewMode);
336-
}, [viewMode]);
337317

338318
return (
339319
<div className={styles['preview']}>

‎web/src/pages/Explore.css‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -138,15 +138,18 @@
138138
padding: 6px;
139139
border: 1px solid red;
140140
border-radius: 6px;
141-
142-
143141
}
144142

145143
.scope-version-warning .warning-header {
146144
color: red;
147145
font-weight: bold;
148146
}
149147

148+
.left-pane-button.warning-button {
149+
stroke: red !important;
150+
color: red !important;
151+
}
152+
150153
/* SECOND ROW: UMAP */
151154

152155
.scatters {

0 commit comments

Comments
 (0)