Skip to content

Commit

Permalink
code graph fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
phfaist committed Oct 25, 2023
1 parent b74eace commit 7802afe
Show file tree
Hide file tree
Showing 6 changed files with 98 additions and 39 deletions.
2 changes: 1 addition & 1 deletion _zoodb_citations_cache/cache_compiled_citations.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion _zoodb_citations_cache/cache_downloaded_info.json

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion eczoodb/eczoodb.js
Original file line number Diff line number Diff line change
Expand Up @@ -365,7 +365,7 @@ export class EcZooDb extends ZooDb
Object.entries(all_child_nodes).map( ([c_id, children]) => {
let new_children = (children ?? []).filter( (child) => {
const child_id = child.code_id;
if ( !all_child_nodes.hasOwnProperty(child_id)
if ( !Object.hasOwn(all_child_nodes, child_id)
|| (all_child_nodes[child_id] == null)
|| (all_child_nodes[child_id].length == 0) ) {
return false; // filter this child out
Expand Down
49 changes: 37 additions & 12 deletions jscomponents/codegraph/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -95,6 +95,7 @@ export class EczCodeGraph
this.getNodeIdCode = EczCodeGraph.getNodeIdCode;
this.getNodeIdDomain = EczCodeGraph.getNodeIdDomain;
this.getNodeIdKingdom = EczCodeGraph.getNodeIdKingdom;
this.getMergedDisplayOptions = EczCodeGraph.getMergedDisplayOptions;

// the eczoodb
this.eczoodb = eczoodb;
Expand Down Expand Up @@ -134,11 +135,11 @@ export class EczCodeGraph
range: {
parents: {
primary: 5,
secondary: 1,
secondary: 0,
},
children: {
primary: 2,
secondary: 1,
secondary: 0,
},
},
},
Expand Down Expand Up @@ -179,6 +180,22 @@ export class EczCodeGraph
return `d_${domainId}`;
}

static getMergedDisplayOptions(modeWithOptionsA, modeWithOptionsB)
{
let preventMergeArrays = {};
if (modeWithOptionsB?.modeIsolateNodesOptions?.nodeIds) {
// prevent merging the arrays by setting the nodeIds to null first
preventMergeArrays = { modeIsolateNodesOptions: { nodeIds: null } };
}
return _.merge(
{},
modeWithOptionsA,
preventMergeArrays,
modeWithOptionsB,
);
}


async initGraph()
{
debug("EczCodeGraph: initGraph() ...");
Expand Down Expand Up @@ -517,11 +534,12 @@ export class EczCodeGraph
{
coloringOn = !! coloringOn;
if (coloringOn === this.displayOptions.domainColoring) {
return; // nothing to update
return false; // nothing to update
}
this.displayOptions.domainColoring = coloringOn;

this._applyDomainColoring();
return true;
}
_applyDomainColoring()
{
Expand All @@ -543,11 +561,12 @@ export class EczCodeGraph
show = !!show; // make sure the value is boolean
if (show === this.displayOptions.cousinEdgesShown) {
// no update required
return;
return false;
}
this.displayOptions.cousinEdgesShown = show;

this._applyCousinEdgesShown();
return true;
}
_applyCousinEdgesShown()
{
Expand All @@ -569,10 +588,11 @@ export class EczCodeGraph
show = !!show; // make sure the value is boolean
if (show === this.displayOptions.secondaryParentEdgesShown) {
// no update required
return;
return false;
}
this.displayOptions.secondaryParentEdgesShown = show;
this._applySecondaryParentEdgesShown();
return true;
}
_applySecondaryParentEdgesShown()
{
Expand All @@ -594,10 +614,11 @@ export class EczCodeGraph
{
if (_.isEqual(this.displayOptions.lowDegreeNodesDimmed, options)) {
// no update needed
return;
return false;
}
this.displayOptions.lowDegreeNodesDimmed = options;
this._applyLowDegreeNodesDimmed();
return true;
}
_applyLowDegreeNodesDimmed()
{
Expand Down Expand Up @@ -639,14 +660,14 @@ export class EczCodeGraph

if (displayMode === this.displayOptions.displayMode) {
if (displayMode === 'all') {
return; // no options to compare
return false; // no options to compare
} else if (displayMode === 'isolate-nodes') {
if (_.isEqual(modeIsolateNodesOptions,
this.displayOptions.modeIsolateNodesOptions)) {
this.displayOptions.modeIsolateNodesOptions)) {
// debug('setDisplayMode(): (nothing to update). ',
// { 'this.displayOptions': this.displayOptions,
// modeIsolateNodesOptions });
return;
return false;
}
} else {
throw new Error(`Invalid display mode: ${displayMode}`);
Expand All @@ -656,12 +677,16 @@ export class EczCodeGraph
if (displayMode === 'all') {
// no options to update
} else if (displayMode === 'isolate-nodes') {
_.merge(this.displayOptions.modeIsolateNodesOptions, modeIsolateNodesOptions);
this.displayOptions = this.getMergedDisplayOptions(
this.displayOptions.modeIsolateNodesOptions,
{ displayMode, modeIsolateNodesOptions, }
);
} else {
throw new Error(`Invalid display mode: ${displayMode}`);
}

this._applyDisplayMode();
return true;
}
_applyDisplayMode()
{
Expand Down Expand Up @@ -1424,7 +1449,7 @@ class _PrelayoutRadialTreeBranchSet
//
_computeNodeWeights()
{
for (const [level, orderinginfoList] of this.nodeOrderinginfoByLevel.entries()) {
for (const [/*level*/, orderinginfoList] of this.nodeOrderinginfoByLevel.entries()) {
orderinginfoList.forEach( (info) => {
let w = Math.max(
1,
Expand Down Expand Up @@ -1572,7 +1597,7 @@ class _PrelayoutRadialTreeBranchSet
}

// how to position a non-root node -- in the right direction etc.
_positionNodeChildren({node, nodePosition, nodeInfo, level, angularSpread, direction})
_positionNodeChildren({/*node,*/ nodePosition, nodeInfo, level, angularSpread, direction})
{
const options = this.options;

Expand Down
11 changes: 7 additions & 4 deletions jscomponents/codegraph/setup.js
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { createEcZooDb } from '@errorcorrectionzoo/eczoodb/eczoodb.js';

// ---

import _ from 'lodash';
//import _ from 'lodash';

import React from 'react';
import { createRoot } from 'react-dom/client';
Expand Down Expand Up @@ -63,11 +63,11 @@ function getDisplayOptionsFromUrlFragment(hrefFragment)
range: {
parents: {
primary: 5,
secondary: 1,
secondary: 0,
},
children: {
primary: 2,
secondary: 1,
secondary: 0,
},
},
},
Expand Down Expand Up @@ -166,7 +166,10 @@ export async function load()
const hrefFragment = window.location.hash;
debug({hrefFragment});
if (hrefFragment != null) {
_.merge(displayOptions, getDisplayOptionsFromUrlFragment(hrefFragment));
displayOptions = EczCodeGraph.getMergedDisplayOptions(
displayOptions,
getDisplayOptionsFromUrlFragment(hrefFragment)
);
}

let eczCodeGraph = new EczCodeGraph({
Expand Down
71 changes: 51 additions & 20 deletions jscomponents/codegraph/ui.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -205,6 +205,15 @@ export function EczCodeGraphControlsComponent(props)
},
});
};
const doModeIsolateZoomDomains = () => {
const domainNodeIds = cy.nodes('[_isDomain=1]').map( (n) => n.id() );
onChangeDisplayModeWithOptions({
displayMode: 'isolate-nodes',
modeIsolateNodesOptions: {
nodeIds: domainNodeIds,
},
});
};

const doSearchGraphNodes = (searchText) => {
setSearchGraphNodesText(searchText);
Expand Down Expand Up @@ -305,6 +314,10 @@ export function EczCodeGraphControlsComponent(props)
<button
disabled={displayModeWithOptions.displayMode !== 'isolate-nodes'}
onClick={doModeIsolateExit}>home</button>
<span className="controls-input-sep"></span>
<button
onClick={doModeIsolateZoomDomains}>zoom domains</button>
<span className="controls-input-sep"></span>
<button
disabled={displayModeWithOptions.displayMode !== 'isolate-nodes'}
onClick={doModeIsolateRelayout}>relayout</button>
Expand Down Expand Up @@ -451,14 +464,16 @@ export function EczCodeGraphComponent(props)
}
const runSetDisplayModeAndLayout = async () => {
debug(`Updating graph's displayMode&Options -> `, uiState.displayModeWithOptions);
eczCodeGraph.setDisplayMode(
const displaySettingChanged = eczCodeGraph.setDisplayMode(
uiState.displayModeWithOptions.displayMode,
uiState.displayModeWithOptions,
);
await eczCodeGraph.layout({
animate: true,
});
onLayoutDone?.();
if (displaySettingChanged) {
await eczCodeGraph.layout({
animate: true,
});
onLayoutDone?.();
}
};
runSetDisplayModeAndLayout();
}, [ cyUiInitialized, uiState.displayModeWithOptions ] );
Expand All @@ -470,9 +485,12 @@ export function EczCodeGraphComponent(props)
const doUserSelection = ({ nodeId, codeId, kingdomId, domainId, background }) => {
if (background) {
uiState.setDisplayModeWithOptions(
_.merge({}, uiState.displayModeWithOptions, {
displayMode: 'all',
})
eczCodeGraph.getMergedDisplayOptions(
uiState.displayModeWithOptions,
{
displayMode: 'all',
}
)
);
return;
}
Expand All @@ -487,14 +505,17 @@ export function EczCodeGraphComponent(props)
}

uiState.setDisplayModeWithOptions(
_.merge({}, uiState.displayModeWithOptions, {
displayMode: 'isolate-nodes',
modeIsolateNodesOptions: {
nodeIds: [ nodeId ],
redoLayout: false,
// will merge remaining options with preexisting ones
},
})
eczCodeGraph.getMergedDisplayOptions(
uiState.displayModeWithOptions,
{
displayMode: 'isolate-nodes',
modeIsolateNodesOptions: {
nodeIds: [ nodeId ],
redoLayout: false,
// will merge remaining options with preexisting ones
},
}
)
);

const cy = eczCodeGraph.cy;
Expand All @@ -514,7 +535,7 @@ export function EczCodeGraphComponent(props)

// cytoscape initialization & graph event callbacks (e.g. "tap")

let doInitializeCy = () => {
let doInitializeCy = async () => {
eczCodeGraph.mountInDom(cyDomNodeRef.current, {
styleOptions: { matchWebPageFonts, window, },
});
Expand Down Expand Up @@ -569,6 +590,13 @@ export function EczCodeGraphComponent(props)
}
});

// perform initial layout
await eczCodeGraph.layout({
animate: true,
});

onLayoutDone?.();

setCyUiInitialized(true);
};

Expand Down Expand Up @@ -624,9 +652,12 @@ export function EczCodeGraphComponent(props)
onChangeDisplayModeWithOptions={
(newModeWithOptions) => {
debug(`request to set display options -> `, newModeWithOptions);
uiState.setDisplayModeWithOptions(_.merge(
{}, uiState.displayModeWithOptions, newModeWithOptions,
));
uiState.setDisplayModeWithOptions(
eczCodeGraph.getMergedDisplayOptions(
uiState.displayModeWithOptions,
newModeWithOptions,
)
);
}
}
domainColoring={ uiState.domainColoring }
Expand Down

0 comments on commit 7802afe

Please sign in to comment.