39 lines
1.1 KiB
React
39 lines
1.1 KiB
React
|
import React, { useCallback, useState } from "react";
|
||
|
|
import { SequenceDiagramViewer } from "./room/GroupCallInspector";
|
||
|
|
import { FieldRow, InputField } from "./input/Input";
|
||
|
|
|
||
|
|
export function SequenceDiagramViewerPage() {
|
||
|
|
const [debugLog, setDebugLog] = useState();
|
||
|
|
const [selectedUserId, setSelectedUserId] = useState();
|
||
|
|
const onChangeDebugLog = useCallback((e) => {
|
||
|
|
if (e.target.files && e.target.files.length > 0) {
|
||
|
|
e.target.files[0].text().then((text) => {
|
||
|
|
setDebugLog(JSON.parse(text));
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div style={{ marginTop: 20 }}>
|
||
|
|
<FieldRow>
|
||
|
|
<InputField
|
||
|
|
type="file"
|
||
|
|
id="debugLog"
|
||
|
|
name="debugLog"
|
||
|
|
label="Debug Log"
|
||
|
|
onChange={onChangeDebugLog}
|
||
|
|
/>
|
||
|
|
</FieldRow>
|
||
|
|
{debugLog && (
|
||
|
|
<SequenceDiagramViewer
|
||
|
|
localUserId={debugLog.localUserId}
|
||
|
|
selectedUserId={selectedUserId}
|
||
|
|
onSelectUserId={setSelectedUserId}
|
||
|
|
remoteUserIds={debugLog.remoteUserIds}
|
||
|
|
events={debugLog.eventsByUserId[selectedUserId]}
|
||
|
|
/>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|