Download of resources with tags in their ids should work

When storing these resources and their distributions to the localstorage the tag should be stored as well. Otherwise the `key` (required to add/remove items from data panel) is inconsistent, leading to bugs (example, adding the resource works, but removing them from the data panel does not, because the id is not the same). Signed-off-by: Dinika Saxena <dinikasaxenas@gmail.com>
BlueBrain · Feb 21, 2024 · 84a16a9 · 84a16a9
1 parent f0bd16c
commit 84a16a9
Show file tree

Hide file tree

Showing 7 changed files with 80 additions and 29 deletions.
diff --git a/src/shared/containers/ResourceViewActionsContainer.tsx b/src/shared/containers/ResourceViewActionsContainer.tsx
@@ -69,7 +69,8 @@ const ResourceViewActionsContainer: React.FC<{
     } else {
       const localStorageObjects = toLocalStorageResources(
         resource,
-        'resource-view'
+        'resource-view',
+        recordKey
       );
 
       selectedRowKeys = uniq([...selectedRowKeys, recordKey]);

diff --git a/src/shared/hooks/useAccessDataForTable.tsx b/src/shared/hooks/useAccessDataForTable.tsx
@@ -499,13 +499,15 @@ export const useAccessDataForTable = (
           return;
         })
         .process(async row => {
+          const recordKey = getStudioLocalStorageKey(row);
           const fetchedRow = await fetchResourceForDownload(
             getStudioLocalStorageKey(row),
             nexus
           );
           const localStorageResources = toLocalStorageResources(
             fetchedRow,
-            'studios'
+            'studios',
+            recordKey
           );
           rowKeysForLS.push(getStudioLocalStorageKey(row));
 
@@ -544,7 +546,8 @@ export const useAccessDataForTable = (
       const deltaResource = await fetchResourceForDownload(recordKey, nexus);
       const localStorageResource = toLocalStorageResources(
         deltaResource,
-        'studios'
+        'studios',
+        recordKey
       );
       localStorageRowKeys = [...localStorageRowKeys, recordKey];
       localStorageRows = [...localStorageRows, ...localStorageResource];

diff --git a/src/shared/molecules/MyDataTable/MyDataTable.tsx b/src/shared/molecules/MyDataTable/MyDataTable.tsx
@@ -414,11 +414,16 @@ const MyDataTable: React.FC<TProps> = ({
       setFetchingResources(true);
       const expandedResource = await fetchResourceForDownload(recordKey, nexus);
       setFetchingResources(false);
-      localStorageRows = toLocalStorageResources(expandedResource, 'my-data');
+      localStorageRows = toLocalStorageResources(
+        expandedResource,
+        'my-data',
+        recordKey
+      );
     } else {
-      localStorageRows = toLocalStorageResources(record, 'my-data');
+      localStorageRows = toLocalStorageResources(record, 'my-data', recordKey);
     }
-    toLocalStorageResources(record, 'my-data');
+    // TODO: Check if needed
+    toLocalStorageResources(record, 'my-data', recordKey);
     let selectedRowKeys = dataPanelLS?.selectedRowKeys || [];
     let selectedRows = dataPanelLS?.selectedRows || [];
 
@@ -488,10 +493,15 @@ const MyDataTable: React.FC<TProps> = ({
             const fetchedRow = await fetchResourceForDownload(row._self, nexus);
             localStorageResources = toLocalStorageResources(
               fetchedRow,
-              'my-data'
+              'my-data',
+              row._self
             );
           } else {
-            localStorageResources = toLocalStorageResources(row, 'my-data');
+            localStorageResources = toLocalStorageResources(
+              row,
+              'my-data',
+              row._self
+            );
           }
           return localStorageResources;
         });

diff --git a/src/shared/utils/__tests__/datapanel.spec.ts b/src/shared/utils/__tests__/datapanel.spec.ts
@@ -20,7 +20,8 @@ describe('datapanel utilities', () => {
   it('serializes resources with no distribution correctly to local storage object', () => {
     const actualLSResources = toLocalStorageResources(
       resourceWithoutDistrition,
-      'studios'
+      'studios',
+      resourceWithoutDistrition._self
     );
     const expectedParentDistributionValue = {
       hasDistribution: false,
@@ -49,7 +50,8 @@ describe('datapanel utilities', () => {
   it('serializes resource of type file with no distribution correctly', () => {
     const actualLSResources = toLocalStorageResources(
       fileResourceWithNoDistribution,
-      'my-data'
+      'my-data',
+      fileResourceWithNoDistribution._self
     );
     expect(actualLSResources.length).toEqual(1);
     const expectedParentDistributionValue = {
@@ -66,7 +68,11 @@ describe('datapanel utilities', () => {
 
   it('serializes resources with distribution array correctly to local storage object', () => {
     const resource = resourceWithDistributionArray;
-    const serializedItems = toLocalStorageResources(resource, 'studios');
+    const serializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(serializedItems.length).toEqual(5);
     const actualParentDistributionValue = serializedItems[0].distribution;
@@ -88,15 +94,23 @@ describe('datapanel utilities', () => {
       label: undefined,
       name: ['Sterling', 'Malory', 'Archer'],
     };
-    const serializedItems = toLocalStorageResources(resource, 'studios');
+    const serializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(serializedItems.length).toEqual(5);
     expect(serializedItems[0].name).toEqual('Sterling-Malory-Archer');
   });
 
   it('serializes correct distribution value for each distribution item in array', () => {
     const resource = resourceWithDistributionArray;
-    const serializedItems = toLocalStorageResources(resource, 'studios');
+    const serializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     const originalDistItems = resource.distribution;
     const serializedDistItems = serializedItems.slice(1);
@@ -119,7 +133,11 @@ describe('datapanel utilities', () => {
 
   it('serializes resources with distribution objects correctly', () => {
     const resource = resourceWithDistributionObject;
-    const actualSerializedItems = toLocalStorageResources(resource, 'studios');
+    const actualSerializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(actualSerializedItems.length).toEqual(2);
 
@@ -158,7 +176,11 @@ describe('datapanel utilities', () => {
         contentSize: 123,
       },
     };
-    const actualSerializedItems = toLocalStorageResources(resource, 'studios');
+    const actualSerializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(actualSerializedItems[1].distribution?.contentSize).toEqual(123);
   });
@@ -171,14 +193,22 @@ describe('datapanel utilities', () => {
         contentSize: [10, 20],
       },
     };
-    const actualSerializedItems = toLocalStorageResources(resource, 'studios');
+    const actualSerializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(actualSerializedItems[1].distribution?.contentSize).toEqual(30);
   });
 
   it('serializes resources when distribution is empty array', () => {
     const resource = { ...resourceWithoutDistrition, distribution: [] };
-    const actualSerializedItems = toLocalStorageResources(resource, 'studios');
+    const actualSerializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(actualSerializedItems.length).toEqual(1);
     const expectedDistributionValue = {
@@ -195,7 +225,11 @@ describe('datapanel utilities', () => {
 
   it('serializes resources when distribution is empty object', () => {
     const resource = { ...resourceWithoutDistrition, distribution: {} };
-    const actualSerializedItems = toLocalStorageResources(resource, 'studios');
+    const actualSerializedItems = toLocalStorageResources(
+      resource,
+      'studios',
+      resource._self
+    );
 
     expect(actualSerializedItems.length).toEqual(2);
     expect(actualSerializedItems[0].distribution).toBeDefined();

diff --git a/src/shared/utils/datapanel.ts b/src/shared/utils/datapanel.ts
@@ -11,11 +11,12 @@ import { parseURL } from './nexusParse';
 const baseLocalStorageObject = (
   resource: Resource,
   source: string,
+  key: string,
   keySuffix?: string
 ): Omit<TDataSource, 'distribution'> => {
   return {
     source,
-    key: keySuffix ? `${resource._self}-${keySuffix}` : resource._self,
+    key: keySuffix ? `${key}-${keySuffix}` : key,
     _self: resource._self,
     id: resource['@id'],
     name: getResourceLabel(resource),
@@ -31,15 +32,16 @@ const baseLocalStorageObject = (
 
 export const toLocalStorageResources = (
   resource: Resource,
-  source: string
+  source: string,
+  key: string
 ): TDataSource[] => {
   const resourceName = getResourceLabel(resource);
   try {
     // Case 1 - Resource has no distribution
     if (isNil(resource.distribution)) {
       return [
         {
-          ...baseLocalStorageObject(resource, source),
+          ...baseLocalStorageObject(resource, source, key),
           localStorageType: 'resource',
           distribution: {
             hasDistribution: false,
@@ -63,7 +65,7 @@ export const toLocalStorageResources = (
 
       // First store an object for the parent resource.
       localStorageObjs.push({
-        ...baseLocalStorageObject(resource, source),
+        ...baseLocalStorageObject(resource, source, key),
         localStorageType: 'resource',
         distributionItemsLength: resource.distribution.length,
         distribution: {
@@ -79,7 +81,7 @@ export const toLocalStorageResources = (
       // Now store an object for each distribution item
       resource.distribution.forEach((distItem, index) => {
         localStorageObjs.push({
-          ...baseLocalStorageObject(resource, source, `${index}`),
+          ...baseLocalStorageObject(resource, source, key, `${index}`),
           localStorageType: 'distribution',
           distribution: {
             hasDistribution: true, // So, we don't download the distribution twice
@@ -100,7 +102,7 @@ export const toLocalStorageResources = (
     return [
       // First store an object for the parent resource.
       {
-        ...baseLocalStorageObject(resource, source),
+        ...baseLocalStorageObject(resource, source, key),
         localStorageType: 'resource',
         distribution: {
           hasDistribution: true,
@@ -113,7 +115,7 @@ export const toLocalStorageResources = (
       },
       // Now store an object for the distribution item.
       {
-        ...baseLocalStorageObject(resource, source, '1'),
+        ...baseLocalStorageObject(resource, source, key, '1'),
         localStorageType: 'distribution',
         distribution: {
           hasDistribution: true,

diff --git a/src/subapps/dataExplorer/DataExplorerTable.tsx b/src/subapps/dataExplorer/DataExplorerTable.tsx
@@ -126,7 +126,8 @@ export const DataExplorerTable = forwardRef<HTMLDivElement, TDataExplorerTable>(
 
       const localStorageRows = toLocalStorageResources(
         record,
-        DATA_EXPLORER_NAMESPACE
+        DATA_EXPLORER_NAMESPACE,
+        recordKey
       );
       let selectedRowKeys = dataPanelLS?.selectedRowKeys || [];
       let selectedRows = dataPanelLS?.selectedRows || [];
@@ -177,7 +178,7 @@ export const DataExplorerTable = forwardRef<HTMLDivElement, TDataExplorerTable>(
 
       if (selected) {
         const results = changeRows.map(row =>
-          toLocalStorageResources(row, DATA_EXPLORER_NAMESPACE)
+          toLocalStorageResources(row, DATA_EXPLORER_NAMESPACE, row._self)
         );
         selectedRows = [...selectedRows, ...results.flat()];
         selectedRowKeys = [...selectedRowKeys, ...changeRows.map(t => t._self)];

diff --git a/src/subapps/search/containers/SearchContainer.tsx b/src/subapps/search/containers/SearchContainer.tsx
@@ -149,8 +149,8 @@ const SearchContainer: React.FC = () => {
     resetAll();
   };
   const handleSelect = (record: Resource, selected: any) => {
-    const newRecords = toLocalStorageResources(record, layout);
     const recordKey = record._self;
+    const newRecords = toLocalStorageResources(record, layout, recordKey);
     const dataPanelLS: TResourceTableData = JSON.parse(
       localStorage.getItem(DATA_PANEL_STORAGE)!
     );
@@ -195,7 +195,7 @@ const SearchContainer: React.FC = () => {
   ) => {
     const changedRowsLS: TDataSource[] = [];
     changeRows.forEach(row => {
-      const localStorageRows = toLocalStorageResources(row, layout);
+      const localStorageRows = toLocalStorageResources(row, layout, row._self);
       changedRowsLS.push(...localStorageRows);
     });