Nightingale upgrade

jest.setup.ts

@@ -22,6 +22,8 @@ jest.mock('interaction-viewer', () => null);
 
 jest.mock('/shared/custom-elements/NightingaleMSA', () => jest.fn());
 
+jest.mock('@nightingale-elements/nightingale-navigation', () => jest.fn());
+
 global.beforeEach(() => {
   resetUuidV1();
 });
@@ -50,6 +52,31 @@ jest.mock('react', () => ({
   useId: mockedUseId,
 }));
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+(global as any).ResizeObserver = class ResizeObserver {
+  constructor(callback: ResizeObserverCallback) {
+    this.callback = callback;
+  }
+
+  observe(target: Element) {
+    this.callback([{ target } as ResizeObserverEntry], this);
+  }
+
+  // eslint-disable-next-line class-methods-use-this, @typescript-eslint/no-unused-vars
+  unobserve(target: Element) {
+    // Mock implementation
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  disconnect() {
+    // Mock implementation
+  }
+
+  private callback: ResizeObserverCallback;
+};
+
+global.ResizeObserver = ResizeObserver;
+
 /* "Fail on console error" util */
 // Uncomment to have jest stop when a console error is shown in order to fix it
 // Recommended to use with Jest's "--bail" option

package.json

@@ -56,7 +56,7 @@
       "jsx"
     ],
     "transformIgnorePatterns": [
-      "<rootDir>/node_modules/(?!franklin-sites|p-map|aggregate-error|clean-stack|@nightingale|@lit/react|url-join).+\\.js"
+      "<rootDir>/node_modules/(?!franklin-sites|p-map|aggregate-error|clean-stack|protvista-uniprot|@nightingale|@lit/react|url-join).+\\.js"
     ],
     "testPathIgnorePatterns": [
       "/__mocks__/",
@@ -98,10 +98,19 @@
     "string-width": "4.1.0"
   },
   "dependencies": {
+    "@floating-ui/dom": "1.6.5",
     "@hello-pangea/dnd": "17.0.0",
     "@lit/react": "1.0.5",
-    "@nightingale-elements/nightingale-msa": "5.0.0",
+    "@nightingale-elements/nightingale-filter": "5.3.2",
+    "@nightingale-elements/nightingale-manager": "5.3.2",
+    "@nightingale-elements/nightingale-msa": "5.3.2",
+    "@nightingale-elements/nightingale-navigation": "5.3.2",
+    "@nightingale-elements/nightingale-new-core": "5.3.2",
+    "@nightingale-elements/nightingale-sequence": "5.3.2",
+    "@nightingale-elements/nightingale-track": "5.3.2",
+    "@nightingale-elements/nightingale-variation": "5.3.2",
     "@sentry/react": "8.31.0",
+    "@sentry/tracing": "7.27.0",
     "@sentry/types": "8.31.0",
     "@swissprot/rhea-reaction-visualizer": "0.0.21",
     "@swissprot/swissbiopics-visualizer": "0.0.28",
@@ -111,7 +120,7 @@
     "core-js": "3.38.1",
     "d3": "5.16.0",
     "deep-freeze": "0.0.1",
-    "franklin-sites": "0.0.246",
+    "franklin-sites": "0.0.249",
     "front-matter": "4.0.2",
     "history": "4.10.1",
     "idb": "8.0.0",
@@ -121,18 +130,7 @@
     "marked": "14.1.2",
     "marked-gfm-heading-id": "4.1.0",
     "p-map": "7.0.2",
-    "protvista-datatable": "3.8.10",
-    "protvista-feature-adapter": "3.8.15",
-    "protvista-filter": "3.8.4",
-    "protvista-manager": "3.8.4",
-    "protvista-navigation": "3.8.10",
-    "protvista-sequence": "3.8.13",
-    "protvista-tooltip": "3.8.4",
-    "protvista-track": "3.8.13",
-    "protvista-uniprot": "2.12.3",
-    "protvista-variation": "3.8.13",
-    "protvista-variation-adapter": "3.8.13",
-    "protvista-zoom-tool": "3.8.4",
+    "protvista-uniprot": "3.0.8",
     "react": "18.3.1",
     "react-diff-viewer-continued": "3.4.0",
     "react-dom": "18.3.1",

src/app/components/App.tsx

@@ -43,6 +43,20 @@ import pkg from '../../../package.json';
 import 'franklin-sites/franklin.css';
 import './styles/app.scss';
 
+// This is hackery is to prevent define being repeatedly called for the same
+// name. This has been observed in Variant viewer and Feature viewer tabs.
+const originalDefine = customElements.define;
+function newDefine(
+  this: typeof customElements.define,
+  name: string,
+  constructor: CustomElementConstructor
+) {
+  if (!customElements.get(name)) {
+    originalDefine.call(this, name, constructor);
+  }
+}
+customElements.define = newDefine;
+
 if (process.env.NODE_ENV !== 'development') {
   SentryInit({
     // Key

src/app/components/home-page/styles/non-critical.module.scss

@@ -50,7 +50,9 @@
   & > * {
     position: relative;
 
-    text-shadow: -1px -1px 0 white, 1px 1px 0 white;
+    text-shadow:
+      -1px -1px 0 white,
+      1px 1px 0 white;
   }
 
   & img {

src/app/components/styles/app.scss

@@ -47,18 +47,6 @@
   }
 }
 
-protvista-datatable:not(:defined) > table {
-  width: 100%;
-  overflow-x: auto;
-  table-layout: fixed;
-  border-collapse: collapse;
-
-  & td,
-  & th {
-    border: 1px solid grey;
-  }
-}
-
 protvista-manager {
   &:hover,
   &:focus-within {

src/automatic-annotations/shared/entry/styles/conditions-annotations.module.scss

@@ -1,6 +1,5 @@
 @import 'franklin-sites/src/styles/mixins';
 @import 'franklin-sites/src/styles/settings';
-@import 'franklin-sites/src/styles/colours';
 
 .conditions-annotations {
   margin-bottom: $global-margin;
@@ -15,7 +14,7 @@
       left: 0;
       bottom: 0;
       width: 1ch;
-      background-color: $colour-sapphire-blue;
+      background-color: var(--fr--color-sapphire-blue);
     }
   }
 }
@@ -56,29 +55,29 @@
   margin-bottom: 0;
 
   & > li {
-    border-color: $colour-sapphire-blue;
+    border-color: var(--fr--color-sapphire-blue);
     border-style: solid;
     border-width: 0 0 1em 1ch;
 
     .extra & {
-      border-color: $colour-sea-blue;
+      border-color: var(--fr--color-sea-blue);
     }
   }
 
   & .statement {
-    background-color: $colour-sapphire-blue;
+    background-color: var(--fr--color-sapphire-blue);
 
     &::before {
-      background-color: $colour-sapphire-blue;
+      background-color: var(--fr--color-sapphire-blue);
     }
   }
 
   .extra & {
     & .statement {
-      background-color: $colour-sea-blue;
+      background-color: var(--fr--color-sea-blue);
 
       &::before {
-        background-color: $colour-sea-blue;
+        background-color: var(--fr--color-sea-blue);
       }
     }
   }
@@ -96,10 +95,10 @@
     height: 0;
     border-left: 0.8em solid transparent;
     border-right: 0.8em solid transparent;
-    border-top: $global-margin solid $colour-sapphire-blue;
+    border-top: $global-margin solid var(--fr--color-sapphire-blue);
 
     .extra & {
-      border-top-color: $colour-sea-blue;
+      border-top-color: var(--fr--color-sea-blue);
     }
 
     @include fs-breakpoints('large') {
@@ -123,15 +122,15 @@
     }
   }
 
-  border-color: $colour-weldon-blue;
+  border-color: var(--fr--color-weldon-blue);
   border-style: solid;
   border-width: 0 0 1em 1ch;
 
   & .statement {
-    background-color: $colour-weldon-blue;
+    background-color: var(--fr--color-weldon-blue);
 
     &::before {
-      background-color: $colour-weldon-blue;
+      background-color: var(--fr--color-weldon-blue);
     }
   }
 }
@@ -146,7 +145,7 @@
 }
 
 .statement {
-  background-color: $colour-sapphire-blue;
+  background-color: var(--fr--color-sapphire-blue);
   color: white;
   padding: 0 1px;
   text-transform: uppercase;
@@ -193,10 +192,10 @@
     height: 0;
     border-top: 0.8em solid transparent;
     border-bottom: 0.8em solid transparent;
-    border-left: $global-margin solid $colour-sapphire-blue;
+    border-left: $global-margin solid var(--fr--color-sapphire-blue);
 
     .extra & {
-      border-left-color: $colour-sea-blue;
+      border-left-color: var(--fr--color-sea-blue);
     }
 
     @include fs-breakpoints('large') {
@@ -209,7 +208,7 @@
 .extra {
   position: relative;
   margin-top: $global-margin;
-  border-bottom: $global-margin solid $colour-sea-blue;
+  border-bottom: $global-margin solid var(--fr--color-sea-blue);
 
   &::before {
     content: '';
@@ -218,11 +217,11 @@
     top: 0;
     bottom: 0;
     width: 1ch;
-    background-color: $colour-sea-blue;
+    background-color: var(--fr--color-sea-blue);
   }
 
   & > .statement {
-    background-color: $colour-sea-blue;
+    background-color: var(--fr--color-sea-blue);
     padding-left: 1ch;
     margin-bottom: $global-margin;
   }

src/basket/styles/basket-status.module.scss

@@ -1,5 +1,3 @@
-@import 'franklin-sites/src/styles/colours';
-
 :global(.sliding-panel) {
   .basket-status {
     display: none;
@@ -12,7 +10,7 @@
   &:hover,
   &:focus {
     svg {
-      background-color: $colour-sea-blue;
+      background-color: var(--fr--color-sea-blue);
     }
   }
 
@@ -23,7 +21,7 @@
     margin: 0 0.5ch;
     padding: 0.4ch;
     border-radius: 50%;
-    background-color: $colour-sapphire-blue;
+    background-color: var(--fr--color-sapphire-blue);
     color: white;
     animation: appear 1 0.5s both ease-out;
 

src/help/components/contextual/ContextualHelp.tsx

@@ -40,7 +40,7 @@ const ContextualHelp = () => {
   useEffect(() => {
     const eventHandler = (event: MouseEvent) => {
       const element = event.target as HTMLElement;
-      const isInTooltip = Boolean(element.closest('[data-tippy-root'));
+      const isInTooltip = Boolean(element.closest('[role=tooltip]'));
       // If it's a click within a tooltip, stop the propagation of the event
       if (isInTooltip) {
         event.stopPropagation();

src/help/components/contextual/styles/contextual-help.module.scss

@@ -10,10 +10,6 @@
     cursor: inherit;
     opacity: 1;
   }
-
-  [data-tippy-root] &::after {
-    display: initial;
-  }
 }
 
 $help-height: 35em;
@@ -30,11 +26,11 @@ $help-height: 35em;
   z-index: 2147483642;
 
   :global(.sliding-panel__header) {
-    background-color: $colour-help-green;
+    background-color: var(--fr--color-help-green);
   }
 
   :global(.sliding-panel__content) {
-    @include scroll-shadow($colour-sky-white);
+    @include scroll-shadow(var(--fr--color-sky-white));
     overscroll-behavior: contain;
   }