Relationships text

peachjam/js/components/DocumentContent/enrichments-manager.ts

@@ -9,7 +9,7 @@ import SelectionShare from './selection-share';
  * Class for handling the setup of all enrichments and interactions between enrichments
  */
 class EnrichmentsManager {
-  private relationshipsManager: RelationshipEnrichments;
+  private relationshipsManager: RelationshipEnrichments | null = null;
   private selectionSearch: SelectionSearch;
   private selectionShare: SelectionShare;
   private root: HTMLElement;
@@ -18,20 +18,24 @@ class EnrichmentsManager {
   private readonly gutter: HTMLLaGutterElement | null;
   private readonly akn: HTMLElement | null;
   private citationLinks: PDFCitationLinks | null = null;
-  gutterManager: GutterEnrichmentManager;
+  private gutterManager: GutterEnrichmentManager;
+  private displayType: string; // html, pdf or akn
 
   constructor (contentAndEnrichmentsElement: HTMLElement) {
     this.root = contentAndEnrichmentsElement;
     this.gutter = this.root.querySelector('la-gutter');
     // this is either div.content (for HTML and PDF) or la-akoma-ntoso.content (for AKN)
     this.akn = this.root.querySelector('.content');
+    this.displayType = this.root.getAttribute('data-display-type') || 'html';
 
     this.docDiffsManager = this.setupDocDiffs();
     this.gutterManager = new GutterEnrichmentManager(this.root);
     // @ts-ignore
     // GutterEnrichmentManager by default looks for la-akoma-ntoso, and we might not be working with that
     this.gutterManager.akn = this.root.querySelector('.content');
-    this.relationshipsManager = new RelationshipEnrichments(contentAndEnrichmentsElement, this.gutterManager);
+    if (this.displayType !== 'pdf') {
+      this.relationshipsManager = new RelationshipEnrichments(this.root, this.gutterManager, this.displayType);
+    }
     this.selectionSearch = new SelectionSearch(this.gutterManager);
     this.selectionShare = new SelectionShare(this.gutterManager);
 
@@ -51,7 +55,9 @@ class EnrichmentsManager {
     );
   }
 
-  setupPdfCitationLinks () {
+  addPdfEnrichments () {
+    // setup PDF enrichments after the PDF has been rendered
+    this.relationshipsManager = new RelationshipEnrichments(this.root, this.gutterManager, this.displayType);
     this.citationLinks = new PDFCitationLinks(this.root, this.gutterManager);
   }
 }

peachjam/js/components/DocumentContent/index.ts

@@ -103,7 +103,7 @@ class DocumentContent {
       };
       this.pdfRenderer.onPdfLoaded = () => {
         if (this.enrichmentsManager) {
-          this.enrichmentsManager.setupPdfCitationLinks();
+          this.enrichmentsManager.addPdfEnrichments();
         }
         this.setupPopups();
 

peachjam/js/components/RelationshipEnrichment/RelationshipEnrichment.vue

@@ -76,6 +76,7 @@ export default {
     viewRoot: HTMLElement,
     gutter: HTMLElement,
     editable: Boolean,
+    useSelectors: Boolean,
     thisWorkFrbrUri: {
       type: String,
       default: ''
@@ -147,7 +148,10 @@ export default {
     markAndAnchor () {
       this.unmark();
       const target = {
-        anchor_id: this.isForwards ? this.enrichment.subject_target_id : this.enrichment.object_target_id
+        anchor_id: this.isForwards ? this.enrichment.subject_target_id : this.enrichment.object_target_id,
+        selectors: this.useSelectors ? (
+          this.isForwards ? this.enrichment.subject_selectors : this.enrichment.target_selectors
+        ) : null
       };
       const range = targetToRange(target, this.viewRoot);
       if (!range) return;

peachjam/js/components/RelationshipEnrichment/RelationshipEnrichmentList.vue

@@ -8,6 +8,7 @@
       :view-root="viewRoot"
       :gutter="gutter"
       :editable="editable"
+      :use-selectors="useSelectors"
       :this-work-frbr-uri="thisWorkFrbrUri"
       @delete="deleteEnrichment(enrichment)"
     />
@@ -40,6 +41,7 @@ export default {
     viewRoot: HTMLElement,
     gutter: HTMLElement,
     editable: Boolean,
+    useSelectors: Boolean,
     thisWorkFrbrUri: {
       type: String,
       default: ''

peachjam/js/components/RelationshipEnrichment/index.ts

@@ -16,10 +16,12 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
   workFrbrUri: string;
   workId: string;
   editable: boolean;
+  displayType: string; // html, pdf or akn
 
-  constructor (root: HTMLElement, manager: GutterEnrichmentManager) {
+  constructor (root: HTMLElement, manager: GutterEnrichmentManager, displayType: string) {
     this.root = root;
     this.manager = manager;
+    this.displayType = displayType;
     this.gutter = root.querySelector('la-gutter');
     this.akn = root.querySelector('la-akoma-ntoso');
     this.workFrbrUri = root.dataset.workFrbrUri || '';
@@ -41,6 +43,7 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
         viewRoot: this.root,
         enrichments: this.enrichments,
         editable: this.editable,
+        useSelectors: this.displayType === 'pdf',
         thisWorkFrbrUri: this.workFrbrUri
       },
       use: [vueI18n],
@@ -80,6 +83,7 @@ export class RelationshipEnrichments implements IGutterEnrichmentProvider {
         frbr_uri: this.workFrbrUri
       },
       subject_target_id: target.anchor_id,
+      subject_selectors: target.selectors,
       subject_documents: [],
 
       object_work: {},

peachjam/migrations/0149_relationship_subject_selectors.py

@@ -0,0 +1,18 @@
+# Generated by Django 3.2.25 on 2024-07-26 11:23
+
+from django.db import migrations, models
+
+
+class Migration(migrations.Migration):
+
+    dependencies = [
+        ("peachjam", "0148_alter_judgment_auto_assign_details"),
+    ]
+
+    operations = [
+        migrations.AddField(
+            model_name="relationship",
+            name="subject_selectors",
+            field=models.JSONField(null=True, verbose_name="subject selectors"),
+        ),
+    ]

peachjam/models/relationships.py

@@ -32,6 +32,9 @@ class Relationship(models.Model):
     subject_target_id = models.CharField(
         _("subject target ID"), max_length=1024, null=True, blank=True
     )
+    subject_selectors = models.JSONField(
+        verbose_name=_("subject selectors"), null=True, blank=False
+    )
 
     object_work = models.ForeignKey(
         "peachjam.Work",

peachjam/templates/peachjam/_document_content.html

@@ -114,6 +114,7 @@
          data-work-frbr-uri="{{ document.work_frbr_uri }}"
          data-document-id="{{ document.id }}"
          data-diffs-url="{{ document_diffs_url }}"
+         data-display-type="{{ display_type }}"
          {% if perms.peachjam.add_citationlink %}data-editable-citation-links{% endif %}
          {% if perms.peachjam.add_relationship %}data-editable-relationships{% endif %}>
       <div class="content-and-enrichments__inner la-akoma-ntoso-with-gutter">

peachjam_api/serializers.py

@@ -57,6 +57,7 @@ class Meta:
             "subject_work",
             "subject_work_id",
             "subject_target_id",
+            "subject_selectors",
             "object_work",
             "object_work_id",
             "object_target_id",

webpack.config.js

@@ -1,65 +1,67 @@
 const { VueLoaderPlugin } = require('vue-loader');
 const { sentryWebpackPlugin } = require('@sentry/webpack-plugin');
 
-const peachJamConfig = {
-  mode: 'development',
-  resolve: {
-    alias: {
-      vue: '@vue/runtime-dom'
+module.exports = (env, argv) => {
+  return [{
+    mode: 'development',
+    resolve: {
+      alias: {
+        vue: '@vue/runtime-dom'
+      },
+      modules: [
+        './node_modules'
+      ],
+      extensions: ['.tsx', '.ts', '.js']
+    },
+    entry: {
+      app: './peachjam/js/app.ts',
+      'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
     },
-    modules: [
-      './node_modules'
-    ],
-    extensions: ['.tsx', '.ts', '.js']
-  },
-  entry: {
-    app: './peachjam/js/app.ts',
-    'pdf.worker': 'pdfjs-dist/build/pdf.worker.entry'
-  },
-  module: {
-    rules: [
-      {
-        test: /\.vue$/,
-        use: [
-          {
-            loader: 'vue-loader',
-            options: {
-              compilerOptions: {
-                isCustomElement: tag => tag.startsWith('la-')
+    module: {
+      rules: [
+        {
+          test: /\.vue$/,
+          use: [
+            {
+              loader: 'vue-loader',
+              options: {
+                compilerOptions: {
+                  isCustomElement: tag => tag.startsWith('la-')
+                }
               }
             }
-          }
-        ]
-      },
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/
-      },
-      {
-        test: /\.css$/,
-        use: ['vue-style-loader', 'css-loader']
-      },
-      {
-        test: /\.scss$/,
-        use: ['vue-style-loader', 'css-loader', 'sass-loader']
-      }
+          ]
+        },
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/
+        },
+        {
+          test: /\.css$/,
+          use: ['vue-style-loader', 'css-loader']
+        },
+        {
+          test: /\.scss$/,
+          use: ['vue-style-loader', 'css-loader', 'sass-loader']
+        }
+      ]
+    },
+    output: {
+      filename: '[name]-prod.js',
+      path: __dirname + '/peachjam/static/js'
+    },
+    devtool: 'source-map',
+    plugins: [
+      new VueLoaderPlugin(),
+      sentryWebpackPlugin({
+        disable: argv.mode !== 'production',
+        authToken: process.env.SENTRY_AUTH_TOKEN,
+        org: 'lawsafrica',
+        project: 'lii',
+        telemetry: false
+      })
     ]
-  },
-  output: {
-    filename: '[name]-prod.js',
-    path: __dirname + '/peachjam/static/js'
-  },
-  devtool: 'source-map',
-  plugins: [
-    new VueLoaderPlugin(),
-    sentryWebpackPlugin({
-      authToken: process.env.SENTRY_AUTH_TOKEN,
-      org: 'lawsafrica',
-      project: 'lii',
-      telemetry: false
-    })
-  ]
-};
+  }];
+}
 
-module.exports = [peachJamConfig];