Merge pull request #261 from Renumics/feature/always-show-lenses-in-i…

…nspector Feature/always show lenses in inspector
Renumics · Oct 9, 2023 · 1ae2a45 · 1ae2a45
2 parents 8eb4e90 + 55a9aeb
commit 1ae2a45
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 107 deletions.
diff --git 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>('tableView', 'full');
     const [visibleColumns, setVisibleColumns] = useWidgetConfig<string[]>(

diff --git 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<Props> = ({
     style,
@@ -49,7 +49,7 @@ const Cell: FunctionComponent<Props> = ({
     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
@@ -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<VariableSizeGrid>(null);
     const header = useRef<HeaderRef>(null);
-    const { rowIndices } = useContext(DataContext);
     const scrollLeft = useRef<number>();
     const scrollTop = useRef<number>();
     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
@@ -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 (
         <StoreProvider>
-            <DataProvider>
-                <DataContext.Consumer>
-                    {() => (
-                        <WidgetContainer>
-                            <MenuBar
+            <WidgetContainer>
+                <MenuBar
+                    visibleColumnsCount={visibleColumnsCount}
+                    setVisibleColumnsCount={setVisibleColumnsCount}
+                    visibleColumnsCountOptions={COLUMN_COUNT_OPTIONS}
+                />
+
+                <WidgetContent>
+                    <AutoSizer>
+                        {({ width, height }) => (
+                            <DetailsGrid
+                                width={width}
+                                height={height}
                                 visibleColumnsCount={visibleColumnsCount}
-                                setVisibleColumnsCount={setVisibleColumnsCount}
-                                visibleColumnsCountOptions={COLUMN_COUNT_OPTIONS}
                             />
-
-                            <WidgetContent>
-                                <AutoSizer>
-                                    {({ width, height }) => (
-                                        <DetailsGrid
-                                            width={width}
-                                            height={height}
-                                            visibleColumnsCount={visibleColumnsCount}
-                                        />
-                                    )}
-                                </AutoSizer>
-                            </WidgetContent>
-                        </WidgetContainer>
-                    )}
-                </DataContext.Consumer>
-            </DataProvider>
+                        )}
+                    </AutoSizer>
+                </WidgetContent>
+            </WidgetContainer>
         </StoreProvider>
     );
 };

diff --git a/src/widgets/Inspector/dataContext.tsx b/src/widgets/Inspector/dataContext.tsx
diff --git 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) =>