Skip to content

Commit

Permalink
Merge pull request #57 from ResilientApp/SCM-22
Browse files Browse the repository at this point in the history
Send Trans Func
  • Loading branch information
aunshx authored Sep 17, 2024
2 parents fcac804 + 5a0b361 commit f1eac51
Show file tree
Hide file tree
Showing 20 changed files with 184 additions and 42 deletions.
12 changes: 6 additions & 6 deletions build/asset-manifest.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"files": {
"main.css": "/static/css/main.ca6147c6.css",
"main.js": "/static/js/main.769ac484.js",
"main.css": "/static/css/main.19935419.css",
"main.js": "/static/js/main.ebbcce2f.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.ca6147c6.css.map": "/static/css/main.ca6147c6.css.map",
"main.769ac484.js.map": "/static/js/main.769ac484.js.map",
"main.19935419.css.map": "/static/css/main.19935419.css.map",
"main.ebbcce2f.js.map": "/static/js/main.ebbcce2f.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.ca6147c6.css",
"static/js/main.769ac484.js"
"static/css/main.19935419.css",
"static/js/main.ebbcce2f.js"
]
}
2 changes: 1 addition & 1 deletion build/index.html
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="Visualizer for the ResilientDB Blockchain fabric"/><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.769ac484.js"></script><link href="/static/css/main.ca6147c6.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="Visualizer for the ResilientDB Blockchain fabric"/><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.ebbcce2f.js"></script><link href="/static/css/main.19935419.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: 8 additions & 0 deletions build/static/css/main.19935419.css

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/css/main.19935419.css.map

Large diffs are not rendered by default.

8 changes: 0 additions & 8 deletions build/static/css/main.ca6147c6.css

This file was deleted.

1 change: 0 additions & 1 deletion build/static/css/main.ca6147c6.css.map

This file was deleted.

1 change: 0 additions & 1 deletion build/static/js/main.769ac484.js.map

This file was deleted.

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions build/static/js/main.ebbcce2f.js.map

Large diffs are not rendered by default.

94 changes: 94 additions & 0 deletions src/Components/Pages/Visualizer/Graphs/MVT/Components/Form.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
import React, { useContext, useState } from 'react';
import { FontVarTitle } from '../../../../../Shared/Title';
import { Icon } from '../../../../../Shared/Icon';
import { transactionsIcon } from '../../../../../../Resources/Icons';
import { ThemeContext } from '../../../../../../Context/theme';
import { ReplicaButton } from '../../../../../Shared/Buttons';

const Form = () => {
const { theme } = useContext(ThemeContext);

const [formData, setFormData] = useState({
formKey: '',
value: ''
});

const handleChange = (e) => {
setFormData({
...formData,
[e.target.name]: e.target.value
});
};

const submitGet = () => {
// ! CALL GET API HERE
console.log('GET', formData.formKey);
setFormData({
formKey: '',
value: ''
});
};

const submitCommit = () => {
// ! CALL COMMIT API HERE
console.log('COMMIT', formData);
setFormData({
formKey: '',
value: ''
});
};

return (
<div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col items-center justify-center gap-y-6 bg-blue-10 dark:bg-blue-450 h-320p'>
<div className="flex items-center justify-center gap-x-2 w-full">
<Icon
fill={theme ? "rgb(209,213,219)" : "black"}
height={'1em'}
path={transactionsIcon}
viewBox={'0 0 448 512'}
/>
<FontVarTitle title={'Send Transaction'} />
</div>
<div className="flex flex-col gap-y-2 w-full">
<FontVarTitle title={'Key'} fontClass={'text-15p'} />
<div className='px-8'>
<input
type="text"
id="formKey-input"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
value={formData.formKey}
name='formKey'
onChange={handleChange}
/>
</div>
</div>
<div className="flex flex-col gap-y-2 w-full">
<FontVarTitle title={'Value'} fontClass={'text-15p'} />
<div className='px-8'>
<input
type="text"
id="value-input"
className="block w-full p-2 text-gray-900 border border-gray-300 rounded-lg bg-gray-50 text-xs focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
value={formData.value}
name='value'
onChange={handleChange}
/>
</div>
</div>
<div className="flex items-center justify-center gap-x-8 my-1 w-full">
<ReplicaButton
title={'Get'}
onClick={submitGet}
faulty={false}
/>
<ReplicaButton
title={'Commit'}
onClick={submitCommit}
faulty={false}
/>
</div>
</div>
);
};

export default Form;
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,10 @@ const Manipulator = ({
toggleLine,
}) => {
return (
<div className='mt-2 rounded-md w-550p py-6 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col gap-y-6 bg-blue-10 dark:bg-blue-450'>
<div className='mt-2 rounded-md w-550p py-4 px-2 border-3p border-solid border-gray-700 dark:border-gray-50 flex flex-col items-center justify-center gap-y-16 bg-blue-10 dark:bg-blue-450 h-320p'>
<div className="flex flex-col gap-y-6">
<FontVarTitle title={'Select Replica To be Faulty:'} fontClass={'text-15p'} />
<div className='flex gap-x-7 justify-center'>
<div className='flex gap-x-7 items-center justify-around'>
{MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
<ReplicaButton
title={title}
Expand All @@ -25,7 +25,7 @@ const Manipulator = ({
</div>
<div className="flex flex-col gap-y-6">
<FontVarTitle title={'Toggle Line Graph:'} fontClass={'text-15p'} />
<div className='flex gap-x-7 justify-center'>
<div className='flex gap-x-7 items-center justify-around'>
{MVT_GRAPH_LABELS.length > 0 && MVT_GRAPH_LABELS.map((title, index) => (
<>
<ReplicaButton
Expand Down
20 changes: 13 additions & 7 deletions src/Components/Pages/Visualizer/Graphs/MVT/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { mvtGraphComputation } from "../../Ancilliary/Computation/MVT";
import ResizableContainer from "../Components/GraphContainer";
import MvtGraph from "./Components/Graph";
import Manipulator from "./Components/Manipulator";
import Form from "./Components/Form";

const LABEL_TOGGLES = { "Replica 1": true, "Replica 2": true, "Replica 3": true, "Replica 4": true };
const FAULT_TOGGLES = { "Replica 1": false, "Replica 2": false, "Replica 3": false, "Replica 4": false };
Expand Down Expand Up @@ -123,13 +124,18 @@ const Mvt = () => {
</div>
</ResizableContainer>
</div>
<div className='mt-12 mb-4 flex items-center justify-center'>
<Manipulator
toggleFaulty={toggleFaulty}
toggleLine={toggleLine}
labelToggleFaulty={labelToggleFaulty}
labelToggle={labelToggle}
/>
<div className='mt-12 mb-4 flex items-center justify-center gap-x-16'>
<div className="">
<Form />
</div>
<div className="">
<Manipulator
toggleFaulty={toggleFaulty}
toggleLine={toggleLine}
labelToggleFaulty={labelToggleFaulty}
labelToggle={labelToggle}
/>
</div>
</div>
</div>
);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@ const SmallTable = () => {
const { loading, truncatedData } = useContext(VizDataHistoryContext)

return (
<table className="text-sm text-center rtl:text-right dark:text-gray-300 text-gray-700 h-full">
<table className="text-sm text-center rtl:text-right dark:text-gray-300 text-gray-700 h-full w-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'>
<tr className='h-50p'>
{TABLE_HEADERS.map((value, index) => {
let isReplicaDetailCol = value === 'Replica Details';
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import classNames from 'classnames';
import React, { useContext } from 'react'
import { transactionsIcon } from '../../../../../Resources/Icons';
import { linearGraphIcon, transactionsIcon } from '../../../../../Resources/Icons';
import { FontVarTitle } from '../../../../Shared/Title';
import { ThemeContext } from '../../../../../Context/theme';
import { VizDataHistoryContext } from '../../../../../Context/visualizer';
Expand Down Expand Up @@ -30,11 +30,11 @@ const Analytics = () => {
<Icon
fill={theme ? "rgb(209,213,219)" : "black"}
height={'1em'}
path={transactionsIcon}
path={linearGraphIcon}
viewBox={'0 0 448 512'}
/>
</div>
<FontVarTitle title={' Analytics'} />
<FontVarTitle title={'Analytics'} />
</div>
<div className="grid grid-rows-2 h-full w-full">
<div className="flex items-center justify-center w-full border-b-2p border-solid border-gray-700 dark:border-gray-50">
Expand Down
3 changes: 0 additions & 3 deletions src/Components/Shared/Navbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -59,9 +59,6 @@ const LightOrDark = memo(() => {
const NavComp = ({
title,
page,
icon,
iconHeight,
iconViewBox,
}) => {
return (
<NavLink
Expand Down
1 change: 1 addition & 0 deletions src/Context/visualizer.js
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ export const VizDataHistoryProvider = ({ children }) => {
let port = parseInt(18501) + replicaPort;
const response = await fetch("http://localhost:" + String(port) + "/consensus_data");
const newData = await response.json();
if(newData) setMessageHistory({});
Object.keys(newData).map((key) => {
if (!keyList.current[replicaPort].includes(key)) {
keyList.current[replicaPort].push(key);
Expand Down
5 changes: 4 additions & 1 deletion src/Resources/Icons/index.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

46 changes: 43 additions & 3 deletions src/Styles/App.css
Original file line number Diff line number Diff line change
Expand Up @@ -575,6 +575,10 @@ video {
margin-left: auto;
margin-right: auto;
}
.my-1 {
margin-top: 0.25rem;
margin-bottom: 0.25rem;
}
.my-10 {
margin-top: 2.5rem;
margin-bottom: 2.5rem;
Expand Down Expand Up @@ -718,6 +722,9 @@ video {
.h-32 {
height: 8rem;
}
.h-320p {
height: 320px;
}
.h-35p {
height: 35px;
}
Expand Down Expand Up @@ -841,9 +848,6 @@ video {
.w-screen {
width: 100vw;
}
.min-w-full {
min-width: 100%;
}
.max-w-200p {
max-width: 200px;
}
Expand Down Expand Up @@ -991,6 +995,9 @@ video {
.gap-y-10 {
row-gap: 2.5rem;
}
.gap-y-16 {
row-gap: 4rem;
}
.gap-y-2 {
row-gap: 0.5rem;
}
Expand Down Expand Up @@ -1126,6 +1133,10 @@ video {
--tw-border-opacity: 1;
border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-400 {
--tw-border-opacity: 1;
border-color: rgb(156 163 175 / var(--tw-border-opacity));
Expand Down Expand Up @@ -1162,6 +1173,10 @@ video {
--tw-bg-opacity: 1;
background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}
.bg-gray-50 {
--tw-bg-opacity: 1;
background-color: rgb(249 250 251 / var(--tw-bg-opacity));
}
.bg-gray-900 {
--tw-bg-opacity: 1;
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
Expand Down Expand Up @@ -1839,6 +1854,11 @@ code {
z-index: 10;
}

.focus\:border-blue-500:focus {
--tw-border-opacity: 1;
border-color: rgb(15 23 42 / var(--tw-border-opacity));
}

.focus\:text-blue-700:focus {
--tw-text-opacity: 1;
color: rgb(10 15 28 / var(--tw-text-opacity));
Expand All @@ -1855,6 +1875,11 @@ code {
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}

.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
}

.focus\:ring-blue-700:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(10 15 28 / var(--tw-ring-opacity));
Expand Down Expand Up @@ -2020,6 +2045,11 @@ code {
color: rgb(255 255 255 / var(--tw-text-opacity));
}

:is([data-theme="dark"] .dark\:placeholder-gray-400)::placeholder {
--tw-placeholder-opacity: 1;
color: rgb(156 163 175 / var(--tw-placeholder-opacity));
}

:is([data-theme="dark"] .dark\:opacity-20) {
opacity: 0.2;
}
Expand Down Expand Up @@ -2103,6 +2133,16 @@ code {
border-color: rgb(185 28 28 / var(--tw-border-opacity));
}

:is([data-theme="dark"] .dark\:focus\:border-blue-500:focus) {
--tw-border-opacity: 1;
border-color: rgb(15 23 42 / var(--tw-border-opacity));
}

:is([data-theme="dark"] .dark\:focus\:ring-blue-500:focus) {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(15 23 42 / var(--tw-ring-opacity));
}

@media (max-width: 640px) {

.sm\:mb-0 {
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -478,6 +478,7 @@ module.exports = {
"100p": "100px",
"150p": "150px",
"200p": "200px",
"320p":"320px",
"360p": "360px",
"450p": "450px",
"550p": "550px",
Expand Down

0 comments on commit f1eac51

Please sign in to comment.