Changeset 12677

Timestamp:

06/26/2023 08:52:54 AM (3 years ago)

Author:

amieiro

Message:

Translate: Preload the suggestions

See ​https://github.com/WordPress/wordpress.org/pull/141

File:

• sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-translation-suggestions/js/translation-suggestions.js (modified) (19 diffs)

sites/trunk/wordpress.org/public_html/wp-content/plugins/wporg-gp-translation-suggestions/js/translation-suggestions.js

@@ +1 @@
+/* global $gp */
 ( function( $ ){
     /**
-     * Stores the originalId of the translations for which OpenAI has already been queried,
-     * to avoid making the query another time.
+     * Stores (caches) the translation memory (TM) suggestions that has already been queried,
+     * to avoid making the query another time. The key is the originalId.
      *
      * @type {array}
      */
+    var TMSuggestionRequested = [];
+
+    /**
+     * Stores (caches) the OpenAI suggestions that has already been queried,
+     * to avoid making the query another time. The key is the originalId.
+     *
+     * @type {array}
+     */
     var OpenAITMSuggestionRequested = [];
 
     /**
-     * Stores the originalId of the translations for which DeepL has already been queried,
-     * to avoid making the query another time.
+     * Stores (caches) the DeepL suggestions that has already been queried,
+     * to avoid making the query another time. The key is the originalId.
      *
      * @type {array}
@@ -16 +25 @@
     var DeeplTMSuggestionRequested = [];
 
-    function fetchSuggestions( $container, apiUrl, originalId, translationId, nonce ) {
+    /**
+     * Stores (caches) the "Other Languages" suggestions that has already been queried,
+     * to avoid making the query another time. The key is the originalId.
+     *
+     * @type {array}
+     */
+    var OtherLanguagesSuggestionRequested = [];
+
+    /**
+     * Requests the suggestions from an external system, stores them in the cache and appended them to the container.
+     * If the suggestions are already in the cache, they are appended to the container.
+     *
+     * @param {object} $container    The container where the suggestions will be stored.
+     * @param {string} apiUrl        The URL of the API.
+     * @param {number} originalId    The ID of the original string.
+     * @param {number} translationId The ID of the translation string.
+     * @param {string} nonce         The nonce to use to make the request.
+     * @param {string} type          The type of suggestions to fetch: TM, OpenAI, DeepL, OL (Other Languages).
+     *
+     * @return {void}
+     */
+    function fetchSuggestions( $container, apiUrl, originalId, translationId, nonce, type ) {
+        var cachedSuggestion = getTheSuggestionFromTheCache( type, originalId );
+        if ( cachedSuggestion ) {
+            $container.removeClass( 'fetching' );
+            $container.find( '.suggestions__loading-indicator' ).remove();
+            if ( isThisTypeOfSuggestionInTheContainer( $container, type ) ) {
+                return;
+            }
+
+            $container.append( cachedSuggestion );
+            removeNoSuggestionsMessage( $container );
+            copyTranslationMemoryToSidebarTab( $container );
+            return;
+        }
+        // Store a string with a space to avoid making the same request another time.
+        storeTheSuggestionInTheCache( type, originalId, ' ' );
         var xhr = $.ajax( {
             url: apiUrl,
@@ -32 +77 @@
             if ( response.success ) {
                 $container.append( response.data );
+                storeTheSuggestionInTheCache( type, originalId, response.data );
                 removeNoSuggestionsMessage( $container );
-                copyTranslationMemoryToSidebarTab();
+                copyTranslationMemoryToSidebarTab( $container );
             } else {
                 $container.append( $( '<span/>', { 'text': 'Error while loading suggestions.' } ) );
@@ -52 +98 @@
 
     /**
+     * Gets the suggestions for the first row and stores them in the local cache.
+     *
+     * @return {void}
+     */
+    function getSuggestionsForTheFirstRow() {
+        var firstEditor = $( '#translations' ).find( '.editor' ).first();
+        var row_id = firstEditor.closest( 'tr' ).attr( 'row' );
+        if ( ! row_id ) {
+            return;
+        }
+        firstEditor.row_id = row_id;
+        firstEditor.original_id = $gp.editor.original_id_from_row_id( row_id );
+        firstEditor.translation_id = $gp.editor.translation_id_from_row_id( row_id );
+        maybeFetchTranslationMemorySuggestions( firstEditor );
+        maybeFetchOpenAISuggestions( firstEditor );
+        maybeFetchDeeplSuggestions( firstEditor );
+        maybeFetchOtherLanguageSuggestions( firstEditor );
+    }
+
+    /**
+     * Gets a suggestion from the local cache.
+     *
+     * @param {string} type       The type of suggestions to fetch: TM, OpenAI, DeepL, OL (Other Languages).
+     * @param {number} originalId The ID of the original string.
+     *
+     * @return {string|boolean}  The suggestion if it is in the cache, false otherwise.
+     */
+    function getTheSuggestionFromTheCache( type, originalId ) {
+
+        switch ( type ) {
+            case 'TM':
+                if ( ! ( originalId in TMSuggestionRequested ) ) {
+                    return false;
+                }
+                return TMSuggestionRequested[ originalId ];
+                break;
+            case 'OpenAI':
+                if ( ! ( originalId in OpenAITMSuggestionRequested ) ) {
+                    return false;
+                }
+                return OpenAITMSuggestionRequested[ originalId ];
+                break;
+            case 'DeepL':
+                if ( ! ( originalId in DeeplTMSuggestionRequested ) ) {
+                    return false;
+                }
+                return DeeplTMSuggestionRequested[ originalId ];
+                break;
+            case 'OL':
+                if ( ! ( originalId in OtherLanguagesSuggestionRequested ) ) {
+                    return false;
+                }
+                return OtherLanguagesSuggestionRequested[ originalId ];
+                break;
+        }
+    }
+
+    /**
+     * Stores the suggestion in the local cache (JavaScript variables).
+     *
+     * @param {string} type       The type of suggestions to fetch: TM, OpenAI, DeepL, OL (Other Languages).
+     * @param {number} originalId The ID of the original string.
+     * @param {string} suggestion The suggestion to store.
+     *
+     * @return {void}
+     */
+    function storeTheSuggestionInTheCache( type, originalId, suggestion ) {
+        switch (type) {
+            case 'TM':
+                TMSuggestionRequested[ originalId ] = suggestion;
+                break;
+            case 'OpenAI':
+                OpenAITMSuggestionRequested[ originalId ] = suggestion;
+                break;
+            case 'DeepL':
+                DeeplTMSuggestionRequested[ originalId ] = suggestion;
+                break;
+            case 'OL':
+                OtherLanguagesSuggestionRequested[ originalId ] = suggestion;
+                break;
+        }
+    }
+
+    /**
      * Copies the translation memory to the sidebar tab and adds the number of items in the TM to the tab.
      *
-     * @return {void}
-     */
-    function copyTranslationMemoryToSidebarTab(){
-        var divSidebarWithTM = $gp.editor.current.find( '.meta.translation-memory' ).first();
+     * @param {object} $container The container where the suggestions are stored.
+     *
+     * @return {void}
+     */
+    function copyTranslationMemoryToSidebarTab( $container ){
+        var editor = $container.closest( '.editor' );
+        var divSidebarWithTM = editor.find( '.meta.translation-memory' ).first();
         var divId = divSidebarWithTM.attr( 'data-row-id' );
-        var TMcontainer = $gp.editor.current.find( '.suggestions__translation-memory' );
+        var TMcontainer = editor.find( '.suggestions__translation-memory' );
         if ( !TMcontainer.length ) {
             return;
@@ -72 +205 @@
 
     /**
-     * Add the suggestion from the translation memory to the translation textarea if
+     * Adds the suggestion from the translation memory to the translation textarea if
      * the suggestion has 100% of accuracy.
+     *
+     * @param {string} data The HTML response from the TM.
      *
      * @return {void}
@@ -98 +233 @@
     }
 
-    function maybeFetchTranslationMemorySuggestions() {
-        var $container = $gp.editor.current.find( '.suggestions__translation-memory' );
+    /**
+     * Fetches the suggestions from the translation memory.
+     *
+     * @param {object} editor The editor object.
+     *
+     * @return {void}
+     */
+    function maybeFetchTranslationMemorySuggestions( editor ) {
+        var $container = editor.find( '.suggestions__translation-memory' );
         if ( !$container.length ) {
             return;
@@ -108 +250 @@
         }
 
-        if ( !$gp.editor.current.find('translation-suggestion.with-tooltip.translation').first() ) {
+        if ( !editor.find('translation-suggestion.with-tooltip.translation').first() ) {
             return;
         }
@@ -114 +256 @@
         $container.addClass( 'fetching' );
 
-        var originalId = $gp.editor.current.original_id;
-        var translationId = $gp.editor.current.translation_id;
+        var originalId = editor.original_id;
+        var translationId = editor.translation_id;
         var nonce = $container.data( 'nonce' );
 
-        fetchSuggestions( $container, window.WPORG_TRANSLATION_MEMORY_API_URL, originalId, translationId, nonce );
+        fetchSuggestions( $container, window.WPORG_TRANSLATION_MEMORY_API_URL, originalId, translationId, nonce, 'TM' );
     }
 
@@ -124 +266 @@
      * Gets the suggestions from the OpenAI API.
      *
+     * @param {object} editor The editor object.
+     *
      * @return {void}
      **/
-    function maybeFetchOpenAISuggestions() {
-        maybeFetchExternalSuggestions( 'OpenAI', gpTranslationSuggestions.get_external_translations.get_openai_translations, window.WPORG_TRANSLATION_MEMORY_OPENAI_API_URL );
+    function maybeFetchOpenAISuggestions( editor ) {
+        maybeFetchExternalSuggestions( editor, 'OpenAI', gpTranslationSuggestions.get_external_translations.get_openai_translations, window.WPORG_TRANSLATION_MEMORY_OPENAI_API_URL );
     }
 
@@ -133 +277 @@
      * Gets the suggestions from the DeepL API.
      *
+     * @param {object} editor The editor object.
+     *
      * @return {void}
      **/
-    function maybeFetchDeeplSuggestions() {
-        maybeFetchExternalSuggestions( 'DeepL', gpTranslationSuggestions.get_external_translations.get_deepl_translations, window.WPORG_TRANSLATION_MEMORY_DEEPL_API_URL );
+    function maybeFetchDeeplSuggestions( editor ) {
+        maybeFetchExternalSuggestions( editor, 'DeepL', gpTranslationSuggestions.get_external_translations.get_deepl_translations, window.WPORG_TRANSLATION_MEMORY_DEEPL_API_URL );
     }
 
@@ -142 +288 @@
      * Gets the suggestions from an external service.
      *
-     * @param type                   The type of the external service: OpenAI or DeepL.
-     * @param getExternalSuggestions Whether to get the suggestions from the external service.
-     * @param apiUrl                 The URL of the API.
-     *
-     * @return {void}
-     */
-    function maybeFetchExternalSuggestions( type, getExternalSuggestions, apiUrl ) {
-        var $container = $gp.editor.current.find( '.suggestions__translation-memory' );
+     * @param {object}  editor                 The editor.
+     * @param {string}  type                   The type of the external service: OpenAI or DeepL.
+     * @param {boolean} getExternalSuggestions Whether to get the suggestions from the external service.
+     * @param {string}  apiUrl                 The URL of the API.
+     *
+     * @return {void}
+     */
+    function maybeFetchExternalSuggestions( editor, type, getExternalSuggestions, apiUrl ) {
+        var $container = editor.find( '.suggestions__translation-memory' );
         if ( !$container.length ) {
             return;
@@ -156 +303 @@
             return;
         }
-        var originalId = $gp.editor.current.original_id;
-        var translationId = $gp.editor.current.translation_id;
+        var originalId = editor.original_id;
+        var translationId = editor.translation_id;
         var nonce = $container.data( 'nonce' );
 
-        if( true === wasRequestMade( type, originalId ) ) {
-            return;
-        }
-
-        fetchSuggestions( $container, apiUrl, originalId, translationId, nonce );
-    }
-
-    /**
-     * Checks if the request was already made for this originalId and type.
-     *
-     * @param type        The type of the external service: OpenAI or DeepL.
-     * @param originalId  The original ID.
-     *
-     * @returns {boolean} Whether the request was already made.
-     */
-    function wasRequestMade( type, originalId ) {
-        if ('OpenAI' === type) {
-            if ( originalId in OpenAITMSuggestionRequested ) {
-                return true;
-            } else {
-                OpenAITMSuggestionRequested[originalId] = true;
-            }
-        }
-        if ('DeepL' === type) {
-            if ( originalId in DeeplTMSuggestionRequested ) {
-                return true;
-            } else {
-                DeeplTMSuggestionRequested[originalId] = true;
-            }
-        }
-        return false;
-    }
-
-    function maybeFetchOtherLanguageSuggestions() {
-        var $container = $gp.editor.current.find( '.suggestions__other-languages' );
+        fetchSuggestions( $container, apiUrl, originalId, translationId, nonce, type );
+    }
+
+    /**
+     * Gets the suggestions from other languages.
+     *
+     * @param {object} editor The editor object.
+     *
+     * @return {void}
+     **/
+    function maybeFetchOtherLanguageSuggestions( editor ) {
+        var $container = editor.find( '.suggestions__other-languages' );
         if ( ! $container.length ) {
             return;
@@ -205 +329 @@
         $container.addClass( 'fetching' );
 
-        var originalId = $gp.editor.current.original_id;
-        var translationId = $gp.editor.current.translation_id;
+        var originalId = editor.original_id;
+        var translationId = editor.translation_id;
         var nonce = $container.data( 'nonce' );
 
-        fetchSuggestions( $container, window.WPORG_OTHER_LANGUAGES_API_URL, originalId , translationId,  nonce );
+        fetchSuggestions( $container, window.WPORG_OTHER_LANGUAGES_API_URL, originalId , translationId,  nonce, 'OL' );
     }
 
@@ -217 +341 @@
      * This is needed because the suggestions are loaded asynchronously.
      *
-     * @param $container
+     * @param {object} $container The container where the suggestions are stored.
+     *
+     * @return {void}
      */
     function removeNoSuggestionsMessage( $container ) {
@@ -224 +350 @@
             $container.find( '.no-suggestions' ).hide();
         } else {
-            $container = removeNoSuggestionsDuplicateMessage( $container );
+            removeNoSuggestionsDuplicateMessage( $container );
         }
     }
@@ -231 +357 @@
      * Removes duplicate "No suggestions" messages.
      *
-     * @param $container
-     * @returns {*|jQuery}
+     * @param {object} $container The container where the suggestions are stored.
+     *
+     * @return {void}
      */
     function removeNoSuggestionsDuplicateMessage( $container ) {
@@ -248 +375 @@
             }
         });
-
-        return $html.prop('outerHTML');
     }
     function copySuggestion( event ) {
@@ -274 +399 @@
     }
 
+    /**
+     * Checks if the suggestions of a certain type are in the container.
+     *
+     * @param {object} container The container.
+     * @param {string} type The type of the suggestions: OpenAI or DeepL.
+     *
+     * @return {boolean}
+     */
+    function isThisTypeOfSuggestionInTheContainer( container, type ) {
+        switch ( type ) {
+            case 'TM':
+                if ( container.find( '.translation-suggestion.with-tooltip.translation' ).length > 0 ) {
+                    return true;
+                }
+                break;
+            case 'OpenAI':
+                if ( container.find( '.translation-suggestion.with-tooltip.openai' ).length > 0 ) {
+                    return true;
+                }
+                break;
+            case 'DeepL':
+                if ( container.find( '.translation-suggestion.with-tooltip.deepl' ).length > 0 ) {
+                    return true;
+                }
+                break;
+        }
+        return false;
+    }
+
     $gp.editor.show = ( function( original ) {
         return function() {
             original.apply( $gp.editor, arguments );
-            maybeFetchTranslationMemorySuggestions();
-            maybeFetchOpenAISuggestions();
-            maybeFetchDeeplSuggestions();
-            maybeFetchOtherLanguageSuggestions();
-        }
+            maybeFetchTranslationMemorySuggestions( $gp.editor.current );
+            maybeFetchOpenAISuggestions( $gp.editor.current );
+            maybeFetchDeeplSuggestions( $gp.editor.current );
+            maybeFetchOtherLanguageSuggestions( $gp.editor.current );
+            var nextEditor = $gp.editor.current.nextAll('tr.editor' ).first();
+            if ( nextEditor.length ) {
+                var row_id = nextEditor.closest( 'tr' ).attr( 'row' );
+                nextEditor.row_id = row_id;
+                nextEditor.original_id = $gp.editor.original_id_from_row_id( row_id );
+                nextEditor.translation_id = $gp.editor.translation_id_from_row_id( row_id );
+                maybeFetchTranslationMemorySuggestions( nextEditor );
+                maybeFetchOpenAISuggestions( nextEditor );
+                maybeFetchDeeplSuggestions( nextEditor );
+                maybeFetchOtherLanguageSuggestions( nextEditor );
+            }
+        };
     })( $gp.editor.show );
 
@@ -290 +455 @@
             $( $gp.editor.table )
                 .on( 'click', '.translation-suggestion', copySuggestion );
-        }
+            $( document ).ready( function() {
+                getSuggestionsForTheFirstRow();
+            });
+        };
     })( $gp.editor.install_hooks );