GFF-184: update and rename list (#254)

* fix TS 5.6 build errors

* refine icons and chackbox for datalist

* delete list and remove dataset work

* add TODO

* add TODO

.gitignore

@@ -34,3 +34,5 @@ yarn-error.log*
 
 # Ignore DevSpace cache and log folder
 .devspace/
+
+.nx/cache

package.json

@@ -18,7 +18,7 @@
     "build:clean": "lerna run build:clean",
     "compile": "lerna run compile",
     "dev": "lerna run --parallel dev",
-    "dev:watch": " lerna watch -- lerna run dev --scope=\\$LERNA_PACKAGE_NAME & lerna run --scope @gen3/samplecommons dev",
+    "dev:watch": " lerna watch -- lerna run dev --scope=\\$LERNA_PACKAGE_NAME",
     "start": "lerna run --parallel start",
     "build:start": "npm run build && npm run start",
     "test": "npm run test --workspaces",

packages/core/.eslintignore

@@ -1,3 +1,4 @@
+build
 dist
 *.css
 setupTests.ts

packages/core/package.json

@@ -30,7 +30,7 @@
     "types": "tsc --emitDeclarationOnly --skipLibCheck",
     "build": "npm run clean && npm run compile && rollup --config rollup.config.mjs",
     "build:clean": "npm run clean && npm run compile && npm run types && rollup --config rollup.config.mjs",
-    "build:watch": "npm run types && rollup --config rollup.config.mjs --watch",
+    "build:watch": "npm run compile && npm run build -- --watch",
     "test": "jest unit",
     "test:watch": "jest unit --watch",
     "test:int": "jest int",

packages/core/src/features/dataLibrary/dataLibraryIndexDB.ts

@@ -1,8 +1,8 @@
-import { openDB, IDBPDatabase } from 'idb';
 import { isArray } from 'lodash';
 import { JSONObject, isJSONObject } from '../../types';
 import { type DataList, LoadAllListData } from './types';
 import { nanoid } from '@reduxjs/toolkit';
+import { openDB, IDBPDatabase } from 'idb';
 
 const DATABASE_NAME = 'Gen3DataLibrary';
 const STORE_NAME = 'DataLibraryLists';

packages/core/tsconfig.json

@@ -25,6 +25,7 @@
     "resolveJsonModule": true,
     "allowJs": true,
     "sourceMap": true,
+    "skipLibCheck": true,
     "lib": [
       "dom",
       "esnext"

packages/frontend/package.json

@@ -26,7 +26,7 @@
     "copy-tailwind": "cp src/tailwind.cjs dist/tailwind.cjs",
     "build": "npm run compile && npm run types && npm run rollup",
     "build:clean": "npm run clean && npm run build",
-    "build:watch": "npm run rollup --watch",
+    "build:watch": "npm run rollup -- --watch",
     "dev": "npm run build:watch"
   },
   "exports": {

packages/frontend/src/features/DataLibrary/DataLibraryPanel.tsx

@@ -1,82 +1,20 @@
-import {
-  Accordion,
-  Button,
-  Checkbox,
-  Group,
-  Menu,
-  Text,
-  TextInput,
-  UnstyledButton,
-  AccordionControlProps,
-} from '@mantine/core';
-import { useEffect, useState } from 'react';
+import { Accordion, Button, Checkbox } from '@mantine/core';
+import { useState } from 'react';
 import ListsTable from './tables/ListsTable';
 import { DataLibraryList } from './types';
 import {
   AdditionalDataItem,
   CohortItem,
-  DataLibrary,
   FileItem,
   isAdditionalDataItem,
   isCohortItem,
   isFileItem,
   useDataLibrary,
 } from '@gen3/core';
-
-import { HiDotsVertical } from 'react-icons/hi';
 import { data1 } from './utils';
 import SearchAndActions from './SearchAndActions';
-
-const DatasetAccordianControl = (
-  props: AccordionControlProps & { id: string; name: string },
-): JSX.Element => {
-  const [renaming, setRenaming] = useState<string | undefined>(undefined);
-  const { deleteListFromDataLibrary } = useDataLibrary(false);
-  const { id, name } = props;
-  return (
-    <div className="flex items-center">
-      <Accordion.Control {...props} className="w-4" />
-      <div className="flex justify-between w-full items-center ml-4">
-        {renaming && renaming === props.id ? (
-          <TextInput value={name} />
-        ) : (
-          <Text fw={600} className="ml-2">
-            {name}
-          </Text>
-        )}
-        <Menu>
-          <Menu.Target>
-            <Button onClick={(e) => e.stopPropagation()} variant="outline">
-              <HiDotsVertical />
-            </Button>
-          </Menu.Target>
-          <Menu.Dropdown>
-            <Menu.Item>
-              <UnstyledButton
-                onClick={(e) => {
-                  setRenaming(id);
-                  e.stopPropagation();
-                }}
-              >
-                Rename
-              </UnstyledButton>
-            </Menu.Item>
-            <Menu.Item>
-              <UnstyledButton
-                onClick={async (e) => {
-                  await deleteListFromDataLibrary(id);
-                  e.stopPropagation();
-                }}
-              >
-                Delete
-              </UnstyledButton>
-            </Menu.Item>
-          </Menu.Dropdown>
-        </Menu>
-      </div>
-    </div>
-  );
-};
+import { DatasetAccordianControl } from './DatasetAccordianControl';
+import { useDeepCompareEffect } from 'use-deep-compare';
 
 const DataLibraryPanel = () => {
   const [currentLists, setCurrentLists] = useState<Array<DataLibraryList>>([]);
@@ -85,10 +23,35 @@ const DataLibraryPanel = () => {
     dataLibraryItems,
     setAllListsInDataLibrary,
     clearLibrary,
+    updateListInDataLibrary,
     deleteListFromDataLibrary,
   } = useDataLibrary(false);
 
-  useEffect(() => {
+  const updateList = async (listId: string, update: Record<string, any>) => {
+    if (!dataLibraryItems) return;
+    console.log('updateList from list', listId);
+    await updateListInDataLibrary(listId, {
+      ...dataLibraryItems.lists[listId],
+      ...update,
+      updatedTime: new Date().toISOString(),
+    });
+  };
+
+  const removeItemFromList = async (listId: string, itemId: string) => {
+    if (!dataLibraryItems) return;
+
+    console.log('remove from list', listId, itemId);
+    const { [itemId]: removedKey, ...newObject } =
+      dataLibraryItems.lists[listId].items;
+    await updateListInDataLibrary(listId, {
+      ...dataLibraryItems.lists[listId],
+      items: newObject,
+      updatedTime: new Date().toISOString(),
+    });
+  };
+
+  useDeepCompareEffect(() => {
+    console.log('DataLibraryPanel: dataLibraryItems', dataLibraryItems);
     const savedLists = Object.entries(dataLibraryItems?.lists ?? {}).map(
       // for each List
       ([listId, dataList]) => {
@@ -145,55 +108,21 @@ const DataLibraryPanel = () => {
       <div className="flex flex-col">
         {currentLists.map(({ id, name, datasetItems }) => {
           return (
-            <div className="flex" key={id}>
-              <div className="mt-4 ml-2 border-b">
-                <Checkbox />
-              </div>
+            <div className="flex items-center" key={id}>
               <Accordion chevronPosition="left" classNames={{ root: 'w-full' }}>
                 <Accordion.Item value={name} key={name}>
-                  {/* } <Accordion.Control>
-                    <div className="flex justify-between">
-
-                        <Text fw={600} className="ml-2">
-                          {name}
-                        </Text>
-
-                      <Menu>
-                        <Menu.Target>
-                          <Button
-                            onClick={(e) => e.stopPropagation()}
-                            variant="outline"
-                          >
-                            <HiDotsVertical />
-                          </Button>
-                        </Menu.Target>
-                        <Menu.Dropdown>
-                          <Menu.Item>
-                            <UnstyledButton
-                              onClick={(e) => {
-                                e.stopPropagation();
-                              }}
-                            >
-                              Rename
-                            </UnstyledButton>
-                          </Menu.Item>
-                          <Menu.Item>
-                            <UnstyledButton
-                              onClick={async (e) => {
-                                await deleteListFromDataLibrary(id);
-                                e.stopPropagation();
-                              }}
-                            >
-                              Delete
-                            </UnstyledButton>
-                          </Menu.Item>
-                        </Menu.Dropdown>
-                      </Menu>
-                    </div>
-                  </Accordion.Control> */}
-                  <DatasetAccordianControl id={id} name={name} />
+                  <DatasetAccordianControl
+                    id={id}
+                    listName={name}
+                    updateHandler={updateList}
+                    deleteListHandler={deleteListFromDataLibrary}
+                  />
                   <Accordion.Panel>
-                    <ListsTable data={datasetItems} />
+                    <ListsTable
+                      listId={id}
+                      data={datasetItems}
+                      removeList={removeItemFromList}
+                    />
                   </Accordion.Panel>
                 </Accordion.Item>
               </Accordion>

packages/frontend/src/features/DataLibrary/DatasetAccordianControl.tsx

@@ -0,0 +1,81 @@
+import {
+  Accordion,
+  AccordionControlProps,
+  ActionIcon,
+  Checkbox,
+  CloseButton,
+  Group,
+  Text,
+  TextInput,
+} from '@mantine/core';
+import { useState } from 'react';
+import { useDataLibrary } from '@gen3/core';
+import { getHotkeyHandler } from '@mantine/hooks';
+import {
+  MdModeEditOutline as EditIcon,
+  MdDelete as DeleteIcon,
+} from 'react-icons/md';
+
+export const DatasetAccordianControl = (
+  props: AccordionControlProps & {
+    id: string;
+    listName: string;
+    updateHandler: (
+      listId: string,
+      update: Record<string, any>,
+    ) => Promise<void>;
+    deleteListHandler: (listId: string) => Promise<void>;
+  },
+): JSX.Element => {
+  const { id, listName, updateHandler, deleteListHandler } = props;
+  const [value, setValue] = useState<string | undefined>(undefined);
+
+  const handleSubmit = () => {
+    updateHandler(id, { name: value });
+    setValue(undefined);
+  };
+
+  return (
+    <div className="flex items-center">
+      <Checkbox />
+      <Accordion.Control {...props} className="w-4" />
+      <div className="flex justify-between w-full items-center ml-4">
+        {value ? (
+          <TextInput
+            value={value}
+            onChange={(e) => setValue(e.target.value)}
+            onKeyDown={getHotkeyHandler([['Enter', handleSubmit]])}
+            rightSection={
+              <CloseButton
+                aria-label="Clear input"
+                onClick={() => setValue(undefined)}
+                style={{ display: value ? undefined : 'none' }}
+              />
+            }
+          />
+        ) : (
+          <Group>
+            {' '}
+            <Text fw={600} className="ml-2" aria-label={listName}>
+              {listName}
+            </Text>{' '}
+            <ActionIcon
+              color="accent.4"
+              aria-label="Change datalist name"
+              onClick={() => setValue(listName)}
+            >
+              <EditIcon />
+            </ActionIcon>
+          </Group>
+        )}
+        <ActionIcon
+          color="accent.4"
+          aria-label="delete datalist"
+          onClick={() => deleteListHandler(id)}
+        >
+          <DeleteIcon />
+        </ActionIcon>
+      </div>
+    </div>
+  );
+};

packages/frontend/src/features/DataLibrary/TODO.md

@@ -0,0 +1,14 @@
+# Data Library Tasks
+## v1
+* create new list
+* select lists/datasets
+* show selected lists
+* show query expression in table
+* remove table headers for selecte/expand/actions
+* fix styling:
+  * icon colors
+  * layout
+  * if no pagination hide table footer
+* default message when subtable is empty
+## v2
+* show applicable actions to selection