<commit_before>"enable aexpr";

import Morph from 'src/components/widgets/lively-morph.js';

import eventDrops from 'src/external/event-drops.js';
//import eventDrops from 'https://unpkg.com/event-drops@1.3.0/dist/index.js';
import d3 from 'src/external/d3.v5.js';
import repositoriesData from 'src/components/draft/event-drops-data.js'

import {AExprRegistry} from 'src/client/reactive/active-expression/active-expression.js'

export default class EventDrops extends Morph {
  async initialize() {
    this.windowTitle = "Active Expression Event Timeline";
    this.config = {
      d3,
      range : this.chart ? this.chart.range : void 0,
      zoom: {
          onZoom: () => {this.zoomedTo = this.chart.scale().domain()},
          onZoomEnd: () => this.updateMetaInformation(),
      },
      drop: {
          date: event => event.timestamp,
          color: event => {
            switch(event.message) {
              case 'created': return 'green';
              case 'disposed': return 'red';
              case 'changed value': return 'blue';
              default : return 'black';
            }
          }, //'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6),
          onClick : data => {
            lively.notify(JSON.stringify(data));
          },
          onMouseOver: event => {
            // this.tooltip
            //     //.transition()
            //     //.duration(200)
            //     .style('opacity', 1)
            //     .style('pointer-events', 'auto');
            lively.showEvent(d3.event);
            
            // this.tooltip
            //     .html(
            //         <div class="commit">
            //           <img class="avatar" src="https://www.tierchenwelt.de/images/stories/fotos/saeugetiere/beuteltiere/quokka/quokka_happy_l.jpg" alt="${commit.author.name}" title="${commit.author.name}" />
            //           <div class="content">
            //               <h3 class="message">{event.message}</h3>
            //               <p>
            //                   <a href="https://www.github.com/${commit.author.name}" class="author">{event.author/*.name*/}</a>
            //                   on <span class="date">{this.humanizeDate(new Date(event.date))}</span> -
            //                   <a class="sha" href="${commit.sha}">{event/*.sha.substr(0, 10)*/}</a>
            //               </p>
            //           </div>
            //         </div>)
                // .style('left', `${d3.event.clientX - 30}px`)
                // .style('top', `${d3.event.clientY + 20}px`)
            //debugger;
            lively.setGlobalPosition(this.tooltip, lively.pt(d3.event.clientX, d3.event.clientY));
        },
        onMouseOut: () => {
            // this.tooltip
            //     //.transition()
            //     //.duration(500)
            //     //.style('opacity', 0)
            //     .style('pointer-events', 'none');
        }
      },
    };
    this.chart = eventDrops(this.config);

    //let repositoriesData = require('event-drops-data.json');
    
    repositoriesData = repositoriesData.map(repository => ({name: repository.name, data: repository.commits}));
    
    this.numberEventsContainer = this.get('#numberEvents');
    this.zoomStart = this.get('#zoomStart');
    this.zoomEnd = this.get('#zoomEnd');
    this.tooltip = undefined;
    document.body.querySelectorAll('.tooltip-d3').forEach(each => each.remove());
    if(!this.tooltip){
      this.tooltip = <div class='tooltip-d3' style='background-color=blue; width=100px; height=100px; position=absolute;'></div>
      document.body.appendChild(this.tooltip);
    }
      
      // d3
      // .select(this)
      // .append('div')
      // .classed('tooltip', true)
      // .style('opacity', 0)
      // .style('border', 'red 3px solid')
      // .style('width', '100px')
      // .style('height', '100px')
      // .style('background-color', 'blue')
      // .style('pointer-events', 'auto');

    this.d3 = d3;

    // this.chart.setDomain = (domain) => {
    //   this.chart.scale().domain(domain);
    //   let svg = d3.select(this.get('.event-drop-chart'));
    //   svg.call(this.chart.draw(_.merge(defaultConfig, this.config), this.chart.scale()));
    // }
    this.update();
   
  }
  

  getDataFromSource() {
    let dataFromSource = this.dataFromSource || (() => AExprRegistry.allAsArray());
    if(_.isFunction(dataFromSource))return dataFromSource();
    else return dataFromSource;
  }

  getGroupingFunction() {
    let deIndex = string => string.substring(0, string.lastIndexOf("#"));
    return this.groupingFunction || (each => deIndex(each.meta().get('id')))
  }
  <commit_msg>Basic aexpr timeline event tooltip<commit_after>"enable aexpr";

import Morph from 'src/components/widgets/lively-morph.js';

import eventDrops from 'src/external/event-drops.js';
//import eventDrops from 'https://unpkg.com/event-drops@1.3.0/dist/index.js';
import d3 from 'src/external/d3.v5.js';
import repositoriesData from 'src/components/draft/event-drops-data.js'

import {AExprRegistry} from 'src/client/reactive/active-expression/active-expression.js'

export default class EventDrops extends Morph {
  async initialize() {
    this.windowTitle = "Active Expression Event Timeline";
    this.config = {
      d3,
      range : this.chart ? this.chart.range : void 0,
      zoom: {
          onZoom: () => {this.zoomedTo = this.chart.scale().domain()},
          onZoomEnd: () => this.updateMetaInformation(),
      },
      drop: {
          date: event => event.timestamp,
          color: event => {
            switch(event.message) {
              case 'created': return 'green';
              case 'disposed': return 'red';
              case 'changed value': return 'blue';
              default : return 'black';
            }
          }, //'#'+('00000'+(Math.random()*(1<<24)|0).toString(16)).slice(-6),
          onClick : data => {
            lively.notify(JSON.stringify(data));
            lively.openInspector(data);
          },
          onMouseOver: event => {
            this.tooltip
                .transition()
                .duration(200)
                .style('opacity', 1)
                .style('pointer-events', 'auto');
            //lively.showEvent(d3.event);
            //lively.openInspector(d3.event)
            this.tooltip.html('')// = '';
            this.tooltip.append(() =>
                    <div class="commit">
                      <img class="avatar" width="50" height="50" style="object-fit: cover" src="https://www.tierchenwelt.de/images/stories/fotos/saeugetiere/beuteltiere/quokka/quokka_happy_l.jpg" />
                      <div class="content">
                          <h3 class="message">{event.message}</h3>
                          <p>
                            <span>{(event.value || "").toString()}</span><br></br>
                              at <span class="date">{this.humanizeDate(new Date(event.timestamp))}</span>
                          </p>
                      </div>
                    </div>);
                // .style('left', `${d3.event.clientX - 30}px`)
                // .style('top', `${d3.event.clientY + 20}px`)
            //debugger;
            lively.setGlobalPosition(this.tooltip.node(), lively.pt(d3.event.clientX +3, d3.event.clientY+3));
            //this.tooltip.style.display = 'inline';
            //this.hideTooltip.cancel();
        },
        onMouseOut: () => {
          //lively.notify('out')
            //this.hideTooltip();
            //this.tooltip.style.display = 'none';
            //this.hideTooltip();
            this.tooltip
                .transition()
                .duration(500)
                .style('opacity', 0)
                .style('pointer-events', 'none');
        }
      },
    };
    this.chart = eventDrops(this.config);

    this.hideTooltip = _.debounce(() => {
        this.tooltip.style.display = 'none';
    }, 100);

    //let repositoriesData = require('event-drops-data.json');
    
    repositoriesData = repositoriesData.map(repository => ({name: repository.name, data: repository.commits}));
    
    this.numberEventsContainer = this.get('#numberEvents');
    this.zoomStart = this.get('#zoomStart');
    this.zoomEnd = this.get('#zoomEnd');
    document.body.querySelectorAll('#event-drops-tooltip').forEach(each => each.remove());
      
      // d3
      // .select(this)
      // .append('div')
      // .classed('tooltip', true)
      // .style('opacity', 0)
      // .style('border', 'red 3px solid')
      // .style('width', '100px')
      // .style('height', '100px')
      // .style('background-color', 'blue')
      // .style('pointer-events', 'auto');

    this.d3 = d3;

    // this.chart.setDomain = (domain) => {
    //   this.chart.scale().domain(domain);
    //   let svg = d3.select(this.get('.event-drop-chart'));
    //   svg.call(this.chart.draw(_.merge(defaultConfig, this.config), this.chart.scale()));
    // }
    this.update();
   
  }
  
  get tooltip() {
    let existing = document.body.querySelectorAll('#event-drops-tooltip')[0];
    
    return existing ? d3.select(existing) : d3
        .select('body')
        .append('div')
        .attr('id', 'event-drops-tooltip')
        .classed('tooltip', true)
        .style('opacity', 0)
        .style('width', '200px')
        .style('background-color', 'gray')
        .style('z-index', 500)
        .style('pointer-events', 'auto');
     // || document.body.appendChild(<div id='event-drops-tooltip' class='tooltip' style='background-color:gray; display:none; width:200px; z-index: 500; position:relative'></div>);
  }
  

  getDataFromSource() {
    let dataFromSource = this.dataFromSource || (() => AExprRegistry.allAsArray());
    if(_.isFunction(dataFromSource))return dataFromSource();
    else return dataFromSource;
  }

  getGroupingFunction() {
    let deIndex = string => string.substring(0, string.lastIndexOf("#"));
    return this.groupingFunction || (each => deIndex(each.meta().get('id')))
  }
  
{'fraction_non_alphanumeric': 0.17668723870197092, 'fraction_numerical': 0.014035436989846705, 'mean_word_length': 1.9777711914641376, 'pattern_counts': {'":': 0, '<': 41, '<?xml version=': 0, '>': 65, 'https://': 5, 'lorem ipsum': 0, 'www.': 3, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 4, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3934815', 'n_tokens_mistral': 3112, 'n_tokens_neox': 2989, 'n_words': 472}