Tooltip

Author: cmdcolin

plugins/wiggle/src/MultiLinearWiggleDisplay/components/Tooltip.tsx

@@ -26,7 +26,8 @@ const TooltipContents = forwardRef<HTMLDivElement, Props>(
       | undefined
     const source = feature.get('source')
     const summary = feature.get('summary')
-    const obj = Object.fromEntries(model.sources.map(ent => [ent.name, ent]))
+    const obj = Object.fromEntries(model.sources.map(ent => [ent.source, ent]))
+    const obj2 = obj[source]
 
     return (
       <div ref={ref}>
@@ -42,26 +43,31 @@ const TooltipContents = forwardRef<HTMLDivElement, Props>(
               </tr>
             </thead>
             <tbody>
-              {Object.entries(sources).map(([source, data]) => (
-                <tr key={source}>
-                  <td>
-                    <div
-                      style={{
-                        width: 16,
-                        height: 16,
-                        background: obj[source]!.color,
-                      }}
-                    ></div>
-                  </td>
-                  <td>{source}</td>
-                  <td>{toP(data.score)}</td>
-                </tr>
-              ))}
+              {Object.entries(sources).map(([source, data]) => {
+                const sourceInfo = obj[source]
+                return (
+                  <tr key={source}>
+                    <td>
+                      {sourceInfo && (
+                        <div
+                          style={{
+                            width: 16,
+                            height: 16,
+                            background: sourceInfo.color,
+                          }}
+                        ></div>
+                      )}
+                    </td>
+                    <td>{sourceInfo?.name || source}</td>
+                    <td>{toP(data.score)}</td>
+                  </tr>
+                )
+              })}
             </tbody>
           </table>
         ) : (
           <span>
-            {source}{' '}
+            {obj2?.name || source}{' '}
             {summary
               ? `min:${toP(feature.get('minScore'))} avg:${toP(
                   feature.get('score'),
@@ -76,18 +82,17 @@ const TooltipContents = forwardRef<HTMLDivElement, Props>(
 
 type Coord = [number, number]
 
-const WiggleTooltip = observer(
-  (props: {
-    model: { featureUnderMouse: Feature; sources: Source[]; rowHeight: number }
-    height: number
-    offsetMouseCoord: Coord
-    clientMouseCoord: Coord
-    clientRect?: DOMRect
-    TooltipContents?: TooltipContentsComponent
-  }) => {
-    return <Tooltip useClientY TooltipContents={TooltipContents} {...props} />
-  },
-)
+const WiggleTooltip = observer(function (props: {
+  model: { featureUnderMouse: Feature; sources: Source[]; rowHeight: number }
+  height: number
+  offsetMouseCoord: Coord
+  clientMouseCoord: Coord
+  clientRect?: DOMRect
+  TooltipContents?: TooltipContentsComponent
+}) {
+  return <Tooltip useClientY TooltipContents={TooltipContents} {...props} />
+})
+
 export default WiggleTooltip
 
 export { default as Tooltip } from '../../Tooltip'

plugins/wiggle/src/MultiWiggleRendering.tsx

@@ -53,7 +53,7 @@ const MultiWiggleRendering = observer(function (props: {
     let featureUnderMouse: Feature | undefined
     if (isMultiRow) {
       for (const feature of features.values()) {
-        if (feature.get('source') !== source.name) {
+        if (feature.get('source') !== source.source) {
           continue
         }
         if (