chore: save progress

This commit is contained in:
NunoSempere 2022-06-17 23:38:06 -04:00
parent 1a64bef3d3
commit 026411072b
5 changed files with 49 additions and 33 deletions

View File

@ -40,8 +40,10 @@ const getEdgeLabel = async (squiggleString) => {
export function Graph({ listOfElements, links }) {
const containerRef = useRef();
const [visibility, setVisibility] = useState("invisible");
const callEffect = async (listOfElements, links) => {
setVisibility("invisible");
cytoscape.use(spread); // spread
let nodeElements = listOfElements.map((element) => {
@ -73,7 +75,7 @@ export function Graph({ listOfElements, links }) {
//"text-valign": "bottom",
"text-justification": "auto",
},
padding: 10,
padding: 2,
},
{
selector: "edge",
@ -108,13 +110,14 @@ export function Graph({ listOfElements, links }) {
name: "spread", // circle, grid, dagre
minDist: 10,
//prelayout: false,
//animate: "end", // whether to transition the node positions
animationDuration: 0, // duration of animation in ms if enabled
// animate: false, // whether to transition the node positions
// animationDuration: 250, // duration of animation in ms if enabled
},
userZoomingEnabled: false,
userPanningEnabled: false,
};
cytoscape(config);
setTimeout(() => setVisibility(""), 700);
};
useEffect(async () => {
await callEffect(listOfElements, links);
@ -123,7 +126,9 @@ export function Graph({ listOfElements, links }) {
return (
<div>
<div className={visibility}>
<div ref={containerRef} style={{ height: "700px", width: "1000px" }} />
</div>
<button
className={effectButtonStyle}
onClick={() => callEffect(listOfElements, links)}

View File

@ -13,7 +13,7 @@ export function Homepage({ listOfElementsInit }) {
// list of elements
const [listOfElements, setListOfElements] = useState(
listOfElementsInit.slice(0, 5)
listOfElementsInit //.slice(0, 5)
);
// number of steps
@ -104,14 +104,14 @@ export function Homepage({ listOfElementsInit }) {
};
return (
<div>
<div className="block w-full items-center sm:w-full mt-10">
<ProgressIndicator
numStepsNow={numStepsNow}
numElements={listOfElements.length}
/>
{/* Comparisons section */}
<div className={"" /*isListOrdered ? "hidden" : ""*/}>
<div className="flex flex-wrap items-center max-w-4xl sm:w-full mt-10">
<div className="flex justify-evenly mt-10">
<DisplayElementForComparison
element={pairCurrentlyBeingCompared[0]}
></DisplayElementForComparison>

View File

@ -1,25 +1,36 @@
export const truncateValueForDisplay = (value) => {
if (value > 10) {
return Number(Math.round(value).toPrecision(2));
} else if (value > 1) {
return Math.round(value * 10) / 10;
} else if (num > 0) {
let candidateNumSignificantDigits =
-Math.floor(Math.log(num) / Math.log(10)) + 1;
let numSignificantDigits = topOutAt100AndValidate(
candidateNumSignificantDigits
);
result = num.toFixed(numSignificantDigits);
} else if (-1 < num) {
let candidateNumSignificantDigits =
-Math.floor(Math.log(Math.abs(num)) / Math.log(10)) + 1;
let numSignificantDigits = topOutAt100AndValidate(
candidateNumSignificantDigits
);
result = num.toFixed(numSignificantDigits);
} else if (num <= -1) {
result = "-" + toLocale(truncateValueForDisplay(-num));
let topOutAt100AndValidate = (x) => {
// return 10;
if (x == x) {
return x > 99 ? 99 : x < 0 ? 2 : x;
} else {
result = toLocale(num); //return "~0"
return 10;
}
};
export const truncateValueForDisplay = (value) => {
let result;
if (value > 10) {
result = Number(Math.round(value).toPrecision(2));
} else if (value > 1) {
result = Math.round(value * 10) / 10;
} else if (value > 0) {
let candidateNumSignificantDigits =
-Math.floor(Math.log(value) / Math.log(10)) + 1;
let numSignificantDigits = topOutAt100AndValidate(
candidateNumSignificantDigits
);
result = value.toFixed(numSignificantDigits);
} else if (-1 < value) {
let candidateNumSignificantDigits =
-Math.floor(Math.log(Math.abs(value)) / Math.log(10)) + 1;
let numSignificantDigits = topOutAt100AndValidate(
candidateNumSignificantDigits
);
result = value.toFixed(numSignificantDigits);
} else if (value <= -1) {
result = "-" + toLocale(truncateValueForDisplay(-value));
} else {
result = toLocale(value); //return "~0"
}
return result;
};

View File

@ -7,7 +7,7 @@ import { Title } from "../components/title.js";
function MyApp({ Component, pageProps }) {
return (
<div className="block flex-col items-center justify-center min-h-screen py-2">
<div className="flex flex-col items-center justify-center min-h-screen py-2">
{/* Webpage name & favicon */}
<div className="mt-10">
<Head>
@ -15,7 +15,7 @@ function MyApp({ Component, pageProps }) {
<link rel="icon" href="/favicon.ico" />
</Head>
{/* Content */}
<main className="flex flex-col items-center w-full flex-1 px-20 text-center">
<main className="inline flex-col items-center w-full flex-1 px-20 text-center">
<Title />
<Component {...pageProps} />
</main>

View File

@ -1,5 +1,5 @@
.simple-react-cytoscape {
width: 600px;
height: 600px;
width: 900px;
height: 900px;
border-style: dashed;
}