How can I save a Cytoscape network as a flat JSON file?
The cytoscape.js examples at cytoscape.org typically store the underlying network data as a flat data.json file (e.g. colas-graph, see also https://js.cytoscape.org/#notation/elements-json).
This is in contrast to the grouped or keyed format obtained when saving a graph as a Cytoscape JSON file (in Cytoscape: file > Export > Network to File > Cytoscape JSON (*.cyjs)).
Note: the documentation indicates that I can use cy.json() to export a JSON representation of the graph, but I am unsure how to call this command (I am relatively new to javascript).
You just have to call the cytoscape object .json() for taking a json object and then download it as you like
here there is an example. I think StackOverflow is blocking downloading file but if you copy and paste this code it should be work
document.addEventListener("DOMContentLoaded", function() {
var cy = (window.cy = cytoscape({
container: document.getElementById("cy"),
style: [{
selector: "node",
style: {
content: "data(id)"
}
},
{
selector: "edge",
style: {
"curve-style": "bezier",
"target-arrow-shape": "triangle"
}
}
],
elements: {
nodes: [{
data: {
id: "a"
}
}, {
data: {
id: "b"
}
}],
edges: [{
data: {
id: "ab",
source: "a",
target: "b"
}
}]
},
layout: {
name: "grid"
}
}));
cy.ready(function() {
const json = cy.json(); // take json from cytoscape
// download json as you want
const data = "text/json;charset=utf-8," + encodeURIComponent(JSON.stringify(json));
const a = document.createElement('a');
a.href = 'data:' + data;
a.download = 'data.json';
a.innerHTML = 'download JSON';
const container = document.getElementById('container');
container.appendChild(a);
});
});
body {
font-family: helvetica neue, helvetica, liberation sans, arial, sans-serif;
font-size: 14px
}
#cy {
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
z-index: 1;
}
h1 {
opacity: 0.5;
font-size: 1em;
font-weight: bold;
}
<head>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="https://unpkg.com/cytoscape/dist/cytoscape.min.js"></script>
</head>
<body>
<div id="cy"></div>
<div id="container" style="position:absolute;top:10;left:10;z-index:1"></div>
</body>
I have created an angular project using a custom multi-select-autocomplete that has
#Output() selectionChange: EventEmitter<any[]> = new EventEmitter<any[]>();
As well as the following method
onSelectionChange(val : any) {
const filteredValues = this.getFilteredOptionsValues();
let count = 0;
if (this.multiple) {
this.selectedValue?.filter(item => {
if (filteredValues.includes(item)) {
count++;
}
});
this.selectAllChecked = count === this.filteredOptions.length;
}
this.selectedValue = val.value;
this.selectionChange.emit(this.selectedValue);
}
I use it in my other components as such
<div style="width: 100%; margin-right: 26px; margin-bottom: 15px;">
<multi-select-autocomplete class="input-medium"
[placeholder]="'Search and Select Brands'"
[options]="companies"
[display]="'name'"
[value]="'id'"
[labelCount]="10"
[label]="'Brands'"
(selectionChange)="selectBrand($event)">
</multi-select-autocomplete>
</div>
</div>
But I come across an issue where the (selectionChange) method is continuously firing even before I make a selection.
Any ideas where I may have gone wrong?
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 3 years ago.
Improve this question
I am porting over a flutter mobile project to flutter web and was wondering how to use the google maps library with Flutter Web.
Please see the other answer. It is easier than this one!
I was able to get a workable solution, but it isn't pretty. Below is the implementation. If I get some time and a legit port doesn't come a long I will post an example repo.
import 'dart:html';
import 'package:flutter_web/material.dart';
import 'package:lift_ai/base/screen_state.dart';
import 'package:lift_ai/feature/property_common/property_contract.dart';
import 'package:lift_ai/feature/property_common/property_presenter_impl.dart';
import 'package:lift_ai/model/car_status.dart';
import 'package:lift_ai/model/property.dart';
import 'package:flutter_web_ui/ui.dart' as ui;
import 'package:lift_ai/util/widget_util.dart';
class PropertyMapPage extends StatefulWidget {
final CarStatus carStatus;
PropertyMapPage(Key key, this.carStatus) : super(key: key);
#override
_PropertyMapPageState createState() => _PropertyMapPageState(carStatus);
}
class _PropertyMapPageState extends State<PropertyMapPage>
implements PropertyListView {
PropertyPresenter _propertyListPresenter;
List<Property> properties = [];
CarStatus carStatus;
String createdViewId = 'hello-world-html';
bool inProgress = true;
_PropertyMapPageState(this.carStatus) {
_propertyListPresenter = PropertyPresenterImpl(this);
}
#override
void initState() {
super.initState();
_propertyListPresenter.getProperties(carStatus, "");
}
#override
void dispose() {
super.dispose();
_propertyListPresenter = null;
}
#override
Widget build(BuildContext context) {
print("Creating html view");
if (inProgress) {
return Center(child: CircularProgressIndicator());
}
return Row(
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width - 400,
child: HtmlView(
viewType: createdViewId,
)),
Container(
width: 400,
child: properties.isEmpty
? WidgetUtil.getEmptyPropertiesView(context)
: ListView.builder(
padding: EdgeInsets.all(8.0),
itemCount: properties.length,
itemBuilder: (_, index) {
return WidgetUtil.buildListRow(
context, _propertyListPresenter, properties[index]);
},
),
),
],
);
}
#override
void showProperties(List<Property> properties) {
String markers = "";
for (Property property in properties) {
String marker =
"var marker = new google.maps.Marker({position: new google.maps.LatLng(${property.lat}, ${property.lng}), map: map, title: 'Hello ${property.id}!'});\n";
markers += marker;
}
String createdViewUpdate = DateTime.now().toString();
rootBundle.loadString('map.html').then((value) {
value = value.replaceAll(new RegExp(r'markers'), markers);
ui.platformViewRegistry.registerViewFactory(
createdViewId,
(int viewId) => IFrameElement()
..width = (MediaQuery.of(context).size.width - 400).toString()
..height = MediaQuery.of(context).size.height.toString()
..srcdoc = value
..style.border = 'none');
});
setState(() {
inProgress = false;
this.createdViewId = createdViewUpdate;
this.properties = properties;
});
}
#override
void updateScreenState(ScreenState screenState) { }
#override
void showException(String string) {
// TODO: implement showException
}
}
map.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Simple Markers</title>
<style>
/* Always set the map height explicitly to define the size of the div
* element that contains the map. */
#map {
height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
function initMap() {
var myLatLng = {lat: 41.850033, lng: -87.6500523};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: myLatLng
});
markers
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
</script>
</body>
</html>
The answer outlined by #panavtec below also works and might have an easier api work work with!
A sample repository of his solution is here:
https://github.com/dazza5000/flutter_web_google_maps_example
If you need to use the library, I found this alternative:
Widget getMap() {
String htmlId = "7";
final mapOptions = new MapOptions()
..zoom = 8
..center = new LatLng(-34.397, 150.644);
// ignore: undefined_prefixed_name
ui.platformViewRegistry.registerViewFactory(htmlId, (int viewId) {
final elem = DivElement()
..id = htmlId
..style.width = "100%"
..style.height = "100%"
..style.border = 'none';
new GMap(elem, mapOptions);
return elem;
});
return HtmlElementView(viewType: htmlId);
}
I didn't tested it thoroughly but it seems to render the map.
A basic working example of this solution is here:
https://github.com/dazza5000/flutter_web_google_maps_example
Created a video walk-through of the project:
https://www.youtube.com/watch?v=iW7pCBL7yWk
Barebones blog article walking through solution:
http://whereisdarran.com/2020/01/google-maps-for-flutter-web/
I'm successfully printing my response as String from my YouTube JSON url, but when I try to serialize through the "items" I get the following error Unhandled exception:
type 'List' is not a subtype of type 'Map' of 'json' where
List is from dart:core
Map is from dart:core
Here is my code...
class CardInfo {
//Constructor
String id;
String description;
String role;
//int score;
CardInfo.fromJson(Map json) {
this.id = json['vieoId'];
this.description = json['description'];
this.role = json['title'];
//this.score = json['score'];
}
}
Future getData() async {
String url = 'YouTube url';
var httpClient = createHttpClient();
var response = await httpClient.get(url);
Map data = JSON.decode(response.body);
//String ip = data['items'];
var ci = new CardInfo.fromJson(data['items']);
//print(data['items']);
print(ci.id);
//print(ci.description);
//print(ci.role);
if (!mounted) return;
setState(() {});
}
print(data['items'] is printing, but print(ci.id) or any Card Info variables throws the above error.
**** Log of print(data);
{kind: youtube#searchListResponse, etag: "VPWTmrH7dFmi4s1RqrK4tLejnRI/P9wyOxsXEuXOCvj7znCun2-EykU", nextPageToken: CAMQAA, regionCode: US, pageInfo: {totalResults: 1000000, resultsPerPage: 3}, items: [{kind: youtube#searchResult, etag: "VPWTmrH7dFmi4s1RqrK4tLejnRI/Csl1kQhnOsbs0j4_336zJAN176k", id: {kind: youtube#video, videoId: e3pUxU_bE6w}, snippet: {publishedAt: 2017-09-14T09:43:17.000Z, channelId: UCbD8EppRX3ZwJSou-TVo90A, title: [PRISTIN - We Like] KPOP TV Show | M COUNTDOWN 170914 EP.541, description: KPOP Chart Show M COUNTDOWN | EP.541 - PRISTIN - We Like ▷Watch more video clips: http://MCOUNTDOWN-KPOP2017 [Kor Ver.] 프리티 ..., thumbnails: {default: {url: https://i.ytimg.com/vi/e3pUxU_bE6w/default.jpg, width: 120, height: 90}, medium: {url: https://i.ytimg.com/vi/e3pUxU_bE6w/mqdefault.jpg, width: 320, height: 180}, high: {url: https://i.ytimg.com/vi/e3pUxU_bE6w/hqdefault.jpg, width: 480, height: 360}}, channelTitle: Mnet K-POP, liveBroadcastContent: none}}, {kind: youtube#searchResult, etag: "VPWTmrH7dFmi4s1RqrK4tLejnRI/1JCCNBPNbFeusCp_9-pl4i8q5OU", id: {kind: youtube#video, videoId: Cc4hO9RLdl4}, snippet: {publishedAt: 2017-09-14T10:37:29.000Z, channelId: UCbD8EppRX3ZwJSou-TVo90A, title: [EXO - Power] KPOP TV Show | M COUNTDOWN 170914 EP.541, description: KPOP Chart Show M COUNTDOWN | EP.541 - EXO - Power ▷Watch more video clips: http://MCOUNTDOWN-KPOP2017 [Kor Ver.] Power Up! '#EXO' 여기 ..., thumbnails: {default: {url: https://i.ytimg.com/vi/Cc4hO9RLdl4/default.jpg, width: 120, height: 90}, medium: {url: https://i.ytimg.com/vi/Cc4hO9RLdl4/mqdefault.jpg, width: 320, height: 180}, high: {url: https://i.ytimg.com/vi/Cc4hO9RLdl4/hqdefault.jpg, width: 480, height: 360}}, channelTitle: Mnet K-POP, liveBroadcastContent: none}}, {kind: youtube#searchResult, etag: "VPWTmrH7dFmi4s1RqrK4tLejnRI/ZnYC4e5evyfldkM67HsDuV8Yh3E", id: {kind: youtube#video, videoId: BBcOM25wrVo}, snippet: {publishedAt: 2017-08-18T15:21:48.000Z, channelId: UCtFtO4By4czgkYGvEXvJu0A, title: Kpop Banned Dance: MV vs LIVE, description: Kpop Banned Dance: MV vs LIVE Koreas biggest broadcasting companies has strict rules and standards on what lyrics and dances moves can be performed., thumbnails: {default: {url: https://i.ytimg.com/vi/BBcOM25wrVo/default.jpg, width: 120, height: 90}, medium: {url: https://i.ytimg.com/vi/BBcOM25wrVo/mqdefault.jpg, width: 320, height: 180}, high: {url: https://i.ytimg.com/vi/BBcOM25wrVo/hqdefault.jpg, width: 480, height: 360}}, channelTitle: Kpop Corn, liveBroadcastContent: none}}]}
*** UPDATE WITH FOR LOOP STATEMENT
Here is code for my for loop that's returning a type 'String' is not a subtype of type 'int' of 'index' error...
Map data = JSON.decode(response);
var videos = data['items'];
for (var items in videos['snippet']){
print(items);
}
Running a loop through items in videos gives me 3 separate entries for the 3 videos I'm looking for - including snippets. Trying to get the individual snippets is failing. Please point me in the right direction.
It looks like data['items'] is a List (i.e. a JSON Array), not a Map.
You can use list comprehension methods to help here:
final items = (data['items'] as List).map((i) => new CardInfo.fromJson(i));
for (final item in items) {
print(item.id);
}
The following line gives you the List of items.
var videos = data['items'];
and you get the error because of this line
for(var items in videos['snippet'])
In the previous line you think you are iterating on the data inside snippet, while in fact, you are trying to iterate on the index 'snippet' inside the list of videos, which does not make sense because iterating over any list happens using integer values videos[0] , videos [1], videos [2] .. while you are passing a String 'snippet'
You need first to iterate on your videos list item by item (each item is a Map). Store each Map in a variable. then you can access the values of snippet by myMap['snippet']
Map data = JSON.decode(response);
var videos = data['items']; //returns a List of Maps
for (var items in videos){ //iterate over the list
Map myMap = items; //store each map
print(myMap['snippet']);
}
See if this solves your problem.
I would Love to share this and some expert can also please improve this codes, After alot of hours have battle with it.
Model Class
class Testimony{
String fullname;
String testimony;
Testimony({this.fullname,
this.testimony});
factory Testimony.fromJson(Map<String, dynamic> json) => new Testimony(
fullname: json['fullname'] as String,
testimony: json['testimony'] as String,
);
}
API CLASS
List<Testimony> ToListandMap (String responseBody) {
Map data = json.decode(responseBody);
var videos = data['testimonies']; //returns a List of Maps
final casting = videos.cast<Map<String, dynamic>>();
return casting.map<Testimony>((json) => Testimony.fromJson(json)).toList();
}
Future<List<Testimony>> fetchTestimonies(http.Client client) async {
final response = await client.get('https://tryjambcbt.com/api/testimonies');
return ToList(response.body);
}
MainWidget for UI
FutureBuilder<List<Testimony>>(
future: fetchTestimonies(http.Client()),
builder: (context, snapshot) {
if (snapshot.hasError) print(snapshot.error);
return snapshot.hasData
? TestimonyList(testimony: snapshot.data)
: Center(child: CircularProgressIndicator());
},
),
Widget
class TestimonyList extends StatelessWidget {
final List<Testimony> testimony;
TestimonyList({Key key, this.testimony}) : super(key: key);
#override
Widget build(BuildContext context) {
return ListView.builder(
physics: BouncingScrollPhysics(),
padding: EdgeInsets.only(bottom: 10),
shrinkWrap: true,
scrollDirection: Axis.vertical,
itemCount: testimony.length,
itemBuilder: (context, index) {
return Padding(
padding: EdgeInsets.only(right: 10),
child: Text(testimony[index].testimony)
);
},
);
}
}
I have this code trying to delete the class
hello3:
var purify = require('purify-css');
var content = '<div class="hello"></div><div class="hello2"></div>';
var css = '.hello { color: green; } .hello3 { display: block; }';
var options = {
output: 'purified.css',
// Will minify CSS code in addition to purify.
minify: true,
// Logs out removed selectors.
rejected: true
};
purify(content, css, options);
The output in purified.css is the same as the variable css:
.hello { color: green; } .hello3 { display: block; }
How to solve it?
I ran a test and confirmed that purify-css doesn't like class names that contain numbers.
My command... purifycss css/main.css page1.html --out css/purified.css --info --rejected took my main.css file and incompletely purified it into:
.page1-h1 {
color: red;
}
.page2-h1 {
color: blue;
}
This included an unused class (.page2-h1). But when I renamed my class names so that there were no number characters in it and then ran the same command again got the main.css that I expected which contained only:
.pageone-hone {
color: red;
}
This seems to be a known problem too.