Я создаю сайт в Laravel, и есть модуль ReactJS, который мне понадобится для визуализации. Однако я не могу заставить его работать, я совершенно новичок в ReactJS. Это модуль: https://github.com/Lattice-Automation/seqviz
После установки sh fre laravel я запустил php artisan preset react, чтобы измениться, чтобы среагировать. Пример, приведенный после этой команды, работал нормально. Затем я попытался интегрировать модуль. Я запустил npm install seqviz, который установил модуль в node_modules.
welcome.blade. php
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"> <script src="https://cdn.latticeautomation.com/libs/seqviz/1.0.0/seqviz.min.js">
</script> </head>
<body>
<div id="example"></div>
<div id="root"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
resources / js / app. js
/**
* First we will load all of this project's JavaScript dependencies which
* includes React and other helpers. It's a great starting point while
* building robust, powerful web applications using React + Laravel.
*/
require('./bootstrap');
/**
* Next, we will create a fresh React component instance and attach it to
* the page. Then, you may begin adding components to this application
* or customize the JavaScript scaffolding to fit your unique needs.
*/
require('seqviz');
require('./components/Example');
resources / js / components / Example. js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { SeqViz } from "seqviz";
ReactDOM.render(<SeqViz
name="J23100"
seq="TTGACGGCTAGCTCAGTCCTAGGTACAGTGCTAGC"
annotations={[{ name: "promoter", start: 0, end: 34, direction: 1 }]}
/>, document.getElementById('root'));
Последний файл является лишь примером, я попробовал код в нескольких других форматах, чтобы он заработал. После каждого изменения я запускаю npm run dev. Он дает пустую страницу с двумя скроллерами:
<body>
<div id="example"></div>
<div id="root">
<div class="la-vz-seqviz">
<div class="la-vz-seqviz-container">
<div class="la-vz-viewer-container" style="z-index: 2;">
<div id="la-vz-circular-J23100-event-router" class="la-vz-viewer-event-router" role="presentation"></div>
<div class="erd_scroll_detection_container erd_scroll_detection_container_animation_active" style="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0px; padding: 0px;">
<div dir="ltr" class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;">
<div class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; left: -18px; top: -18px; right: -17px; bottom: -17px;">
<div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; width: 494px; height: 45px;"></div>
</div>
<div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;">
<div style="position: absolute; width: 200%; height: 200%;"></div>
</div>
</div>
</div>
</div>
</div>
<div class="la-vz-viewer-container" style="z-index: 3;">
<div id="la-vz-linear-J23100-event-router" class="la-vz-viewer-event-router" role="presentation">
<div class="la-vz-linear-scroller">
<div class="la-vz-seqblock-container" style="height: 110.1px;">
<div style="width: 449.2px; height: 0px;"></div>
</div>
</div>
</div>
<div class="erd_scroll_detection_container erd_scroll_detection_container_animation_active" style="visibility: hidden; display: inline; width: 0px; height: 0px; z-index: -1; overflow: hidden; margin: 0px; padding: 0px;">
<div dir="ltr" class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; width: 100%; height: 100%; left: 0px; top: 0px;">
<div class="erd_scroll_detection_container" style="position: absolute; flex: 0 0 auto; overflow: hidden; z-index: -1; visibility: hidden; left: -18px; top: -18px; right: -17px; bottom: -17px;">
<div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; width: 494px; height: 45px;"></div>
</div>
<div style="position: absolute; flex: 0 0 auto; overflow: scroll; z-index: -1; visibility: hidden; width: 100%; height: 100%;">
<div style="position: absolute; width: 200%; height: 200%;"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="http://127.0.0.1:8000/js/app.js"></script>
</body>
Я также попробовал пример Vanilla- JS, вставив CDN и предоставленный пример кода в welcome.blade. php , но это тоже не работает.
Я чувствую, что упускаю что-то очень простое c ... Любая помощь, чтобы этот модуль работал либо с Vanilla- JS, либо с React, была бы сильно оценена!