From ad015e3437fec558ffd44d867ffb3c3fd9d98dd7 Mon Sep 17 00:00:00 2001 From: Dominik Haentsch Date: Mon, 9 Oct 2023 13:23:09 +0200 Subject: [PATCH 1/2] always show columns in inspector and table --- src/widgets/DataGrid/DataGrid.tsx | 14 +++++++------- src/widgets/Inspector/store.tsx | 6 +++++- 2 files changed, 12 insertions(+), 8 deletions(-) diff --git a/src/widgets/DataGrid/DataGrid.tsx b/src/widgets/DataGrid/DataGrid.tsx index 098d4e93..f95baea2 100644 --- a/src/widgets/DataGrid/DataGrid.tsx +++ b/src/widgets/DataGrid/DataGrid.tsx @@ -35,13 +35,13 @@ const DataGrid: Widget = () => { const [scrollbarWidth] = getScrollbarSize(); - const defaultVisibleColumnKeys = useMemo( - () => - allColumns - .filter((column) => columnVisibleByDefault(column)) - .map(({ key }) => key), - [allColumns] - ); + const defaultVisibleColumnKeys = useMemo(() => { + const visibleColumnKeys = allColumns + .filter((column) => columnVisibleByDefault(column)) + .map(({ key }) => key); + if (visibleColumnKeys.length) return visibleColumnKeys; + return allColumns.filter((col) => !col.hidden).map(({ key }) => key); + }, [allColumns]); const [tableView, setTableView] = useWidgetConfig('tableView', 'full'); const [visibleColumns, setVisibleColumns] = useWidgetConfig( diff --git a/src/widgets/Inspector/store.tsx b/src/widgets/Inspector/store.tsx index 4b3af284..75e33b8b 100644 --- a/src/widgets/Inspector/store.tsx +++ b/src/widgets/Inspector/store.tsx @@ -64,7 +64,11 @@ const StoreProvider = ({ children }: ProviderProps): JSX.Element => { const allColumns = useDataset((d) => d.columns); const lenses = useComponentsStore((d) => d.lensesByKey); const defaultLenses = useMemo(() => { - const defaultColumns = allColumns.filter((c) => c.type.binary && !c.hidden); + const visibleColumns = allColumns.filter( + (c) => !c.hidden && c.type.kind !== 'Embedding' + ); + const binaryColumns = visibleColumns.filter((c) => c.type.binary); + const defaultColumns = binaryColumns.length ? binaryColumns : visibleColumns; return _.compact( defaultColumns.map((column) => { const lens = Object.values(lenses).filter((lens) => From 55a9aeb0ab51fa70843047e5323f638111c30af7 Mon Sep 17 00:00:00 2001 From: Dominik Haentsch Date: Mon, 9 Oct 2023 13:30:41 +0200 Subject: [PATCH 2/2] remove legacy dataContext from Inspector --- src/widgets/Inspector/DetailCell.tsx | 4 +- src/widgets/Inspector/DetailsGrid.tsx | 5 +- src/widgets/Inspector/Inspector.tsx | 41 +++++++--------- src/widgets/Inspector/dataContext.tsx | 70 --------------------------- 4 files changed, 21 insertions(+), 99 deletions(-) delete mode 100644 src/widgets/Inspector/dataContext.tsx diff --git a/src/widgets/Inspector/DetailCell.tsx b/src/widgets/Inspector/DetailCell.tsx index 4d2e838a..8cbdc4ca 100644 --- a/src/widgets/Inspector/DetailCell.tsx +++ b/src/widgets/Inspector/DetailCell.tsx @@ -5,7 +5,6 @@ import type { GridChildComponentProps as CellProps } from 'react-window'; import { Dataset, useDataset } from '../../stores/dataset'; import tw, { styled } from 'twin.macro'; import { shallow } from 'zustand/shallow'; -import { DataContext } from './dataContext'; import { useStore } from './store'; type Props = CellProps; @@ -41,6 +40,7 @@ const areEqualIgnoreScrollStart = ( }; const columnsSelector = (d: Dataset) => d.columns; +const selectedIndicesSelector = (d: Dataset) => d.selectedIndices; const Cell: FunctionComponent = ({ style, @@ -49,7 +49,7 @@ const Cell: FunctionComponent = ({ rowIndex: dataColumnIndex, }) => { const view = useStore((state) => state.views[dataColumnIndex]); - const { rowIndices } = useContext(DataContext); + const rowIndices = useDataset(selectedIndicesSelector); const allColumns = useDataset(columnsSelector); const columns = useMemo( () => allColumns.filter((c) => view.columns.includes(c.key)), diff --git a/src/widgets/Inspector/DetailsGrid.tsx b/src/widgets/Inspector/DetailsGrid.tsx index 50881236..8b240c83 100644 --- a/src/widgets/Inspector/DetailsGrid.tsx +++ b/src/widgets/Inspector/DetailsGrid.tsx @@ -2,7 +2,6 @@ import { FunctionComponent, KeyboardEvent, useCallback, - useContext, useEffect, useMemo, useRef, @@ -12,7 +11,6 @@ import type { GridOnScrollProps, ListOnScrollProps } from 'react-window'; import { Dataset, useDataset } from '../../stores/dataset'; import tw from 'twin.macro'; import getScrollbarSize from '../../browser'; -import { DataContext } from './dataContext'; import Header, { Ref as HeaderRef } from './Header'; import RowHeightContext from './rowHeightContext'; import { State as StoreState, useStore } from './store'; @@ -29,6 +27,7 @@ const DetailsGridWrapper = tw.div`flex`; const viewsSelector = (state: StoreState) => state.views; const focusedRowSelector = (d: Dataset) => d.lastFocusedRow; const rowCountSelector = (d: Dataset) => d.length; +const selectedIndicesSelector = (d: Dataset) => d.selectedIndices; const DetailsGrid: FunctionComponent<{ width: number; @@ -38,7 +37,6 @@ const DetailsGrid: FunctionComponent<{ const [scrollbarWidth] = getScrollbarSize(); const detailsGrid = useRef(null); const header = useRef(null); - const { rowIndices } = useContext(DataContext); const scrollLeft = useRef(); const scrollTop = useRef(); const mouseDown = useRef(false); @@ -48,6 +46,7 @@ const DetailsGrid: FunctionComponent<{ const views = useStore(viewsSelector); const focusedRow = useDataset(focusedRowSelector); const rowCount = useDataset(rowCountSelector); + const rowIndices = useDataset(selectedIndicesSelector); const [columnCount, columnWidth] = useMemo(() => { let visibleCount: number = visibleColumnsCount; diff --git a/src/widgets/Inspector/Inspector.tsx b/src/widgets/Inspector/Inspector.tsx index 267fff7e..464f81e7 100644 --- a/src/widgets/Inspector/Inspector.tsx +++ b/src/widgets/Inspector/Inspector.tsx @@ -3,7 +3,6 @@ import DetailsIcon from '../../icons/ClipboardList'; import AutoSizer from 'react-virtualized-auto-sizer'; import { Widget } from '../types'; import useWidgetConfig from '../useWidgetConfig'; -import { DataContext, DataProvider } from './dataContext'; import DetailsGrid, { COLUMN_COUNT_OPTIONS } from './DetailsGrid'; import MenuBar from './MenuBar'; import { StoreProvider } from './store'; @@ -16,31 +15,25 @@ const Inspector: Widget = () => { ); return ( - - - {() => ( - - + + + + + {({ width, height }) => ( + - - - - {({ width, height }) => ( - - )} - - - - )} - - + )} + + + ); }; diff --git a/src/widgets/Inspector/dataContext.tsx b/src/widgets/Inspector/dataContext.tsx deleted file mode 100644 index 033d9d3f..00000000 --- a/src/widgets/Inspector/dataContext.tsx +++ /dev/null @@ -1,70 +0,0 @@ -import * as React from 'react'; -import { FunctionComponent, useEffect, useMemo, useState } from 'react'; -import { Dataset, useDataset } from '../../stores/dataset'; -import { DataColumn, IndexArray } from '../../types'; - -type ColumnContextState = { - columns: DataColumn[]; - columnVisibilities: Map; - setColumnVisibilities: React.Dispatch>>; - rowIndices: IndexArray; -}; - -export const DataContext = React.createContext({ - columns: [], - columnVisibilities: new Map(), - setColumnVisibilities: () => null, - rowIndices: new Int32Array(), -}); - -const columnsSelector = (d: Dataset) => d.columns; -const selectedIndicesSelector = (d: Dataset) => d.selectedIndices; - -// column types that should be visible by default -const columnVisibleByDefault = (column: DataColumn) => - ['Mesh', 'Sequence1D', 'Image'].includes(column.type.kind); - -export const DataProvider: FunctionComponent<{ children: React.ReactNode }> = ({ - children, -}) => { - const columns = useDataset(columnsSelector); - const rowIndices = useDataset(selectedIndicesSelector); - - // store a map from column names to visibilities to enable the selection of visible columns - const [columnVisibilities, setColumnVisibilities] = useState( - new Map() - ); - - // update visible columns if the dataset's columns change - useEffect(() => { - setColumnVisibilities((previousVisibilities) => { - const newVisibilities = new Map(previousVisibilities); - columns.forEach((column) => - newVisibilities.set( - column.key, - newVisibilities.get(column.key) ?? columnVisibleByDefault(column) - ) - ); - return newVisibilities; - }); - }, [columns]); - - // prepare visible rows and columns for easy access in jsx - const visibleColumns = useMemo( - () => columns.filter((column) => columnVisibilities.get(column.key)), - [columns, columnVisibilities] - ); - - return ( - - {children} - - ); -};