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

View File

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

View File

@ -1,25 +1,36 @@
export const truncateValueForDisplay = (value) => { let topOutAt100AndValidate = (x) => {
if (value > 10) { // return 10;
return Number(Math.round(value).toPrecision(2)); if (x == x) {
} else if (value > 1) { return x > 99 ? 99 : x < 0 ? 2 : x;
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));
} else { } 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 }) { function MyApp({ Component, pageProps }) {
return ( 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 */} {/* Webpage name & favicon */}
<div className="mt-10"> <div className="mt-10">
<Head> <Head>
@ -15,7 +15,7 @@ function MyApp({ Component, pageProps }) {
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
{/* Content */} {/* 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 /> <Title />
<Component {...pageProps} /> <Component {...pageProps} />
</main> </main>

View File

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