38 integrate palmyra with google drive api

README.txt

@@ -17,10 +17,10 @@ CONTENTS OF THIS FILE
 INTRODUCTION
 ------------
 
-PALMYRA is a configurable platform independent graphical dependency tree visualization and editing software. PALMYRA has been designed with morphologically 
+Palmyra is a configurable platform independent graphical dependency tree visualization and editing software. Palmyra has been designed with morphologically 
 rich languages in mind, and thus has a number of features to support the complexities of these languages, especially for supporting easy change of 
 morphological tokenization through edits, additions, deletions and splits/merges of words. It can also be used to annotate a multitude of linguistic 
-features. PALMYRA uses an intuitive drag-and-drop metaphor for editing tree structures. Palmyra can be configured to be used with any dependency 
+features. Palmyra uses an intuitive drag-and-drop metaphor for editing tree structures. Palmyra can be configured to be used with any dependency 
 representation.
 
 This resource was developed at the Computational Approaches to Modeling Language (CAMeL) Lab in New York University Abu Dhabi.
@@ -40,13 +40,13 @@ FEATURES
 
 CITATION
 --------
-Please cite Javed et al. (2018) and Taji and Habash (2020) if you use PALMYRA in your research. 
+Please cite Javed et al. (2018) and Taji and Habash (2020) if you use Palmyra in your research. 
 
 PUBLICATIONS
 ------------
-[1] Talha Javed, Nizar Habash and Dima Taji. PALMYRA: A Platform Independent Dependency Annotation Tool for Morphologically Rich Languages. 11th edition 
+[1] Talha Javed, Nizar Habash and Dima Taji. Palmyra: A Platform Independent Dependency Annotation Tool for Morphologically Rich Languages. 11th edition 
 of the Language Resources and Evaluation Conference (LREC 2018), Miyazaki, Japan. (http://www.lrec-conf.org/proceedings/lrec2018/pdf/333.pdf)
-[2] Dima Taji and Nizar Habash. PALMYRA 2.0: A Configurable Multilingual Platform Independent Tool for Morphology and Syntax Annotation. In Proceedings 
+[2] Dima Taji and Nizar Habash. Palmyra 2.0: A Configurable Multilingual Platform Independent Tool for Morphology and Syntax Annotation. In Proceedings 
 of Universal Dependencies Workshop (UDW) 2020. (https://aclanthology.org/2020.udw-1.19.pdf)
 
 

about.html

@@ -58,13 +58,13 @@ <h3>Publications</h3>
   [<a href="http://www.lrec-conf.org/proceedings/lrec2018/summaries/333.html" target="_blank">BIB</a>] -->
   </li>
   <li> Talha Javed, Nizar Habash, and Dima Taji. 2018.
-      PALMYRA: A Platform Independent Dependency Annotation Tool for Morphologically Rich Languages.
+      Palmyra: A Platform Independent Dependency Annotation Tool for Morphologically Rich Languages.
        In Proceedings of LREC 2018.
   [<a href="http://www.lrec-conf.org/proceedings/lrec2018/pdf/333.pdf" target="_blank">PDF</a>]
   [<a href="http://www.lrec-conf.org/proceedings/lrec2018/summaries/333.html" target="_blank">BIB</a>]
   </li>
   <li> Dima Taji and Nizar Habash. 2020.
-    PALMYRA 2.0: A Configurable Multilingual Platform Independent Tool for Morphology and Syntax Annotation.
+    Palmyra 2.0: A Configurable Multilingual Platform Independent Tool for Morphology and Syntax Annotation.
     In Proceedings of Universal Dependencies Workshop (UDW) 2020.
       [<a href="https://www.aclweb.org/anthology/2020.udw-1.19.pdf" target="_blank">PDF</a>]
   [<a href="https://www.aclweb.org/anthology/2020.udw-1.19.bib" target="_blank">BIB</a>]

authenticator.js

@@ -4,9 +4,9 @@ function logout() {
   // remove access token from session storage
   sessionStorage.removeItem("GCP_access_token");
   // remove access token from gapi client
-  // gapi.client.setToken(null);
+  gapi.client.setToken(null);
   // disable browse button
-  // $("#browse_btn").hide();
+  $("#browse_btn").hide();
   // if logged out successfully, hide logout button && show authentication button
   $(".toolbar [id='logout_btn']").hide();
   $("[id='upload1']").hide();
@@ -15,66 +15,55 @@ function logout() {
 
 function onAuthenticated() {
   // set access token in gapi client for future requests
-  // gapi.client.setToken({ access_token: getTokenFromSessionStorage() });
   const accessToken = getTokenFromSessionStorage();
+  gapi.client.setToken({ access_token: accessToken});
   if (accessToken) {
     isAuthenticated = true;
     // alert("Authenticated with Google Drive successfully!");
     // enable browse button
-    enableBrowseButton(accessToken);
+    enableBrowseButton();
     // if authenticated successfully, hide authentication button && show logout button
     $(".toolbar [id='auth_btn']").hide();
     $(".toolbar [id='logout_btn']").show();
     $("[id='upload1']").show();
-
   }
 }
 
 function authenticate() {
-  window.onbeforeunload = function () {};
-  window.open("https://mra9407.pythonanywhere.com/authorize", "_self", "popup");
-  // // callbackafter access token is retrieved
-  // tokenClient.callback = async (resp) => {
-  //   if (resp.error !== undefined) {
-  //     throw resp;
-  //   }
-  //   setTokenInSessionStorage(gapi.client.getToken().access_token);
-  //   onAuthenticated();
-  // };
-  // // need to add a check for when the token expires
-  // if (gapi.client.getToken() === null) {
-  //   // Prompt the user to select a Google Account and ask for consent to share their data
-  //   // when establishing a new session.
-  //   tokenClient.requestAccessToken({ prompt: "consent" });
-  // }
+  // callbackafter access token is retrieved
+  tokenClient.callback = async (resp) => {
+    if (resp.error !== undefined) {
+      throw resp;
+    }
+    // get client token from backend
+    axios({method: 'get', url:`${SERVER_ORIGIN}/authenticate_user`})
+    .then((rsp) => {
+      let credentials = rsp.data;
+      setTokenInSessionStorage(credentials.client_token);
+      // ! may need
+      // setTokenInSessionStorage(gapi.client.getToken().access_token);
+      onAuthenticated();
+    });
+  };
+  // need to add a check for when the token expires
+  if (gapi.client.getToken() === null) {
+    // Prompt the user to select a Google Account and ask for consent to share their data
+    // when establishing a new session.
+    tokenClient.requestAccessToken({ prompt: "consent" });
+  }
 }
 
 function setTokenInSessionStorage(token, ak) {
   sessionStorage.setItem("GCP_access_token", token);
-  sessionStorage.setItem("ak", ak);
 }
 
 function getTokenFromSessionStorage() {
   return sessionStorage.getItem("GCP_access_token");
 }
 
-function getAkFromSessionStorage() {
-  return sessionStorage.getItem("ak");
-}
-
 // retrieve access token from session storage when page is loaded
 window.onload = function () {
-  const urlParams = new URLSearchParams(window.location.search);
-
-  const sessionToken = urlParams.get('token');
-  const ak = urlParams.get('ak');
-  if (sessionToken) {
-    setTokenInSessionStorage(sessionToken, ak);
-  }
-
   if (getTokenFromSessionStorage()) {
     onAuthenticated();
-  } else {
-    logout()
   }
 };

gapiLoader.js

@@ -16,73 +16,73 @@ function gapiLoaded(libraryName, callback) {
 /**
  * Callback after Google Identity Services are loaded.
  */
-// function gisLoaded() {
-//   axios
-//     .get(`${SERVER_ORIGIN}/gis_credentials`)
-//     .then((rsp) => {
-//       let credentials = rsp.data;
-//       tokenClient = google.accounts.oauth2.initTokenClient({
-//         client_id: credentials.client_id,
-//         scope: credentials.scope,
-//         callback: "", // defined later
-//       });
-//       gisInited = true;
-//       maybeEnableAuthButton();
-//     })
-//     .catch((err) => {
-//       console.log(err);
-//     });
-// }
+function gisLoaded() {
+  axios
+    .get(`${SERVER_ORIGIN}/get_gis_credentials`)
+    .then((rsp) => {
+      let credentials = rsp.data;
+      tokenClient = google.accounts.oauth2.initTokenClient({
+        client_id: credentials.client_id,
+        scope: credentials.scope.join(' '),
+        callback: "", // defined later
+      });
+      gisInited = true;
+      maybeEnableAuthButton();
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
 
 /**
  * Callback after the API client is loaded.
  */
-// function initializeGapiClient() {
-//   axios
-//     .get(`${SERVER_ORIGIN}/gapi_credentials`)
-//     .then((rsp) => {
-//       let credentials = rsp.data;
-//       gapi.client
-//         .init({
-//           apiKey: credentials.apiKey,
-//           discoveryDocs: credentials.discoveryDocs,
-//         })
-//         .then(() => {
-//           gapiClientInited = true;
-//           maybeEnableAuthButton();
-//         })
-//         .catch((err) => {
-//           console.log(err);
-//         });
-//     })
-//     .catch((err) => {
-//       console.log(err);
-//     });
-// }
+function initializeGapiClient() {
+  axios
+    .get(`${SERVER_ORIGIN}/get_gapi_credentials`)
+    .then((rsp) => {
+      let credentials = rsp.data;
+      gapi.client
+        .init({
+          apiKey: credentials.apiKey,
+          discoveryDocs: credentials.discoveryDocs,
+        })
+        .then(() => {
+          gapiClientInited = true;
+          maybeEnableAuthButton();
+        })
+        .catch((err) => {
+          console.log(err);
+        });
+    })
+    .catch((err) => {
+      console.log(err);
+    });
+}
 
 function initializeGapiPicker() {
   gapiPickerInited = true;
 }
 
 function showPicker(accessToken, callback) {
-  // axios
-  //   .get(`${SERVER_ORIGIN}/gapi_credentials`)
-  //   .then((rsp) => {
-  //     let credentials = rsp.data;
-  let view = new google.picker.DocsView(google.picker.ViewId.DOCS);
-  view.setMimeTypes("text/plain");
-  view.setMode(google.picker.DocsViewMode.LIST);
-  let picker = new google.picker.PickerBuilder()
-    .addView(view)
-    .setOAuthToken(accessToken)
-    // .setDeveloperKey(credentials.apiKey)
-    .setCallback(callback)
-    .build();
-  picker.setVisible(true);
-    // })
-    // .catch((err) => {
-    //   console.log(err);
-    // });
+  axios
+    .get(`${SERVER_ORIGIN}/get_gapi_credentials`)
+    .then((rsp) => {
+      let credentials = rsp.data;
+      let view = new google.picker.DocsView(google.picker.ViewId.DOCS);
+      view.setMimeTypes("text/plain");
+      view.setMode(google.picker.DocsViewMode.LIST);
+      let picker = new google.picker.PickerBuilder()
+        .addView(view)
+        .setOAuthToken(accessToken)
+        .setDeveloperKey(credentials.apiKey)
+        .setCallback(callback)
+        .build();
+      picker.setVisible(true);
+    })
+    .catch((err) => {
+      console.log(err);
+    });
 }
 
 function pickerCallback(data) {
@@ -123,18 +123,25 @@ function pickerCallback(data) {
   }
 }
 
-function enableBrowseButton(accessToken) {
+function enableBrowseButton() {
   let browseBtn = document.getElementById("browse_btn");
   browseBtn.style.display = "inline-block";
   browseBtn.onclick = () => {
-    showPicker(accessToken, pickerCallback);
-    // showPicker(gapi.client.getToken().access_token, pickerCallback);
+    showPicker(gapi.client.getToken().access_token, pickerCallback);
   };
 }
 
 /**
  * Enables user interaction after all libraries are loaded.
  */
-function maybeEnableSaveRemoteButton() {
-  $("#save_remote").show();
+function maybeEnableAuthButton() {
+  if (gapiClientInited && gapiPickerInited && gisInited && !isAuthenticated) {
+    $(".toolbar [id='auth_btn']").show();
+  }
 }
+
+function maybeEnableSaveRemoteButton() {
+  if (gapiClientInited && gisInited) {
+    $("#save_remote").show();
+  }
+}

main.css

@@ -60,7 +60,7 @@ h3 {
     border: none;
     border-radius: 30px;
     text-decoration: none;
-    font-family: 'bebas';
+    font-family: 'arial';
     color: #303030;
     padding: 4px 15px 6px 15px;
     cursor: pointer;
@@ -117,7 +117,7 @@ h3 {
 .mainbox nav a {
     text-decoration: none;
     color: #fff;
-    font-family: 'bebas';
+    font-family: 'arial';
     font-size: 30px;
 }
 
@@ -215,7 +215,7 @@ li #faq {
 /* navigation menu links */
 .navlinks a {
     text-decoration: none;
-    font-family: 'bebas';
+    font-family: 'arial';
     font-size: 15px;
     color: #fff;
     padding: 10px 20px 10px 20px;
@@ -333,7 +333,7 @@ body.viewtree {
     border: none;
     border-radius: 2px;
     text-decoration: none;
-    font-family: 'bebas';
+    font-family: 'arial';
     font-size: 15px;
     padding: 4px 15px 6px 15px;
     margin-top: 18px;

main.js

@@ -579,7 +579,6 @@ async function setupTreePage(FileInputChecker) {
   addFilenameToHtmlElements(file.name);
   await readConfigFile();
   parseConllFile(file);
-  // addParseButton();
   $("#auth_logout_btns").remove()
 }
 
@@ -1520,17 +1519,20 @@ function renameToggle() {
     renderRenameMode(oldFilename, filenameParent, filenameIdx), // 0 is the index 
     filenameParent.children[filenameIdx]
   )
-  // if (focusWindow !== "saveas") {
-  //   hideAllWindows();
-  //   $("#rename").show();
-  //   $("#rename-section").show();
-  //   focusWindow = "rename-section";
-  //   $("#filename_remote").val(addFileExtension(document.getElementById("conlluFileName").innerHTML, ".conllu"));
-  // } else {
-  //   hideAllWindows();
-  // }
 };
 
+// function renameRemote() {
+//   if (focusWindow !== "saveas") {
+//     hideAllWindows();
+//     $("#rename").show();
+//     $("#rename-section").show();
+//     focusWindow = "rename-section";
+//     $("#filename_remote").val(addFileExtension(document.getElementById("conlluFileName").innerHTML, ".conllu"));
+//   } else {
+//     hideAllWindows();
+//   }
+// }
+
 // END SETTINGS
 
 /*** utility functions * * * * * * */