Skip to content

Commit

Permalink
Connection renderers for no primary chosen
Browse files Browse the repository at this point in the history
  • Loading branch information
@aunshx
aunshx committed Apr 27, 2024
1 parent 391f044 commit f916d2a
Show file tree
Hide file tree
Showing 4 changed files with 224 additions and 97 deletions.
133 changes: 97 additions & 36 deletions src/Components/Pages/Visualizer/Graphs/Computation/CompPbft.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,8 +68,7 @@ export const generateConnections = (
points: data[0],
});

console.log('DATA', data)

// CONDITION WHERE PRIMARY EXISTS AND DOES EXIST
if (primaryIndex === -1) {

let reqEndPoints = [];
Expand All @@ -78,12 +77,72 @@ export const generateConnections = (
reqEndPoints.push(data[numberOfSteps + value])
}

console.log('POINTIRENG', primaryIndexToPoint, reqEndPoints)
points.request.end.push({
flag: true,
points: reqEndPoints,
});

// PRE-PREPARE OBJECT
for (let i = 0; i < points.request.end[0].points.length; i++){
points.prePrepare.start.push(points.request.end[0].points[i])
}

for (const element of points.prePrepare.start) points.prePrepare.end.push([]);

for (let i = 0; i < points.prePrepare.start.length; i++) {
for (let j = 1; j < yCoords.length; j++) {
if (points.prePrepare.start[i].y !== yCoords[j]) {
points.prePrepare.end[i].push({
flag: true,
points: {
x: xCoords[2],
y: yCoords[j],
},
});
}
}
}

let yCoordToReplicas = {};

for (let i = 1; i < yCoords.length; i++) {
yCoordToReplicas = {
...yCoordToReplicas,
[yCoords[i]]: i,
};
}

// PREPARE OBJECT
let xVal = points.prePrepare.end[0][0].points.x;
let currentPreparePoints = new Set();

points.prePrepare.end.forEach((element, index) => {
element.length > 0 && element.map((singlePoint, index) => {
let replicaDoesExist = yCoordToReplicas[singlePoint.points.y]
if (transactions.has(replicaDoesExist) && !currentPreparePoints.has(replicaDoesExist)) {
currentPreparePoints.add(replicaDoesExist)
points.prepare.start.push({ x: xVal, y: singlePoint.points.y});
}
})
});

for (const element of points.prepare.start) points.prepare.end.push([]);


for (let i = 0; i < points.prepare.start.length; i++) {
for (let j = 1; j < yCoords.length; j++) {
if (points.prepare.start[i].y !== yCoords[j]) {
points.prepare.end[i].push({
flag: true,
points: {
x: xCoords[3],
y: yCoords[j],
},
});
}
}
}

} else {
let currentPrimaryPointIndex = primaryIndexToPoint[primaryIndex]

Expand Down Expand Up @@ -140,50 +199,52 @@ export const generateConnections = (
}
}
}
// COMMIT OBJECT
for (let i = 1; i < yCoords.length; i++) {
if (transactions.has(i)) {
points.commit.start.push({
x: xCoords[3],
y: yCoords[i],
});
}
}

for (const element of points.commit.start) points.commit.end.push([]);
}

for (let i = 0; i < points.commit.start.length; i++) {
for (let j = 1; j < yCoords.length; j++) {
if (points.commit.start[i].y !== yCoords[j]) {
points.commit.end[i].push({
flag: true,
points: {
x: xCoords[4],
y: yCoords[j],
},
});
}
}
// COMMIT OBJECT
for (let i = 1; i < yCoords.length; i++) {
if (transactions.has(i)) {
points.commit.start.push({
x: xCoords[3],
y: yCoords[i],
});
}
// REPLY OBJECT
points.reply.end.push({
flag: true,
points: data[numberOfSteps],
});
}

for (let i = 1; i < yCoords.length; i++) {
if (transactions.has(i)) {
points.reply.start.push({
for (const element of points.commit.start) points.commit.end.push([]);

for (let i = 0; i < points.commit.start.length; i++) {
for (let j = 1; j < yCoords.length; j++) {
if (points.commit.start[i].y !== yCoords[j]) {
points.commit.end[i].push({
flag: true,
points: {
x: xCoords[4],
y: yCoords[i],
y: yCoords[j],
},
});
}
}
}


// REPLY OBJECT
points.reply.end.push({
flag: true,
points: data[numberOfSteps],
});

for (let i = 1; i < yCoords.length; i++) {
if (transactions.has(i)) {
points.reply.start.push({
flag: true,
points: {
x: xCoords[4],
y: yCoords[i],
},
});
}
}

return { points, primaryIndex };
};

Expand Down
115 changes: 77 additions & 38 deletions src/Components/Pages/Visualizer/Graphs/PBFT/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import * as d3 from "d3";
import { line } from "d3-shape";
import React, { useCallback, useContext, useEffect, useRef, useState } from "react";
import { ACTION_TYPE_PBFT_GRAPH, COLORS_PBFT_GRAPH, NUMBER_OF_STEPS_PBFT_GRAPH, PBFT_ANIMATION_SPEEDS } from "../../../../../Constants";
import { ACTION_TYPE_PBFT_GRAPH, COLORS_PBFT_GRAPH, NUMBER_OF_STEPS_PBFT_GRAPH, PBFT_ANIMATION_SPEEDS, PBFT_ANIMATION_SPEEDS_NO_PRIMARY } from "../../../../../Constants";
import { GraphResizerContext, PbftAnimationSpeedContext, PbftGraphClearContext } from "../../../../../Context/graph";
import { ThemeContext } from "../../../../../Context/theme";
import { cancelIcon, pauseIcon, playIcon } from "../../../../../Resources/Icons";
Expand All @@ -27,6 +27,15 @@ const PBFT = ({
REPLY_BUFFER
} = PBFT_ANIMATION_SPEEDS[speed];

const {
TRANSDURATION_NP,
REQUEST_BUFFER_NP,
PREPREPARE_BUFFER_NP,
PREPARE_BUFFER_NP,
COMMIT_BUFFER_NP,
REPLY_BUFFER_NP
} = PBFT_ANIMATION_SPEEDS_NO_PRIMARY[speed];

const { boxValues, resizing } = useContext(GraphResizerContext);

const { width, height } = boxValues;
Expand All @@ -47,6 +56,7 @@ const PBFT = ({
const lineRef = useRef(null);
const primaryLabelRef = useRef(null);
const faultyReplicasLabelRef = useRef(null);
const doesPrimaryExist = useRef(1);

const debouncedRender = useCallback(() => {
const data = generatePoints(
Expand All @@ -73,6 +83,8 @@ const PBFT = ({
theme
);

doesPrimaryExist.current = primaryIndex;

const { labelsX, labelsY } = generateLabels(xCoords, yCoords);

const svg = d3
Expand Down Expand Up @@ -161,7 +173,7 @@ const PBFT = ({

let primaryLabelSVG;

console.log('POINTSjguir eir', points)
console.log('CURRENT POINTS', points)

const faultyReplicasLabelSVG = d3
.select(faultyReplicasLabelRef.current)
Expand All @@ -175,24 +187,25 @@ const PBFT = ({
.attr("height", height)
}

let yCoordToIndexMap = new Map()
points.prePrepare.start.length > 0 && yCoords.forEach((value, index) => {
if (index > 0 && value !== points.prePrepare.start[0].points.y) {
yCoordToIndexMap.set(value, index);
}
});
// let yCoordToIndexMap = new Map()

points.prepare.start.length > 0 && points.prepare.start.forEach((value, _) => {
if (yCoordToIndexMap.get(value.y)) yCoordToIndexMap.delete(value.y);
});
// points.prePrepare.start.length > 0 && yCoords.forEach((value, index) => {
// if (index > 0 && value !== points.prePrepare.start[0].points.y) {
// yCoordToIndexMap.set(value, index);
// }
// });

// points.prepare.start.length > 0 && points.prepare.start.forEach((value, _) => {
// if (yCoordToIndexMap.get(value.y)) yCoordToIndexMap.delete(value.y);
// });

let faultyReplicaIndices = new Set();
for (let [_, value] of yCoordToIndexMap) faultyReplicaIndices.add(value);
// let faultyReplicaIndices = new Set();
// for (let [_, value] of yCoordToIndexMap) faultyReplicaIndices.add(value);

labelsY.forEach((label, index) => {
if (index === primaryIndex) return labelPrimaryNode(primaryLabelSVG, label);
if (faultyReplicaIndices.has(index)) return labelFaultyNode(faultyReplicasLabelSVG, label);
})
// labelsY.forEach((label, index) => {
// if (index === primaryIndex) return labelPrimaryNode(primaryLabelSVG, label);
// if (faultyReplicaIndices.has(index)) return labelFaultyNode(faultyReplicasLabelSVG, label);
// })

const lineSVG = d3
.select(lineRef.current)
Expand All @@ -203,18 +216,34 @@ const PBFT = ({
.classed("items-center", true);

// REQUEST LINES
points.request.end.length > 0 && points.request.end.forEach((end, i) => {
if (end.flag) {
connectionRender([points.request.start[0].points, end.points], points.request.color, pointColorMode, TRANSDURATION, i * REQUEST_BUFFER, lineGen, lineSVG, 'request');
}
});
if(primaryIndex === -1) {
points.request.end[0].points.length > 0 && points.request.end[0].points.forEach((end, i) => {
connectionRender([points.request.start[0].points, end], points.request.color, pointColorMode, TRANSDURATION_NP, i * REQUEST_BUFFER_NP, lineGen, lineSVG, 'request');
});

// PRE-PREPARE LINES
points.prePrepare.start.length > 0 && points.prePrepare.start.map((start, index) =>
points.prePrepare.end[index].map((end, i) => {
return (
end.flag && connectionRender([start, end.points], points.prePrepare.color, pointColorMode, TRANSDURATION_NP, i * 1 + PREPREPARE_BUFFER_NP, lineGen, lineSVG, 'prepare')
);
})
);

// PRE-PREPARE LINES
points.prePrepare.end.length > 0 && points.prePrepare.end.forEach((end, i) => {
if (end.flag) {
connectionRender([points.prePrepare.start[0].points, end.points], points.prePrepare.color, pointColorMode, TRANSDURATION, i * 1 + PREPREPARE_BUFFER, lineGen, lineSVG, 'prePrepare');
}
});
} else {
points.request.end.length > 0 && points.request.end.forEach((end, i) => {
if (end.flag) {
connectionRender([points.request.start[0].points, end.points], points.request.color, pointColorMode, TRANSDURATION, i * REQUEST_BUFFER, lineGen, lineSVG, 'request');
}
});

// PRE-PREPARE LINES
points.prePrepare.end.length > 0 && points.prePrepare.end.forEach((end, i) => {
if (end.flag) {
connectionRender([points.prePrepare.start[0].points, end.points], points.prePrepare.color, pointColorMode, TRANSDURATION, i * 1 + PREPREPARE_BUFFER, lineGen, lineSVG, 'prePrepare');
}
});
}

// PREPARE LINES
points.prepare.start.length > 0 && points.prepare.start.map((start, index) =>
Expand Down Expand Up @@ -271,16 +300,26 @@ const PBFT = ({

return (
<>
<div className="flex items-center justify-between gap-x-16 mb-[-1em] mt-2">
<IconButtons title={!clear ? 'Playing' : 'Play'} onClick={() => onPlay()} disabled={!clear}>
<Icon path={!clear ? pauseIcon : playIcon} viewBox={'0 0 384 512'} height={'13px'} fill={color} />
</IconButtons>
{playing && (
<DropDownButtons selected={speed} elements={['1x', '0.5x', '2x']} onClick={animationSpeedChange} />
)}
<IconButtons title={'Clear'} onClick={() => onClear()} disabled={clear}>
<Icon path={cancelIcon} viewBox={'0 0 384 512'} height={'14px'} fill={color} />
</IconButtons>
<div className="flex items-center justify-around w-full flex-row mb-[-1em] mt-2">
<div className="basis-1/4">
{doesPrimaryExist.current === -1 && (
<div className="text-red-400 font-18p border-1p rounded-md p-1 border-red-400 w-180p flex items-center justify-center ml-8">
!No Primary Chosen!
</div>
)}
</div>
<div className="flex items-center justify-around gap-x-10 basis-1/2">
<IconButtons title={!clear ? 'Playing' : 'Play'} onClick={() => onPlay()} disabled={!clear}>
<Icon path={!clear ? pauseIcon : playIcon} viewBox={'0 0 384 512'} height={'13px'} fill={color} />
</IconButtons>
{playing && (
<DropDownButtons selected={speed} elements={['1x', '0.5x', '2x']} onClick={animationSpeedChange} />
)}
<IconButtons title={'Clear'} onClick={() => onClear()} disabled={clear}>
<Icon path={cancelIcon} viewBox={'0 0 384 512'} height={'14px'} fill={color} />
</IconButtons>
</div>
<div className="basis-1/4" />
</div>
<div className='relative w-full h-full pl-4 pr-2 pb-6'>
{resizing ? (
Expand Down
46 changes: 23 additions & 23 deletions src/Components/Pages/Visualizer/Graphs/data.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -343,29 +343,29 @@ export const dummyData = {
txn_values: [""],
reply_time: 1702001829629,
},
3: {
commit_message_timestamps: [
1701956096777398000, 1701956096781702400, 1701956096787757600,
1701956096787947500,
],
commit_time: 1701956096787769900,
execution_time: 1701956096788227600,
ip: "127.0.0.1",
port: 10003,
prepare_message_timestamps: [
1701956096772535600, 1701956096777049000, 1701956096777068300,
1701956096777263900,
],
prepare_time: 1701956096777074400,
primary_id: 1,
propose_pre_prepare_time: 1701956096767121700,
replica_id: 3,
txn_commands: ["GET"],
txn_keys: ["test"],
txn_number: 17,
txn_values: [""],
reply_time: 1702001829631,
},
// 3: {
// commit_message_timestamps: [
// 1701956096777398000, 1701956096781702400, 1701956096787757600,
// 1701956096787947500,
// ],
// commit_time: 1701956096787769900,
// execution_time: 1701956096788227600,
// ip: "127.0.0.1",
// port: 10003,
// prepare_message_timestamps: [
// 1701956096772535600, 1701956096777049000, 1701956096777068300,
// 1701956096777263900,
// ],
// prepare_time: 1701956096777074400,
// primary_id: 1,
// propose_pre_prepare_time: 1701956096767121700,
// replica_id: 3,
// txn_commands: ["GET"],
// txn_keys: ["test"],
// txn_number: 17,
// txn_values: [""],
// reply_time: 1702001829631,
// },
4: {
commit_message_timestamps: [
1701956096777512700, 1701956096782015500, 1701956096786524200,
Expand Down
Loading

0 comments on commit f916d2a

Please sign in to comment.