Skip to content

Commit

Permalink
Merge pull request #50 from ResilientApp/SCRUM-16
Browse files Browse the repository at this point in the history 
acm/16
  • Loading branch information
@aunshx
aunshx authored Sep 5, 2024
2 parents 80aa741 + b0f2594 commit a155dec
Show file tree
Hide file tree
Showing 22 changed files with 168 additions and 120 deletions.
12 changes: 6 additions & 6 deletions build/asset-manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.47274da5.css",
"main.js": "/static/js/main.4c809867.js",
"main.css": "/static/css/main.5c770090.css",
"main.js": "/static/js/main.0bc6610a.js",
"static/js/1927.8bd9ca2b.chunk.js": "/static/js/1927.8bd9ca2b.chunk.js",
"static/js/7590.4eeecba0.chunk.js": "/static/js/7590.4eeecba0.chunk.js",
"static/js/6725.7c418f57.chunk.js": "/static/js/6725.7c418f57.chunk.js",
Expand Down Expand Up @@ -72,8 +72,8 @@
"static/js/4290.d4ff0c15.chunk.js": "/static/js/4290.d4ff0c15.chunk.js",
"static/media/defaultProfileImage.png": "/static/media/defaultProfileImage.6c9586e38b84a1d6a118.png",
"index.html": "/index.html",
"main.47274da5.css.map": "/static/css/main.47274da5.css.map",
"main.4c809867.js.map": "/static/js/main.4c809867.js.map",
"main.5c770090.css.map": "/static/css/main.5c770090.css.map",
"main.0bc6610a.js.map": "/static/js/main.0bc6610a.js.map",
"1927.8bd9ca2b.chunk.js.map": "/static/js/1927.8bd9ca2b.chunk.js.map",
"7590.4eeecba0.chunk.js.map": "/static/js/7590.4eeecba0.chunk.js.map",
"6725.7c418f57.chunk.js.map": "/static/js/6725.7c418f57.chunk.js.map",
Expand Down Expand Up @@ -144,7 +144,7 @@
"4290.d4ff0c15.chunk.js.map": "/static/js/4290.d4ff0c15.chunk.js.map"
},
"entrypoints": [
"static/css/main.47274da5.css",
"static/js/main.4c809867.js"
"static/css/main.5c770090.css",
"static/js/main.0bc6610a.js"
]
}
2 changes: 1 addition & 1 deletion build/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A visualizer for ResilientDb for DDS 265 Distributed Data Systems"/><meta name="author" description="aunshx"/><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/><title>ResView</title><script defer="defer" src="/static/js/main.4c809867.js"></script><link href="/static/css/main.47274da5.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({delay:0,duration:600,offset:10})</script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"><link rel="manifest" href="/site.webmanifest"><meta name="msapplication-TileColor" content="#da532c"><meta name="theme-color" content="#ffffff"><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="A visualizer for ResilientDb for DDS 265 Distributed Data Systems"/><meta name="author" description="aunshx"/><link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css"/><title>ResView</title><script defer="defer" src="/static/js/main.0bc6610a.js"></script><link href="/static/css/main.5c770090.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script src="https://unpkg.com/aos@next/dist/aos.js"></script><script>AOS.init({delay:0,duration:600,offset:10})</script></body></html>
8 changes: 0 additions & 8 deletions build/static/css/main.47274da5.css
View file

This file was deleted.

1 change: 0 additions & 1 deletion build/static/css/main.47274da5.css.map
View file

This file was deleted.

8 changes: 8 additions & 0 deletions build/static/css/main.5c770090.css
View file

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/css/main.5c770090.css.map
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions build/static/js/main.4c809867.js → build/static/js/main.0bc6610a.js
View file

Large diffs are not rendered by default.

0 build/static/js/main.4c809867.js.LICENSE.txt → build/static/js/main.0bc6610a.js.LICENSE.txt
View file
File renamed without changes.
1 change: 1 addition & 0 deletions build/static/js/main.0bc6610a.js.map
View file

Large diffs are not rendered by default.

1 change: 0 additions & 1 deletion build/static/js/main.4c809867.js.map
View file

This file was deleted.

1 change: 0 additions & 1 deletion src/App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,6 @@ const PreSynthApp = () => {
}, []);

const particlesLoaded = (container) => {
console.log(container);
};


Expand Down
2 changes: 1 addition & 1 deletion src/Components/Pages/Home/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const Home = () => {
<div className="w-full mt-20 flex items-center justify-center flex-col" >
<div className="text-gray-900 dark:text-white font-bold text-8xl md:text-6xl xl:text-7xl px-[2em]">Visualizer for New Age Blockchain Fabrics</div>

<div className="mt-10 px-[24em] text-gray-700 dark:text-gray-300 text-20p">A novel graphical visualizer for the ResDB blockchain fabric, offering new users and learners a clear visualization of a complex technology.
<div className="mt-10 px-16 text-gray-700 dark:text-gray-300 text-20p">A novel graphical visualizer for the ResDB blockchain fabric, offering new users and learners a clear visualization of a complex technology.
</div>
</div>
<div className="mt-14 flex items-center justify-center gap-y-4 gap-x-[4em]">
Expand Down
33 changes: 33 additions & 0 deletions src/Components/Pages/Visualizer/Ancilliary/Data/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1005,4 +1005,37 @@ export const tableDataDummy = {
}
}
}
}

export const truncatedDummyData = {
"17": {
"transactionNumber": "17",
"primary": "Replica 2",
"faultReplicas": "1"
},
"18": {
"transactionNumber": "18",
"primary": "Replica 1",
"faultReplicas": "0"
},
"19": {
"transactionNumber": "19",
"primary": "Replica 4",
"faultReplicas": "0"
},
"20": {
"transactionNumber": "20",
"primary": "Replica 2",
"faultReplicas": "1"
},
"21": {
"transactionNumber": "21",
"primary": "No Primary Selected",
"faultReplicas": "1"
},
"22": {
"transactionNumber": "22",
"primary": "Replica 1",
"faultReplicas": "1"
}
}
1 change: 0 additions & 1 deletion src/Components/Pages/Visualizer/Graphs/MVT/Components/Manipulator.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ const Manipulator = ({
<div className='flex gap-x-7 justify-center'>
{MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
<>
{console.log('HELLO', title, labelToggle)}
<ReplicaButton
title={title}
onClick={() => toggleLine(title)}
Expand Down
86 changes: 63 additions & 23 deletions src/Components/Pages/Visualizer/Table/Components/SmallTable.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import classNames from 'classnames';
import React, { useContext } from 'react';
import { DATA_TABLE_NO_PRIMARY_EXISTS } from '../../../../../Constants';
import { VizDataHistoryContext } from '../../../../../Context/visualizer';
import { truncatedDummyData } from '../../Ancilliary/Data/data';

const TABLE_HEADERS = [
'Sr #',
Expand All @@ -26,33 +27,46 @@ const CellValues = ({ value, loading, primaryDoesNotExist }) => {

const TableValues = ({ srNo, transaction, loading }) => {

const { transactionNumber } = transaction;

const { changeCurrentTransaction, currentTransaction } = useContext(VizDataHistoryContext)

const changeTransaction = (value) => {
changeCurrentTransaction(value)
}

return (
<tr className={classNames('dark:hover:bg-gray-700 hover:bg-gray-400 cursor-pointer', { 'dark:bg-gray-700 bg-gray-400': transaction.transactionNumber == currentTransaction })} onClick={() => !loading && changeTransaction(transaction.transactionNumber)}>
<CellValues
value={srNo}
loading={loading}
transaction={transaction}
primaryDoesNotExist={transaction.primary}
/>
{Object.keys(transaction).length > 0 && (
Object.keys(transaction).map((value, idx) => {
if (value !== 'replicaDetails') return (
<tr
className={classNames({
'dark:bg-gray-700 bg-gray-400': transactionNumber == currentTransaction && !loading,
'cursor-pointer dark:hover:bg-gray-700 hover:bg-gray-400': !loading,
'cursor-not-allowed': loading
})}
onClick={() => !loading && changeTransaction(transactionNumber ?? 17)}
>
<CellValues
value={srNo}
loading={loading}
transaction={transaction}
primaryDoesNotExist={transaction.primary}
/>
{Object.keys(transaction).length > 0 &&
Object.keys(transaction).map((value, idx) => {
if (value !== 'replicaDetails') {
return (
<CellValues
value={transaction[value]}
loading={loading}
primaryDoesNotExist={transaction.primary}
key={idx}
/>
)
})
)}
</tr>
);
}
return null;
})
}
</tr>

);
}

Expand All @@ -65,19 +79,45 @@ const SmallTable = () => {
<table className="text-sm text-center rtl:text-right dark:text-gray-300 text-gray-700 h-full">
<thead className="text-xs uppercase dark:text-gray-300 text-gray-700 border-b-1p border-solid border-gray-700 dark:border-gray-50">
<tr className='h-50p min-w-full'>
{TABLE_HEADERS.map((value, index) => {
let isReplicaDetailCol = value === 'Replica Details';
return (
<th scope="col" className={classNames("px-1 py-2 border-r-1p border-gray-700 dark:border-gray-50 text-8p w-full", { 'border-r-0': isReplicaDetailCol })} rowSpan={!isReplicaDetailCol && '2'} colSpan={isReplicaDetailCol && '4'} key={index}>
{value}
</th>
)
})}
{TABLE_HEADERS.map((value, index) => {
let isReplicaDetailCol = value === 'Replica Details';
return (
<th
scope="col"
className={classNames(
"px-1 py-2 border-r-1p border-gray-700 dark:border-gray-50 text-8p",
{
'w-[20%]': index === 0 || index === 3,
'w-[30%]': index === 1 || index === 2,
'border-r-0': isReplicaDetailCol,
}
)}
rowSpan={!isReplicaDetailCol && '2'}
colSpan={isReplicaDetailCol && '4'}
key={index}
>
{value}
</th>
);
})}
</tr>
</thead>
<tbody>
{loading ? (
<></>
<>
{Object.keys(truncatedDummyData).length > 0 && Object.keys(truncatedDummyData).map((transactionKey, index) => {
const transaction = truncatedDummyData[transactionKey];
return (
<TableValues
className='cursor-pointer'
key={transactionKey}
srNo={index + 1}
transaction={transaction}
loading={true}
/>
);
})}
</>
) : (
<>
{Object.keys(truncatedData).length > 0 && Object.keys(truncatedData).map((transactionKey, index) => {
Expand Down
7 changes: 4 additions & 3 deletions src/Components/Pages/Visualizer/TransComps/Components/Overview.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
import classNames from 'classnames'
import React, { useContext } from 'react'
import { FontVarTitle } from '../../../../Shared/Title'
import SmallTable from '../../Table/Components/SmallTable'
import { anglesDownIcon, eyeIcon } from '../../../../../Resources/Icons'
import { ThemeContext } from '../../../../../Context/theme'
import { anglesDownIcon, eyeIcon } from '../../../../../Resources/Icons'
import { Icon } from '../../../../Shared/Icon'
import { FontVarTitle } from '../../../../Shared/Title'
import SmallTable from '../../Table/Components/SmallTable'

const Overview = ({ goToElement }) => {
const { theme } = useContext(ThemeContext);

return (
<div className={classNames('flex flex-col rounded-md bg-blue-10 border-3p border-solid border-gray-700 dark:border-gray-50 dark:bg-blue-450 relative w-full')}>
<div className="flex items-center justify-center gap-x-2 w-full border-b-2p border-solid border-gray-700 dark:border-gray-50 h-60p">
Expand Down
2 changes: 1 addition & 1 deletion src/Components/Pages/Visualizer/TransComps/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const TransInfo = () => {


return (
<div className="h-full w-220p fixed z-1 top-0 left-0 overflow-x-hidden p-2 py-6 flex flex-col items-center justify-around opacity-1 border-r-3p border-solid border-gray-700 dark:border-gray-50 dark:text-gray-300 gap-y-6">
<div className="h-full w-220p fixed z-1 top-0 left-0 overflow-x-hidden p-2 py-6 flex flex-col items-center justify-around opacity-1 border-r-3p border-solid border-gray-700 dark:border-gray-50 dark:text-gray-300 gap-y-6 scrollbar">
<Link to={URL_HOME_PAGE} className='flex items-center justify-center gap-x-2 w-full cursor-pointer'>
<img
src={logo}
Expand Down
11 changes: 3 additions & 8 deletions src/Components/Pages/Visualizer/index.js
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,17 @@
import { useWindowSize } from "@react-hook/window-size";
import React, { useContext } from "react";
import React from "react";
import { DATA_TABLE_DELAY } from "../../../Constants";
import Footer from "../../Shared/Footer";
import HRline from '../../Shared/HRline';
import Mvt from "./Graphs/Mvt";
import Pbft from "./Graphs/Pbft";
import DataTable from './Table';
import TransInfo from './TransComps';
import Overview from "./TransComps/Components/Overview";
import Analytics from "./TransComps/Components/AnalyticsItem";
import { VizDataHistoryContext } from "../../../Context/visualizer";
import Overview from "./TransComps/Components/Overview";


const Visualizer = () => {
const { loading } = useContext(VizDataHistoryContext)
const [_, height] = useWindowSize()

let concurrentHeight = Math.floor(height / 2) + 200
Expand All @@ -30,11 +28,8 @@ const Visualizer = () => {
};

return (
<div className="h-full">
<div className="h-full w-screen">
<TransInfo />
<div className="ml-[220px] w-full h-1 bg-gray-700 overflow-hidden relative">
{loading && <div className="h-full bg-green-600 animate-grow-line origin-left"></div>}
</div>
<div className="ml-[220px] px-8 pt-12 h-full">
<div className="grid grid-cols-3.5f-1f gap-x-6 w-full h-full" id="pbft-graph" >
<Pbft />
Expand Down
27 changes: 21 additions & 6 deletions src/Context/visualizer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -115,26 +115,39 @@ export const VizDataHistoryProvider = ({ children }) => {
useEffect(() => {
const fetchData = async (replicaPort) => {
try {
let port = parseInt(18501) + replicaPort
let port = parseInt(18501) + replicaPort;
const response = await fetch("http://localhost:" + String(port) + "/consensus_data");
const newData = await response.json();
Object.keys(newData).map(key => {
Object.keys(newData).map((key) => {
if (!keyList.current[replicaPort].includes(key)) {
keyList.current[replicaPort].push(key);
addMessage(newData[key]);
onMessage(allMessages.current, key);
}
})
});
} catch (error) {
console.error('Error fetching data:', error);
console.error("Error fetching data:", error);
}
};

const updateStatus = async () => {
setLoading(true);
setLoading(true);
const fetchStartTime = Date.now();

try {
const fetchPromises = [];
for (let i = 0; i < 4; i++) {
await fetchData(i);
fetchPromises.push(fetchData(i));
}

await Promise.all(fetchPromises);

const elapsedTime = Date.now() - fetchStartTime;

const remainingTime = 1000 - elapsedTime;

if (remainingTime > 0) {
await new Promise((resolve) => setTimeout(resolve, remainingTime));
}
} finally {
setLoading(false);
Expand All @@ -143,9 +156,11 @@ export const VizDataHistoryProvider = ({ children }) => {

updateStatus();
const interval = setInterval(updateStatus, 20000);

return () => clearInterval(interval);
}, []);


return (
<Provider value={
{ messageHistory,
Expand Down
Loading

0 comments on commit a155dec

Please sign in to comment.