Fixing #45 issue where tsi indicator is missing when main chart move …

…to different pane

packages/extension/src/helper.ts

@@ -70,7 +70,7 @@ export function observeNodeChanges(
   nodeToObserve: Element,
   cb: () => unknown,
   options: Partial<MutationObserverInit> = { childList: true, subtree: true }
-): MutationObserver {
+): () => void {
   // eslint-disable-next-line prefer-const
   let observer: MutationObserver
 
@@ -83,7 +83,7 @@ export function observeNodeChanges(
 
   observer.observe(nodeToObserve, options)
 
-  return observer
+  return () => observer.disconnect()
 }
 
 export function waitForElm(selector: string): Promise<Element> {

packages/extension/src/page/chart.ts

@@ -8,18 +8,33 @@ import {
   observeNodeChanges,
 } from '../helper'
 
-waitForElm('[data-name="legend-series-item"]').then(setStockListInMap).then(mainScript)
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+let obs = () => {}
+const selectors = {
+  mainChartStockNameEl: '[data-name="legend-series-item"] [data-name="legend-source-title"]',
+  mainChartStockSeriesEl: '[data-name="legend-series-item"]',
+  mainChartEl:
+    'body > div.js-rootresizer__contents.layout-with-border-radius > div.layout__area--center > div.chart-container.single-visible.top-full-width-chart.active > div.chart-container-border',
+}
+
+waitForElm(selectors.mainChartStockSeriesEl)
+  .then(setStockListInMap)
+  .then(() => waitForElm(selectors.mainChartEl))
+  .then((rootChartElement) => {
+    obs()
+    observeNodeChanges(rootChartElement, mainScript)
+  })
 
 function mainScript() {
   // have to target dom like below since this is the most top parent
-  const symbolNode = document.querySelector('[data-name="legend-series-item"]')
-  observeNodeChanges(symbolNode, chartScript)
+  const symbolNode = document.querySelector(selectors.mainChartStockSeriesEl)
+  obs = observeNodeChanges(symbolNode, chartScript)
 }
 
 async function chartScript(): Promise<void> {
-  const { parentElement } = document.querySelector('[data-name="legend-source-title"]')
+  const { parentElement } = document.querySelector(selectors.mainChartStockNameEl)
 
-  // getting cssInJS hash like titleWrapper-1WIwNaDF (1WIwNaDF)
+  // getting cssInJS hash like titleWrapper-1WIwNaDF -> 1WIwNaDF
   const cssInJsHash = parentElement.className
     .split(' ')
     .find((i) => i.startsWith('titleWrapper-'))

packages/extension/src/page/symbols.ts

@@ -8,7 +8,9 @@ import {
   observeNodeChanges,
 } from '../helper'
 
-let obs: MutationObserver
+// eslint-disable-next-line @typescript-eslint/no-empty-function
+let obs = () => {}
+
 const largeResoSelector = '.tv-symbol-header .tv-symbol-header__second-line .tv-symbol-header__exchange'
 const smallResoSelector = '.tv-symbol-header.tv-symbol-header--mobile .tv-symbol-header__first-line'
 
@@ -34,7 +36,7 @@ function symbolScript() {
     } else {
       // have to disconnect current observer so that it doesn't create loop
       // because below we create icon and insert into div which trigger again observer.
-      obs.disconnect()
+      obs()
 
       const icon1 = createIcon()
       icon1.style.position = 'relative'