fix: remove jsonb_array and fix jsonb data types such that it can be used in schema design and graphql api

apps/metadata-utils/src/fieldHelpers.ts

@@ -32,6 +32,7 @@ export const fieldTypes = () => {
     "TEXT_ARRAY",
     "UUID",
     "UUID_ARRAY",
+    "JSON",
   ];
 };
 

apps/metadata-utils/src/types.ts

@@ -30,8 +30,7 @@ export type CellValueType =
   | "DATETIME"
   | "DATETIME_ARRAY"
   | "PERIOD"
-  | "JSONB"
-  | "JSONB_ARRAY"
+  | "JSON"
   | "REF"
   | "REF_ARRAY"
   | "REFBACK"

apps/molgenis-components/lib/main.js

@@ -53,6 +53,7 @@ import InputDate from "../src/components/forms/InputDate.vue";
 import InputDateTime from "../src/components/forms/InputDateTime.vue";
 import InputDecimal from "../src/components/forms/InputDecimal.vue";
 import InputEmail from "../src/components/forms/InputEmail.vue";
+import InputJson from "../src/components/forms/InputJson.vue";
 import InputFile from "../src/components/forms/InputFile.vue";
 import InputGroup from "../src/components/forms/InputGroup.vue";
 import InputHeading from "../src/components/forms/InputHeading.vue";
@@ -189,6 +190,7 @@ export {
   InputDateTime,
   InputDecimal,
   InputEmail,
+  InputJson,
   InputFile,
   InputGroup,
   InputHeading,

apps/molgenis-components/src/components/filters/FilterInput.vue

@@ -48,6 +48,7 @@ const filterTypeMap = {
   HYPERLINK_ARRAY: StringFilter,
   TEXT: StringFilter,
   TEXT_ARRAY: StringFilter,
+  JSON: StringFilter,
   UUID: StringFilter,
   UUID_ARRAY: StringFilter,
   INT: IntegerFilter,

apps/molgenis-components/src/components/forms/FormInput.vue

@@ -34,6 +34,7 @@ import InputText from "../forms/InputText.vue";
 import BaseInput from "../forms/baseInputs/BaseInput.vue";
 import InputEmail from "./InputEmail.vue";
 import InputHyperlink from "./InputHyperlink.vue";
+import InputJson from "./InputJson.vue";
 import InputRefList from "./InputRefList.vue";
 
 const typeToInputMap = {
@@ -43,6 +44,7 @@ const typeToInputMap = {
   HYPERLINK: InputHyperlink,
   STRING: InputString,
   TEXT: InputText,
+  JSON: InputJson,
   INT: InputInt,
   LONG: InputLong,
   DECIMAL: InputDecimal,
@@ -364,6 +366,17 @@ export default {
       </div>
       <div>You typed: {{ JSON.stringify(textValueArray, null, 2) }}</div>
     </DemoItem>
+    <DemoItem>
+      <div>
+        <FormInput
+            id="json-example"
+            columnType="JSON"
+            label="Example json input"
+            v-model="jsonValue"
+        />
+      </div>
+      <div>You typed: {{ jsonValue }}</div>
+    </DemoItem>
     <DemoItem>
       <div>
         <FormInput
@@ -536,6 +549,7 @@ export default {
         intValueArray: [5, 37],
         textValue: "example text",
         textValueArray: ["text", "more text"],
+        jsonValue: '{"name":"bofke"}',
         longValue: "1337",
         longValueArray: ["0", "101"],
         decimalValue: 3.7,

apps/molgenis-components/src/components/forms/InputJson.vue

@@ -0,0 +1,97 @@
+<template>
+  <FormGroup
+    :id="id"
+    :label="label"
+    :required="required"
+    :description="description"
+    :errorMessage="stringError"
+  >
+    <InputGroup>
+      <textarea
+        :id="id"
+        :ref="id"
+        :name="name"
+        :value="modelValue"
+        @input="
+          $emit('update:modelValue', ($event.target as HTMLInputElement).value)
+        "
+        type="text"
+        class="form-control"
+        :class="{ 'is-invalid': stringError }"
+        :aria-describedby="id"
+        :placeholder="placeholder"
+        :readonly="readonly"
+      />
+    </InputGroup>
+  </FormGroup>
+</template>
+
+<script lang="ts">
+import FormGroup from "./FormGroup.vue";
+import InputGroup from "./InputGroup.vue";
+import BaseInput from "./baseInputs/BaseInput.vue";
+import { parseJson, isJsonObjectOrArray } from "./formUtils/formUtils";
+
+export default {
+  name: "InputJson",
+  components: { FormGroup, InputGroup },
+  extends: BaseInput,
+  computed: {
+    stringError() {
+      if (typeof this.modelValue === "string") {
+        try {
+          if (!isJsonObjectOrArray(JSON.parse(this.modelValue))) {
+            return `Root element must be an object or array`;
+          }
+        } catch {
+          return `Please enter valid JSON`;
+        }
+        return this.errorMessage;
+      } else {
+        return this.errorMessage;
+      }
+    },
+  },
+};
+</script>
+
+<style scoped>
+.is-invalid {
+  background-image: none;
+}
+
+span:hover .hoverIcon {
+  visibility: visible;
+}
+</style>
+
+<docs>
+<template>
+  <div>
+    <InputJson
+      id="input-json"
+      v-model="value"
+      label="My JSON input label"
+      description="Some help needed?"
+    />
+    You typed: {{ value }}<br />
+    <b>Readonly</b>
+    <InputJson
+      id="input-json2"
+      :readonly="true"
+      v-model="readOnlyValue"
+      description="Should not be able to edit this"
+    />
+  </div>
+</template>
+<script>
+export default {
+  data: function () {
+    return {
+      value: '{"name":"bofke"}',
+      readOnlyValue: '{"name":"bofke"}',
+    };
+  },
+};
+</script>
+</docs>

apps/molgenis-components/src/components/forms/formUtils/formUtils.ts

@@ -84,6 +84,15 @@ function getColumnError(
   if (type === "PERIOD_ARRAY" && containsInvalidPeriod(value)) {
     return "Invalid Period: should start with a P and should contain at least a Y(year), M(month) or D(day): e.g. 'P1Y3M14D'";
   }
+  if (type === "JSON") {
+    try {
+      if (!isJsonObjectOrArray(JSON.parse(value))) {
+        return `Root element must be an object or array`;
+      }
+    } catch {
+      return `Please enter valid JSON`;
+    }
+  }
   if (column.validation) {
     return getColumnValidationError(column.validation, rowData, tableMetaData);
   }
@@ -227,6 +236,13 @@ function containsInvalidPeriod(periods: any) {
   return periods.find((period: any) => !isValidPeriod(period));
 }
 
+export function isJsonObjectOrArray(parsedJson: any) {
+  if (typeof parsedJson === "object" && parsedJson !== null) {
+    return true;
+  }
+  return false;
+}
+
 export function removeKeyColumns(tableMetaData: ITableMetaData, rowData: IRow) {
   const keyColumnsIds = tableMetaData?.columns
     ?.filter((column: IColumn) => column.key === 1)

apps/molgenis-components/src/components/tables/DataDisplayCell.vue

@@ -20,6 +20,7 @@ import HyperlinkDisplay from "./cellTypes/HyperlinkDisplay.vue";
 const typeMap: { [key: string]: string } = {
   FILE: "FileDisplay",
   TEXT: "TextDisplay",
+  JSON: "TextDisplay",
   REFBACK: "ListDisplay",
   REF: "ObjectDisplay",
   ONTOLOGY: "ObjectDisplay",

apps/molgenis-components/src/components/tables/TableExplorer.vue

@@ -835,7 +835,8 @@ function graphqlFilter(
       if (conditions.length) {
         if (
           col.columnType.startsWith("STRING") ||
-          col.columnType.startsWith("TEXT")
+          col.columnType.startsWith("TEXT") ||
+          col.columnType.startsWith("JSON")
         ) {
           filter[col.id] = { like: conditions };
         } else if (col.columnType.startsWith("BOOL")) {

apps/schema/src/columnTypes.js

@@ -16,6 +16,7 @@ export default [
   "HYPERLINK_ARRAY",
   "INT",
   "INT_ARRAY",
+  "JSON",
   "LONG",
   "LONG_ARRAY",
   "ONTOLOGY",

backend/molgenis-emx2-graphql/src/main/java/org/molgenis/emx2/graphql/GraphqlCustomTypes.java

@@ -1,19 +1,57 @@
 package org.molgenis.emx2.graphql;
 
+import com.fasterxml.jackson.core.JsonProcessingException;
 import graphql.schema.*;
 import jakarta.servlet.http.Part;
 import java.io.ByteArrayOutputStream;
 import java.io.IOException;
 import java.io.InputStream;
 import java.util.Map;
 import org.molgenis.emx2.BinaryFileWrapper;
+import org.molgenis.emx2.utils.MolgenisObjectMapper;
 
 public class GraphqlCustomTypes {
+  private static final MolgenisObjectMapper objectMapper = MolgenisObjectMapper.INTERNAL;
 
   private GraphqlCustomTypes() {
     // hide constructor
   }
 
+  public static final GraphQLScalarType GraphQLJsonAsString =
+      GraphQLScalarType.newScalar()
+          .name("JsonString")
+          .description("A JSON represented as string")
+          .coercing(
+              new Coercing<String, String>() {
+
+                @Override
+                public String serialize(Object dataFetcherResult) {
+                  // Convert Java object to JSON string
+                  try {
+                    return objectMapper.getWriter().writeValueAsString(dataFetcherResult);
+                  } catch (JsonProcessingException e) {
+                    throw new CoercingSerializeException(
+                        "Unable to serialize to JSON string: " + e.getMessage());
+                  }
+                }
+
+                @Override
+                public String parseValue(Object input) {
+                  // Pass-through parsing (only used for input values)
+                  return input.toString();
+                }
+
+                @Override
+                public String parseLiteral(Object input) {
+                  // Pass-through literal parsing
+                  if (input instanceof graphql.language.StringValue) {
+                    return ((graphql.language.StringValue) input).getValue();
+                  }
+                  throw new CoercingParseLiteralException("Value is not a valid JSON string");
+                }
+              })
+          .build();
+
   // thanks to https://stackoverflow.com/questions/57372259/how-to-upload-files-with-graphql-java
   public static final GraphQLScalarType GraphQLFileUpload =
       GraphQLScalarType.newScalar()

backend/molgenis-emx2-graphql/src/main/java/org/molgenis/emx2/graphql/GraphqlTableFieldFactory.java

@@ -8,6 +8,7 @@
 import static org.molgenis.emx2.graphql.GraphqlApiMutationResult.Status.SUCCESS;
 import static org.molgenis.emx2.graphql.GraphqlApiMutationResult.typeForMutationResult;
 import static org.molgenis.emx2.graphql.GraphqlConstants.*;
+import static org.molgenis.emx2.graphql.GraphqlCustomTypes.GraphQLJsonAsString;
 import static org.molgenis.emx2.sql.SqlQuery.*;
 
 import graphql.Scalars;
@@ -187,6 +188,10 @@ private void createTableField(Column col, GraphQLObjectType.Builder tableBuilder
         tableBuilder.field(
             GraphQLFieldDefinition.newFieldDefinition().name(id).type(Scalars.GraphQLString));
         break;
+      case JSON:
+        tableBuilder.field(
+            GraphQLFieldDefinition.newFieldDefinition().name(id).type(GraphQLJsonAsString));
+        break;
       case STRING_ARRAY:
       case EMAIL_ARRAY:
       case HYPERLINK_ARRAY:
@@ -196,7 +201,6 @@ private void createTableField(Column col, GraphQLObjectType.Builder tableBuilder
       case DATETIME_ARRAY:
       case PERIOD_ARRAY:
       case UUID_ARRAY:
-      case JSONB_ARRAY:
         tableBuilder.field(
             GraphQLFieldDefinition.newFieldDefinition()
                 .name(id)
@@ -507,6 +511,8 @@ private GraphQLScalarType graphQLTypeOf(Column col) {
         return GraphQLLong;
       case DECIMAL, DECIMAL_ARRAY:
         return Scalars.GraphQLFloat;
+      case JSON:
+        return GraphQLJsonAsString;
       case DATE,
           DATETIME,
           PERIOD,
@@ -908,6 +914,7 @@ private GraphQLInputType getGraphQLInputType(ColumnType columnType) {
       case INT_ARRAY -> GraphQLList.list(Scalars.GraphQLInt);
       case LONG_ARRAY -> GraphQLList.list(GraphQLLong);
       case DECIMAL_ARRAY -> GraphQLList.list(Scalars.GraphQLFloat);
+      case JSON -> GraphqlCustomTypes.GraphQLJsonAsString;
       case STRING_ARRAY,
               TEXT_ARRAY,
               DATE_ARRAY,

backend/molgenis-emx2-graphql/src/test/java/org/molgenis/emx2/graphql/TestGraphqlSchemaFields.java

@@ -739,6 +739,48 @@ public void testTableType() throws IOException {
     assertEquals("ONTOLOGIES", result.at("/_schema/tables/3/tableType").asText());
   }
 
+  @Test
+  public void testJsonType() throws IOException {
+    try {
+      Schema myschema = database.dropCreateSchema("testJsonType");
+      myschema.create(
+          table("TestJson", column("name").setPkey(), column("json").setType(ColumnType.JSON)));
+
+      grapql = new GraphqlApiFactory().createGraphqlForSchema(myschema, taskService);
+
+      Table table = myschema.getTable("TestJson");
+      String value = "{\"name\":\"bofke\"}";
+      table.insert(row("name", "test", "json", value));
+
+      assertEquals(value, execute("{TestJson{json}}").at("/TestJson/0/json").asText());
+
+      String value2 = "{\"name\":\"bofke2\"}";
+      Map data = new LinkedHashMap();
+      data.put("name", "test");
+      data.put("json", value2);
+      grapql.execute(
+          new ExecutionInput.Builder()
+              .query("mutation update($value:[TestJsonInput]){update(TestJson:$value){message}}")
+              .variables(Map.of("value", data))
+              .build());
+
+      assertEquals(value2, execute("{TestJson{json}}").at("/TestJson/0/json").asText());
+      assertEquals(
+          value2,
+          execute(
+                  "{TestJson(filter:{json:{equals:\"{\\\"name\\\": \\\"bofke2\\\"}\"}}){json}}") // notice the extra space!
+              .at("/TestJson/0/json")
+              .asText());
+      assertEquals(
+          value2,
+          execute("{TestJson(filter:{json:{like:\"bofke2\"}}){json}}") // more useful
+              .at("/TestJson/0/json")
+              .asText());
+    } finally {
+      grapql = new GraphqlApiFactory().createGraphqlForSchema(schema, taskService);
+    }
+  }
+
   @Test
   public void testFileType() throws IOException {
     try {