feat: DIA-2214: Add new Pdf object tag (#7460)

Co-authored-by: niklub <[email protected]>
Co-authored-by: nik <[email protected]>
Co-authored-by: robot-ci-heartex <[email protected]>

Author: 4 people

poetry.lock

@@ -73,7 +73,7 @@ dependencies = [
     "djangorestframework-simplejwt[crypto] (>=5.4.0,<6.0.0)",
     "tldextract (>=5.1.3)",
     ## HumanSignal repo dependencies :start
-    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/c4ed0b0240c4a5e9f372393f84fdea01abe33141.zip",
+    "label-studio-sdk @ https://github.com/HumanSignal/label-studio-sdk/archive/856f396d0ad76c201630f086e8cad16ea0d8b568.zip",
     ## HumanSignal repo dependencies :end
 ]
 

pyproject.toml

@@ -0,0 +1,53 @@
+import { inject, observer } from "mobx-react";
+import { types } from "mobx-state-tree";
+
+import Registry from "../../core/Registry";
+import { AnnotationMixin } from "../../mixins/AnnotationMixin";
+import ProcessAttrsMixin from "../../mixins/ProcessAttrs";
+import Base from "./Base";
+import { parseValue } from "../../utils/data";
+
+/**
+ * The `Pdf` tag is used to display a PDF document from a URL.
+ * @example
+ * <View>
+ *   <Pdf name="pdf-1" value="$pdf_url" />
+ * </View>
+ * @name Pdf
+ * @meta_title Pdf Tag to Display PDF Documents
+ * @meta_description Customize Label Studio by displaying PDF files in tasks for machine learning and data science projects.
+ * @param {string} value Data field value containing the URL to the PDF
+ */
+const Model = types
+  .model({
+    type: "pdf",
+    value: types.maybeNull(types.string),
+    _url: types.maybeNull(types.string),
+  })
+  .actions((self) => ({
+    updateValue(store) {
+      // @todo check that the value is a valid URL and document exists
+      self._url = parseValue(self.value, store.task.dataObj);
+    },
+  }));
+
+const PdfModel = types.compose("PdfModel", Base, ProcessAttrsMixin, AnnotationMixin, Model);
+
+const HtxPdf = inject("store")(
+  observer(({ item }) => {
+    if (!item._url) return null;
+    return (
+      <iframe
+        src={item._url}
+        title="PDF Document"
+        style={{ width: "100%", height: "600px", border: "none" }}
+        allowFullScreen
+      />
+    );
+  }),
+);
+
+Registry.addTag("pdf", PdfModel, HtxPdf);
+Registry.addObjectType(PdfModel);
+
+export { HtxPdf, PdfModel };

web/libs/editor/src/tags/object/Pdf.jsx

@@ -1,6 +1,7 @@
 import { AudioModel } from "./AudioNext";
 import { ImageModel } from "./Image";
 import { ParagraphsModel } from "./Paragraphs";
+import { PdfModel } from "./Pdf";
 import { RichTextModel } from "./RichText";
 import { TableModel } from "./Table";
 import { TimeSeriesModel } from "./TimeSeries";
@@ -22,4 +23,5 @@ export {
   TableModel,
   PagedViewModel,
   ListModel,
+  PdfModel,
 };

web/libs/editor/src/tags/object/index.js

@@ -119,6 +119,7 @@ const Model = types
       "pagedview",
       "paragraphs",
       "paragraphlabels",
+      "pdf",
       "video",
       "videorectangle",
       "timelinelabels",