arc download improvements; progress dialog; import protocol

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ARCitect",
-  "version": "v0.0.3",
+  "version": "v0.0.4",
   "private": true,
   "engines": {
     "node": ">=v16.13",

packages/renderer/src/dialogs/AddProtocolDialog.vue

@@ -0,0 +1,57 @@
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar';
+import { reactive, onMounted } from 'vue';
+
+const iProps = reactive({
+  value: ''
+});
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const onSubmit = async () => {
+  onDialogOK([true,iProps.value]);
+};
+
+const importProtocol = async ()=>{
+  const files = await window.ipc.invoke('LocalFileSystemService.selectAny');
+  onDialogOK([false,files]);
+};
+
+</script>
+
+<template>
+  <q-form
+    @submit="onSubmit"
+  >
+    <q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
+      <q-card class="q-dialog-plugin" style="min-width:45em;">
+        <q-card-section>
+          <div class="text-h6">Create or Import Protocol</div>
+        </q-card-section>
+
+        <q-card-section>
+          <q-input
+            filled
+            v-model="iProps.value"
+            label="Protocol Name"
+            :rules="[
+                val => !!val || `invalid ${props.property}`,
+              ]"
+            lazy-rules
+          />
+        </q-card-section>
+
+        <q-card-actions align="right" style="margin:0 1.5em 1.5em;">
+          <q-btn color="secondary" icon='add_box' label="New Protocol" type='submit' class='text-weight-bold' />
+          <q-btn color="secondary" icon='open_in_new' label="Import Protocol" @click='importProtocol' class='text-weight-bold' />
+          <q-btn color="secondary" label="Cancel" @click="onDialogCancel" class='text-weight-bold'/>
+        </q-card-actions>
+      </q-card>
+
+    </q-dialog>
+  </q-form>
+</template>

packages/renderer/src/dialogs/ProgressDialog.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { useDialogPluginComponent } from 'quasar';
+import { reactive, onMounted } from 'vue';
+
+export interface Props {
+  items: Array,
+  title: String,
+  ok_title: String,
+  cancel_title: String,
+  error: String
+};
+const props = defineProps<Props>();
+
+const iProps = reactive({
+  value: ''
+});
+
+defineEmits([
+  ...useDialogPluginComponent.emits
+]);
+
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+</script>
+
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide" persistent>
+    <q-card class="q-dialog-plugin" style="min-width:45em;">
+      <q-card-section>
+        <div class="text-h6">{{props.title}}</div>
+      </q-card-section>
+
+      <q-card-section>
+        <q-list>
+          <q-item v-for='item in props.items'>
+            <q-item-section avatar style="min-width:2em;">
+              <q-circular-progress
+                :indeterminate='item[1]<1'
+                rounded
+                size="2em"
+                :thickness="0.7"
+                track-color="grey-3"
+                :color="item[1]===2 ? 'red-8' : item[1]===1 ? 'green' : 'primary'"
+                class="q-ma-md"
+                :value='100'
+              />
+            </q-item-section>
+            <q-item-section>
+              <q-item-label>{{item[0]}}</q-item-label>
+            </q-item-section>
+          </q-item>
+        </q-list>
+
+        <q-banner rounded inline-actions class="bg-red-10 text-white" dense v-if='props.error'>
+          <template v-slot:avatar>
+            <q-icon name="warning"/>
+          </template>
+          <div v-html='props.error'></div>
+        </q-banner>
+
+      </q-card-section>
+
+      <q-card-actions align="right" style="margin:0 1.5em 1.5em;">
+        <q-btn color="secondary" :label="props.ok_title" @click="onDialogOK" type='submit' class='text-weight-bold' :disabled='props.items[props.items.length-1][1]!==1'/>
+        <q-btn color="secondary" :label="props.cancel_title" @click="onDialogCancel" class='text-weight-bold' :disabled='props.items[props.items.length-1][1]<1'/>
+      </q-card-actions>
+    </q-card>
+
+  </q-dialog>
+</template>

packages/renderer/src/docs/git.ts

@@ -0,0 +1,5 @@
+export default `
+# Git Help
+
+`
+

packages/renderer/src/docs/home.ts

@@ -3,22 +3,35 @@ export default `
 
 If you want to create, edit, or extend an ARC, this is the tool to use.
 
-ARCitect offers the following ways to open an ARC:
+![NewsARC](../assets/Home-Help.png)
 
-* Create a brand new ARC on your local computer.
-* Open an ARC on your computer.
-* Browse and import an cloud stored ARC.
 
-Once opened, it is possible to navigate through your ARC much like a file browser and perform the following functions
+The ARCitect offers the following ways to open an ARC:   
 
-* Add data or other files
-* Edit text documents
-* Add or modify metadata.
+**New ARC** (1)  
+Create a brand new ARC on your local computer.
+**Open ARC** (2)   
+Open an ARC on your computer.   
+**Download ARC** (3)   
+Browse and import an ARC from the DataHUB.
+
+Once opened, it is possible to navigate through your ARC much like a file browser and perform the following functions:   
+   
+**Add Items** (4)   
+Create new items.   
+**Adjust Information** (5)   
+Add context to your research.     
+**Add Content** (6)   
+Upload existing datasets or write down protocols.
 
 After completing the adjustments, the following options are available:
 
-* Save ARC locally
-* Upload the ARC to a DataHUB
-* Synchronize local changes with the cloud-stored
+**Login** (7)   
+Log into your DataPLANT account and you will be able to view your private ARCs, commit changes and upload them.     
+**Reset ARC** (8)   
+If you are unsure about your changes, reset the ARC.   
+**Synchronize ARC** (9)   
+Commit your changes indicating them and synchronize your ARC, allowing your colleagues or yourself to follow the process.
+
 `
 

packages/renderer/src/views/ArcTreeView.vue

@@ -3,6 +3,7 @@ import { reactive, ref, nextTick, watch, onMounted, onUnmounted } from 'vue';
 import appProperties from '../AppProperties.ts';
 import ArcCommanderService from '../ArcCommanderService.ts';
 import StringDialog from '../dialogs/StringDialog.vue';
+import AddProtocolDialog from '../dialogs/AddProtocolDialog.vue';
 import NewAssayDialog from '../dialogs/NewAssayDialog.vue';
 import { useQuasar } from 'quasar'
 const $q = useQuasar();
@@ -103,14 +104,15 @@ const addAssay = async ()=>{
 const addProtocol = async n=>{
   const path = n.id.split('/').slice(0,-1).join('/');
   $q.dialog({
-    component: StringDialog,
-    componentProps: {
-      title: 'Add Protocol',
-      property: 'Name',
-      icon: 'add_box'
-    }
+    component: AddProtocolDialog
   }).onOk( async data => {
-    await window.ipc.invoke('LocalFileSystemService.createEmptyFile', path+'/'+data);
+    if(data[0]){
+      await window.ipc.invoke('LocalFileSystemService.createEmptyFile', path+'/'+data[1]);
+    } else {
+      for(const fpath of data[1]){
+        await window.ipc.invoke('LocalFileSystemService.copy', [fpath,path]);
+      }
+    }
   });
 };
 

packages/renderer/src/views/DataHubView.vue

@@ -4,8 +4,13 @@ import {onMounted,onUnmounted,reactive,ref,nextTick} from 'vue';
 import appProperties from '../AppProperties.ts';
 import ViewItem from '../components/ViewItem.vue';
 
+import ProgressDialog from '../dialogs/ProgressDialog.vue';
+
 import ArcCommanderService from '../ArcCommanderService.ts';
 
+import { useQuasar } from 'quasar'
+const $q = useQuasar();
+
 const log = ref(null);
 const props = reactive({
   list: [],
@@ -48,18 +53,37 @@ const importArc = async url =>{
   if(!destination)
     return;
 
-  props.msgs = [];
-  props.state = 0;
-  props.showDialog = true;
-
   let url_with_credentials = url;
   if(appProperties.user)
-    url_with_credentials = url_with_credentials.replace('https://', `https://oauth2:${appProperties.user.token.access_token}@`)
+    url_with_credentials = url_with_credentials.replace('https://', `https://oauth2:${appProperties.user.token.access_token}@`);
+
+  const dialogProps = reactive({
+      title: 'Downloading ARC',
+      ok_title: 'Open',
+      cancel_title: 'Close',
+      error: '',
+      items: [
+        ['Downloading ARC',0]
+      ]
+    })
+
+  $q.dialog({
+    component: ProgressDialog,
+    componentProps: dialogProps
+  }).onOk( () => {
+    openLocalArc();
+  });
 
-  const status = await window.ipc.invoke('ArcCommanderService.run', {
-    args: [`get`,`-r`,url_with_credentials],
+  const response = await window.ipc.invoke('GitService.run', {
+    args: [`clone`,url_with_credentials],
     cwd: destination
   });
+  if(response[1].includes('fatal:')){
+    dialogProps.items[0][1] = 2;
+    dialogProps.error = response[1];
+    return;
+  }
+
   props.localUrl = destination + '/' + url.split('/').pop().split('.git')[0];
   await window.ipc.invoke('GitService.run', {
     args: [`remote`,`remove`,`origin`],
@@ -69,8 +93,7 @@ const importArc = async url =>{
     args: [`remote`,`add`,`origin`,url],
     cwd: props.localUrl
   });
-
-  props.state = status[0] ? 1 : 2;
+  dialogProps.items[0][1] = 1;
 };
 
 onMounted(async () => {
@@ -102,40 +125,6 @@ onUnmounted(async () => {
 </script>
 
 <template>
-
-  <q-dialog v-model="props.showDialog" persistent>
-    <q-card class='q-pd-md' style="width:30em;">
-      <q-card-section class="row items-center">
-          <q-circular-progress
-            :indeterminate='props.state<1'
-            rounded
-            size="2em"
-            :thickness="0.7"
-            track-color="grey-3"
-            :color="props.state===2 ? 'red-8' : props.state===1 ? 'green' : 'primary'"
-            class="q-ma-md"
-            :value='100'
-          />
-          <div class="text-h6">Downloading ARC</div>
-      </q-card-section>
-
-      <q-separator />
-
-      <q-scroll-area class='bg-grey-3' style="height: 12em; padding:1.5em;" ref='log' visible>
-        <q-banner rounded v-for="(item,i) in props.msgs" style="margin:0.5em 0;padding:0.5em 1em;min-height:2em;" :class="item.toLowerCase().includes('error') ? 'bg-red-9 text-white' : 'bg-grey-4'">
-          {{item}}
-        </q-banner>
-      </q-scroll-area>
-
-      <q-separator />
-
-      <q-card-actions align="right">
-        <q-btn class='text-weight-bold' color='secondary' :disable='props.state!==1' v-close-popup v-on:click="openLocalArc">Open</q-btn>
-        <q-btn class='text-weight-bold' color='secondary' :disable='props.state<1' v-close-popup>Close</q-btn>
-      </q-card-actions>
-    </q-card>
-  </q-dialog>
-
   <q-list bordered class="rounded-borders">
     <ViewItem
       icon="cloud_download"

packages/renderer/src/views/HelpView.vue

@@ -9,6 +9,7 @@ import study_help from '../docs/study.ts';
 import home_help from '../docs/home.ts';
 import investigation_help from '../docs/investigation.ts';
 import datahub_help from '../docs/datahub.ts';
+import git_help from '../docs/git.ts';
 
 const props = reactive({
   help: '# Help'
@@ -21,7 +22,8 @@ const init = async () => {
     case appProperties.STATES.EDIT_STUDY: return props.help = study_help;
     case appProperties.STATES.EDIT_ASSAY: return props.help = assay_help;
     case appProperties.STATES.OPEN_DATAHUB: return props.help = datahub_help;
-    default: return props.help = '# Missing Help';
+    case appProperties.STATES.GIT: return props.help = git_help;
+    default: return props.help = '# ';
   }
 };