<commit_before>import cytoscape from 'cytoscape';

//layouts
import cola from 'cytoscape-cola';
import klay from 'cytoscape-klay';
import klayjs from 'klayjs';
import coseBilkent from 'cytoscape-cose-bilkent';
import dagre from 'cytoscape-dagre';

import expandCollapse from 'cytoscape-expand-collapse';

import stylesheet from './stylesheet';


cytoscape.use( expandCollapse );
cytoscape.use( cola );
cytoscape.use( coseBilkent );
cytoscape.use( dagre );
cytoscape.use( klay, klayjs ); // cytoscape 3.x extension register

// set the sbgn style sheet
// bind interaction events (mouse hovering, collapsing)
export const initGraph = (graphContainer) => {
  const graphInstance = cytoscape({
    container: graphContainer,
    style: stylesheet,
    minZoom: 0.2,
    maxZoom: 2
  });

  graphInstance.expandCollapse({
    fisheye: true,
    animate: true,
    undoable: false,
    cueEnabled: false
  });

  const storeStyle = (ele, keys) => {
    const storedStyleProps = {};

    for (let key of keys) {
      storedStyleProps[key] = ele.style(key);
    }

    return storedStyleProps;
  };

  const dynamicScalingfactors = (zoom) => {
    const scalingFactor = ( 1 / zoom );
    const defaults = {
      fontSize: 80,
      outlineWidth: 8,
      arrowScale: 8
    };

    const dynamicFontSize = Math.min(defaults.fontSize, Math.max(scalingFactor * 18, 18));
    const dynamicFontOutlineWidth = Math.min(defaults.outlineWidth, Math.max(scalingFactor * 3, 3));
    const dynamicArrowScale = Math.min(defaults.arrowScale, Math.max(scalingFactor * 2.5, 2.5));

    return {
      fontSize: dynamicFontSize,
      outlineWidth: dynamicFontOutlineWidth,
      arrowScale: dynamicArrowScale
    };
  };

  const applyHoverStyle = (eles, style) => {
    const stylePropNames = Object.keys(style);

    eles.forEach((ele) => {
      ele.scratch('_hover-style-before', storeStyle(ele, stylePropNames));
    });
    
    graphInstance.batch(function () {
      eles.style(style);
    });
  };

  const removeHoverStyle = (eles) => {

    graphInstance.batch(function () {
      eles.forEach((ele) => {
        ele.style(ele.scratch('_hover-style-before'));
        ele.removeScratch('_hover-style-before');
      });
    });
  };

  graphInstance.on('mouseover', 'node', function (evt) {
    const node = evt.target;

    if (node.data('class') === 'compartment') { return; }

    const { fontSize, outlineWidth, arrowScale } = dynamicScalingfactors(graphInstance.zoom());
    
    const nodeHoverStyle = {
      'font-size': fontSize,
      'color': 'white',
      'text-outline-color': 'black',
      'text-outline-width': outlineWidth,
      'background-color': 'blue',
      'opacity': 1,
      'z-compound-depth': 'top'
    };

    const edgeHoverStyle = {
      'arrow-scale': arrowScale,
      'line-color': 'orange',
      'opacity': 1
    };

    const neighborhood = node.neighborhood();

    applyHoverStyle(neighborhood.nodes(), nodeHoverStyle);
    applyHoverStyle(node, nodeHoverStyle);
    applyHoverStyle(neighborhood.edges(), edgeHoverStyle);
  });

  graphInstance.on('mouseout', 'node', function (evt) {
    const node = evt.target;
<commit_msg>simple handling for when a parent node is hovered over -- don't apply hover styles<commit_after>import cytoscape from 'cytoscape';

//layouts
import cola from 'cytoscape-cola';
import klay from 'cytoscape-klay';
import klayjs from 'klayjs';
import coseBilkent from 'cytoscape-cose-bilkent';
import dagre from 'cytoscape-dagre';

import expandCollapse from 'cytoscape-expand-collapse';

import stylesheet from './stylesheet';


cytoscape.use( expandCollapse );
cytoscape.use( cola );
cytoscape.use( coseBilkent );
cytoscape.use( dagre );
cytoscape.use( klay, klayjs ); // cytoscape 3.x extension register

// set the sbgn style sheet
// bind interaction events (mouse hovering, collapsing)
export const initGraph = (graphContainer) => {
  const graphInstance = cytoscape({
    container: graphContainer,
    style: stylesheet,
    minZoom: 0.2,
    maxZoom: 2
  });

  graphInstance.expandCollapse({
    fisheye: true,
    animate: true,
    undoable: false,
    cueEnabled: false
  });

  const storeStyle = (ele, keys) => {
    const storedStyleProps = {};

    for (let key of keys) {
      storedStyleProps[key] = ele.style(key);
    }

    return storedStyleProps;
  };

  const dynamicScalingfactors = (zoom) => {
    const scalingFactor = ( 1 / zoom );
    const defaults = {
      fontSize: 80,
      outlineWidth: 8,
      arrowScale: 8
    };

    const dynamicFontSize = Math.min(defaults.fontSize, Math.max(scalingFactor * 18, 18));
    const dynamicFontOutlineWidth = Math.min(defaults.outlineWidth, Math.max(scalingFactor * 3, 3));
    const dynamicArrowScale = Math.min(defaults.arrowScale, Math.max(scalingFactor * 2.5, 2.5));

    return {
      fontSize: dynamicFontSize,
      outlineWidth: dynamicFontOutlineWidth,
      arrowScale: dynamicArrowScale
    };
  };

  const applyHoverStyle = (eles, style) => {
    const stylePropNames = Object.keys(style);

    eles.forEach((ele) => {
      ele.scratch('_hover-style-before', storeStyle(ele, stylePropNames));
    });
    
    graphInstance.batch(function () {
      eles.style(style);
    });
  };

  const removeHoverStyle = (eles) => {

    graphInstance.batch(function () {
      eles.forEach((ele) => {
        ele.style(ele.scratch('_hover-style-before'));
        ele.removeScratch('_hover-style-before');
      });
    });
  };

  graphInstance.on('mouseover', 'node', function (evt) {
    const node = evt.target;

    if (node.data('class') === 'compartment') { return; }
    if (node.isParent()) { return; }

    const { fontSize, outlineWidth, arrowScale } = dynamicScalingfactors(graphInstance.zoom());
    
    const nodeHoverStyle = {
      'font-size': fontSize,
      'color': 'white',
      'text-outline-color': 'black',
      'text-outline-width': outlineWidth,
      'background-color': 'blue',
      'opacity': 1,
      'z-compound-depth': 'top'
    };

    const edgeHoverStyle = {
      'arrow-scale': arrowScale,
      'line-color': 'orange',
      'opacity': 1
    };

    const neighborhood = node.neighborhood();

    applyHoverStyle(neighborhood.nodes(), nodeHoverStyle);
    applyHoverStyle(node, nodeHoverStyle);
    applyHoverStyle(neighborhood.edges(), edgeHoverStyle);
  });

  graphInstance.on('mouseout', 'node', function (evt) {
    const node = evt.target;

{'fraction_non_alphanumeric': 0.1368732482092806, 'fraction_numerical': 0.006540018685767673, 'mean_word_length': 3.3194351042367183, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 17, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1985812', 'n_tokens_mistral': 2149, 'n_tokens_neox': 2031, 'n_words': 444}