feat: M10506 UI linkfile edit

armadillo/src/main/java/org/molgenis/armadillo/storage/ParquetUtils.java

@@ -20,7 +20,8 @@ public class ParquetUtils {
   public static List<Map<String, String>> previewRecords(
       Path path, int rowLimit, int columnLimit, String[] variables) throws IOException {
     List<Map<String, String>> result = new ArrayList<>();
-    try (ParquetFileReader reader = getFileReader(path)) {
+    LocalInputFile file = new LocalInputFile(path);
+    try (ParquetFileReader reader = ParquetFileReader.open(file)) {
       MessageType schema = getSchemaFromReader(reader);
       RecordReader<Group> recordReader = getRecordReader(schema, reader);
       List<String> columns = getColumnsFromSchema(schema);
@@ -72,13 +73,9 @@ private static RecordReader<Group> getRecordReader(MessageType schema, ParquetFi
     return columnIO.getRecordReader(store, new GroupRecordConverter(schema));
   }
 
-  private static ParquetFileReader getFileReader(Path path) throws IOException {
-    LocalInputFile file = new LocalInputFile(path);
-    return ParquetFileReader.open(file);
-  }
-
   public static List<String> getColumns(Path path) throws IOException {
-    try (ParquetFileReader reader = getFileReader(path)) {
+    LocalInputFile file = new LocalInputFile(path);
+    try (ParquetFileReader reader = ParquetFileReader.open(file)) {
       var schema = getSchemaFromReader(reader);
       return getColumnsFromSchema(schema);
     } catch (IOException e) {
@@ -87,7 +84,8 @@ public static List<String> getColumns(Path path) throws IOException {
   }
 
   public static Map<String, String> retrieveDimensions(Path path) throws FileNotFoundException {
-    try (ParquetFileReader reader = getFileReader(path)) {
+    LocalInputFile file = new LocalInputFile(path);
+    try (ParquetFileReader reader = ParquetFileReader.open(file)) {
       MessageType schema = getSchemaFromReader(reader);
       int numberOfColumns = schema.getFields().size();
       long numberOfRows = reader.getRecordCount();

ui/src/api/api.ts

@@ -1,9 +1,5 @@
 import { ApiError } from "@/helpers/errors";
-import {
-  encodeUriComponent,
-  objectDeepCopy,
-  sanitizeObject,
-} from "@/helpers/utils";
+import { objectDeepCopy, sanitizeObject } from "@/helpers/utils";
 import {
   Principal,
   Profile,
@@ -223,10 +219,7 @@ export async function getProject(projectId: string): Promise<StringArray> {
 }
 
 export async function deleteObject(project: string, name: string) {
-  return delete_(
-    "/storage/projects/" + project + "/objects",
-    encodeUriComponent(name)
-  );
+  return delete_("/storage/projects/" + project + "/objects", name);
 }
 
 export async function getProfiles(): Promise<Profile[]> {
@@ -261,11 +254,7 @@ export async function uploadIntoProject(
 }
 
 export async function previewObject(projectId: string, object: string) {
-  return get(
-    `/storage/projects/${projectId}/objects/${encodeUriComponent(
-      object
-    )}/preview`
-  );
+  return get(`/storage/projects/${projectId}/objects/${object}/preview`);
 }
 
 export async function logout() {
@@ -286,20 +275,14 @@ export async function authenticate(auth: Auth) {
 }
 
 export async function getFileDetails(project: string, object: string) {
-  return get(
-    `/storage/projects/${project}/objects/${encodeUriComponent(object)}/info`
-  );
+  return get(`/storage/projects/${project}/objects/${object}/info`);
 }
 
 export async function getTableVariables(
   project: string,
   object: string
 ): Promise<string[]> {
-  return get(
-    `/storage/projects/${project}/objects/${encodeUriComponent(
-      object
-    )}/variables`
-  );
+  return get(`/storage/projects/${project}/objects/${object}/variables`);
 }
 
 export async function createLinkFile(

ui/src/components/FileExplorer.vue

@@ -25,7 +25,6 @@
         rowIcon="table"
         rowIconAlt="file-earmark"
         :altIconCondition="isNonTableType"
-        :preselectedItem="selectedFile"
         selectionColor="primary"
       ></ListGroup>
     </div>
@@ -67,18 +66,9 @@ export default defineComponent({
         selectedFolder.value = newVal as string;
       }
     );
-    watch(
-      () => route.params.fileId,
-      (newVal) => {
-        selectedFile.value = newVal as string;
-      }
-    );
     onMounted(() => {
       if (route.params.folderId) {
         selectedFolder.value = route.params.folderId as string;
-        if (route.params.fileId) {
-          selectedFile.value = route.params.fileId as string;
-        }
       }
       watch(
         () => folderComponent.value?.selectedItem,

ui/src/components/SimpleTable.vue

@@ -62,9 +62,22 @@ export default defineComponent({
   },
   computed: {
     maxNumberCharacters() {
+      // don't question the logic, it's a formula that figures out how many characters fit in each header label
+      // but if you do question it:
+      // maxWidth/200 spreads out nicely for 10 columns, to get 200 when the length of columns is 10, we do it times 20 (20 * l)
+      // for 5 columns, this leaves a lot of whitespace. There maxWidth/50, rather than 100, fits better.
+      // therefore, we need to substract 50 from the 20 * l if the number of columns is 5 and 0 if the number of columns is 1
+      // to get that: (10 / l - 1) * 50, that's what we substract from the 20 * l
+      // example (l = 10):
+      // 20 * 10 = 200
+      // 10 / 10 - 1 = 0 -> 0 * 50 = 0
+      // 200 - 0 = 200
+      // example (l = 5):
+      // 20 * 5 = 100
+      // 10 / 5 - 1 = 1 -> 1 * 50 = 50
+      // 100 - 50 = 50
       const l = this.tableKeys.length;
-      // max width divided by number of characters * fontsize to evenly spread headers
-      return Math.floor(this.maxWidth / (l * 16));
+      return Math.ceil(this.maxWidth / (20 * l - (10 / l - 1) * 50));
     },
     dataToPreview() {
       // converting ints to in, otherwise the id numbers look awkward

ui/src/components/VariableSelector.vue

@@ -42,37 +42,28 @@
 
 <script lang="ts">
 import SearchBar from "@/components/SearchBar.vue";
-import { PropType, defineComponent } from "vue";
 import { stringIncludesOtherString } from "@/helpers/utils";
-import { StringArray } from "@/types/types";
 
-export default defineComponent({
+export default {
   name: "VariableSelector",
   props: {
     variables: {
       default: [],
       type: Array,
     },
-    preselectedVariables: {
-      default: [] as PropType<StringArray>,
-      type: Array,
-    },
   },
   components: {
     SearchBar,
   },
   data(): { selectedVariables: string[]; searchString: string } {
     return {
-      selectedVariables: this.preselectedVariables as StringArray,
+      selectedVariables: [],
       searchString: "",
     };
   },
   methods: {
     updateVariables(variable: string) {
-      if (this.selectedVariables.includes(variable)) {
-        const index = this.selectedVariables.indexOf(variable);
-        this.selectedVariables.splice(index, 1);
-      } else {
+      if (!this.selectedVariables.includes(variable)) {
         this.selectedVariables.push(variable);
       }
     },
@@ -89,7 +80,7 @@ export default defineComponent({
       return variables as string[];
     },
   },
-});
+};
 </script>
 <style :scoped>
 .variable-select {

ui/src/components/ViewEditor.vue

@@ -65,11 +65,7 @@
       </div>
       <div class="row">
         <div class="col-12" v-if="variables.length > 0">
-          <VariableSelector
-            :variables="variables"
-            :preselectedVariables="preselectedVariables"
-            ref="variableSelector"
-          />
+          <VariableSelector :variables="variables" />
         </div>
       </div>
       <div class="row mt-3">
@@ -115,12 +111,7 @@
                 Table:
               </label>
               <div class="col-sm-9">
-                <input
-                  type="string"
-                  class="form-control"
-                  :disabled="isEditMode"
-                  v-model="vwTable"
-                />
+                <input type="string" class="form-control" v-model="vwTable" />
               </div>
             </div>
           </form>
@@ -131,13 +122,7 @@
           class="btn btn-primary"
           type="button"
           @click="
-            onSave(
-              srcProject,
-              sourceObject,
-              vwProject,
-              linkedObject,
-              ($refs.variableSelector as any).selectedVariables
-            )
+            onSave(srcProject, sourceObject, vwProject, linkedObject, variables)
           "
         >
           <i class="bi bi-floppy-fill"></i> Save
@@ -171,10 +156,6 @@ export default defineComponent({
     viewTable: String,
     viewProject: String,
     viewFolder: String,
-    preselectedVariables: {
-      default: [],
-      type: Array as PropType<string[]>,
-    },
     projects: {
       default: [],
       type: Array as PropType<Project[]>,
@@ -203,12 +184,9 @@ export default defineComponent({
 
     const isSrcTableSet = () => {
       return (
-        props.sourceTable !== "" &&
-        props.sourceFolder !== "" &&
-        props.sourceProject !== "" &&
-        props.sourceTable !== undefined &&
-        props.sourceFolder !== undefined &&
-        props.sourceProject !== undefined
+        props.sourceTable != "" &&
+        props.sourceFolder != "" &&
+        props.sourceProject != ""
       );
     };
     const fetchVariables = async () => {
@@ -257,7 +235,6 @@ export default defineComponent({
         });
     },
     async getVariables(project: string, folder: string, file: string) {
-      console.log(project, folder, file);
       await getTableVariables(project, folder + "%2F" + file)
         .then((response) => {
           this.variables = response;
@@ -300,18 +277,6 @@ export default defineComponent({
     sourceObject(): string {
       return `${this.srcFolder}/${this.srcTable?.replace(".parquet", "")}`;
     },
-    isEditMode(): boolean {
-      // when all items are preselected, we are in edit mode
-      return (
-        this.sourceFolder !== undefined &&
-        this.sourceProject !== undefined &&
-        this.sourceTable !== undefined &&
-        this.viewFolder !== undefined &&
-        this.viewProject !== undefined &&
-        this.viewTable !== undefined &&
-        this.preselectedVariables.length > 0
-      );
-    },
   },
 });
 </script>

ui/src/helpers/utils.ts

@@ -210,7 +210,3 @@ export function getTablesFromListOfFiles(
     ? listOfFiles.filter((file: string) => file.endsWith(".parquet"))
     : [];
 }
-
-export function encodeUriComponent(component: string) {
-  return component.replaceAll("/", "%2F").replaceAll("-", "%2D");
-}

ui/src/types/types.d.ts

@@ -35,21 +35,16 @@ interface Dictionary<T> {
 // Maybe later expand with float/int/enum/character
 export type TypeObject = Record<string, TypeString>;
 export type ProjectsExplorerData = {
-  editView: boolean;
   fileToDelete: string;
   folderToDeleteFrom: string;
   projectToEdit: string;
   projectToEditIndex: number;
   loading: boolean;
   successMessage: string;
   filePreview: Array<any>;
-  fileInfo: {
-    fileSize: string;
-    dataSizeRows: number;
-    dataSizeColumns: number;
-    sourceLink: string;
-    variables: Array<string>;
-  };
+  fileSize: string;
+  dataSizeRows: number;
+  dataSizeColumns: number;
   createNewFolder: boolean;
   loading_preview: boolean;
   projectContent: Record<string, string[]>;