Skip to content

Commit

Permalink
Fix bugs in overflow and animation
Browse files Browse the repository at this point in the history 
Improve loading animation: This adds a new propery to a node, `loading`,
which is set to `true` when the node is a stand-in while loading data
from the backend. This is used to show a loading animation in the node.
The uuid of the node is not used to identify this anymore.

Minor fixes for the overflow of the nodes and asthetic changes are
included.

Contributes: #71
  • Loading branch information
@stephanzwicknagl
stephanzwicknagl committed Mar 13, 2024
1 parent 99a9545 commit 306a583
Show file tree
Hide file tree
Showing 11 changed files with 90 additions and 88 deletions.
1 change: 0 additions & 1 deletion backend/src/viasp/api.py
View file
Expand Up @@ -126,7 +126,6 @@ def viasp(**kwargs) -> None:
head_name = kwargs.get("head_name", "unsat")
no_collect_variables = kwargs.get("no_collect_variables", False)
opt_mode, bounds = kwargs.get("opt_mode") or ('opt', [])
print(f"opt_mode_str: {opt_mode}, {bounds}")
opt_mode_str = f"--opt-mode={opt_mode}" + (f",{','.join(bounds)}"
if len(bounds) > 0 else "")

Expand Down
2 changes: 1 addition & 1 deletion backend/src/viasp/server/blueprints/dag_api.py
View file
Expand Up @@ -218,7 +218,7 @@ def get_node(uuid):
@bp.route("/graph/facts", methods=["GET"])
def get_facts():
graph = _get_graph()
facts = get_start_node_from_graph(graph)
facts = [get_start_node_from_graph(graph)]
r = jsonify(facts)
return r

Expand Down
2 changes: 1 addition & 1 deletion frontend/src/lib/components/Facts.react.js
View file
Expand Up @@ -15,7 +15,7 @@ export function Facts() {
transformationNodesMap &&
transformationNodesMap["-1"]
) {
setFact(transformationNodesMap["-1"]);
setFact(transformationNodesMap["-1"][0]);
}
}, [transformationNodesMap]);

Expand Down
104 changes: 53 additions & 51 deletions frontend/src/lib/components/Node.react.js
View file
Expand Up @@ -19,9 +19,9 @@ import {IconWrapper} from '../LazyLoader';
import useResizeObserver from '@react-hook/resize-observer';
import {findChildByClass, emToPixel} from '../utils';

const minimumNodeHeight = 34;
const standardNodeHeight = 80;
const overflowThresholdInEm = 1.5;
const minimumNodeHeight = 2.5;
const standardNodeHeight = 5.7;
const overflowThreshold = 0.1;

function any(iterable) {
for (let index = 0; index < iterable.length; index++) {
Expand Down Expand Up @@ -82,34 +82,34 @@ function NodeContent(props) {
}
}

const visibilityManager = React.useCallback(() => {
function symbolVisibilityManager(
compareHighlightedSymbol,
symbol,
print
) {
const i = compareHighlightedSymbol
.map((item) => item.tgt)
.indexOf(symbol.uuid);
const j = compareHighlightedSymbol
.map((item) => item.src)
.indexOf(symbol.uuid);
const childElement = document.getElementById(
symbol.uuid + `_${isSubnode ? 'sub' : 'main'}`
);
const parentElement = document.getElementById(parentID);
const symbolVisibilityManager = React.useCallback((
compareHighlightedSymbol,
symbol,
) => {
const i = compareHighlightedSymbol
.map((item) => item.tgt)
.indexOf(symbol.uuid);
const j = compareHighlightedSymbol
.map((item) => item.src)
.indexOf(symbol.uuid);
const childElement = document.getElementById(
symbol.uuid + `_${isSubnode ? 'sub' : 'main'}`
);
const parentElement = document.getElementById(parentID);

if (!childElement || !parentElement) {
return {fittingHeight: 0, isMarked: i !== -1 || j !== -1};
}
const childRect = childElement.getBoundingClientRect();
const parentRect = parentElement.getBoundingClientRect();
return {
fittingHeight:
childRect.bottom - parentRect.top + belowLineMargin,
isMarked: i !== -1 || j !== -1,
};
if (!childElement || !parentElement) {
return {fittingHeight: 0, isMarked: i !== -1 || j !== -1};
}
const childRect = childElement.getBoundingClientRect();
const parentRect = parentElement.getBoundingClientRect();
return {
fittingHeight:
childRect.bottom - parentRect.top + belowLineMargin,
isMarked: i !== -1 || j !== -1,
};
}, [isSubnode, parentID]);

const visibilityManager = React.useCallback(() => {

var allHeights = contentToShow
.filter((symbol) => symbolShouldBeShown(symbol))
Expand All @@ -122,12 +122,12 @@ function NodeContent(props) {
);
var markedItems = allHeights.filter((item) => item.isMarked);
var maxSymbolHeight = Math.max(
minimumNodeHeight,
emToPixel(minimumNodeHeight),
...allHeights.map((item) => item.fittingHeight)
);

if (node.uuid.includes('loading')) {
setHeight(Math.min(standardNodeHeight, maxSymbolHeight));
if (node.loading === true) {
setHeight(Math.min(emToPixel(standardNodeHeight), maxSymbolHeight));
setIsOverflowV(false);
return;
}
Expand All @@ -140,7 +140,7 @@ function NodeContent(props) {
markedItems.length &&
any(
markedItems.map(
(item) => item.fittingHeight > standardNodeHeight
(item) => item.fittingHeight > emToPixel(standardNodeHeight)
)
)
) {
Expand All @@ -155,8 +155,8 @@ function NodeContent(props) {
});
} else {
// marked node is not under the fold
setHeight(Math.min(standardNodeHeight, maxSymbolHeight));
setIsOverflowV(maxSymbolHeight > standardNodeHeight);
setHeight(Math.min(emToPixel(standardNodeHeight), maxSymbolHeight));
setIsOverflowV(maxSymbolHeight > emToPixel(standardNodeHeight));
}
}
}, [
Expand All @@ -166,9 +166,8 @@ function NodeContent(props) {
setIsOverflowV,
expandNode,
symbolShouldBeShown,
isSubnode,
parentID,
node.uuid,
symbolVisibilityManager,
node.loading,
]);

React.useEffect(() => {
Expand Down Expand Up @@ -210,7 +209,7 @@ function NodeContent(props) {
return (
<div
className={`set_container ${
node.uuid.includes('loading') ? 'hidden' : ''
node.loading === true ? 'hidden' : ''
}`}
style={{color: colorPalette.dark}}
ref={setContainerRef}
Expand Down Expand Up @@ -359,14 +358,15 @@ function checkForOverflowE(
branchSpace.current
) {
const e = branchSpace.current;
const setContainer = findChildByClass(e, 'set_container');
const setContainer = findChildByClass(e, 'node_border');
const wouldOverflowNow = setContainer
? setContainer.offsetWidth > e.offsetWidth
? setContainer.offsetWidth >
e.offsetWidth - emToPixel(overflowThreshold)
: false;
// We overflowed previously but not anymore
if (
overflowBreakingPoint <=
e.offsetWidth - emToPixel(overflowThresholdInEm)
e.offsetWidth - emToPixel(overflowThreshold)
) {
setShowMini(false);
}
Expand All @@ -392,7 +392,7 @@ export function Node(props) {
const colorPalette = useColorPalette();
const {dispatch: dispatchShownNodes} = useShownNodes();
const classNames = useHighlightedNodeToCreateClassName(node);
const [height, setHeight] = React.useState(minimumNodeHeight);
const [height, setHeight] = React.useState(emToPixel(minimumNodeHeight));
const [expandNode, setExpandNode] = React.useState(false);
const {setValue, animationUpdater} = useAnimationUpdater();
const setValueRef = React.useRef(setValue);
Expand Down Expand Up @@ -476,16 +476,19 @@ export function Node(props) {
className={'mini'}
/>
) : (
<div
className={`set_too_high ${
node.uuid.includes('loading') ? 'loading' : null
}`}
>
<AnimateHeight
id={divID}
duration={500}
height={height}
contentRef={contentDiv}
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
contentClassName={`set_too_high ${
node.loading === true ? 'loading' : null
}`}
>
<NodeContent
node={node}
Expand All @@ -497,7 +500,6 @@ export function Node(props) {
/>
<RecursionButton node={node} />
</AnimateHeight>
</div>
)}
{!showMini && isOverflowV ? (
<OverflowButton setExpandNode={setExpandNode} />
Expand Down Expand Up @@ -583,7 +585,7 @@ export function RecursiveSuperNode(props) {
className={'mini'}
/>
) : (
<div>
<>
<RecursionButton node={node} />
{node.recursive._graph.nodes
.map((e) => e.id)
Expand All @@ -597,7 +599,7 @@ export function RecursiveSuperNode(props) {
/>
);
})}
</div>
</>
)}
</div>
);
Expand Down
46 changes: 22 additions & 24 deletions frontend/src/lib/components/node.css
View file
@@ -1,40 +1,39 @@
.set_container {
width: -moz-fit-content;
width: fit-content;
position: relative;
line-height: 1.5em;
min-height: 1.5em;
cursor: pointer;
}

.node_border {
border-radius: 10px 10px 10px 10px;
border: 2px solid;
margin: 15px 3% 15px 3%;
border-radius: 0.7em;
border: .14em solid;
margin: 1em 3% 1em 3%;
position: relative;
height: max-content;
overflow: auto;
}

.mouse_over_shadow:hover {
transition: drop-shadow .1s;
filter: drop-shadow(0 0 2px #333);
filter: drop-shadow(0 0 .14em #333);
}

.highlighted_node {
transition: drop-shadow .1s;
filter: drop-shadow(0 0 2px #333);
filter: drop-shadow(0 0 .14em #333);
}

.bauchbinde {
position: absolute;
right: 0;
bottom: 0;
border-radius: 4px 0px 8px 0px;
border-radius: .28em 0em .57em 0em;
}

.bauchbinde:hover {
transition: box-shadow .2s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 .29em .57em 0 rgba(0, 0, 0, 0.2), 0 .43em .71em 0 rgba(0, 0, 0, 0.2);
transition: .2s ease-in-out;
-moz-transition: .2s ease-in-out;
-webkit-transition: .2s ease-in-out;
Expand All @@ -52,15 +51,15 @@
display: flex;
justify-content: center;
align-items: center;
min-width: 2.5em;
min-height: 2.5em;
}

.set_value {
font-family: monospace;
font-size: 14pt;
width: -moz-fit-content;
width: fit-content;
margin: 6px 6px 5px 6px;
min-width: 22px;
margin: .43em .43em .43em .43em;

position: relative;
flex: 0 0 auto;
Expand All @@ -70,30 +69,28 @@
align-items: center;
}

.set_container {
cursor: pointer;
}


.mini {
text-align: center;
vertical-align: middle;
width: fit-content;
height: fit-content;
font-size: 12pt;
min-width: 8px;
/* font-size: 12pt; */
min-width: .57em;
cursor: pointer;
min-height: 8px;
min-height: .57em;
}

.recursion_button{
position: absolute;
right: 0;
top: 0;
border-radius: 0px 8px 0px 4px;
border-radius: 0em .57em 0em .28em;
}

.recursion_button:hover {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: 0 .28em .57em 0 rgba(0, 0, 0, 0.2), 0 .43em .71em 0 rgba(0, 0, 0, 0.2);
transition: .3s ease-in-out;
-moz-transition: .3s ease-in-out;
-webkit-transition: .3s ease-in-out;
Expand All @@ -103,7 +100,7 @@
cursor: pointer;
font-size: 1pt;
font-weight: bold;
border-radius: 0px 8px 0px 4px;
border-radius: 0em .57em 0em .28em;
padding: 1px;
vertical-align: middle;
text-align: center;
Expand All @@ -112,17 +109,18 @@

@keyframes loading {
0% {
background-position: -200px 0;
background-position: -200em 0;
}

100% {
background-position: calc(200px + 100%) 0;
background-position: calc(200em + 100%) 0;
}
}

.loading {
background: linear-gradient(90deg, #f3f3f3 25%, #e0e0e0 50%, #f3f3f3 75%);
background-size: 200px 100%;
background-size: 200em 100%;
border-radius: 0.8em;
animation: loading 1.5s infinite;
}

Expand Down
1 change: 1 addition & 0 deletions frontend/src/lib/components/row.css
View file
Expand Up @@ -44,6 +44,7 @@
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}

.row_container {
Expand Down

0 comments on commit 306a583

Please sign in to comment.