this commit is OLD, been on my pc for months

package.json

@@ -50,9 +50,7 @@
     "react-hotkeys-hook": "^3.4.4",
     "react-router-dom": "^5.2.0",
     "react-spline": "^1.2.1",
-    "react-virtualized": "^9.22.3",
-    "react-virtualized-auto-sizer": "^1.0.6",
-    "react-window": "^1.8.6",
+    "react-virtuoso": "^2.2.6",
     "rooks": "^5.7.1",
     "tailwindcss": "^2.2.16",
     "vite": "^2.4.4",

src-tauri/Cargo.lock

@@ -4115,9 +4115,9 @@ dependencies = [
 
 [[package]]
 name = "swift-rs"
-version = "0.1.0"
+version = "0.2.2"
 source = "registry+https://github.com/rust-lang/crates.io-index"
-checksum = "4e56047444883f07ced9a621d23c8af8c7a3bbdafc16e02e00f4799943002e20"
+checksum = "429fcb93ca0ca9c60efba60a7f842254781c60d3e006f716c731e9901094c87e"
 dependencies = [
  "base64",
  "serde",

src-tauri/Cargo.toml

@@ -11,7 +11,7 @@ build = "src/build.rs"
 
 [build-dependencies]
 tauri-build = { version = "1.0.0-beta.3" }
-swift-rs = "0.1.0"
+swift-rs = "0.2.2"
 
 [dependencies]
 tauri = { version = "1.0.0-beta.8", features = ["api-all"] }
@@ -44,7 +44,7 @@ log = "0.4.14"
 objc = "0.2.7"
 cocoa = "0.24.0"
 objc-foundation = "0.1.1"
-swift-rs = "0.1.0"
+swift-rs = "0.2.2"
 base64 = "0.13.0"
 
 [features]

src-tauri/src/commands.rs

@@ -68,12 +68,13 @@ pub fn get_mounts() -> Result<Vec<swift::Mount>, String> {
   Ok(swift::get_mounts().unwrap())
 }
 
-#[tauri::command]
+#[tauri::command(async)]
 pub async fn get_thumbs_for_directory(window: tauri::Window, path: &str) -> Result<(), String> {
   let config = config::get_config();
   let dir = filesystem::retrieve::get_dir_with_contents(&path).await?;
+  // iterate over directory contents
   for file in dir.contents.into_iter() {
-    // let now = Instant::now();
+    let now = Instant::now();
     let icon_name = format!(
       "{}.png",
       if file.is_dir {
@@ -82,17 +83,21 @@ pub async fn get_thumbs_for_directory(window: tauri::Window, path: &str) -> Resu
         file.extension
       }
     );
-
     let icon_path = config.file_type_thumb_dir.join(icon_name);
-
+    // extract metadata from file
     let existing = fs::metadata(&icon_path).is_ok();
-
+    // write thumbnail only if
     if !existing {
+      // call swift to get thumbnail data
       let thumbnail_b64 = get_file_thumbnail_base64(&file.uri).to_string();
-      fs::write(&icon_path, base64::decode(thumbnail_b64).unwrap()).expect("Unable to write file")
+      fs::write(
+        &icon_path,
+        base64::decode(thumbnail_b64).unwrap_or_default(),
+      )
+      .map_err(|_| "thumb_cache_failure")?;
     }
+    println!("cached thumb {:?} in {:?}", file.id, now.elapsed());
 
-    // println!("got thumb {:?} in {:?}", file.id, now.elapsed());
     if !existing {
       reply(
         &window,

src-tauri/src/jobs/job.rs

@@ -0,0 +1,28 @@
+use serde::{Deserialize, Serialize};
+
+#[derive(Serialize, Deserialize)]
+pub enum Action {
+  SCAN_DIR,
+  ENCRYPT_FILE,
+  UPLOAD_FILE,
+}
+
+// A job is triggered by a user interaction or schedule
+#[derive(Serialize, Deserialize)]
+pub struct Job {
+  pub id: String,
+  pub client_id: String,
+  pub storage_device_id: Option<String>,
+  pub uri: Option<String>,
+  pub action: Action,
+  pub status: String,
+  pub complete: bool,
+}
+
+// // A task is a way to track the completion of a portion of a job
+// // usually specific
+// #[derive(Serialize, Deserialize)]
+// pub struct Task {
+//   pub id: String,
+//   pub job_id: String,
+// }

src-tauri/src/jobs/mod.rs

@@ -0,0 +1 @@
+pub mod jobs;

src-tauri/swift-lib/Package.resolved

@@ -6,8 +6,8 @@
         "repositoryURL": "https://github.com/Brendonovich/swift-rs",
         "state": {
           "branch": null,
-          "revision": "196359dfb25a9520d534655c1321150e36c1b1dd",
-          "version": "0.1.0"
+          "revision": "11185f93d4a2d889390538676aba8c1b64981964",
+          "version": "0.2.2"
         }
       }
     ]

src-tauri/swift-lib/Package.swift

@@ -18,7 +18,7 @@ let package = Package(
     dependencies: [
         // Dependencies declare other packages that this package depends on.
         // .package(url: /* package url */, from: "1.0.0"),
-        .package(name: "SwiftRs", url: "https://github.com/Brendonovich/swift-rs", from: "0.1.0")
+        .package(name: "SwiftRs", url: "https://github.com/Brendonovich/swift-rs", from: "0.2.2")
     ],
     targets: [
         // Targets are the basic building blocks of a package. A target can define a module or a test suite.

src/App.tsx

@@ -8,13 +8,15 @@ import { ExplorerScreen } from './screens/Explorer';
 import { invoke } from '@tauri-apps/api';
 import { DebugGlobalStore } from './Debug';
 import { useGlobalEvents } from './hooks/useGlobalEvents';
-import { AppState, useAppState } from './store/app';
+import { AppState, useAppState } from './store/global';
 import { Modal } from './components/layout/Modal';
 import { useKey, useKeyBindings } from 'rooks';
 // import { useHotkeys } from 'react-hotkeys-hook';
 import { ErrorBoundary, FallbackProps } from 'react-error-boundary';
 import { Button } from './components/primative';
 import { useLocationStore, Location } from './store/locations';
+import { OverviewScreen } from './screens/Overview';
+import { SpacesScreen } from './screens/Spaces';
 
 function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
@@ -69,6 +71,12 @@ export default function App() {
                 <Route exact path="/">
                   <Redirect to="/explorer" />
                 </Route>
+                <Route path="/overview">
+                  <OverviewScreen />
+                </Route>
+                <Route path="/spaces">
+                  <SpacesScreen />
+                </Route>
                 <Route path="/explorer">
                   <ExplorerScreen />
                 </Route>

src/Debug.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useAppState } from './store/app';
+import { useAppState } from './store/global';
 import { useExplorerStore } from './store/explorer';
 
 export function DebugGlobalStore() {

src/components/file/FileList.tsx

@@ -4,12 +4,12 @@ import { convertFileSrc } from '@tauri-apps/api/tauri';
 import clsx from 'clsx';
 import byteSize from 'pretty-bytes';
 import React, { forwardRef, useEffect, useMemo, useRef } from 'react';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { FixedSizeList as List } from 'react-window';
+import { Virtuoso, VirtuosoHandle } from 'react-virtuoso';
+
 import { useKey, useWindowSize } from 'rooks';
 import { DirectoryResponse } from '../../screens/Explorer';
 // import { List, ListRowRenderer } from 'react-virtualized';
-import { useAppState } from '../../store/app';
+import { useAppState } from '../../store/global';
 import {
   useCurrentDir,
   useExplorerStore,
@@ -43,7 +43,7 @@ type ColumnKey = typeof columns[number]['key'];
 
 export const FileList: React.FC<{}> = (props) => {
   const tableContainer = useRef<null | HTMLDivElement>(null);
-  const VList = useRef<null | List>(null);
+  const VList = useRef<null | VirtuosoHandle>(null);
   const currentDir = useCurrentDir();
 
   // useOnWindowResize((e) => {
@@ -56,7 +56,8 @@ export const FileList: React.FC<{}> = (props) => {
 
   const seletedRowIndex = useSelectedFileIndex(currentDir?.id as number);
   useEffect(() => {
-    if (seletedRowIndex != null) VList.current?.scrollToItem(seletedRowIndex);
+    // VList.current?.scrollIntoView()
+    if (seletedRowIndex != null) VList.current?.scrollIntoView({ index: seletedRowIndex });
   }, [seletedRowIndex]);
 
   useKey('ArrowUp', (e) => {
@@ -71,47 +72,32 @@ export const FileList: React.FC<{}> = (props) => {
       explorer.selectFile(explorer.currentDir as number, explorer.selectedFile.id, 'below');
   });
 
-  const listInnerElement = forwardRef<HTMLDivElement, { style: any }>(({ style, ...rest }, ref) => (
-    <div
-      ref={ref}
-      style={{
-        ...style,
-        height: `${parseFloat(style.height) + PADDING_SIZE * 2}px`
-      }}
-      {...rest}
-      className="jeff"
-    >
-      <div>
-        <h1 className="p-2 mt-12 ml-3 font-bold text-xl">{currentDir?.name}</h1>
-        <div className="table-head">
-          <div className="table-head-row flex flex-row p-2">
-            {columns.map((col) => (
-              <div
-                key={col.key}
-                className="table-head-cell flex flex-row items-center relative group px-4"
-                style={{ width: col.width }}
-              >
-                <DotsVerticalIcon className="hidden absolute group-hover:block drag-handle w-5 h-5 opacity-10 -ml-5 cursor-move" />
-                <span className="text-sm text-gray-500 font-medium">{col.column}</span>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-      {rest.children}
-    </div>
-  ));
-
-  const Row = ({ index, key, style }: any) => {
+  const Row = (index: number) => {
     const row = currentDir?.children?.[index] as IFile;
 
-    return (
-      <div key={key} style={{ ...style, top: `${parseFloat(style.top) + PADDING_SIZE}px` }}>
-        <RenderRow key={key} row={row} rowIndex={index} dirId={currentDir?.id as number} />
-      </div>
-    );
+    return <RenderRow key={index} row={row} rowIndex={index} dirId={currentDir?.id as number} />;
   };
 
+  const Header = () => (
+    <div>
+      <h1 className="p-2 mt-10 ml-1 font-bold text-xl">{currentDir?.name}</h1>
+      <div className="table-head">
+        <div className="table-head-row flex flex-row p-2">
+          {columns.map((col) => (
+            <div
+              key={col.key}
+              className="table-head-cell flex flex-row items-center relative group pl-2"
+              style={{ width: col.width }}
+            >
+              <DotsVerticalIcon className="hidden absolute group-hover:block drag-handle w-5 h-5 opacity-10 -ml-5 cursor-move" />
+              <span className="text-sm text-gray-500 font-medium">{col.column}</span>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+
   return useMemo(
     () => (
       <div
@@ -119,22 +105,15 @@ export const FileList: React.FC<{}> = (props) => {
         style={{ marginTop: -44 }}
         className="table-container  w-full h-full bg-white dark:bg-gray-900 p-3 cursor-default"
       >
-        <AutoSizer>
-          {({ width, height }) => (
-            <List
-              ref={VList}
-              innerElementType={listInnerElement}
-              width={width}
-              height={height}
-              overscanCount={5}
-              itemSize={40}
-              itemCount={currentDir?.children_count || 0}
-              className="table-body pb-10 outline-none"
-            >
-              {Row}
-            </List>
-          )}
-        </AutoSizer>
+        <Virtuoso
+          data={currentDir?.children}
+          ref={VList}
+          // style={{ height: '400px' }}
+          totalCount={currentDir?.children_count || 0}
+          itemContent={Row}
+          components={{ Header }}
+          className="table-body pb-10 outline-none"
+        />
       </div>
     ),
     [size.innerWidth, currentDir?.id, tableContainer.current]

src/components/file/Inspector.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useExplorerStore, useSelectedFile } from '../../store/explorer';
 import { Transition } from '@headlessui/react';
 import { IFile } from '../../types';
-import { useAppState } from '../../store/app';
+import { useAppState } from '../../store/global';
 import { convertFileSrc } from '@tauri-apps/api/tauri';
 import moment from 'moment';
 import { Button } from '../primative';

src/components/file/Sidebar.tsx

@@ -67,16 +67,13 @@ const Heading: React.FC<{}> = ({ children }) => (
 
 export const Sidebar: React.FC<SidebarProps> = (props) => {
   const locations = useLocations();
-
-  console.log({ locations });
-
   return (
-    <div className="w-46 flex flex-col flex-wrap flex-shrink-0 min-h-full bg-gray-50 dark:bg-gray-650  border-gray-100 border-r dark:border-gray-600 px-3 space-y-0.5">
+    <div className="w-46 flex flex-col flex-wrap flex-shrink-0 min-h-full bg-gray-50 dark:bg-gray-650 !bg-opacity-60  border-gray-100 border-r dark:border-gray-600 px-3 space-y-0.5">
       <Dropdown
         buttonProps={{
           justifyLeft: true,
           className:
-            'mb-1 !bg-gray-50 border-gray-150 hover:!bg-gray-100 flex-shrink-0 w-[175px] dark:!bg-gray-600 dark:hover:!bg-gray-550 dark:!border-gray-550 dark:hover:!border-gray-500',
+            'mb-1 !bg-gray-50 border-gray-150 hover:!bg-gray-1000 flex-shrink-0 w-[175px] dark:!bg-gray-600 dark:hover:!bg-gray-550 dark:!border-gray-550 dark:hover:!border-gray-500',
           variant: 'gray'
         }}
         // buttonIcon={<Book weight="bold" className="w-4 h-4 mt-0.5 mr-1" />}
@@ -91,6 +88,10 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
       />
 
       <div>
+        <SidebarLink to="/overview">
+          <Icon component={Planet} />
+          Overview
+        </SidebarLink>
         <SidebarLink to="/spaces">
           <Icon component={CirclesFour} />
           Spaces
@@ -117,9 +118,9 @@ export const Sidebar: React.FC<SidebarProps> = (props) => {
                   <Button
                     noBorder
                     size="sm"
-                    className="w-7 h-7 top-0 right-0 absolute group-hover:bg-gray-600 hover:!bg-gray-550 transition-none items-center !rounded-l-none"
+                    className="w-7 h-7 top-0 right-0 absolute !bg-transparent group-hover:bg-gray-600 dark:hover:!bg-gray-550 !transition-none items-center !rounded-l-none"
                   >
-                    <Icon className="w-3 h-3 mr-0" component={EjectSimple} />
+                    <Icon className="w-3 h-3 mr-0 " component={EjectSimple} />
                   </Button>
                 )}
               </SidebarLink>

src/components/layout/TopBar.tsx

@@ -1,15 +1,4 @@
-import {
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  CogIcon,
-  HomeIcon,
-  ViewBoardsIcon,
-  ViewGridIcon,
-  ViewListIcon,
-  CloudIcon,
-  FolderAddIcon,
-  TagIcon
-} from '@heroicons/react/outline';
+import { ChevronLeftIcon, ChevronRightIcon, CogIcon } from '@heroicons/react/outline';
 import clsx from 'clsx';
 import {
   ArrowsLeftRight,
@@ -29,6 +18,7 @@ import { Button, ButtonProps, Input } from '../primative';
 import { Shortcut } from '../primative/Shortcut';
 import { DefaultProps } from '../primative/types';
 import { appWindow } from '@tauri-apps/api/window';
+import { HeartIcon } from '@heroicons/react/solid';
 
 export interface TopBarProps extends DefaultProps {}
 export interface TopBarButtonProps extends ButtonProps {
@@ -44,7 +34,7 @@ const TopBarButton: React.FC<TopBarButtonProps> = ({ icon: Icon, ...props }) =>
     <button
       {...props}
       className={clsx(
-        'mr-[1px] py-0.5 px-0.5 text-md font-medium hover:bg-gray-150 dark:bg-gray-650 dark:hover:bg-gray-600 dark:active:bg-gray-500 rounded-md transition-colors duration-100',
+        'mr-[1px] py-0.5 px-0.5 text-md font-medium hover:bg-gray-150 dark:transparent dark:hover:bg-gray-600 dark:active:bg-gray-500 rounded-md transition-colors duration-100',
         {
           'rounded-r-none rounded-l-none': props.group && !props.left && !props.right,
           'rounded-r-none': props.group && props.left,
@@ -65,9 +55,9 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
     <>
       <div
         data-tauri-drag-region
-        className="flex z-50 blur-rr !bg-opacity-70 flex-shrink-0 h-[2.95rem] -mt-0.5 max-w items-center border-b bg-gray-50 dark:bg-gray-650 border-gray-100 dark:border-gray-600 shadow-sm"
+        className="flex h-[2.95rem] -mt-0.5 max-w z-50 rounded-t-2xl flex-shrink-0 items-center border-b bg-gray-50 dark:bg-gray-650 border-gray-100 dark:border-gray-600 !bg-opacity-60 backdrop-blur shadow-sm"
       >
-        <div className="mr-32 ml-1 ">
+        <div className="mr-32 ml-1">
           <TrafficLights
             onClose={appWindow.close}
             onFullscreen={appWindow.maximize}
@@ -75,7 +65,6 @@ export const TopBar: React.FC<TopBarProps> = (props) => {
             className="p-1.5"
           />
         </div>
-
         <TopBarButton icon={ChevronLeftIcon} onClick={goBack} />
         <TopBarButton icon={ChevronRightIcon} />
         {/* <div className="flex mx-8 space-x-[1px]">

src/screens/Overview.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+interface StatItemProps {
+  name: string;
+  value: string;
+  unit: string;
+}
+
+const StatItem: React.FC<StatItemProps> = (props) => {
+  return (
+    <div className="flex flex-col p-4 rounded-md dark:bg-gray-800 mt-2">
+      <span className="text-gray-400 text-sm">{props.name}</span>
+      <span className="font-bold text-2xl">
+        {props.value}
+        <span className="text-sm text-gray-400 ml-1">{props.unit}</span>
+      </span>
+    </div>
+  );
+};
+
+export const OverviewScreen: React.FC<{}> = (props) => {
+  return (
+    <div className="flex flex-col w-full h-full bg-white dark:bg-gray-900 p-5">
+      <h1 className=" font-bold text-xl">Jamie's Library</h1>
+      <div className="flex flex-wrap space-x-2 mt-3">
+        <StatItem name="Total capacity" value="26.5" unit="TB" />
+        <StatItem name="Index size" value="103" unit="MB" />
+        <StatItem name="Preview media" value="23.5" unit="GB" />
+        <StatItem name="Free space" value="9.2" unit="TB" />
+
+        <StatItem name="Total at-risk" value="1.5" unit="TB" />
+        <StatItem name="Total backed up" value="25.3" unit="TB" />
+      </div>
+    </div>
+  );
+};

src/screens/Spaces.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const SpacesScreen: React.FC<{}> = (props) => {
+  return (
+    <div className="flex flex-col w-full h-full bg-white dark:bg-gray-900 p-5">
+      <h1 className=" font-bold text-xl">Spaces</h1>
+    </div>
+  );
+};

src/style.css

@@ -7,8 +7,9 @@ button {
   @apply cursor-default;
 }
 
-.blur-rr {
-  -webkit-backdrop-filter: blur(10px);
+.backdrop-blur {
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
 }
 /* 
 .table-container {

yarn-error.log

@@ -1,5 +1,5 @@
 Arguments: 
-  /usr/local/bin/node /usr/local/Cellar/yarn/1.22.5/libexec/bin/yarn.js add react-virtualized-auto-size
+  /usr/local/bin/node /usr/local/Cellar/yarn/1.22.5/libexec/bin/yarn.js add @types/af-virtual-scroll -D
 
 PATH: 
   /Users/jamie/Library/Android/sdk/tools:/Users/jamie/Library/Android/sdk/platform-tools:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/usr/local/go/bin:/Library/Apple/usr/bin:/Users/jamie/.cargo/bin
@@ -14,7 +14,7 @@ Platform:
   darwin x64
 
 Trace: 
-  Error: https://registry.yarnpkg.com/react-virtualized-auto-size: Not found
+  Error: https://registry.yarnpkg.com/@types%2faf-virtual-scroll: Not found
       at Request.params.callback [as _callback] (/usr/local/Cellar/yarn/1.22.5/libexec/lib/cli.js:66988:18)
       at Request.self.callback (/usr/local/Cellar/yarn/1.22.5/libexec/lib/cli.js:140749:22)
       at Request.emit (events.js:315:20)
@@ -40,6 +40,8 @@ npm manifest:
       "@types/react": "^17.0.18",
       "@types/react-dom": "^17.0.9",
       "@types/react-router-dom": "^5.3.1",
+      "@types/react-virtualized-auto-sizer": "^1.0.1",
+      "@types/react-window": "^1.8.5",
       "@types/tailwindcss": "^2.2.1",
       "concurrently": "^6.2.1",
       "prettier": "^2.3.2",
@@ -63,6 +65,7 @@ npm manifest:
       "@types/react-table": "^7.7.6",
       "@types/react-virtualized": "^9.21.14",
       "@vitejs/plugin-react-refresh": "^1.3.6",
+      "af-virtual-scroll": "^2.9.9",
       "autoprefixer": "^9",
       "byte-size": "^8.1.0",
       "clsx": "^1.1.1",
@@ -78,6 +81,7 @@ npm manifest:
       "react-router-dom": "^5.2.0",
       "react-spline": "^1.2.1",
       "react-virtualized": "^9.22.3",
+      "react-virtualized-auto-sizer": "^1.0.6",
       "react-window": "^1.8.6",
       "rooks": "^5.7.1",
       "tailwindcss": "^2.2.16",
@@ -603,6 +607,13 @@ Lockfile:
     dependencies:
       "@types/react" "*"
   
+  "@types/react-virtualized-auto-sizer@^1.0.1":
+    version "1.0.1"
+    resolved "https://registry.yarnpkg.com/@types/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.1.tgz#b3187dae1dfc4c15880c9cfc5b45f2719ea6ebd4"
+    integrity sha512-GH8sAnBEM5GV9LTeiz56r4ZhMOUSrP43tAQNSRVxNexDjcNKLCEtnxusAItg1owFUFE6k0NslV26gqVClVvong==
+    dependencies:
+      "@types/react" "*"
+  
   "@types/react-virtualized@^9.21.14":
     version "9.21.14"
     resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.14.tgz#8d465aa54386a7bebc7b61f71afc588bb800b868"
@@ -611,6 +622,13 @@ Lockfile:
       "@types/prop-types" "*"
       "@types/react" "*"
   
+  "@types/react-window@^1.8.5":
+    version "1.8.5"
+    resolved "https://registry.yarnpkg.com/@types/react-window/-/react-window-1.8.5.tgz#285fcc5cea703eef78d90f499e1457e9b5c02fc1"
+    integrity sha512-V9q3CvhC9Jk9bWBOysPGaWy/Z0lxYcTXLtLipkt2cnRj1JOSFNF7wqGpkScSXMgBwC+fnVRg/7shwgddBG5ICw==
+    dependencies:
+      "@types/react" "*"
+  
   "@types/react@*", "@types/react@^17.0.18":
     version "17.0.18"
     resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.18.tgz#4109cbbd901be9582e5e39e3d77acd7b66bb7fbe"
@@ -693,6 +711,13 @@ Lockfile:
     resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
     integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
   
+  af-virtual-scroll@^2.9.9:
+    version "2.9.9"
+    resolved "https://registry.yarnpkg.com/af-virtual-scroll/-/af-virtual-scroll-2.9.9.tgz#72ab29d2fe21801a82abdd4da6d577f6e99caefc"
+    integrity sha512-25rb+/xa07G1YWu//OOciK8hUzfJHxU6eYScfFkEA2nGDS79kGWYuf2jsogyIAffmcX57p87G37OGaZl6oTpcQ==
+    dependencies:
+      react "^17.0.2"
+  
   ansi-align@^3.0.0:
     version "3.0.0"
     resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-3.0.0.tgz#b536b371cf687caaef236c18d3e21fe3797467cb"
@@ -3563,6 +3588,11 @@ Lockfile:
     dependencies:
       three "0.123.0"
   
+  react-virtualized-auto-sizer@^1.0.6:
+    version "1.0.6"
+    resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca"
+    integrity sha512-7tQ0BmZqfVF6YYEWcIGuoR3OdYe8I/ZFbNclFlGOC3pMqunkYF/oL30NCjSGl9sMEb17AnzixDz98Kqc3N76HQ==
+  
   react-virtualized@^9.22.3:
     version "9.22.3"
     resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.22.3.tgz#f430f16beb0a42db420dbd4d340403c0de334421"