More specific sesson/config warning dialogs (#4811)

GMOD · Feb 3, 2025 · 3a321d4 · 3a321d4
1 parent 42fda64
commit 3a321d4
Show file tree

Hide file tree

Showing 11 changed files with 279 additions and 236 deletions.
diff --git a/packages/core/PluginLoader.ts b/packages/core/PluginLoader.ts
@@ -122,20 +122,33 @@ export interface LoadedPlugin {
   default: PluginConstructor
 }
 
-export function pluginDescriptionString(pluginDefinition: PluginDefinition) {
-  if (isUMDPluginDefinition(pluginDefinition)) {
-    return `UMD plugin ${pluginDefinition.name}`
-  }
-  if (isESMPluginDefinition(pluginDefinition)) {
+export function pluginDescriptionString(d: PluginDefinition) {
+  if (isUMDPluginDefinition(d)) {
+    return `UMD plugin ${d.name}`
+  } else if (isESMPluginDefinition(d)) {
     return `ESM plugin ${
-      (pluginDefinition as ESMUrlPluginDefinition).esmUrl ||
-      (pluginDefinition as ESMLocPluginDefinition).esmLoc.uri
+      (d as ESMUrlPluginDefinition).esmUrl ||
+      (d as ESMLocPluginDefinition).esmLoc.uri
     }`
+  } else if (isCJSPluginDefinition(d)) {
+    return `CJS plugin ${d.cjsUrl}`
+  } else {
+    return 'unknown plugin'
   }
-  if (isCJSPluginDefinition(pluginDefinition)) {
-    return `CJS plugin ${pluginDefinition.cjsUrl}`
+}
+export function pluginUrl(d: PluginDefinition) {
+  if (isUMDPluginDefinition(d)) {
+    // @ts-expect-error
+    return d.url ?? d.esmLoc.uri ?? d.umdUrl
+  } else if (isESMPluginDefinition(d)) {
+    // @ts-expect-error
+    return d.esmUrl ?? d.esmUri
+  } else if (isCJSPluginDefinition(d)) {
+    // @ts-expect-error
+    return d.cjsUrl || d.cjsLoc.uri
+  } else {
+    return 'unknown url'
   }
-  return 'unknown plugin'
 }
 
 function isInWebWorker() {

diff --git a/plugins/alignments/src/LinearSNPCoverageDisplay/model.ts b/plugins/alignments/src/LinearSNPCoverageDisplay/model.ts
@@ -345,7 +345,7 @@ function stateModelFactory(
         /**
          * #getter
          */
-        get needsScalebar() {
+        get graphType() {
           return true
         },
 

diff --git a/plugins/wiggle/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx b/plugins/wiggle/src/LinearWiggleDisplay/components/WiggleDisplayComponent.tsx
@@ -16,7 +16,7 @@ type LGV = LinearGenomeViewModel
 
 const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   const { model } = props
-  const { stats, height, needsScalebar } = model
+  const { stats, height, graphType } = model
 
   const { trackLabels } = getContainingView(model) as LGV
   const track = getContainingTrack(model)
@@ -27,7 +27,7 @@ const LinearWiggleDisplay = observer((props: { model: WiggleDisplayModel }) => {
   return (
     <div>
       <BaseLinearDisplayComponent {...props} />
-      {stats && needsScalebar ? (
+      {stats && graphType ? (
         <svg
           style={{
             position: 'absolute',

diff --git a/plugins/wiggle/src/LinearWiggleDisplay/model.ts b/plugins/wiggle/src/LinearWiggleDisplay/model.ts
@@ -91,6 +91,16 @@ function stateModelFactory(
         const view = getContainingView(self) as LinearGenomeViewModel
         return self.stats?.currStatsBpPerPx === view.bpPerPx
       },
+
+      /**
+       * #getter
+       */
+      get graphType() {
+        return (
+          self.rendererTypeName === 'XYPlotRenderer' ||
+          self.rendererTypeName === 'LinePlotRenderer'
+        )
+      },
       /**
        * #getter
        */
@@ -164,15 +174,6 @@ function stateModelFactory(
         }
       },
 
-      /**
-       * #getter
-       */
-      get needsScalebar() {
-        return (
-          self.rendererTypeName === 'XYPlotRenderer' ||
-          self.rendererTypeName === 'LinePlotRenderer'
-        )
-      },
       /**
        * #getter
        */
@@ -210,14 +211,18 @@ function stateModelFactory(
               icon: EqualizerIcon,
               subMenu: self.scoreTrackMenuItems(),
             },
-            {
-              label: 'Inverted',
-              type: 'checkbox',
-              checked: self.inverted,
-              onClick: () => {
-                self.setInverted(!self.inverted)
-              },
-            },
+            ...(self.graphType
+              ? [
+                  {
+                    label: 'Inverted',
+                    type: 'checkbox',
+                    checked: self.inverted,
+                    onClick: () => {
+                      self.setInverted(!self.inverted)
+                    },
+                  },
+                ]
+              : []),
 
             ...(self.canHaveFill
               ? [
@@ -267,7 +272,7 @@ function stateModelFactory(
               },
             },
 
-            ...(self.needsScalebar
+            ...(self.graphType
               ? [
                   {
                     type: 'checkbox',

diff --git a/plugins/wiggle/src/LinearWiggleDisplay/renderSvg.tsx b/plugins/wiggle/src/LinearWiggleDisplay/renderSvg.tsx
@@ -15,12 +15,12 @@ export async function renderSvg(
   superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>,
 ) {
   await when(() => !!self.stats && !!self.regionCannotBeRenderedText)
-  const { needsScalebar, stats } = self
+  const { graphType, stats } = self
   const { offsetPx } = getContainingView(self) as LinearGenomeViewModel
   return (
     <>
       <g>{await superRenderSvg(opts)}</g>
-      {needsScalebar && stats ? (
+      {graphType && stats ? (
         <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
           <YScaleBar model={self} orientation="left" />
         </g>

diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/ColorLegend.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/ColorLegend.tsx
@@ -15,7 +15,7 @@ const ColorLegend = observer(function ({
   exportSVG?: boolean
 }) {
   const {
-    needsScalebar,
+    graphType,
     needsFullHeightScalebar,
     rowHeightTooSmallForScalebar,
     renderColorBoxes,
@@ -26,7 +26,7 @@ const ColorLegend = observer(function ({
   const legendWidth = labelWidth + colorBoxWidth + 5
   const svgOffset = exportSVG ? 10 : 0
   const extraOffset =
-    svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0)
+    svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0)
 
   return sources ? (
     <>

diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/components/LegendItem.tsx b/plugins/wiggle/src/MultiLinearWiggleDisplay/components/LegendItem.tsx
@@ -21,7 +21,7 @@ const LegendItem = function ({
   const boxHeight = Math.min(20, rowHeight)
   const {
     needsCustomLegend,
-    needsScalebar,
+    graphType,
     needsFullHeightScalebar,
     rowHeightTooSmallForScalebar,
     renderColorBoxes,
@@ -32,7 +32,7 @@ const LegendItem = function ({
   const legendWidth = labelWidth + colorBoxWidth + 5
   const svgOffset = exportSVG ? 10 : 0
   const extraOffset =
-    svgOffset || (needsScalebar && !rowHeightTooSmallForScalebar ? 50 : 0)
+    svgOffset || (graphType && !rowHeightTooSmallForScalebar ? 50 : 0)
   return (
     <>
       {needsFullHeightScalebar ? null : (

diff --git a/plugins/wiggle/src/MultiLinearWiggleDisplay/model.ts b/plugins/wiggle/src/MultiLinearWiggleDisplay/model.ts
@@ -147,7 +147,7 @@ export function stateModelFactory(
       /**
        * #getter
        */
-      get needsScalebar() {
+      get graphType() {
         return (
           self.rendererTypeName === 'MultiXYPlotRenderer' ||
           self.rendererTypeName === 'MultiRowXYPlotRenderer' ||
@@ -438,7 +438,7 @@ export function stateModelFactory(
                 ]
               : []),
 
-            ...(self.needsScalebar
+            ...(self.graphType
               ? [
                   {
                     type: 'checkbox',

diff --git a/products/jbrowse-web/src/components/ConfigWarningDialog.tsx b/products/jbrowse-web/src/components/ConfigWarningDialog.tsx
@@ -1,12 +1,8 @@
-import { pluginDescriptionString } from '@jbrowse/core/PluginLoader'
+import { useState } from 'react'
+
+import { pluginDescriptionString, pluginUrl } from '@jbrowse/core/PluginLoader'
 import { Dialog } from '@jbrowse/core/ui'
-import WarningIcon from '@mui/icons-material/Warning'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-} from '@mui/material'
+import { Alert, Button, DialogActions, DialogContent } from '@mui/material'
 
 import type { PluginDefinition } from '@jbrowse/core/PluginLoader'
 
@@ -19,20 +15,37 @@ export default function ConfigWarningDialog({
   onCancel: () => void
   reason: PluginDefinition[]
 }) {
+  const [show, setShow] = useState(false)
   return (
     <Dialog open maxWidth="xl" title="Warning" onClose={onCancel}>
       <DialogContent>
-        <WarningIcon fontSize="large" />
-        <DialogContentText>
+        <Alert severity="warning" style={{ width: 800 }}>
           This link contains a cross origin config that has the following
           unknown plugins:
           <ul>
             {reason.map(r => (
-              <li key={JSON.stringify(r)}>{pluginDescriptionString(r)}</li>
+              <li key={JSON.stringify(r)}>
+                {pluginDescriptionString(r)} - ({pluginUrl(r)})
+              </li>
             ))}
           </ul>
-          Please ensure you trust the source of this link.
-        </DialogContentText>
+          Please ensure you trust the source of this link.{' '}
+          <Button
+            onClick={() => {
+              setShow(!show)
+            }}
+          >
+            Why am I seeing this?
+          </Button>
+          {show ? (
+            <div>
+              Config files can load arbitrary javascript files via plugins. For
+              security purposes, we display this message when a cross-origin
+              config is detected to be loading plugins that are not in our
+              plugin store
+            </div>
+          ) : null}
+        </Alert>
       </DialogContent>
       <DialogActions>
         <Button

diff --git a/products/jbrowse-web/src/components/SessionWarningDialog.tsx b/products/jbrowse-web/src/components/SessionWarningDialog.tsx
@@ -1,12 +1,8 @@
-import { pluginDescriptionString } from '@jbrowse/core/PluginLoader'
+import { useState } from 'react'
+
+import { pluginDescriptionString, pluginUrl } from '@jbrowse/core/PluginLoader'
 import { Dialog } from '@jbrowse/core/ui'
-import WarningIcon from '@mui/icons-material/Warning'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  DialogContentText,
-} from '@mui/material'
+import { Alert, Button, DialogActions, DialogContent } from '@mui/material'
 
 import type { PluginDefinition } from '@jbrowse/core/PluginLoader'
 
@@ -19,19 +15,35 @@ export default function SessionWarningDialog({
   onCancel: () => void
   reason: PluginDefinition[]
 }) {
+  const [show, setShow] = useState(false)
   return (
     <Dialog open maxWidth="xl" title="Warning" onClose={onCancel}>
       <DialogContent>
-        <WarningIcon fontSize="large" />
-        <DialogContentText>
+        <Alert severity="warning" style={{ width: 800 }}>
           This link contains a session that has the following unknown plugins:
           <ul>
             {reason.map(r => (
-              <li key={JSON.stringify(r)}>{pluginDescriptionString(r)}</li>
+              <li key={JSON.stringify(r)}>
+                {pluginDescriptionString(r)} - ({pluginUrl(r)})
+              </li>
             ))}
           </ul>
           Please ensure you trust the source of this session.
-        </DialogContentText>
+          <Button
+            onClick={() => {
+              setShow(!show)
+            }}
+          >
+            Why am I seeing this?
+          </Button>
+          {show ? (
+            <div>
+              Sessions can load arbitrary javascript files via session plugins.
+              For security purposes, we display this message when sessions
+              contain plugins that are not from our plugin store
+            </div>
+          ) : null}
+        </Alert>
       </DialogContent>
       <DialogActions>
         <Button