Category: javascript

I have few tables with images in certain column when I tried to convert all my tables as pdf the column with image cells are shown to empty even if I use doc.addImage its position is not correct. How to incorporate images from the table into pdf

I use doc.addImage its position is not correct

I have created a d3 network graph which is working fine, issue is if there is a connection between (A -> B and B -> A) i want separate links for that. How can i do that?

This is what i have done so far

onMount(() => {
      const svg = d3
        .select(svgContainer)
        .attr('width', width)
        .attr('height', height);
  
      const tooltip = d3.select(tooltipElement);
  
      // Modify nodes to ensure they have vx, vy, x, y properties
      const nodesWithPositions = data.nodes.map((node: CustomNode) => ({
        ...node,
        vx: 0,  // Initialize vx for D3 simulation
        vy: 0,  // Initialize vy for D3 simulation
        x: node.x || 0,  // Ensure x is initialized if missing
        y: node.y || 0,  // Ensure y is initialized if missing
      }));
  
      // Create a force simulation using nodes and links
      const simulation = d3
        .forceSimulation(nodesWithPositions)  // Use the updated nodes
        .force(
          'link',
          d3
            .forceLink(data.links)
            .id((d) => (d as CustomNode).id)  // Use the correct id function
            .distance(200)  // Define the link distance
        )
        .force('charge', d3.forceManyBody().strength(-300))  // Charge force to push nodes apart
        .force('center', d3.forceCenter(width / 2, height / 2));  // Center force
  
      // Add links to the SVG and apply the arrow marker
      const link = svg
        .append('g')
        .selectAll('line')
        .data(data.links) // Use the original links (no duplication)
        .enter()
        .append('line')
        .attr('stroke', '#999')
        .attr('stroke-opacity', 0.6)
        .attr('stroke-width', (d) => Math.sqrt(Number(d.cycleCount)))  // Set link stroke width based on cycle count
  
      // Add cycleCount label to the middle of each link
      const linkText = svg
        .append('g')
        .selectAll('text')
        .data(data.links)
        .enter()
        .append('text')
        .attr('x', (d: any) => (d.source.x + d.target.x) / 2)  // Calculate midpoint of the link
        .attr('y', (d: any) => (d.source.y + d.target.y) / 2)  // Calculate midpoint of the link
        .attr('dy', -10) // Move the text slightly above the midpoint
        .attr('text-anchor', 'middle')
        .attr('font-size', 12)
        .attr('fill', '#333')
        .text((d: any) => d.cycleCount);  // Display the cycle count
  
      // Add nodes to the SVG
      const node = svg
        .append('g')
        .selectAll('circle')
        .data(nodesWithPositions)  // Pass the updated nodes with vx, vy, x, y
        .enter()
        .append('circle')
        .attr('r', 10)  // Set the radius of the nodes
        .attr('fill', '#69b3a2')  // Set the fill color of the nodes
        .attr('stroke', '#333')  // Set the border color of the nodes
        .attr('stroke-width', 1.5)  // Set the border width
        .call(
          d3.drag<SVGCircleElement, CustomNode>()
            .on('start', (event: d3.D3DragEvent<SVGCircleElement, CustomNode, CustomNode>, d: CustomNode) => {
              if (!event.active) simulation.alphaTarget(0.3).restart();
              d.fx = d.x;  // Set the fixed x position
              d.fy = d.y;  // Set the fixed y position
            })
            .on('drag', (event: d3.D3DragEvent<SVGCircleElement, CustomNode, CustomNode>, d: CustomNode) => {
              d.fx = event.x;  // Update fixed x position during drag
              d.fy = event.y;  // Update fixed y position during drag
            })
            .on('end', (event: d3.D3DragEvent<SVGCircleElement, CustomNode, CustomNode>, d: CustomNode) => {
              if (!event.active) simulation.alphaTarget(0);
              d.fx = null;  // Release the fixed x position
              d.fy = null;  // Release the fixed y position
            })
        );
  
      // Add tooltips on node hover
      node
        .on('mouseover', (event, d: CustomNode) => {
          tooltip
            .classed('opacity-100', true)
            .classed('opacity-0', false)
            .style('left', `${event.pageX + 10}px`)
            .style('top', `${event.pageY - 25}px`)
            .html(`Geozone: ${d.name}`);
        })
        .on('mouseout', () => {
          tooltip.classed('opacity-0', true).classed('opacity-100', false);
        });
  
      // Update link and node positions on each tick
      simulation.on('tick', () => {
        link
          .attr('x1', (d: any) => d.source.x)
          .attr('y1', (d: any) => d.source.y)
          .attr('x2', (d: any) => d.target.x)
          .attr('y2', (d: any) => d.target.y);
  
        node.attr('cx', (d: any) => d.x).attr('cy', (d: any) => d.y);
  
        // Update link text position to remain at the midpoint
        linkText
          .attr('x', (d: any) => (d.source.x + d.target.x) / 2)
          .attr('y', (d: any) => (d.source.y + d.target.y) / 2);
      });
    });

I want all nodes and i want separate links if there is a connection from (A -> B) and then again from (B -> A)

I’m working with Odoo 16. I’ve installed the Enterprise Barcode app, and I’ve made a generic development over it.

The Barcode app has a menu which shows pickings in a kanban view. What I’m doing with my development is to automatically fill in a picking field each time an user belonging to a specific group clicks on its kanban card to open it.

Example: the barcode app shows three pickings (PICK001, PICK002, PICK003) in a kanban view. I’m the user Administrator and I click on the kanban card of PICK003 and this way I’m redirected to other view which shows the stock move lines of the PICK003. At the same time, my development sets the picking field preparer_id (a Many2one pointing to res.users) to Administrator.

Now, the code of my development:

/** @odoo-module **/
import { StockBarcodeKanbanController } from '@stock_barcode/kanban/stock_barcode_kanban_controller';
import { patch } from 'web.utils';
import { useService } from "@web/core/utils/hooks";
import { session } from "@web/session";

const originalOpenRecord = StockBarcodeKanbanController.prototype.openRecord;

patch(StockBarcodeKanbanController.prototype, 'StockBarcodeKanbanControllerIchExt', {
    setup() {
        this._super.apply(this, arguments);
        this.rpc = useService("rpc");
    },

    async openRecord(record) {
        // Check if preparer_id is empty
        if (!record.data.preparer_id) {
            // Check if current user is preparer (belong to preparers group)
            const isPreparer = await this.rpc("/web/dataset/call_kw", {
                model: 'res.users',
                method: 'has_group',
                args: ['ich_stock_ext.group_stock_preparer'],
                kwargs: {}
            });
            if(isPreparer) {
                // Call RPC to update preparer_id value with the current user
                await this.rpc('/web/dataset/call_kw/stock.picking/write', {
                    model: 'stock.picking',
                    method: 'write',
                    args: [[record.resId], { 'preparer_id': session.uid }],
                    kwargs: {}
                });
                // Refresh view
                this.model.load({reload: true});
            }
        }
        // Call "super" to execute whatever the original method did
        return originalOpenRecord.apply(this, arguments);
    },

});

This code seems to work perfect. However, sometimes, especially when I log in through the Odoo mobile app, if I click on PICK003, then on PICK002, and afterwards on PICK003 again, the field preparer_id remains empty, instead of showing the user again.

I’ve checked the field during every step. I have another development which empties the field when going back to the kanban view. This other development always works fine, so before clicking on a kanban card, the preparer_id is always empty.

What could be happening? How can I change the code to ensure that the preparer_id is updated in every situation?

I am looking to get the URL variable data to my backend TypeScript REST API Call:

Here is the hyperlink: http://localhost:3000/login?uid=aniket&pass=a123

I’m not entirely sure how to explain my problem, so here are some step-by-step instructions to reproduce what I observe:

1.  Go directly to the bottom to click the item 5.

Details appear outside .list-container so they are not visible.

To see the details, you need to scroll further down manually, even though you were already at the bottom of the page.

Now that you can see the details and you are at the very bottom:

1.  Click on item 5 again to hide the details.
2.  Click on item 5 once more to show the details.

This time, details appear inside .list-container so they are immediately visible. [desired behavior]

Question:
Is it possible to configure my page so this desired behavior happens on the first interaction, without requiring manual further down scrolling?

document.addEventListener('DOMContentLoaded', () => {
  // Sélectionner toutes les lignes avec une classe spécifique
  const rows = document.querySelectorAll('.row-container');

  rows.forEach(row => {
      row.addEventListener('click', () => {
          // Trouver le volet associé
          const details = row.nextElementSibling;

          if (details.classList.contains('open')) {
              // Fermer le volet si déjà ouvert
              details.classList.remove('open');
              details.classList.add('close');
          } else {
              // Fermer tous les autres volets
              document.querySelectorAll('.row-details.open').forEach(openDetail => {
                  openDetail.classList.remove('open');
                  openDetail.classList.add('close');
              });

              // Ouvrir le volet sélectionné
              details.classList.remove('close');
              details.classList.add('open');
          }
      });
  });
});

:root {
    --dropdown-height: calc(1.25*.65rem + 1rem);
}

.list-container {
    height: 20dvh;
    overflow-y: auto;
}

/* ## Configuration volet déroulant ## */
.row-container {
    height: 50px;
}

.row-details {
    height: 0;
    position: relative;
    overflow: hidden;
    background-color: #f9f9f9;
    box-shadow: inset 0 1px 0 0 #e6e6e6;
    border-bottom: 2px solid #e6e6e6;
    z-index: -1;
    line-height: 1.25;
}

.row-details.open {
    animation: slideDown 0.3s ease;
    height: var(--dropdown-height);
}

.row-details.close {
    animation: slideUp 0.3s ease;
}

@keyframes slideDown {
    from {
        height: 0;
    }
    to {
        height: var(--dropdown-height);
    }
}

@keyframes slideUp {
    from {
        height: var(--dropdown-height);
    }
    to {
        height: 0;
    }
}

.row-details p {
    font-size: 0.65rem;
    margin: .5rem 0;
}

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Accordéon avec Scrolling</title>
</head>
<body>
    <div class="list-container">
        <div class="row-container">Élément 1</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 1</p>
        </div>
        <div class="row-container">Élément 2</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 2</p>
        </div>
        <div class="row-container">Élément 3</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 3</p>
        </div>
        <div class="row-container">Élément 4</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 4</p>
        </div>
        <div class="row-container">Élément 5</div>
        <div class="row-details">
            <p>Contenu de l'accordéon 5</p>
        </div>
    </div>
</body>
</html>

In JavaScript ES6 there are different methods to simplify working with Arrays, like filter, map, reduce, sort, …

Also nullish values can easily be escaped with the ?? syntax.
However, empty arrays are not considered as nullish.

I often want to display a list of items, and in case there is no item in the list I would want to display a placeholder like “There are no items in this list”.

I could do this by doing something like this:

return (
  mylist.length ? 
    mylist.map(item => (
      <div key={item.id)>{item.title}</div>
    )
  ) : <div>There are no items in this list</div>
);

However, if I also filter my list, things get more complicated:

return (
  mylist.filter(item => myComplexNestedFilter).length ? 
    mylist.filter(item => myComplexNestedFilter).map(item => (
      <div key={item.id)>{item.title}</div>
    )
  ) : <div>There are no items in this list</div>
);

Which could be worked around by saving the filtered list into a const variable but sometimes, this makes readability quite a bit harder.

So I was wondering if there’s something like:

mylist.filter(item => myComplexNestedFilter).map(item => (
  <div key={item.id)>{item.title}</div>
) ?? <div>There are no items in this list</div>

or:

mylist.filter(item => myComplexNestedFilter).map(item => (
  <div key={item.id)>{item.title}</div>
).empty(<div>There are no items in this list</div>)

or some other pretty solution for this? I am pretty sure I am not the only one facing this.

I am using Next.js 14 and have implemented middleware to redirect users to the route /Verify-Captcha when the response status is 429. However, while the redirect works, the page does not load correctly. The CSS breaks, and useEffect hooks and other functionality are not working. Here is my middleware code:

import { NextResponse } from "next/server";

export function middleware(request) {
  const { pathname, origin } = request.nextUrl;

  if (pathname === "/Verify-Captcha") {
    return NextResponse.next();
  }

  const response = NextResponse.next();
  if (response.status === 429) { 
    const redirectUrl = `${origin}/Verify-Captcha`;
    return NextResponse.redirect(redirectUrl);
  }

  return NextResponse.next();
}

When redirected to /Verify-Captcha, the following error appears in the console:

Question:
What is causing this error and the page load issues when redirecting via middleware in Next.js 14? How can I fix this issue to ensure the page loads correctly after the redirect?

When I tried to get into full screen mode with keybinds disabled with JavaScript, I had to use navigator.keyboard.lock().
So that’s what I did (w/o Live Server) and everything worked just fine. But when I got to use Live Server, keyboard lock API didn’t work.
Why does Visual Studio Code Live Server disable it? Maybe I’m doing something wrong? And no, it’s not my browser fault, I’ve got a new version of Chrome.

If the code is wrong, here’s what it looks like:

HTML: <button onclick="document.documentElement.requestFullscreen()" id="fullscreenBtn">Fullscreen</button>

JS: document.getElementById("fullscreenBut").hidden = "true"; navigator.keyboard.lock() }

It works normally, but not in Live Server. So, is it possible for it to work there?

I am currently creating a dockerized web application.

It is composed of the following elements :

• React for the frontend (with the routes managed by react-router-dom)
• Django for the backend
• PostgreSQL for the database managment
• Nginx for the reverse proxy

I have created the reverse proxy for the back-end and front-end.

I have created a route named /element/:id (id is an URL parameter) which would allowed me to see the informations of an object stored in a database.

Unfortunately, when I try to load the page localhost/element/1, the page displayed nothing.
In the web console, I have an error, telling me Uncaught SyntaxError: Unexpected token '<' for the file http://localhost/element/static/js/file.js.

After inspection, he loads the index.html file.

The home page works without a problem.

Here is my nginx configuration file :

server{
    include  /etc/nginx/mime.types;
    listen 80 default_server;
    
    error_log /var/log/nginx/app-error.log info;

    access_log /var/log/nginx/app.log main;

    location /admin/ {
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
        proxy_pass http://admin-backend/admin/;
    }

    location /api/v1/ {
        proxy_redirect     off;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
        proxy_pass http://admin-backend/api/v1/;
    }

    location /static/ {
        alias /staticfiles/$1;
    }

    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

Here is my docker-compose.yaml file:

services:
  frontend:
    build:
      context: ./
      dockerfile: ./Dockerfile
    ports:
      - "80:80"
    depends_on:
      - backend
    environment:
      - PUBLIC_URL=127.0.0.1
    volumes:
      - static:/staticfiles
    command: sh -c "cp -r /home/build/staticfiles/* /staticfiles ; nginx -g 'daemon off;'"

  db:
    image: postgres
    volumes:
      - postgres_data:/var/lib/postgresql/data
    env_file:
      - .env
    ports:
      - "5432:5432"

  backend:
    build: backend
    command: sh -c "make generate_static_auto ; make migrate ; make run"
    volumes:
      - static:/staticfiles/
      - ./backend:/backup
    ports:
      - "8000:8000"
    depends_on:
      - db
    env_file:
      - .env

volumes:
  postgres_data:
  static:

The back-end pages (like the admin page) doesn’t load nicely (without the js and css file) also in the localhost.
Does anyone has an answer to my problem?

I am trying to make a click event on the ListSelectField(drop-down) to view the list.

WebDriverWait(driver, 60).until(EC.element_to_be_clickable((By.XPATH,
                                                            '/html/body/div[2]/div/div[2]/div/div[2]/div/div/div/div[3]/div/div/div/div/div/form/table/tbody/tr[2]/td[2]/table/tbody/tr/td[1]/div[2]'))).click()

below is the exception for the above line of code.

selenium.common.exceptions.JavascriptException: Message: javascript error: Right-hand side of 'instanceof' is not callable

It was working fine, suddenly i am facing this error, i checked XPATH i can find it, it highlights when i do CTRL+F.

tried with different function calls like below but i get same error.

presence_of_element_located,visibility_of_element_located,...

Not able to figure out why this exception is happening.

I really remember it’s working before.
here is my code

async function getGridContent<R, SR>(gridElement: ReactElement<any>) {
  const { renderToStaticMarkup } = await import('react-dom/server')
  const grid = document.createElement('div')
  grid.innerHTML = renderToStaticMarkup(
    cloneElement(gridElement, {
      enableVirtualization: false,
    })
  )

  return {
    head: getRows('.rdg-header-row'),
    body: getRows('.rdg-row:not(.rdg-summary-row)'),
    foot: getRows('.rdg-summary-row'),
  }

this code is in a common lib and is built by vite. I use it locally and work correctly, but when I release it, the error as the title described will occured

common-rc-lib.es.js:1972 Uncaught (in promise) TypeError: Cannot destructure property ‘renderToStaticMarkup’ of ‘(intermediate value)’ as it is undefined.

my package.json

 "react": "^18.2.0",
 "react-dom": "^18.2.0",

I am trying to create a JWT generation token for GitHub app using Javascript on a Zapier-like platform. The platform only provides btoa and crypto library for this.

Here is the code

const GITHUB_APP_PRIVATE_KEY = `-----BEGIN PRIVATE KEY-----
ABCDEFGHIJKLMN
-----END PRIVATE KEY-----`
const GITHUB_APP_ID = "1234567";
const crypto = require('crypto');

function generate_jwt() {
    const header = {
        typ: "JWT",        
        alg: "RS256"
    }
    const header_base64 = btoa(JSON.stringify(header, null, 4))
        .replace(/=/g, '')
        .replace(/+/g, '-')
        .replace(///g, '_');
    const payload = {
        iat: Math.floor(Date.now() / 1000) - 60,
        exp: Math.floor(Date.now() / 1000) + 60,
        iss: GITHUB_APP_ID
    }
    const payload_base64 = btoa(JSON.stringify(payload, null, 4))
        .replace(/=/g, '')
        .replace(/+/g, '-')
        .replace(///g, '_');

    const header_payload = `${header_base64}.${payload_base64}`;
    const secret = GITHUB_APP_PRIVATE_KEY.replace(/\n/gm, "n");
    const signature = crypto
        .createSign('RSA-SHA256')
        .update(header_payload)
        .sign(secret, 'base64')
        .replace(/=/g, '')
        .replace(/+/g, '-')
        .replace(///g, '_');
    
    return `${header_payload}.${signature}`;
}

console.log(generate_jwt());

I found the crypto routine from this code
https://github.com/Guseyn/cutie-jwt/blob/master/src/GeneratedRS256JWT.js

I tried using the APP ID and the PRIVATE KEY in the Bash script provided in general documentation https://docs.github.com/en/apps/creating-github-apps/authenticating-with-a-github-app/generating-a-json-web-token-jwt-for-a-github-app

However when I tried using the ported Javascript code above, it returns error

node:internal/crypto/sig:128
  const ret = this[kHandle].sign(data, format, type, passphrase, rsaPadding,
                            ^

Error: error:1E08010C:DECODER routines::unsupported
    at Sign.sign (node:internal/crypto/sig:128:29)
    at generate_jwt (~/script2.js:55:10)
    at Object.<anonymous> (~/script2.js:70:13)
    at Module._compile (node:internal/modules/cjs/loader:1546:14)
    at Object..js (node:internal/modules/cjs/loader:1689:10)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:315:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:218:24)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:170:5) {
  opensslErrorStack: [ 'error:1E08010C:DECODER routines::unsupported' ],
  library: 'DECODER routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_UNSUPPORTED'
}

What did I do wrong?

UPDATE 1

I changed the crypto routine to this.

    const signature = crypto
        .createHmac('sha256', secret)
        .update(header_payload)
        .digest('base64')
        .replace(/=/g, '')
        .replace(/+/g, '-')
        .replace(///g, '_');

It does generate the JWT Token.

However when I tried testing the token using the code below

curl --request GET 
--url "https://api.github.com/app" 
--header "Accept: application/vnd.github+json" 
--header "Authorization: Bearer $JWT" 
--header "X-GitHub-Api-Version: 2022-11-28"

It returns error

{
  "message": "A JSON web token could not be decoded",
  "documentation_url": "https://docs.github.com/rest",
  "status": "401"
}

I’d like to know how to set up a complete backend for an HTML form.

I tried to configure it using codes generated by chatgpt, but to no avail.

Let’s say you’re counting the number of cities in a country, so you register an onDocumentCreated trigger for:

/countries/{countryId}/cities/{cityId}

In the trigger, you’ll want to increase the cityCount in the Country document at /countries/{countryId}. How should this be done?

The documentation states:

Collections and documents are created implicitly in Cloud Firestore.
Simply assign data to a document within a collection.
If either the collection or document does not exist, Cloud Firestore creates it.

My approach of running a transaction to update the count failed, because the parent document doesn’t exist at the moment the city was created.

const {onDocumentCreated} = require("firebase-functions/v2/firestore");
const {initializeApp, getApps} = require("firebase-admin/app");
const {getFirestore, DocumentReference} = require("firebase-admin/firestore");

if (!getApps().length) initializeApp();
const db = getFirestore();

exports.firestoreEventHander = onDocumentCreated(
    "countries/{countryId}/cities/{cityId}",
    async (event) => {
      const snapshot = event.data;
      console.log("snapshot exists:", snapshot.exists);  // true

      const countryRef = snapshot.ref.parent.parent;
      console.log("country path:", countryRef.path);  // countries/USA

      // Access snapshot through the db
      const cityDoc = await db.doc(`countries/${countryId}/cities/${cityId}`).get();
      console.log("cityDoc.exists:", cityDoc.exists);  // true

      // Check if the countryRef document exists
      const countryDoc = await countryRef.get();
      console.log("countryDoc:", countryDoc.data());  // ⚠️ undefined ⚠️
      console.log("countryDoc.exists:", countryDoc.exists);  // ⚠️ false ⚠️

      // Try to access the country via db.doc()
      const countryDoc2 = await db.doc(`countries/${countryId}`).get();
      console.log("countryDoc2:", countryDoc2.data());  // ⚠️ undefined ⚠️
      console.log("countryDoc2.exists:", countryDoc2.exists);  // ⚠️ false ⚠️
    },
);

I am trying to understand how to submit request to generate the next page in a website.

The site displays the first 10 rows of a data table, and then provides a list of page numbers and Previous and Next highlighted text (e.g., Previous 1 2 3 4 Next) at the bottom of the data table. I assume there is a javascript that is executed to render the next page. There is no xpath type ‘//button[text()=Next”] button on the page. On the page, clicking on the highlighted text Next renders the next page.

I have successfully scraped the data from the first displayed table info, but do not understand how to trigger the site to render the next page.
I assume the python selenium command to trigger the next page is using:

driver.execute_script('INSERT JS NEXT PAGE COMMAND HERE')

but do not know how to find the name of the js script. I am not familiar with js

This is a portion of the HTML that is displayed. Does this include the name of a js to use as an argument in a driver.execute_script() command?

            <div class="paginator js-paginator hide">
                <a class="previous js-previous icon-with-text">
                    <span class="text">Previous</span> <svg class="icon" height="16" width="16" focusable="false" aria-hidden="true"><use xlink:href="/static/img/components/icons/16px/ic_caretleft.1e8c2f677d23.svg#icon" /></svg>
                </a>
                <div class="pages js-pages hide-for-mobile"></div>
                <a class="next js-next icon-with-text">
                    <span class="text">Next</span> <svg class="icon" height="16" width="16" focusable="false" aria-hidden="true"><use xlink:href="/static/img/components/icons/16px/ic_caretright.b5b45a745d42.svg#icon" /></svg>
                </a>
            </div>

There are also a sequence of scripts included at the bottom of the html page:

    <script src="/static/js/lib/jquery.min.a09e13ee94d5.js" nonce=""></script>
    <script src="/static/js/lib/jquery.deserialize.min.3db41d3f53d5.js" nonce=""></script>
    <script src="/static/js/lib/lodash.min.68e9b65c3984.js" nonce=""></script>
    <script src="/static/js/lib/d3.min.9fe250ef5e1d.js" nonce=""></script>
    <script src="/static/js/lib/select2.min.aebd21499cab.js" nonce=""></script>
    <script src="/static/js/lib/tipped.9093e3c14aaf.js" nonce=""></script>
    <script src="/static/js/lib/vex.min.c9f77cb11959.js" nonce=""></script>
    <script src="/static/js/lib/jquery.waypoints.min.07c8bc20d684.js" nonce=""></script>
    <script src="/static/js/lib/sticky.min.d3f1ddda5800.js" nonce=""></script>

    <script nonce="">
        window.TTAM.ready(function(exports) {
            exports.utility.GTMImpressionsSingleton();
        });
    </script>
        <script src="/static/js/main.40c23f145e01.js" nonce=""></script>