Skip to content

Commit

Permalink
Merge pull request #179 from netcreateorg/dev-bl/export
Browse files Browse the repository at this point in the history 
Export
  • Loading branch information
@benloh
benloh committed Jan 19, 2022
2 parents d340a1b + 6f2a1ed commit 3ed097f
Show file tree
Hide file tree
Showing 20 changed files with 906 additions and 411 deletions.
52 changes: 49 additions & 3 deletions build/app/view/netcreate/NetCreate.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,10 +44,13 @@ const PR = PROMPTS.Pad('ACD');
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
const React = require('react');
const { Route } = require('react-router-dom');
const ReactStrap = require('reactstrap');
const { Button } = ReactStrap;
const NetGraph = require('./components/NetGraph');
const Search = require('./components/Search');
const NodeSelector = require('./components/NodeSelector');
const InfoPanel = require('./components/InfoPanel');
const FiltersPanel = require('./components/filter/FiltersPanel');
const NCLOGIC = require('./nc-logic'); // require to bootstrap data loading
const FILTERLOGIC = require('./filter-logic'); // handles filtering functions

Expand All @@ -62,7 +65,9 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
isConnected: true,
isLoggedIn: false,
requireLogin: this.AppState('TEMPLATE').requireLogin,
disconnectMsg: ''
disconnectMsg: '',
layoutNodesOpen: true,
layoutFiltersOpen: false
};
this.OnDOMReady(()=>{
if (DBG) console.log(PR,'OnDOMReady');
Expand All @@ -85,8 +90,10 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
// so that we can show a message explaining the cause of disconnect.
// this.setState({ isConnected: false });
});

this.onStateChange_SESSION = this.onStateChange_SESSION.bind(this);
this.onDisconnect = this.onDisconnect.bind(this);
this.onFilterBtnClick = this.onFilterBtnClick.bind(this);

this.OnAppStateChange('SESSION', this.onStateChange_SESSION);

Expand Down Expand Up @@ -124,10 +131,18 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
this.AppStateChangeOff('SESSION',this.onStateChange_SESSION);
}

/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
onFilterBtnClick(e) {
this.setState(state => {
return {layoutFiltersOpen: !state.layoutFiltersOpen}
})
}


/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ Define the component structure of the web application
/*/ render() {
const { isLoggedIn, disconnectMsg } = this.state;
const { isLoggedIn, disconnectMsg, layoutNodesOpen, layoutFiltersOpen } = this.state;

// show or hide graph
// Use 'visibiliity' css NOT React's 'hidden' so size is properly
Expand All @@ -137,7 +152,12 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions

return (
<div>
<div hidden={this.state.isConnected} style={{ width:'100%',height:'38px',position:'fixed',backgroundColor:'rgba(256,0,0,0.5',display:'flex',flexDirection:'column',justifyContent:'space-evenly',alignItems:'center',zIndex:'3000'}}>
<div hidden={this.state.isConnected} style={{
width: '100%', height: '38px', position: 'fixed',
backgroundColor: 'rgba(256,0,0,0.5',
display: 'flex', flexDirection: 'column',
justifyContent: 'space-evenly', alignItems: 'center', zIndex: '3000'
}}>
<div style={{color:'#fff',width:'100%',textAlign:'center'}}>
<b>{disconnectMsg}!</b> Your changes will not be saved! Please report "{disconnectMsg}" to your administrator to restart the graph.
</div>
Expand Down Expand Up @@ -165,6 +185,32 @@ const FILTERLOGIC = require('./filter-logic'); // handles filtering functions
request information contained on this website in an accessible
format.</div>
</div>
{layoutFiltersOpen
// OPEN
? <div id="right" style={{
marginTop: '38px', padding: '0 5px', backgroundColor: '#6c757d',
borderTopLeftRadius: '10px', width: 'auto'
}}>
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'end' }}>
<Button onClick={this.onFilterBtnClick}
style={{ width: '90px' }}
>
FILTER &gt;
</Button>
<FiltersPanel />
</div>
</div>
// CLOSED
: <div id="right" style={{
marginTop: '38px', paddingTop: '0px', backgroundColor: '#6c757d',
width: '10px', height: '100%'
}}>
<Button
onClick={this.onFilterBtnClick}
style={{ width: '90px', float: 'right' }}
>&lt; FILTER</Button>
</div>
}
</div>
</div>
); // end return
Expand Down
145 changes: 76 additions & 69 deletions build/app/view/netcreate/components/EdgeTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ const isLocalHost = (SETTINGS.EJSProp('client').ip === '127.0.0.1') || (locatio
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
const React = require('react');
const ReactStrap = require('reactstrap');
const { Button, Table } = ReactStrap;
const { Button } = ReactStrap;
const MarkdownNote = require('./MarkdownNote');

const UNISYS = require('unisys/client');
Expand All @@ -59,6 +59,7 @@ class EdgeTable extends UNISYS.Component {
sortkey: 'Relationship'
};

this.updateEdgeFilterState = this.updateEdgeFilterState.bind(this);
this.handleDataUpdate = this.handleDataUpdate.bind(this);
this.handleFilterDataUpdate = this.handleFilterDataUpdate.bind(this);
this.OnTemplateUpdate = this.OnTemplateUpdate.bind(this);
Expand All @@ -70,7 +71,7 @@ class EdgeTable extends UNISYS.Component {
this.setSortKey = this.setSortKey.bind(this);
this.sortSymbol = this.sortSymbol.bind(this);

this.sortDirection = -1;
this.sortDirection = 1;


/// Initialize UNISYS DATA LINK for REACT
Expand Down Expand Up @@ -113,50 +114,52 @@ class EdgeTable extends UNISYS.Component {
displayUpdated(nodeEdge) {
var d = new Date(nodeEdge.meta.revision > 0 ? nodeEdge.meta.updated : nodeEdge.meta.created);

var year = "" + d.getFullYear();
var year = String(d.getFullYear());
var date = (d.getMonth()+1)+"/"+d.getDate()+"/"+ year.substr(2,4);
var time = d.toTimeString().substr(0,5);
var dateTime = date+' at '+time;
var titleString = "v" + nodeEdge.meta.revision;
if(nodeEdge._nlog)
titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
if (nodeEdge._nlog) titleString += " by " + nodeEdge._nlog[nodeEdge._nlog.length-1];
var tag = <span title={titleString}> {dateTime} </span>;

return tag;
}


/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/// Set edge filtered status based on current filteredNodes
updateEdgeFilterState(edges, filteredEdges) {
// add highlight/filter status
if (filteredEdges.length > 0) {
edges = edges.map(edge => {
const filteredEdge = filteredEdges.find(n => n.id === edge.id);
edge.isFiltered = !filteredEdge;
return edge;
});
}
this.setState({edges});
}

/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ Handle updated SELECTION
/*/
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ Handle updated SELECTION
/*/
handleDataUpdate(data) {
// 2020-09-09 Removing this check and relying on other NodeTable optimizations. BL
// if(data.bMarkedNode)
// {
// data.bMarkedNode = false;
// }
// else
// {

if (data && data.edges) {
let edges = this.sortTable(this.state.sortkey, data.edges);
const edges = this.sortTable(this.state.sortkey, data.edges);
const { filteredEdges } = this.state;
// add highlight/filter status
if (filteredEdges.length > 0) {
edges = edges.map(edge => {
const filteredEdge = filteredEdges.find(n => n.id === edge.id);
if (!filteredEdge) edge.isFiltered = true;
return edge;
});
}
this.setState({edges});
this.updateEdgeFilterState(edges, filteredEdges);
}
}

/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
handleFilterDataUpdate(data) {
if (data.edges) this.setState( { filteredEdges: data.edges } );
if (data.edges) {
const filteredEdges = data.edges;
this.setState({ filteredEdges }, () => {
const edges = this.sortTable(this.state.sortkey, this.state.edges);
this.updateEdgeFilterState(edges, filteredEdges);
});
}
}

/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Expand All @@ -173,8 +176,8 @@ class EdgeTable extends UNISYS.Component {
return edges.sort( (a,b) => {
let akey = a.id,
bkey = b.id;
if (akey<bkey) return -1*this.sortDirection;
if (akey>bkey) return 1*this.sortDirection;
if (akey<bkey) return -1*Number(this.sortDirection);
if (akey>bkey) return 1*Number(this.sortDirection);
return 0;
});
}
Expand Down Expand Up @@ -213,14 +216,14 @@ class EdgeTable extends UNISYS.Component {
return edges.sort( (a,b) => {
let akey = a.attributes[key],
bkey = b.attributes[key];
if (akey<bkey) return -1*this.sortDirection;
if (akey>bkey) return 1*this.sortDirection;
if (akey<bkey) return -1*Number(this.sortDirection);
if (akey>bkey) return 1*Number(this.sortDirection);
if (akey===bkey) {
// Secondary sort on Source label
let source_a = a.source.label;
let source_b = b.source.label;
if (source_a<source_b) return -1*this.sortDirection;
if (source_a>source_b) return 1*this.sortDirection;
if (source_a<source_b) return -1*Number(this.sortDirection);
if (source_a>source_b) return 1*Number(this.sortDirection);
}
return 0;
});
Expand All @@ -229,19 +232,17 @@ class EdgeTable extends UNISYS.Component {
}

/// ---
sortByUpdated(edges)
{
sortByUpdated(edges) {
if (edges) {
return edges.sort( (a,b) => {
let akey = (a.meta.revision > 0 ? a.meta.updated : a.meta.created),
bkey = (b.meta.revision > 0 ? b.meta.updated : b.meta.created);
if (akey<bkey) return -1*this.sortDirection;
if (akey>bkey) return 1*this.sortDirection;
if (akey<bkey) return -1*Number(this.sortDirection);
if (akey>bkey) return 1*Number(this.sortDirection);
return 0;
});
}
return undefined;

}
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/ If no `sortkey` is passed, the sort will use the existing state.sortkey
Expand All @@ -256,9 +257,6 @@ class EdgeTable extends UNISYS.Component {
case 'target':
return this.sortByTargetLabel(edges);
break;
case 'Relationship':
return this.sortByAttribute(edges, 'Relationship');
break;
case 'Info':
return this.sortByAttribute(edges, 'Info');
break;
Expand All @@ -281,12 +279,9 @@ class EdgeTable extends UNISYS.Component {
}
}

sortSymbol(key)
{
if(key != this.state.sortkey) // this is not the current sort, so don't show anything
return "";
else
return this.sortDirection==-1?"▼":"▲"; // default to "decreasing" and flip if clicked again
sortSymbol(key) {
if (key !== this.state.sortkey) return ""; // this is not the current sort, so don't show anything
else return this.sortDirection===1?"▼":"▲"; // default to "decreasing" and flip if clicked again
}

/// UI EVENT HANDLERS /////////////////////////////////////////////////////////
Expand Down Expand Up @@ -317,11 +312,8 @@ class EdgeTable extends UNISYS.Component {
/// - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
/*/
/*/ setSortKey (key) {

if(key == this.state.sortkey)
this.sortDirection = (-1 * this.sortDirection);// if this was already the key, flip the direction
else
this.sortDirection = 1;
if (key === this.state.sortkey) this.sortDirection = (-1 * this.sortDirection);// if this was already the key, flip the direction
else this.sortDirection = 1;

const edges = this.sortTable(key, this.state.edges);
this.setState({
Expand Down Expand Up @@ -386,32 +378,47 @@ class EdgeTable extends UNISYS.Component {
/*/ render () {
let { edgePrompts } = this.state;

if(edgePrompts.category == undefined) // for backwards compatability
{
if (edgePrompts.category === undefined) { // for backwards compatability
edgePrompts.category = {};
edgePrompts.category.label = "";
edgePrompts.category.hidden = true;
}


let { tableHeight } = this.props;
let styles = `thead, tbody { font-size: 0.8em }
thead { position: relative; }
tbody { overflow: auto; }
.btn-sm { font-size: 0.6rem; padding: 0.1rem 0.2rem }
`
const { tableHeight } = this.props;
const styles = `thead, tbody { font-size: 0.8em }
.table {
display: table; /* override bootstrap for fixed header */
border-spacing: 0;
}
.table th {
position: -webkit-sticky;
position: sticky;
top: 0;
background-color: #eafcff;
border-top: none;
}
xtbody { overflow: auto; }
.btn-sm { font-size: 0.6rem; padding: 0.1rem 0.2rem }
`
return (
<div style={{overflow:'auto',
position:'relative',display: 'block', left: '1px', right:'10px',maxHeight: tableHeight, backgroundColor:'#f3f3ff'
}}>
<div style={{
overflow: 'auto',
position: 'relative',
display: 'block',
left: '1px', right: '10px',
height: tableHeight,
backgroundColor: '#eafcff'
}}>
<style>{styles}</style>
<Button size="sm" outline hidden
onClick={this.onToggleExpanded}
>{this.state.isExpanded ? "Hide Edge Table" : "Show Edge Table"}</Button>
<Table hidden={!this.state.isExpanded} hover size="sm"
responsive striped
className="edgetable w-auto"
>
<table hidden={!this.state.isExpanded}
// size="sm" hover responsive striped // ReactStrap properties
// Need to use a standard 'table' not ReactStrap so that we can set
// the container div height and support non-scrolling headers
className="table table-striped table-responsive table-hover table-sm edgetable w-auto"
>
<thead>
<tr>
<th width="4%" hidden={!DBG}><Button size="sm"
Expand Down Expand Up @@ -479,7 +486,7 @@ class EdgeTable extends UNISYS.Component {
</tr>
))}
</tbody>
</Table>
</table>
</div>
);
}
Expand Down
Loading

0 comments on commit 3ed097f

Please sign in to comment.