fix: OPTIC-945: Improve the bundling strategy and ship a single entrypoint with a common vendor chunk across all libs

.github/helpers/gh_changelog_generator/gh_changelog_generator.py

@@ -1,12 +1,12 @@
 import json
 import os
 import re
+from urllib.parse import quote
 
 import jira
 import requests
 from github import Github
 from jira import JIRA
-from urllib.parse import quote
 
 COMMIT_PATTERN = re.compile(r'^(\w*):\s*(.*?)?:\s*(.*?)\s*(\(#(\d+)\))?$')
 

deploy/default.conf

@@ -120,18 +120,6 @@ http {
         alias /label-studio/label_studio/core/static_build/;
     }
 
-    # Frontend react
-    # Source: https://github.com/heartexlabs/label-studio-frontend
-    location /label-studio-frontend/ {
-        alias /label-studio/web/dist/libs/editor/;
-    }
-
-    # Data Manager
-    # Source: https://github.com/heartexlabs/dm2
-    location /dm/ {
-        alias /label-studio/web/dist/libs/datamanager/;
-    }
-
     # LabelStudio frontend
     # Source: https://github.com/heartexlabs/label-studio/blob/HEAD/label_studio/frontend/src
     location /react-app/ {

label_studio/core/utils/common.py

@@ -207,20 +207,6 @@ def paginator_help(objects_name, tag):
     )
 
 
-def find_editor_files():
-    """Find label studio files"""
-
-    # playground uses another LSF build
-    prefix = '/label-studio/'
-    editor_dir = settings.EDITOR_ROOT
-
-    # find editor files to include in html
-    editor_js = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.js')]
-    editor_css = [prefix + f for f in os.listdir(editor_dir) if f.endswith('.css')]
-
-    return {'editor_js': editor_js, 'editor_css': editor_css}
-
-
 def string_is_url(url):
     try:
         url_validator(url)

label_studio/data_manager/views.py

@@ -1,6 +1,5 @@
 """This file and its contents are licensed under the Apache License 2.0. Please see the included NOTICE for copyright information and LICENSE for a copy of the license.
 """
-from core.utils.common import find_editor_files
 from core.version import get_short_version
 from django.contrib.auth.decorators import login_required
 from django.shortcuts import render
@@ -9,5 +8,4 @@
 @login_required
 def task_page(request, pk):
     response = {'version': get_short_version()}
-    response.update(find_editor_files())
     return render(request, 'base.html', response)

label_studio/feature_flags.json

@@ -4135,7 +4135,7 @@
     },
     "fflag_fix_front_lsdv_4620_memory_leaks_100723_short": {
       "key": "fflag_fix_front_lsdv_4620_memory_leaks_100723_short",
-      "on": true,
+      "on": false,
       "prerequisites": [],
       "targets": [],
       "contextTargets": [],

label_studio/templates/base.html

@@ -16,25 +16,19 @@
   <meta name="msapplication-navbutton-color" content="#272727">  <!-- Windows Phone -->
   <meta name="apple-mobile-web-app-status-bar-style" content="#272727">  <!-- iOS Safari -->
 
+  <!-- Preload fonts -->
+  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-Regular.ttf' %}" type="font" crossorigin="anonymous">
+  <link rel="preload" href="{{settings.HOSTNAME}}{% static 'fonts/Figtree-SemiBold.ttf' %}" type="font" crossorigin="anonymous">
+
+  <!-- CSS -->
   <link href="{{settings.HOSTNAME}}{% static 'images/favicon.ico' %}" rel="shortcut icon"/>
   <link href="{{settings.HOSTNAME}}{% static 'css/uikit.css' %}" rel="stylesheet">
   <link href="{{settings.HOSTNAME}}{% static 'css/main.css' %}" rel="stylesheet">
-  <link href="{{settings.HOSTNAME}}/static/fonts/roboto/roboto.css" rel="stylesheet">
   <link href="{{settings.HOSTNAME}}/react-app/main.css?v={{ versions.backend.commit }}" rel="stylesheet">
 
-  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
-  <script src="{{settings.HOSTNAME}}{% static 'js/helpers.js' %}"></script>
-
   {% block app-scripts %}
-    <script nonce="{{request.csp_nonce}}">
-      EDITOR_JS = `{{settings.HOSTNAME}}/label-studio-frontend/main.js?v={{ versions.lsf.commit }}`;
-      EDITOR_CSS = `{{settings.HOSTNAME}}/label-studio-frontend/main.css?v={{ versions.lsf.commit }}`;
-      DM_JS = `{{settings.HOSTNAME}}/dm/main.js?v={{ versions.dm2.commit }}`;
-      DM_CSS = `{{settings.HOSTNAME}}/dm/main.css?v={{ versions.dm2.commit }}`;
-    </script>
   {% endblock %}
 
-
   <script
    src="https://browser.sentry-cdn.com/5.17.0/bundle.min.js"
    integrity="sha384-lowBFC6YTkvMIWPORr7+TERnCkZdo5ab00oH5NkFLeQUAmBTLGwJpFjF6djuxJ/5"
@@ -49,7 +43,6 @@
   {% endblock %}
 
   {% block head-toast %}
-    <script src="{{settings.HOSTNAME}}{% static 'js/Toast.min.js' %}"></script>
     <link href="{{settings.HOSTNAME}}{% static 'css/Toast.min.css' %}" rel="stylesheet">
   {% endblock %}
 
@@ -119,21 +112,29 @@
 </script>
 
 {% block app-js %}
+<script src="{{settings.HOSTNAME}}/react-app/runtime.js?v={{ versions.backend.commit }}"></script>
+{% comment %}
+  NOTE: purposely setting this to not cache using backend commit as we do not intend this to change frequently.
+  If for any reason we need to invalidate the cache, we can do so by changing the version number.
+{% endcomment %}
+<script src="{{settings.HOSTNAME}}/react-app/vendor.js?v=1"></script>
 <script src="{{settings.HOSTNAME}}/react-app/main.js?v={{ versions.backend.commit }}"></script>
 {% endblock %}
 
-<div id="dynamic-content">
+{% block bottomjs %}
+  <script src="{{settings.HOSTNAME}}{% static 'js/jquery.min.js' %}"></script>
+  <script src="{{settings.HOSTNAME}}{% static 'js/helpers.js' %}"></script>
+  <script src="{{settings.HOSTNAME}}{% static 'js/Toast.min.js' %}"></script>
   <script nonce="{{request.csp_nonce}}">
       applyCsrf();
 
       $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade');
       });
   </script>
+{% endblock %}
 
-  {% block bottomjs %}
-  {% endblock %}
-
+<div id="dynamic-content">
   {% block storage-persistence %}
   <script nonce="{{request.csp_nonce}}">
     {# storage persistence #}

web/apps/labelstudio/src/app/App.jsx

@@ -9,7 +9,6 @@ import { initSentry } from "../config/Sentry";
 import { ApiProvider } from "../providers/ApiProvider";
 import { AppStoreProvider } from "../providers/AppStoreProvider";
 import { ConfigProvider } from "../providers/ConfigProvider";
-import { LibraryProvider } from "../providers/LibraryProvider";
 import { MultiProvider } from "../providers/MultiProvider";
 import { ProjectProvider } from "../providers/ProjectProvider";
 import { RoutesProvider } from "../providers/RoutesProvider";
@@ -52,19 +51,6 @@ window.LSH = browserHistory;
 initSentry(browserHistory);
 
 const App = ({ content }) => {
-  const libraries = {
-    lsf: {
-      scriptSrc: window.EDITOR_JS,
-      cssSrc: window.EDITOR_CSS,
-      checkAvailability: () => !!window.LabelStudio,
-    },
-    dm: {
-      scriptSrc: window.DM_JS,
-      cssSrc: window.DM_CSS,
-      checkAvailability: () => !!window.DataManager,
-    },
-  };
-
   return (
     <ErrorBoundary>
       <Router history={browserHistory}>
@@ -73,7 +59,6 @@ const App = ({ content }) => {
             <AppStoreProvider key="app-store" />,
             <ApiProvider key="api" />,
             <ConfigProvider key="config" />,
-            <LibraryProvider key="lsf" libraries={libraries} />,
             <RoutesProvider key="rotes" />,
             <ProjectProvider key="project" />,
             <ToastProvider key="toast" />,

web/apps/labelstudio/src/config/Sentry.ts

@@ -5,22 +5,23 @@ import { Integrations } from "@sentry/tracing";
 import { Route } from "react-router-dom";
 
 export const initSentry = (history: RouterHistory) => {
-  setTags();
-
-  Sentry.init({
-    dsn: "https://5f51920ff82a4675a495870244869c6b@o227124.ingest.sentry.io/5838868",
-    integrations: [
-      new Integrations.BrowserTracing({
-        routingInstrumentation: ReactSentry.reactRouterV5Instrumentation(history),
-      }),
-    ],
-    environment: process.env.NODE_ENV,
-    // Set tracesSampleRate to 1.0 to capture 100%
-    // of transactions for performance monitoring.
-    // We recommend adjusting this value in production
-    tracesSampleRate: 0.25,
-    release: getVersion(),
-  });
+  if (APP_SETTINGS.debug === false) {
+    setTags();
+    Sentry.init({
+      dsn: "https://5f51920ff82a4675a495870244869c6b@o227124.ingest.sentry.io/5838868",
+      integrations: [
+        new Integrations.BrowserTracing({
+          routingInstrumentation: ReactSentry.reactRouterV5Instrumentation(history),
+        }),
+      ],
+      environment: process.env.NODE_ENV,
+      // Set tracesSampleRate to 1.0 to capture 100%
+      // of transactions for performance monitoring.
+      // We recommend adjusting this value in production
+      tracesSampleRate: 0.25,
+      release: getVersion(),
+    });
+  }
 };
 
 const setTags = () => {

web/apps/labelstudio/src/pages/CreateProject/Config/Config.styl

@@ -409,8 +409,9 @@ styled_scroll()
   .editor > .common
     flex: 1
     max-width: 100%
-  :global(.lsf-main-view__annotation)
-    padding: 0
+  .main-view
+    &__annotation
+      padding: 0
 
 // super hack for LSF regions width on sideBottom layout
 div[class^=App_menu]>div

web/apps/labelstudio/src/pages/CreateProject/Config/Preview.jsx

@@ -1,6 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Spinner } from "../../../components";
-import { useLibrary } from "../../../providers/LibraryProvider";
 import { cn } from "../../../utils/bem";
 import { FF_DEV_3617, isFF } from "../../../utils/feature-flags";
 import "./Config.styl";
@@ -10,9 +9,11 @@ import { useAPI } from "../../../providers/ApiProvider";
 
 const configClass = cn("configure");
 
+const loadDependencies = async () => import("@humansignal/editor");
+
 export const Preview = ({ config, data, error, loading, project }) => {
-  const LabelStudio = useLibrary("lsf");
   const lsf = useRef(null);
+  const [resolvingEditor] = useState(loadDependencies);
   const rootRef = useRef();
   const api = useAPI();
 
@@ -48,48 +49,44 @@ export const Preview = ({ config, data, error, loading, project }) => {
     return config ?? EMPTY_CONFIG;
   }, [config]);
 
-  const initLabelStudio = useCallback(
-    (config, task) => {
-      if (!LabelStudio) return;
-      if (!task.data) return;
-
-      console.info("Initializing LSF preview", { config, task });
-
-      try {
-        const lsf = new window.LabelStudio(rootRef.current, {
-          config,
-          task,
-          interfaces: ["side-column"],
-          // with SharedStore we should use more late event
-          [isFF(FF_DEV_3617) ? "onStorageInitialized" : "onLabelStudioLoad"](LS) {
-            LS.settings.bottomSidePanel = true;
-
-            const initAnnotation = () => {
-              const as = LS.annotationStore;
-              const c = as.createAnnotation();
-
-              as.selectAnnotation(c.id);
-            };
-
-            if (isFF(FF_DEV_3617)) {
-              // and even then we need to wait a little even after the store is initialized
-              setTimeout(initAnnotation);
-            } else {
-              initAnnotation();
-            }
-          },
-        });
-
-        lsf.on("presignUrlForProject", onPresignUrlForProject);
-
-        return lsf;
-      } catch (err) {
-        console.error(err);
-        return null;
-      }
-    },
-    [LabelStudio],
-  );
+  const initLabelStudio = useCallback(async (config, task) => {
+    if (!task.data) return;
+
+    await resolvingEditor;
+
+    try {
+      const lsf = new window.LabelStudio(rootRef.current, {
+        config,
+        task,
+        interfaces: ["side-column"],
+        // with SharedStore we should use more late event
+        [isFF(FF_DEV_3617) ? "onStorageInitialized" : "onLabelStudioLoad"](LS) {
+          LS.settings.bottomSidePanel = true;
+
+          const initAnnotation = () => {
+            const as = LS.annotationStore;
+            const c = as.createAnnotation();
+
+            as.selectAnnotation(c.id);
+          };
+
+          if (isFF(FF_DEV_3617)) {
+            // and even then we need to wait a little even after the store is initialized
+            setTimeout(initAnnotation);
+          } else {
+            initAnnotation();
+          }
+        },
+      });
+
+      lsf.on("presignUrlForProject", onPresignUrlForProject);
+
+      return lsf;
+    } catch (err) {
+      console.error(err);
+      return null;
+    }
+  }, []);
 
   useEffect(() => {
     const opacity = loading || error ? 0.6 : 1;
@@ -100,7 +97,9 @@ export const Preview = ({ config, data, error, loading, project }) => {
 
   useEffect(() => {
     if (!lsf.current) {
-      lsf.current = initLabelStudio(currentConfig, currentTask);
+      initLabelStudio(currentConfig, currentTask).then((ls) => {
+        lsf.current = ls;
+      });
     }
 
     return () => {