Skip to content

Commit

Permalink
fix warning for outdated scopes
Browse files Browse the repository at this point in the history
  • Loading branch information
@enjalot
enjalot committed Dec 3, 2024
1 parent c69281a commit 079bfdc
Show file tree
Hide file tree
Showing 6 changed files with 70 additions and 153 deletions.
5 changes: 3 additions & 2 deletions web/src/components/Explore/LeftPane.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,10 +50,11 @@
.metadata-tooltip {
position: absolute;
left: 100%;
bottom: 10px;
bottom: 15px;
margin-left: 8px;
white-space: nowrap;
/* white-space: nowrap; */
background-color: white;
min-width: 400px;
z-index: 1000;
}

Expand Down
19 changes: 16 additions & 3 deletions web/src/components/Explore/LeftPane.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,23 @@
import React, { useState } from 'react';
import React, { useState, useEffect, useMemo } from 'react';
import './LeftPane.css';
import { Button } from 'react-element-forge';
import { apiService } from '../../lib/apiService';
import { compareVersions } from 'compare-versions';
import ScopeHeader from './ScopeHeader';

export default function LeftPane({ dataset, scope, scopes, tags, deletedIndices, onScopeChange }) {
const [showMetadata, setShowMetadata] = useState(false);
const [lsVersion, setLsVersion] = useState(null);

useEffect(() => {
apiService.fetchVersion().then(setLsVersion);
}, []);

const isOutdatedScope = useMemo(
() =>
scope && lsVersion && scope?.ls_version && compareVersions(scope?.ls_version, lsVersion) < 0,
[lsVersion, scope]
);

return (
<div className="left-pane-container">
Expand Down Expand Up @@ -38,13 +51,13 @@ export default function LeftPane({ dataset, scope, scopes, tags, deletedIndices,
onMouseLeave={() => setShowMetadata(false)}
>
<Button
className="left-pane-button"
className={`left-pane-button ${isOutdatedScope ? 'warning-button' : ''}`}
size="small"
icon="info"
color="secondary"
title="Show scope metadata"
/>
{showMetadata && (
{(showMetadata || isOutdatedScope) && (
<div className="metadata-tooltip">
<ScopeHeader
dataset={dataset}
Expand Down
94 changes: 40 additions & 54 deletions web/src/components/Explore/ScopeHeader.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,63 +46,22 @@ function DatasetHeader({ dataset, scope, scopes, onScopeChange, tags, deletedInd

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

{scope?.ls_version ? (
<span>
{lsVersion && compareVersions(scope?.ls_version, lsVersion) < 0 ? (
<div className="scope-version-warning">
<span className="warning-header">Outdated Scope</span>
<span>
{' '}
This scope was created with Latent Scope version <code>{scope.ls_version}</code>,
while you are running Latent Scope <code>{lsVersion}</code>
</span>
<span>
{' '}
please "Overwrite" the scope in the last step on the{' '}
<Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure Page</Link> to
update.
</span>
</div>
) : null}
<span>
<span className="metadata-label">Dataset</span> {dataset?.id}
</span>
<br />
<span>
<span className="metadata-label">Scope</span> {scope?.id}
</span>
<br />
<span>
<span className="metadata-label">Description</span> {scope?.description}
</span>
<br />
<span>
<span className="metadata-label">Embedding</span> {scope?.embedding?.model_id}
</span>

<br />
<span>
<span className="metadata-label">Version</span> {scope?.ls_version}
</span>
<br />
{/* <div className="dataset-card"> */}
<span>
{dataset?.length - deletedIndices?.length}/{dataset?.length} rows
{deletedIndices?.length > 0 && (
<span className="metadata-label"> ({deletedIndices?.length} deleted)</span>
)}
</span>
<br />
{/* </div> */}
{lsVersion && compareVersions(scope?.ls_version, lsVersion) < 0 ? (
<div className="scope-version-warning">
<span className="warning-header">Outdated Scope</span>
<span>
<span>{scope?.cluster_labels_lookup?.length} clusters</span>
{' '}
This scope was created with Latent Scope version <code>{scope.ls_version}</code>,
while you are running Latent Scope <code>{lsVersion}</code>
</span>
<br />
<span>
<span>{tags.length} tags</span>
{' '}
please "Overwrite" the scope in the last step on the{' '}
<Link to={`/datasets/${dataset?.id}/setup/${scope?.id}`}>Configure Page</Link> to
update.
</span>
</span>
) : (
</div>
) : !scope?.ls_version ? (
<div className="scope-version-warning">
<span className="warning-header">Outdated Scope!</span>
<span>
Expand All @@ -112,7 +71,34 @@ function DatasetHeader({ dataset, scope, scopes, onScopeChange, tags, deletedInd
update.
</span>
</div>
)}
) : null}
<span>
<span className="metadata-label">Dataset</span> {dataset?.id}
</span>
<span>
<span className="metadata-label">Scope</span> {scope?.id}
</span>
<span>
<span className="metadata-label">Description</span> {scope?.description}
</span>
<span>
<span className="metadata-label">Embedding</span> {scope?.embedding?.model_id}
</span>
<span>
<span className="metadata-label">Version</span> {scope?.ls_version}
</span>
<span>
{dataset?.length - deletedIndices?.length}/{dataset?.length} rows
{deletedIndices?.length > 0 && (
<span className="metadata-label"> ({deletedIndices?.length} deleted)</span>
)}
</span>
<span>
<span>{scope?.cluster_labels_lookup?.length} clusters</span>
</span>
<span>
<span>{tags.length} tags</span>
</span>
</div>

{/* <div className="dataset-card">
Expand Down
70 changes: 2 additions & 68 deletions web/src/components/FilterDataTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -281,6 +281,7 @@ function FilterDataTable({

return {
...baseCol,
width: col == 'ls_index' ? 60 : 150,
renderCell,
};
});
Expand All @@ -307,69 +308,6 @@ function FilterDataTable({
hydrateIndices(indicesToUse);
}, [filteredIndices, page, defaultIndices, deletedIndices, hydrateIndices]);

const headerRef = useRef(null);
const bodyRef = useRef(null);

const [scrollbarWidth, setScrollbarWidth] = useState(0);

const calculateScrollbarWidth = () => {
if (bodyRef.current) {
const width = bodyRef.current.offsetWidth - bodyRef.current.clientWidth;
setScrollbarWidth(width);
}
};

// these useEffects seem janky. I want to have the table body scroll independently in Y but not in X
useEffect(() => {
calculateScrollbarWidth();
// Recalculate on window resize
window.addEventListener('resize', calculateScrollbarWidth);

// Adjust header width to match body's scrollWidth
const adjustHeaderWidth = () => {
if (headerRef.current && bodyRef.current) {
const bodyScrollWidth = bodyRef.current.scrollWidth;
headerRef.current.querySelector('table').style.width = `${bodyScrollWidth}px`;
headerRef.current.style.overflowX = 'hidden'; // Hide horizontal overflow
}
};

// Call it initially and whenever the window resizes
adjustHeaderWidth();
window.addEventListener('resize', adjustHeaderWidth);
const resizeObserver = new ResizeObserver((entries) => {
for (let entry of entries) {
if (entry.target === bodyRef.current) {
adjustHeaderWidth();
}
}
});

if (bodyRef.current) {
resizeObserver.observe(bodyRef.current);
}

// Start: Code to synchronize horizontal scroll
const syncHorizontalScroll = () => {
if (headerRef.current && bodyRef.current) {
headerRef.current.scrollLeft = bodyRef.current.scrollLeft;
}
};

const bodyEl = bodyRef.current;
bodyEl.addEventListener('scroll', syncHorizontalScroll);

// End: Code to synchronize horizontal scroll

return () => {
window.removeEventListener('resize', calculateScrollbarWidth);
window.removeEventListener('resize', adjustHeaderWidth);
// Clean up the scroll listener
bodyEl.removeEventListener('scroll', syncHorizontalScroll);
resizeObserver.disconnect();
};
}, []);

const renderRowWithHover = useCallback(
(key, props) => {
return <RowWithHover key={key} props={props} onHover={onHover} />;
Expand All @@ -395,11 +333,7 @@ function FilterDataTable({
// style={{ visibility: indices.length ? 'visible' : 'hidden' }}
>
{/* Scrollable Table Body */}
<div
className="filter-table-scrollable-body table-body"
style={{ overflowY: 'auto' }}
ref={bodyRef}
>
<div className="filter-table-scrollable-body table-body" style={{ overflowY: 'auto' }}>
<DataGrid
rows={rows}
columns={formattedColumns}
Expand Down
28 changes: 4 additions & 24 deletions web/src/components/Setup/Preview.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -119,8 +119,10 @@ function Preview({ embedding, umap, cluster, labelId } = {}) {
console.log('newHeight', newHeight, 'newWidth', newWidth);
if (newHeight > 700) {
setViewMode('both');
} else {
} else if (umap) {
setViewMode('umap');
} else {
setViewMode('table');
}
setHeight(newHeight);
setWidth(newWidth);
Expand All @@ -134,7 +136,7 @@ function Preview({ embedding, umap, cluster, labelId } = {}) {
}, 100);

return () => window.removeEventListener('resize', updateDimensions);
}, [setViewMode, setHeight, setWidth]);
}, [setViewMode, setHeight, setWidth, umap]);

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

const [page, setPage] = useState(0);
useEffect(() => {
console.log('tableHeight', tableHeight);
}, [tableHeight]);
useEffect(() => {
console.log('dataset', dataset);
}, [dataset]);
useEffect(() => {
console.log('dataIndices', dataIndices);
}, [dataIndices]);
useEffect(() => {
console.log('distances', distances);
}, [distances]);
useEffect(() => {
console.log('clusterMap', clusterMap);
}, [clusterMap]);
useEffect(() => {
console.log('clusterLabels', clusterLabels);
}, [clusterLabels]);

useEffect(() => {
console.log('viewMode', viewMode);
}, [viewMode]);

return (
<div className={styles['preview']}>
Expand Down
7 changes: 5 additions & 2 deletions web/src/pages/Explore.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,15 +138,18 @@
padding: 6px;
border: 1px solid red;
border-radius: 6px;


}

.scope-version-warning .warning-header {
color: red;
font-weight: bold;
}

.left-pane-button.warning-button {
stroke: red !important;
color: red !important;
}

/* SECOND ROW: UMAP */

.scatters {
Expand Down

0 comments on commit 079bfdc

Please sign in to comment.