可視化ツールのvega embedでグラフ表示がうまくいきません

問題

可視化ツールのvega-lite、vega embedを使ってグラフを表示させるアプリケーションを作成しているのですが、firefoxでは不安定ながら表示されて、google chromeでは表示されないです。グラフの表示はメイン画面にファイルとグラフ、設定画面としてにサブ画面を使って、サブ画面が実行ボタンになってます。しかし、グラフ表示は親画面なのでグラフ表示予定のid名をサブ画面から取得してグラフ表示させるのですが、うまく動作しませんでした。

アプリの実行例　親画面とサブ画面

親画面からファイルを選択し、サブ画面のグラフ作成ボタンを押すとグラフを作成します

実行結果

firefoxだと表示はされるのですが、下に行くと黒い玉が出てきます

親画面（クライアント側）左がファイルツリー右がグラフ表示画面になる

ejs
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <title><%= title%></title>
6    <link rel="stylesheet" href="/stylesheets/style.min.css" />
7    <link rel="stylesheet" href="/stylesheets/style.css" />
8    <!--JSTreeの設定-->
9    <script src="/plugin/jquery-3.6.0.min.js"></script>
10    <script src="/plugin/jstree.min.js"></script>
11    <!--BootstrapのCSS読み込み-->
12    <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" />
13    <!-- BootstrapのJS読み込み -->
14    <script src="/plugin/js/bootstrap.min.js"></script>
15  </head>
16  <!--ボディー-->
17  <body>
18    <!--ナビゲーションバー-->
19    <nav class="navbar navbar-expand-lg navbar-light bg-light">
20      <div class="container-fluid">
21        <a class="navbar-brand" href="/">分析</a>
22        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
23          <span class="navbar-toggler-icon"></span>
24        </button>
25        <div class="collapse navbar-collapse" id="navbarSupportedContent">
26          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
27            <li class="nav-item dropdown">
28              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
29                メニュー
30              </a>
31              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
32                <li><a class="dropdown-item" id="setting" href="Javascript:void(0)">設定画面</a></li>                    
33                <!--<li><a class="dropdown-item" id="setting" href="Javascript:void(0)" onclick="window.open('/set','setting','width=400,height=500');">設定画面</a></li>-->                                                                              
34                <li><a class="dropdown-item" id="download" href="#">ファイルダウンロード</a></li>
35              </ul>
36            </li>
37          </ul>
38        </div>
39      </div>
40    </nav>
41    <div class="container-fluid" id="content">
42      <div class="row" id="split-panel">
43        <div class="col-md-3 border border-dark"id="left-panel">
44          <div id="file_tree"></div>
45        </div>
46        <div class="col-md-9"id="right-panel">
47          <!--描画 --><!-- id名 chart のところにグラフを表示させたい-->
48          <div id="chart"></div>
49        </div>
50      </div>
51    </div>
52    <script src="/javascripts/readTree.js"></script>
53  </body>
54</html>
55

親画面（サーバ側）設定画面を開くだけです

js
1// HTMLが開くとjsTreeが起動する
2$(function() {
3    $(document).ready(function() {
4        $.ajax({
5            async : true,
6            type : "GET",
7            url : "http://localhost:3000/file",
8            dataType : "json",    
9
10            success : function(json) {
11                //console.log(json);
12                createJSTrees(json);
13            },    
14            error : function(xhr, ajaxOptions, thrownError) {
15                alert(xhr.status);
16                alert(thrownError);
17            }
18        });
19    });
20});    
21
22// jsonデータからファイルツリー構造を作成
23function createJSTrees(jsonData) {
24    $("#file_tree").jstree({
25        'core' : {
26            'data' : jsonData
27        },
28        "checkbox": {
29            // "tie_selection" : false
30        },
31        "plugins" : ["checkbox"]
32    });
33}
34// 設定画面を開く
35var subWin = null; // グローバル変数
36$('#setting').click(function() {
37    console.log("Event OPEN");
38    //subWin = window.open($(this).attr('href'), "settingWindow", "width = 400, height = 500");
39    subWin = window.open("/set", "settingWindow", "width = 400, height = 500");
40    //console.log(subWin);
41});
42
43

サブ画面（クライアント側）　設定画面になります
ほとんどが、ラジオボタンやチェックボックスの設定です

ejs
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <!--JSTreeの設定-->
6    <script src="/plugin/jquery-3.6.0.min.js"></script>
7    <script src="/plugin/jstree.min.js"></script>
8    <!--vega-lite CDN-->
9    <script src="https://cdn.jsdelivr.net/npm/vega@5.20.2"></script>
10    <script src="https://cdn.jsdelivr.net/npm/vega-lite@5.1.1"></script>
11    <script src="https://cdn.jsdelivr.net/npm/vega-embed@6.18.2"></script>
12    <!--BootstrapのCSS読み込み-->
13    <link rel="stylesheet" href="/plugin/css/bootstrap.min.css" />
14    <!-- BootstrapのJS読み込み -->
15    <script src="/plugin/js/bootstrap.min.js"></script> 
16  </head>
17  <body>
18    <div class="container" id="setting">
19      <form  id="form" name="form">
20        <div class="form-group">
21          <label class="form-label">軸の選択</label>
22          <div class="form-check form-check-inline">
23            <input class="form-check-input" type="checkbox" name="axis" value="x">
24            <label class="form-check-label" for="checkbox1">x</label>
25          </div>
26          <div class="form-check form-check-inline">
27            <input class="form-check-input" type="checkbox" name='axis' value="y">
28            <label class="form-check-label" for="checkbox2">y</label>
29          </div> <div class="form-check form-check-inline">
30            <input class="form-check-input" type="checkbox" name="axis" value="z">
31            <label class="form-check-label" for="checkbox3">z</label>
32          </div>
33        </div>
34        <div class="form-group">
35          <label class="form-label">表示方法の選択</label>
36          <div class="form-check form-check-inline">
37            <input class="form-check-input" type="radio" name="pattern"  value="multi">
38            <label class="form-check-label" for="inlineRadio1">multi</label>
39          </div>
40          <div class="form-check form-check-inline">
41            <input class="form-check-input" type="radio" name="pattern" id="inlineRadio2" value="row">
42            <label class="form-check-label" for="inlineRadio2">row</label>
43          </div>
44        </div>
45        <div class="mb-3">
46          <div id="button">
47            <p for="graph">グラフ作成</p>
48            <input type="button" class="btn btn-outline-primary" id="graph" value="時系列" />
49            <input type="button" class="btn btn-outline-primary" id="freq" value="周波数" />
50          </div>
51        </div>
52        <div class="form-group"> 
53          <p for="LPF">LPF</p>
54          <input class="form-text" type="text" id="lowpassform" name="lowpassfilter" value=20>
55          <input class="btn btn-outline-primary" type="button" id="filter" value="ローパスフィルター" />
56          <label id="formhelp" class="form-text">フィルタ[Hz]を入力してください</label>
57        </div>
58      </form>
59    </div> 
60    <p>cccc</p>
61    <script>
62      $("p").css("color", "red");
63    </script>
64    <!--<script src="/javascripts/readTree.js"></script>-->
65    <script src="/javascripts/setting.js"></script>
66  </body>
67</html>
68
69

サブ画面（サーバ側）ここがおかしいところになります

js
1// イベントリスナー
2//省略
3// 周波数ボタンイベント
4$('#freq').click(function() {
5  //console.log("クリックを確認！");
6  var fileTree = window.opener.$('#file_tree').jstree(true);
7  var selectNode = fileTree.get_selected(true);
8  console.log(selectNode);
9  console.log("送信します");
10  makeFreqChart(selectNode);
11});
12
13// 周波数グラフ
14function makeFreqChart(fileNames) {
15// データ作成部分は省略
16// 作成したデータ
17    var vlSpec = spec;
18    // 確認
19    // console.log("vlSpec : %s",JSON.stringify(vlSpec));
20
21    // 描画する                 
22// 問題の箇所になります　firefoxだと不安定ながら描画されます
23// vega embedは作成したデータと描画箇所のID名を渡すとグラフにしてくれます
24    var chart = window.opener.document.getElementById("chart"); // 親の画面からID名を取得
25    //console.log("chart : %s", chart);
26// ここでIDとデータを渡しています
27    vegaEmbed(chart , vlSpec);
28
29  }).fail(() => {
30    console.log('失敗');
31  });
32}
33