visualise non string filter values (closes #387)

amosproj · Jul 7, 2021 · 60f7bb3 · 60f7bb3
1 parent 30da220
commit 60f7bb3
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 7 deletions.
diff --git a/frontend/cypress/integration/visualization/filter.e2e.js b/frontend/cypress/integration/visualization/filter.e2e.js
@@ -129,7 +129,7 @@ context('Filter', () => {
       cy.get('.FilterSelect').first().click();
 
       // Assert
-      cy.contains('Error: No string').click();
+      cy.contains('[Trinity]').click();
     });
 
     it('applies filter', () => {
@@ -141,7 +141,7 @@ context('Filter', () => {
       cy.get('.FilterSelect').first().click();
 
       // Assert
-      cy.contains('Error: No string').click();
+      cy.contains('[Trinity]').click();
 
       cy.get('body').click(0, 0);
       cy.get('.ApplyFilter').click();
@@ -156,7 +156,7 @@ context('Filter', () => {
       cy.get('.FilterSelect').first().click();
 
       // Assert
-      cy.contains('Error: No string').click();
+      cy.contains('[Trinity]').click();
 
       cy.get('body').click(0, 0);
       cy.get('.ApplyFilter').click();

diff --git a/frontend/src/visualization/filtering/FilterLineProperty.tsx b/frontend/src/visualization/filtering/FilterLineProperty.tsx
@@ -74,6 +74,27 @@ const FilterLineProperty = (props: {
     setSelectedValues(event.target.value as string[]);
   };
 
+  /**
+   * Returns the property as string or returns an error string.
+   * Does return the 'real' value if the property is of type string, boolean,
+   * number or array.
+   * @param property value
+   */
+  const asString = (property: unknown): string => {
+    if (Array.isArray(property)) {
+      return `[${property.map(asString).join(', ')}]`;
+    }
+
+    switch (typeof property) {
+      case 'string':
+      case 'boolean':
+      case 'number':
+        return `${property}`;
+      default:
+        return 'Error: No string';
+    }
+  };
+
   return (
     <div className="FilterSelect">
       <FormControl className={classes.select}>
@@ -87,15 +108,15 @@ const FilterLineProperty = (props: {
         >
           {filterModelEntry.values.map((name) => (
             <MenuItem
-              key={typeof name === 'string' ? name : 'Error: No string'}
-              value={typeof name === 'string' ? name : 'Error: No string'}
+              key={asString(name)}
+              value={asString(name)}
               style={getStyles(
-                typeof name === 'string' ? name : 'Error: No string',
+                asString(name),
                 filterModelEntry.values as string[],
                 theme
               )}
             >
-              {typeof name === 'string' ? name : 'Error: No string'}
+              {asString(name)}
             </MenuItem>
           ))}
         </Select>