Fix issues in the json facet support (#2630)

Author: RFSH

src/components/faceting/facet-choice-picker.tsx

@@ -121,16 +121,17 @@ const FacetChoicePicker = ({
 
   const listContainer = useRef<HTMLDivElement>(null);
 
-  // populate facetReference and columnName that are used throughout the component
-  let facetReference: any, columnName: string;
+  // populate facetReference and baseColumn that are used throughout the component
+  let facetReference: any, baseColumn: any;
   if (facetColumn.isEntityMode) {
     facetReference = facetColumn.sourceReference.contextualize.compactSelect;
-    columnName = facetColumn.column.name;
+    baseColumn = facetColumn.column;
   } else {
     facetReference = facetColumn.scalarValuesReference;
     // the first column will be the value column
-    columnName = facetReference.columns[0].name;
+    baseColumn = facetReference.columns[0];
   }
+  const baseColumnIsJSON = baseColumn.type.name === 'json' || baseColumn.type.name === 'jsonb';
 
   // make sure to add the search term
   if (searchTerm) {
@@ -338,7 +339,7 @@ const FacetChoicePicker = ({
             }
 
             // filter and tuple uniqueId might be different
-            const value = getFilterUniqueId(tuple, columnName);
+            const value = getFilterUniqueId(tuple);
 
             const i = updatedRows.findIndex(function (row) {
               // ermrestjs always returns a string for uniqueId, but internally we don't
@@ -396,15 +397,16 @@ const FacetChoicePicker = ({
   }
 
   /**
-   * Given tuple and the columnName that should be used, return
+   * Given the tuple object, return the filter's uniqueId
    * the filter's uniqueId (in case of entityPicker, it might be different from the tuple's uniqueId)
    * @param  {Object} tuple      the tuple object
-   * @param  {string} columnName name of column (in scalar it is 'value')
    * @return {string}            filter's uniqueId
    */
-  const getFilterUniqueId = (tuple: any, columnName: string) => {
-    if (tuple.data && columnName in tuple.data) {
-      return tuple.data[columnName];
+  const getFilterUniqueId = (tuple: any) => {
+    if (tuple.data && baseColumn.name in tuple.data) {
+      // if the column is JSON, we need to stringify it otherwise it will print [object Object]
+      // NOTE this is the exact same logic as ermrestjs
+      return baseColumnIsJSON ? JSON.stringify(tuple.data[baseColumn.name], undefined, 0) : tuple.data[baseColumn.name];
     }
     return tuple.uniqueId;
   }
@@ -507,7 +509,7 @@ const FacetChoicePicker = ({
       // create the list of choice filters
       let hasNull = false;
       const filters = selectedRows.map(function (t: any) {
-        const val = getFilterUniqueId(t, columnName);
+        const val = getFilterUniqueId(t);
         hasNull = hasNull || (val === null);
         return val;
       });
@@ -534,7 +536,7 @@ const FacetChoicePicker = ({
 
         selectedRows.forEach((row: any) => {
           // filter and tuple uniqueId might be different
-          const value = getFilterUniqueId(row, columnName);
+          const value = getFilterUniqueId(row);
 
           updatedRows.push({
             selected: true,

test/e2e/data_setup/data/faceting/main.json

@@ -116,14 +116,14 @@
     {
         "id": "16", "fk_to_f1": "2", "fk_to_f2": "3",
         "int_col": 8, "float_col": 8.8, "date_col": "2008-08-08", "timestamp_col": "2008-08-08T08:08:08-07:00", "text_col": "eight", "shorttext_col": "eight", "longtext_col": "eight", "markdown_col": "**eight**",
-        "boolean_col": false, "jsonb_col": {"key": "eight"}, "jsonb_sort_col": "08",
+        "boolean_col": false, "jsonb_col": 8, "jsonb_sort_col": "08",
         "col_w_long_values": "10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000016",
         "col_w_column_order": "06", "col_w_column_order_column_order" : "08", "col_w_column_order_false": "02", "col_w_column_order_false_facet_order": "06"
     },
     {
         "id": "17", "fk_to_f1": "2", "fk_to_f2": "3",
         "int_col": 9, "float_col": 9.9, "date_col": "2009-09-09", "timestamp_col": "2009-09-09T09:09:09-07:00", "text_col": "one", "shorttext_col": "one", "longtext_col": "nine", "markdown_col": "**nine**",
-        "boolean_col": false, "jsonb_col": {"key": "nine"}, "jsonb_sort_col": "09",
+        "boolean_col": false, "jsonb_col": "nine", "jsonb_sort_col": "09",
         "col_w_long_values": "10000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000017",
         "col_w_column_order": "05", "col_w_column_order_column_order" : "09", "col_w_column_order_false": "02", "col_w_column_order_false_facet_order": "06"
     },

test/e2e/data_setup/schema/recordset/faceting.json

@@ -214,7 +214,7 @@
                             {"source": "longtext_col", "comment": "A lengthy comment for the facet of the longtext_col. This should be displyed properly in the facet.", "hide_not_null_choice": true, "hide_null_choice": true},
                             {"source": "markdown_col", "hide_null_choice": true, "hide_not_null_choice": true},
                             {"source": "boolean_col", "hide_null_choice": true},
-                            {"source": "jsonb_col", "order": [{"num_occurrences": true, "descending": true}, "jsonb_sort_col"], "hide_null_choice": true},
+                            {"source": "jsonb_col", "order": [{"num_occurrences": true, "descending": true}, "jsonb_sort_col"]},
                             {"sourcekey": "outbound_to_f1", "markdown_name": "**F1**", "hide_not_null_choice": true},
                             {"source": [{"outbound": ["faceting", "main_fk2"]}, "id"], "open": true, "comment": "open facet", "hide_null_choice": true},
                             {"source": [{"inbound": ["faceting", "main_f3_assoc_fk1"]}, {"outbound": ["faceting", "main_f3_assoc_fk2"]}, "term"]},

test/e2e/specs/delete-prohibited/recordset/individual-facet.spec.ts

@@ -197,14 +197,14 @@ const testParams: {
       index: 9,
       name: 'jsonb_col',
       type: 'choice',
-      option: 4,
+      option: 5,
       filter: 'jsonb_col{\n"key": "four"\n}',
       numRows: 1,
       options: [
-        'All records with value', '{\n"key": "one"\n}', '{\n"key": "two"\n}',
+        'All records with value', 'No value',
+        '{\n"key": "one"\n}', '{\n"key": "two"\n}',
         '{\n"key": "three"\n}', '{\n"key": "four"\n}', '{\n"key": "five"\n}',
-        '{\n"key": "six"\n}', '{\n"key": "seven"\n}', '{\n"key": "eight"\n}',
-        '{\n"key": "nine"\n}', '{\n"key": "ten"\n}'
+        '{\n"key": "six"\n}', '{\n"key": "seven"\n}', '8', '"nine"', '{\n"key": "ten"\n}'
       ]
     },
     {

test/e2e/specs/delete-prohibited/recordset/misc-facet.spec.ts

@@ -89,6 +89,55 @@ const testParams = {
       }
     }
   },
+  json_support: {
+    facetIdx: 9,
+    totalNumOptions: 12,
+    numRows: 25,
+    tests: [
+      {
+        description: 'not-null',
+        option: 0,
+        filter: 'jsonb_colAll records with value',
+        numRows: 20,
+      },
+      {
+        description: 'null',
+        option: 1,
+        filter: 'jsonb_colNo value ',
+        numRows: 10,
+      },
+      {
+        description: 'json object',
+        option: 2,
+        filter: '"one"',
+        numRows: 5,
+        modal: {
+          numRows: 12,
+          checkedOption: 0
+        }
+      },
+      {
+        description: 'number',
+        option: 9,
+        filter: 'jsonb_col8',
+        numRows: 1,
+        modal: {
+          numRows: 12,
+          checkedOption: 7
+        }
+      },
+      {
+        description: 'string literal',
+        option: 10,
+        filter: 'jsonb_col"nine"',
+        numRows: 1,
+        modal: {
+          numRows: 12,
+          checkedOption: 8
+        }
+      }
+    ]
+  },
   hide_row_count: {
     hidden: {
       facetIdx: 11,
@@ -481,6 +530,52 @@ test.describe('Other facet features', () => {
     });
   });
 
+  test.describe('json/jsonb support', () => {
+    testParams.json_support.tests.forEach((params) => {
+      test(`${params.description}`, async ({ page, baseURL }, testInfo) => {
+        const facet = RecordsetLocators.getFacetById(page, testParams.json_support.facetIdx);
+        const numRowsWhenCleared = testParams.json_support.numRows;
+
+        const checkPageStatusAfterSelection = async () => {
+          await expect.soft(RecordsetLocators.getRows(page)).toHaveCount(params.numRows);
+          await expect.soft(RecordsetLocators.getCheckedFacetOptions(facet)).toHaveCount(1);
+          await expect.soft(RecordsetLocators.getFacetFilters(page).nth(0)).toContainText(params.filter);
+        }
+
+        await test.step('should load recordset page, clear all filters, and open the json facet', async () => {
+          await page.goto(generateChaiseURL(APP_NAMES.RECORDSET, testParams.schema_name, testParams.table_name, testInfo, baseURL));
+          await RecordsetLocators.waitForRecordsetPageReady(page);
+          await testClearAllFilters(page, numRowsWhenCleared);
+
+          // 4 open facets because 3 are already open on page load
+          await openFacet(page, facet, testParams.json_support.facetIdx, testParams.json_support.totalNumOptions, 4);
+        });
+
+        await test.step('choosing the option should work properly.', async () => {
+          await testSelectFacetOption(page, facet, params.option, params.numRows, 1);
+          await checkPageStatusAfterSelection();
+        });
+
+        await test.step('refreshing the page should keep the selected filter.', async () => {
+          await page.reload();
+          await RecordsetLocators.waitForRecordsetPageReady(page);
+          await checkPageStatusAfterSelection();
+        });
+
+        if ('modal' in params) {
+          await test.step('the modal should show the selected option.', async () => {
+            const modal = ModalLocators.getRecordsetSearchPopup(page);
+            await testShowMoreClick(facet, modal, params.modal!.numRows, 1);
+            await expect.soft(RecordsetLocators.getCheckboxInputs(modal).nth(params.modal!.checkedOption)).toBeChecked();
+            await ModalLocators.getSubmitButton(modal).click();
+            await expect.soft(modal).not.toBeVisible();
+            await checkPageStatusAfterSelection();
+          });
+        }
+      });
+    });
+  });
+
   test('regarding the logic to show only certain number of selected items', async ({ page, baseURL }, testInfo) => {
     const params = testParams.hide_selected_items;
     const facet1 = RecordsetLocators.getFacetById(page, params.firstFacet.index);