Skip to content

Commit

Permalink
explore needs to handle pagination
Browse files Browse the repository at this point in the history
  • Loading branch information
@jzhang621
jzhang621 committed Nov 30, 2024
1 parent 4c4fa9c commit 81f792f
Show file tree
Hide file tree
Showing 2 changed files with 53 additions and 74 deletions.
89 changes: 22 additions & 67 deletions web/src/components/FilterDataTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,6 @@ FilterDataTable.propTypes = {
onClick: PropTypes.func,
};

const ROWS_PER_PAGE = 100;

function RowWithHover({ props, onHover }) {
const { row } = props;
Expand Down Expand Up @@ -80,25 +79,24 @@ function FilterDataTable({
sae_id = null,
feature = -1,
features = [],
onTagset,
onHover,
deletedIndices = [],
page,
setPage,
totalPages, // the total number of pages available
}) {
console.log('==== FILTER DATA TABLE =====', { indices });

const [columns, setColumns] = useState([]);
const [rows, setRows] = useState([]);
const [pageCount, setPageCount] = useState(0);
const [currentPage, setCurrentPage] = useState(0);

const [expandedFeatureRows, setExpandedFeatureRows] = useState(new Set());
// page count is the total number of pages available
const [pageCount, setPageCount] = useState(totalPages);

// const highlightColumn = useMemo(() => dataset?.text_column, [dataset])
const [highlightColumn, setHighlightColumn] = useState(null);
useEffect(() => {
console.log('changed?', dataset);
setHighlightColumn(dataset?.text_column || null);
}, [dataset]);
setPageCount(totalPages);
}, [totalPages]);

console.log('==== FILTER DATA TABLE =====', { totalPages });

const [expandedFeatureRows, setExpandedFeatureRows] = useState(new Set());

const [tags, setTags] = useState([]);
useEffect(() => {
Expand All @@ -107,44 +105,6 @@ function FilterDataTable({
}
}, [tagset]);

const [embeddingMinValues, setEmbeddingMinValues] = useState([]);
const [embeddingMaxValues, setEmbeddingMaxValues] = useState([]);
useEffect(() => {
if (dataset && showEmbeddings) {
fetch(`${apiUrl}/datasets/${dataset.id}/embeddings/${showEmbeddings}`)
.then((response) => response.json())
.then((data) => {
console.log('embedding stats', data);
setEmbeddingMinValues(data.min_values);
setEmbeddingMaxValues(data.max_values);
});
}
}, [dataset, showEmbeddings]);

function handleTagClick(tag, index) {
// console.log("tag", tag)
// console.log("index", index)
// console.log("tagset", tagset)
// console.log("tagset[tag]", tagset[tag])
if (tagset[tag].includes(index)) {
console.log('removing');
fetch(`${apiUrl}/tags/remove?dataset=${dataset?.id}&tag=${tag}&index=${index}`)
.then((response) => response.json())
.then((data) => {
console.log('removed', data);
onTagset();
});
} else {
console.log('adding');
fetch(`${apiUrl}/tags/add?dataset=${dataset?.id}&tag=${tag}&index=${index}`)
.then((response) => response.json())
.then((data) => {
console.log('added', data);
onTagset();
});
}
}

const hydrateIndices = useCallback(
(indices) => {
// console.log("hydrate!", dataset)
Expand All @@ -160,7 +120,7 @@ function FilterDataTable({
dataset: dataset.id,
indices: indices,
embedding_id: showEmbeddings,
page: currentPage,
page,
sae_id: sae_id,
}),
})
Expand All @@ -169,15 +129,16 @@ function FilterDataTable({
let { rows, totalPages, total } = data;
console.log('query fetched data', data);
// console.log("pages", totalPages, total)
setPageCount(totalPages);
// setPageCount(totalPages);
console.log('======= SETTING ROWS =======', rows);
setRows(rows);
});
} else {
setRows([]);
setPageCount(totalPages);
}
},
[dataset, currentPage, showEmbeddings, sae_id]
[dataset, page, showEmbeddings, sae_id]
);

const formattedColumns = useMemo(() => {
Expand Down Expand Up @@ -351,7 +312,7 @@ function FilterDataTable({
useEffect(() => {
const indicesToUse = indices.filter((i) => !deletedIndices.includes(i));
hydrateIndices(indicesToUse);
}, [indices, currentPage]);
}, [indices, page]);

const [columnFilters, setColumnFilters] = useState([]);
const [globalFilter, setGlobalFilter] = useState('');
Expand Down Expand Up @@ -469,28 +430,22 @@ function FilterDataTable({
</div>
{showNavigation && indices.length > 0 && (
<div className="filter-data-table-page-controls">
<button onClick={() => setCurrentPage(0)} disabled={currentPage === 0}>
<button onClick={() => setPage(0)} disabled={page === 0}>
First
</button>
<button
onClick={() => setCurrentPage((old) => Math.max(0, old - 1))}
disabled={currentPage === 0}
>
<button onClick={() => setPage((old) => Math.max(0, old - 1))} disabled={page === 0}>
←
</button>
<span>
Page {currentPage + 1} of {pageCount || 1}
Page {page + 1} of {pageCount || 1}
</span>
<button
onClick={() => setCurrentPage((old) => Math.min(pageCount - 1, old + 1))}
disabled={currentPage === pageCount - 1}
onClick={() => setPage((old) => Math.min(pageCount - 1, old + 1))}
disabled={page === pageCount - 1}
>
→
</button>
<button
onClick={() => setCurrentPage(pageCount - 1)}
disabled={currentPage === pageCount - 1}
>
<button onClick={() => setPage(pageCount - 1)} disabled={page === pageCount - 1}>
Last
</button>
</div>
Expand Down
38 changes: 31 additions & 7 deletions web/src/pages/FullScreenExplore.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,14 @@ import SubNav from '../components/SubNav';
import LeftPane from '../components/Explore/LeftPane';
import VisualizationPane from '../components/Explore/VisualizationPane';
import FilterDataTable from '../components/FilterDataTable';
import useColumnFilter from '../hooks/useColumnFilter';

export const SEARCH = 'search';
export const FILTER = 'filter';
export const SELECT = 'select';
export const COLUMN = 'column';

export const PER_PAGE = 100;

function Explore() {
const { dataset: datasetId, scope: scopeId } = useParams();
const navigate = useNavigate();
Expand Down Expand Up @@ -107,17 +108,37 @@ function Explore() {
[dataset, datasetId]
);

// the indices to show in the table when no other filters are active.
const [defaultIndices, setDefaultIndices] = useState([]);

// the indices to show in the table when other filters are active.
const [filteredIndices, setFilteredIndices] = useState([]);

// ====================================================================================================
// Default rows logic.
// ====================================================================================================
// Contains state for the default rows that are shown in the table when the page loads.
// These are the rows that are shown when there are no filters active.
// ====================================================================================================
const [page, setPage] = useState(0);
const [pageCount, setPageCount] = useState(0);

const PER_PAGE = 100;

const [defaultIndices, setDefaultIndices] = useState([]);
// Update defaultIndices when scopeRows changes
useEffect(() => {
if (scopeRows?.length) {
const start = page * PER_PAGE;
const end = start + PER_PAGE;
const indexes = scopeRows
.filter((row) => !deletedIndices.includes(row.ls_index))
.slice(start, end)
.map((row) => row.ls_index);
setDefaultIndices(indexes);

// get the total number of pages available
setPageCount(Math.ceil(scopeRows.length / PER_PAGE));
console.log('==== PAGE COUNT ====', pageCount);
}
}, [scopeRows]);

// ====================================================================================================
// Scatterplot related logic
Expand Down Expand Up @@ -209,8 +230,6 @@ function Explore() {
setFilteredIndices(selectedIndices);
};

const [filteredIndices, setFilteredIndices] = useState(defaultIndices);

// ====================================================================================================
// NN Search
// ====================================================================================================
Expand Down Expand Up @@ -506,10 +525,12 @@ function Explore() {
display: 'flex',
}}
>
{/* FilterDataTable renders rows by default if filteredIndices is empty */}
<FilterDataTable
dataset={dataset}
scope={scope}
indices={filteredIndices}
scopeRows={scopeRows}
indices={filteredIndices.length ? filteredIndices : defaultIndices}
deletedIndices={deletedIndices}
distances={distances}
clusterMap={clusterMap}
Expand All @@ -524,6 +545,9 @@ function Explore() {
}}
onHover={handleHover}
onClick={handleClicked}
page={page}
setPage={setPage}
totalPages={pageCount}
/>
</div>
</div>
Expand Down

0 comments on commit 81f792f

Please sign in to comment.