I am trying to use cytoscape.min.js in one of my HTML page for showing interactions. Looking into some examples, I am able to develop a page for the same.
However, I am not able to specify this into a particular division, The "#cy" division is not in the space of proper division. In more detail, when I will develop a page with multiple contents, I want to restrict the interaction view (using cytoscpae) into a particular division in HTML. I guess something to modify in the style of "#cy" division, but not able to do so.
I would like to get any suggestion/help regarding this.
Thanks in advance,
Santosh
My current HTML page is like following:
<!doctype html>
<html>
<head>
<title>Cytoscape example</title>
<script src='cytoscape.min.js'></script>
</head>
<style>
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
</style>
<body>
<div>
<h1> Interactions </h1>
<h1> Test data </h1>
</div>
<div id="cy"></div>
<script>
var cy = cytoscape({
container: document.getElementById('cy'),
elements: [
// nodes
{ data: { id: 'a', type: "met" } },
{ data: { id: 'b', type: "met" } },
{ data: { id: 'c', type: "prot" } },
{ data: { id: 'd', type: "prot" } },
{ data: { id: 'e', type: "prot" } },
{ data: { id: 'f', type: "prot" } },
// edges
{
data: {
id: 'ab',
source: 'a',
target: 'b'
}
},
{
data: {
id: 'ae',
source: 'a',
target: 'e'
}
},
{
data: {
id: 'cd',
source: 'c',
target: 'd'
}
},
{
data: {
id: 'ef',
source: 'e',
target: 'f'
}
},
{
data: {
id: 'ac',
source: 'a',
target: 'c'
}
},
{
data: {
id: 'be',
source: 'b',
target: 'e'
}
}
],
style: [
{
selector: 'node[type="prot"]',
style: {
'shape': 'circle',
'background-color': 'red',
label: 'data(id)'
}
},
{
selector: 'node[type="met"]',
style: {
'shape': 'square',
'background-color': 'blue',
label: 'data(id)'
}
}]
});
cy.layout({
name: 'circle',
animate: true
}).run();
</script>
</body>
</html>
</html>
Actually, the current code looks fine for me and does the job.
If you want to make the div smaller, you can do like this:
#cy {
width: 500px;
height: 500px;
border: 1px solid black;
}
I suggest you add the border while in development, just to know where the div is. Without the border, the div still works fine, but it might be difficult to tell where it is on the page and click it.
I need to use Noto Sans Arabic font in my React material UI theme.
The theme is working well, overrides are working too.
I have tried React Material UI docs to import my fonts like in react-material documentation, but it doesn't work:
import notoArabic from '../static/fonts/NotoSansArabic-Regular.ttf'
....
const arabic = {
fontFamily: 'Noto Sans Arabic',
fontStyle: 'regular',
fontDisplay: 'swap',
fontWeight: 400,
src: `
local('Noto Sans Arabic'),
local('Noto Sans Arabic-Regular'),
url(${notoArabic}) format('ttf')
`,
unicodeRange:
'U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF',
};
...
overrides: {
MuiCssBaseline: {
'#global': {
'#font-face': [arabic],
},
},
...
I expect that the font will be imported and work.
I have any errors, and can see font-family: Noto Sans Arabic; in my browser. But it doesn't work
I'm Persian and our language fonts very very look like Arabic fonts. for my project, I create a separated file, and I named it globalStyles.js:
import { createStyles } from '#material-ui/core';
import yekanRegularTtf from '../app/assets/font/iranyekanwebregular.ttf';
import yekanRegularWoff from '../app/assets/font/iranyekanwebregular.woff';
import yekanRegularWoff2 from '../app/assets/font/iranyekanwebregular.woff2';
import yekanBoldTtf from '../app/assets/font/iranyekanwebbold.ttf';
import yekanBoldWoff from '../app/assets/font/iranyekanwebbold.woff';
import yekanBoldWoff2 from '../app/assets/font/iranyekanwebbold.woff2';
const globalStyles = ({ spacing, typography, colors }) =>
createStyles({
'#global': {
'#font-face': [
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 400,
src: `url(${yekanRegularWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanRegularWoff})`,
`url(${yekanRegularTtf}) format('truetype')`,
],
},
},
{
fontFamily: 'IRANYekan',
fontStyle: 'normal',
fontWeight: 700,
src: `url(${yekanBoldWoff2}) format('woff2')`,
fallbacks: {
src: [
`url(${yekanBoldWoff})`,
`url(${yekanBoldTtf}) format('truetype')`,
],
},
},
],
html: {
lineHeight: '1.5',
WebkitTextSizeAdjust: '100%',
},
'*': {
transition: 'opacity 1s cubic-bezier(0.4, 0, 0.2, 1)',
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
'&:after, &:before': {
fontFamily: "'IRANYekan', sans-serif, Arial",
boxSizing: 'border-box',
},
'&[type="checkbox"], &[type="radio"]': {
boxSizing: 'border-box',
padding: '0',
},
'&[type="number"]': {
'&::-webkit-inner-spin-button, &::-webkit-outer-spin-button': {
height: 'auto',
},
},
'&[type="search"]': {
WebkitAppearance: 'textfield',
outlineOffset: -2,
'&::-webkit-search-decoration': {
WebkitAppearance: 'none',
},
},
'&[hidden]': {
display: 'none',
},
'&::-webkit-file-upload-button': {
WebkitAppearance: 'button',
font: 'inherit',
},
},
body: {
fontFamily: "'IRANYekan', sans-serif, Arial",
lineHeight: '1.38',
margin: 0,
},
'#react-view': {},
'h1, h2, h3, h4, h5, h6': {
margin: [[0, 0, spacing.margin]],
lineHeight: '1.3',
letterSpacing: 0,
textTransform: 'none',
color: colors.black,
display: 'block',
fontFamily: "'IRANYekan', sans-serif, Arial",
},
h1: {
fontSize: typography.fontSize * 1.4,
},
h2: {
fontSize: typography.fontSize * 1.2,
},
h3: {
fontSize: typography.fontSize,
},
h4: {
fontSize: typography.fontSize,
},
h5: {
fontSize: typography.fontSize,
},
h6: {
fontSize: typography.fontSize,
},
p: {
display: 'block',
margin: [[0, 0, spacing.margin]],
},
main: {
display: 'block',
},
hr: {
boxSizing: 'content-box',
height: 0,
overflow: 'visible',
},
pre: {
fontSize: '1em',
},
a: {
backgroundColor: 'transparent',
textDecoration: 'none',
},
'b, strong': {
fontWeight: 'bold',
},
small: {
fontSize: '80%',
},
img: {
borderStyle: 'none',
},
button: {
WebkitAppearance: 'button',
},
input: {
overflow: 'visible',
},
'button, input, optgroup, select, textarea': {
fontFamily: 'inherit',
fontSize: '100%',
lineHeight: '1.15',
margin: 0,
},
'button, input': {
overflow: 'visible',
},
'button, select': {
textTransform: 'none',
},
textarea: {
overflow: 'auto',
},
'button, [type="button"], [type="reset"], [type="submit"]': {
WebkitAppearance: 'button',
'&::-moz-focus-inner': {
borderStyle: 'none',
padding: '0',
},
'&:-moz-focusring': {
outline: [[1, 'dotted', 'ButtonText']],
},
},
fieldset: {
padding: '0.35em 0.75em 0.625em',
},
legend: {
boxSizing: 'border-box',
color: 'inherit',
display: 'table',
maxWidth: '100%',
padding: '0',
whiteSpace: 'normal',
},
progress: {
verticalAlign: 'baseline',
},
details: {
display: 'block',
},
summary: {
display: 'list-item',
},
template: {
display: 'none',
},
},
});
export default globalStyles;
And in the top level of my components, I injected to the project root component:
import React from 'react';
import { Provider as ReduxProvider } from 'react-redux';
import { CssBaseline, withStyles } from '#material-ui/core';
import { Helmet } from 'react-helmet';
import SnackBarProvider from './SnackBar';
import globalStyles from '../utils/globalStyles';
import { generalHelmet } from '../utils/helmetConfig';
type AppProviderProps = {
children: any,
store: any,
};
const AppProvider = ({ children, store }: AppProviderProps) => (
<>
<Helmet {...generalHelmet} />
<CssBaseline />
<ReduxProvider store={store}>
<SnackBarProvider>{children}</SnackBarProvider>
</ReduxProvider>
</>
);
export default withStyles(globalStyles)(AppProvider);
Also, in the Webpack configuration file I wrote the font loader just like below:
~~~
const nodeEnv = process.env.NODE_ENV || 'development';
const isDev = nodeEnv === 'development';
const exclude = [/node_modules/, /public/];
const name = isDev ? '[name].[ext]' : '[hash:5].[ext]';
const publicPath = '/assets/';
~~~
module.exports = {
~~~
module: {
rules: [
~~~
{
test: /\.(woff2?|ttf|eot|svg)$/,
exclude,
loader: 'url',
options: { limit: 10240, name, publicPath },
},
And everything works well now. I hope my configuration helps you.
You can try few things as mentioned below to check if you are compiling code properly.
From the related URL which you mentioned to import the font infers that the static folder and above file directory are siblings. Make sure, the related path are same as per root folder.
Also, if you're using webpack to bundle your code, make sure you include ttf file extension and add file-loader module to handle it during compiling.
e.g.
{
test: /\.(png|jpg|gif|svg|ttf|eot|woff)$/,
loader: 'file-loader',
query: {
name: '[name].[ext]?[hash]'
}
},
There are a few possibilities but I would suggest trying loading the same font via your index.css file and check the result, Could it be the location you are referring is not correct or the font isn't present.
Also a file-loader or plugin might be required to render fonts with webpack read: https://chriscourses.com/blog/loading-fonts-webpack
Iam using react Autosuggest component for city country list. When an input is given the suggested list of cities name with their respective countries is displayed. I am able to change the background color while hovering, but, I want to change when key pressed 'up' or 'down'. Following is the code for reference
Form.js
const getSuggestions = value => {
const inputValue = value.trim().toLowerCase();
const inputLength = inputValue.length;
return inputLength === 0 ? [] : cities.filter(data =>
data.name.toLowerCase().slice(0, inputLength) === inputValue
).slice(0,4);
};
// When suggestion is clicked, Autosuggest needs to populate the input
// based on the clicked suggestion.
const getSuggestionValue = suggestion => suggestion.name
const renderSuggestion = suggestion =>
(
<table className='auto-complete'>
<tbody>
<ArrowTooltip title={suggestion.name + ', ' + countries.getName(suggestion.country,"en")} placement="top">
<tr>
<td style={{ width: '88%' }} dangerouslySetInnerHTML=
{highlight(suggestion.name, suggestion.value)}></td>
<td style={{ width: '12%' }}>{suggestion.country}</td>
</tr>
</ArrowTooltip>
</tbody>
</table>
);
class Form extends React {
constructor() {
super();
this.state = {
value: '',
suggestions: []
};
}
onChange = (event, { newValue, method }) => {
this.setState({
value: newValue,
});
if(method == 'up' || method == 'down') {
// Here the value is triggered when key pressed
console.log('KEY UP/DOWN')
}
};
onSuggestionsFetchRequested = ({ value }) => {
this.setState({
suggestions: getSuggestions(value)
});
};
// Autosuggest will call this function every time you need to clear suggestions.
onSuggestionsClearRequested = () => {
this.setState({
suggestions: []
});
};
onSuggestionSelected = (event, {suggestion}) => {
const isSuggestion = true
this.props.getWeather(suggestion, isSuggestion)
}
render() {
const { value, suggestions} = this.state;
// Autosuggest will pass through all these props to the input.
const inputProps = {
placeholder: 'Search City...',
value,
onChange: this.onChange
};
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={this.onSuggestionsFetchRequested}
onSuggestionsClearRequested={this.onSuggestionsClearRequested}
getSuggestionValue={getSuggestionValue}
renderSuggestion={renderSuggestion}
inputProps={inputProps}
onSuggestionSelected={this.onSuggestionSelected}
/>
}
}
export default Form
CSS required for suggestions (which is to be styled)
Form.css
.react-autosuggest__suggestions-container {
display: none;
}
.react-autosuggest__suggestions-container--open {
display: block;
perspective: 1000px;
position:absolute;
top: 30px;
width: 180px;
font-family: 'Oxygen';
font-weight: 100;
font-size: 16px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
z-index: 2;
}
#media screen and (max-width: 576px) {
.react-autosuggest__suggestions-container--open, .react-autosuggest__input {
display: block;
width: 220px;
}
}
.react-autosuggest__suggestions-container--open li{
transform-origin: top center;
margin-bottom: 2px;
background: #c7ecee;
}
/* Here the background color is changed on hovering each li */
.react-autosuggest__suggestions-container--open li:hover {
background: #95afc0;
transition: 0.1s ease-in-out;
}
As seen above, when the mouse is hovered over each elements background color changes, but, I want to change when key (up or down) is pressed. Any suggestions or changes??
Just add theme prop. Something like this:
<Autosuggest
suggestions={suggestions}
onSuggestionsFetchRequested={
this.onSuggestionsFetchRequested
}
onSuggestionsClearRequested={
this.onSuggestionsClearRequested
}
getSuggestionValue={this.getSuggestionValue}
renderSuggestion={this.renderSuggestion}
inputProps={inputProps}
focusInputOnSuggestionClick={true}
theme={{
container: {
display: "block",
width: "100%",
position: "absolute",
borderTop: "none",
borderBottom: "1px solid #aaa",
borderLeft: "1px solid #aaa",
borderRight: "1px solid #aaa",
backgroundColor: "#fff",
fontFamily: "Helvetica, sans-serif",
fontWeight: 300,
fontSize: "16px",
borderBottomLeftRadius: "4px",
borderBottomRightRadius: "4px",
zIndex: 2,
paddingLeft: 0,
paddingRight: 0,
},
input: {
marginBottom: 0,
display: "block",
width: "100%",
height: "34px",
padding: "6px 12px",
fontSize: "14px",
lineHeight: "1.4285",
color: "#555",
backgroundColor: "#fff",
backgroundImage: "none",
borderRadius: "4px",
border: "1px solid #ccc",
},
suggestionHighlighted: {
backgroundColor: "lightgrey", //magic line
cursor:'pointer'
},
}}
/>
I'm using Google Charts API v44 and I found something that looks like a bug. At the legend, when name of the entry is too long you can see a tooltip with this name. But in Firefox under Fedora it gets unreadable because the font color and background color are the same:
I decided to use CSS for that, like this: .goog-tooltip { color: white; } and it did the trick, but later I found out that now it got broken on my Mac:
I tried .goog-tooltip { color: white; background-color: black; } but it changes background not of the tooltip itself but his borders.
How to customize font/background colors to make tooltips readable everywhere?
If you need a source code: HTML, JS, CSS
There are a couple options, see following example charts...
chart 0
You can use the tooltip.textStyle configuration option
However, this only lets you style the text with the following options, no background...
color: <string>,
fontName: <string>,
fontSize: <number>,
bold: <boolean>,
italic: <boolean>
chart 1
you can provide your own HTML/CSS by providing a tooltip column in the data
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
and setting tooltip.isHtml: true in the options
For more info, see Customizing HTML content...
Examples...
google.charts.load('current', {
callback: function () {
// data table
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
// chart 0
new google.visualization.PieChart(document.getElementById('piechart0')).draw(data, {
title: 'chart 0',
tooltip: {
textStyle: {
color: 'deeppink',
fontName: 'Verdana',
fontSize: 16,
bold: true,
italic: true
}
}
});
// build tooltip column
data.addColumn({type: 'string', role: 'tooltip', p: {html: true}});
for (var i = 0; i < data.getNumberOfRows(); i++) {
data.setValue(i, 2,
'<div class="goog-tooltip"><div class="goog-tooltip-task">' +
data.getValue(i, 0) + '</div><div class="goog-tooltip-value">' +
data.getValue(i, 1) + '</div></div>'
);
}
// chart 1
new google.visualization.PieChart(document.getElementById('piechart1')).draw(data, {
title: 'chart 1',
tooltip: {
isHtml: true
}
});
},
packages: ['corechart']
});
.goog-tooltip {
background-color: black;
padding: 6px 6px 6px 6px;
}
.goog-tooltip-task {
color: cyan;
font-size: 20px;
font-weight: normal;
}
.goog-tooltip-value {
color: gold;
font-size: 16px;
font-weight: bold;
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="piechart0"></div>
<div id="piechart1"></div>