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

deploy/default.conf

@@ -120,6 +120,18 @@ 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/feature_flags/stale_feature_flags.py

@@ -68,5 +68,4 @@
     'ff_front_1170_outliner_030222_short': True,
     'ff_back_1587_email_notifications_310122_long': False,
     'ff_front_dev_1285_crosshair_wrong_zoom_140122_short': True,
-    'fflag_fix_front_lsdv_4620_memory_leaks_100723_short': False,
 }

label_studio/core/utils/common.py

@@ -207,6 +207,20 @@ 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,5 +1,6 @@
 """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
@@ -8,4 +9,5 @@
 @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": false,
+      "on": true,
       "prerequisites": [],
       "targets": [],
       "contextTargets": [],

label_studio/templates/base.html

@@ -16,19 +16,25 @@
   <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"
@@ -43,6 +49,7 @@
   {% 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 %}
 
@@ -112,29 +119,21 @@
 </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 %}
 
-{% 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>
+<div id="dynamic-content">
   <script nonce="{{request.csp_nonce}}">
       applyCsrf();
 
       $('.message .close').on('click', function () {
            $(this).closest('.message').transition('fade');
       });
   </script>
-{% endblock %}
 
-<div id="dynamic-content">
+  {% block bottomjs %}
+  {% endblock %}
+
   {% block storage-persistence %}
   <script nonce="{{request.csp_nonce}}">
     {# storage persistence #}

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

@@ -9,6 +9,7 @@ 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";
@@ -51,6 +52,19 @@ 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}>
@@ -59,6 +73,7 @@ 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,23 +5,22 @@ import { Integrations } from "@sentry/tracing";
 import { Route } from "react-router-dom";
 
 export const initSentry = (history: RouterHistory) => {
-  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(),
-    });
-  }
+  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,9 +409,8 @@ styled_scroll()
   .editor > .common
     flex: 1
     max-width: 100%
-  .main-view
-    &__annotation
-      padding: 0
+  :global(.lsf-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,5 +1,6 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef } 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";
@@ -9,11 +10,9 @@ 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 = useMemo(loadDependencies);
   const rootRef = useRef();
   const api = useAPI();
 
@@ -49,44 +48,48 @@ export const Preview = ({ config, data, error, loading, project }) => {
     return config ?? EMPTY_CONFIG;
   }, [config]);
 
-  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;
-    }
-  }, []);
+  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],
+  );
 
   useEffect(() => {
     const opacity = loading || error ? 0.6 : 1;
@@ -97,9 +100,7 @@ export const Preview = ({ config, data, error, loading, project }) => {
 
   useEffect(() => {
     if (!lsf.current) {
-      initLabelStudio(currentConfig, currentTask).then((ls) => {
-        lsf.current = ls;
-      });
+      lsf.current = initLabelStudio(currentConfig, currentTask);
     }
 
     return () => {