Merge pull request #732 from molgenis/revert-730-revert-729-feat/m105…

…06-ui-linkfile-get-info

feat: M10506 UI linkfile edit

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

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

ui/src/api/api.ts

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

ui/src/components/FileExplorer.vue

@@ -25,6 +25,7 @@
         rowIcon="table"
         rowIconAlt="file-earmark"
         :altIconCondition="isNonTableType"
+        :preselectedItem="selectedFile"
         selectionColor="primary"
       ></ListGroup>
     </div>
@@ -66,9 +67,18 @@ 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,22 +62,9 @@ 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;
-      return Math.ceil(this.maxWidth / (20 * l - (10 / l - 1) * 50));
+      // max width divided by number of characters * fontsize to evenly spread headers
+      return Math.floor(this.maxWidth / (l * 16));
     },
     dataToPreview() {
       // converting ints to in, otherwise the id numbers look awkward

ui/src/components/VariableSelector.vue

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

ui/src/components/ViewEditor.vue

@@ -65,7 +65,11 @@
       </div>
       <div class="row">
         <div class="col-12" v-if="variables.length > 0">
-          <VariableSelector :variables="variables" />
+          <VariableSelector
+            :variables="variables"
+            :preselectedVariables="preselectedVariables"
+            ref="variableSelector"
+          />
         </div>
       </div>
       <div class="row mt-3">
@@ -111,7 +115,12 @@
                 Table:
               </label>
               <div class="col-sm-9">
-                <input type="string" class="form-control" v-model="vwTable" />
+                <input
+                  type="string"
+                  class="form-control"
+                  :disabled="isEditMode"
+                  v-model="vwTable"
+                />
               </div>
             </div>
           </form>
@@ -122,7 +131,13 @@
           class="btn btn-primary"
           type="button"
           @click="
-            onSave(srcProject, sourceObject, vwProject, linkedObject, variables)
+            onSave(
+              srcProject,
+              sourceObject,
+              vwProject,
+              linkedObject,
+              ($refs.variableSelector as any).selectedVariables
+            )
           "
         >
           <i class="bi bi-floppy-fill"></i> Save
@@ -156,6 +171,10 @@ export default defineComponent({
     viewTable: String,
     viewProject: String,
     viewFolder: String,
+    preselectedVariables: {
+      default: [],
+      type: Array as PropType<string[]>,
+    },
     projects: {
       default: [],
       type: Array as PropType<Project[]>,
@@ -184,9 +203,12 @@ export default defineComponent({
 
     const isSrcTableSet = () => {
       return (
-        props.sourceTable != "" &&
-        props.sourceFolder != "" &&
-        props.sourceProject != ""
+        props.sourceTable !== "" &&
+        props.sourceFolder !== "" &&
+        props.sourceProject !== "" &&
+        props.sourceTable !== undefined &&
+        props.sourceFolder !== undefined &&
+        props.sourceProject !== undefined
       );
     };
     const fetchVariables = async () => {
@@ -235,6 +257,7 @@ 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;
@@ -277,6 +300,18 @@ 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,3 +210,7 @@ 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,16 +35,21 @@ 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>;
-  fileSize: string;
-  dataSizeRows: number;
-  dataSizeColumns: number;
+  fileInfo: {
+    fileSize: string;
+    dataSizeRows: number;
+    dataSizeColumns: number;
+    sourceLink: string;
+    variables: Array<string>;
+  };
   createNewFolder: boolean;
   loading_preview: boolean;
   projectContent: Record<string, string[]>;