Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
  • Oct 26 2017 18:46
    @mathisonian banned @krpx_division_twitter
  • Sep 22 2017 18:27
    @rreusser banned @krpx_group_twitter
Msafarind
@Msafarind
Nothing shows up on either output of the plot as expected
Ricky Reusser
@rreusser
is there any chance you have chrome extensions which are interfering? I see "runtime.onMessageExternal is not supported", which sounds possibly related to extensions, though I don't know why that would break it
I don't know. I'm really a bit stumped here.
next up is to add `console.log('hello') right here to see if this code is even getting executed: https://github.com/rreusser/idyll-plotly-example/blob/master/components/plot.js#L13
Msafarind
@Msafarind
@rreusser I'm going to attempt to load this on VM instead of my PC and see if its any different. I do have chrome extensions running, but I tried loading it in IE and it was the same output
@rreusser earlier I said I changed the return to just <div> Hello </div> instead of the conditional and it rendered that just fine
I don't have any coworkers until tomorrow that I can get to try it as a 3rd reference, but I wil tomorrow
Ricky Reusser
@rreusser
I can imagine a world in which these lines do something which violate windows path rules, but that would be news to me: https://github.com/rreusser/idyll-plotly-example/blob/master/components/plot.js#L6-L7
only other guess then is
const React = require('react');
const path = require('path')
const PlotComponent = (() => {
  try {
    // `document` is not available during server-side rendering, so we allow
    // this to fail and render an empty div during server-side rendering
    const Plotly =  require(path.join('plotly.js', 'dist', 'plotly-basic.min.js'));
    return require(path.join('react-plotly.js', 'factory')).default(Plotly);
  } catch (e) { }
})();
though I really thought require handled that…
Msafarind
@Msafarind
I'll try it
it accepted that, but still no plot output
That try case just doesn't return true at all
For me
Msafarind
@Msafarind
@rreusser Confirmed, it does not load on another windows server and on a co-worker's laptop. He's actually a JS/React developer and he tried to get it to work but couldn't get it done. He moved alot of code around to move the PlotComponent into the main class and we were able to confirm that it does throw an exception each time. Wish we could say its an easy problem to solve. I'm curious how its working on your machine at all.
Fabian Meyer
@fabmeyer
@mathisonian is there an easy way to use the default idyll-components in a custom react-component? Like using the range slider like <Range></Range> compared to [Range /]?
Matthew Conlen
@mathisonian
@fabmeyer you can import { Range } from 'idyll-components' at the top of your custom component
Fabian Meyer
@fabmeyer
@mathisonian I tried it today, without success, I guess I'm doing something wrong. Can you please help?
On the top, I'm importing the component with import { TextInput } from "idyll-components";
Then I'm writing in the render-method: <TextInput value={this.props.strLength}></TextInput>
The value gets rendered from the prop correctly but it won't let me change it. What else do I have to include or to change so that it's working properly? Thanks a lot!
Matthew Conlen
@mathisonian
hey @Msafarind could you confirm what version of windows, and browser/version you've seen this issue with? I got access to a windows laptop to try to reproduce, but am not seeing the issue with firefox or edge when running idyll in the node shell or in the ubuntu shell
i see an error in the js console in IE11 but it seems different from what you're seeing
Matthew Conlen
@mathisonian
@fabmeyer can you explain the expected outcome a little more -- TextInput is wired to push updates to idyll variables, but in this case its not clear what the value should be bound to
in React if the value of an input widget doesn't change, it will be stuck in that state in the Ui. to get updates to work you always have to provide an explicit update handler
i usually end up writing things this when passing properties down to nested components, the wrapping component can always inject additional properties on
[MyComponent]
  [TextInput value:someVar /]
[/MyComponent]
Fabian Meyer
@fabmeyer
@mathisonian Hmm, I expected the TextInput component to work out of the box (interacting with the component writes the value back into the prop) when I'm importing it like a react-component. If I'm using TextInput as a child and get it from the array (React.Children.toArray(this.props.children)) it works fine but the first approach would be cleaner I think?
Nat Steinsultz
@nsteins
Is there a way to get vega-lite components to auto-scale to the column width? When I set width: "container", the x-axis collapses to 0
Nat Steinsultz
@nsteins
Sorry for another question: Is there a way to make a js function accessible in Idyll? I'd like to be able to transform data using the derived variable syntax, but be able to write the transforming function in a different file for syntax help and legibilitiy
Matthew Conlen
@mathisonian
@nsteins you can inject functions in by using a custom context
see the "runtime context" documentation here
essentially you'll want to write your function, then add it to the context during the onInitialize event
once you've done that it should be available to be used inside any idyll expression
re: the vega-lite question.... i'm not sure, but i sit by some people who are more expert at VL than me, will ask this week
Nat Steinsultz
@nsteins
Thank you!
pravikaj
@pravikaj
I have embedded an apparatus component into my idyll page. Essentially I would like to animate my graphic by incrementing my transformationStep variable from 0 to 1 in steps of 0.01 while I am scrolling. Is there a way to increment a numeric variable in idyll?
Screen Shot 2019-12-01 at 8.38.20 PM.png
Alan Tan
@tanalan
Hi @pravikaj ! Yes, we can update variables by inserting them into a javascript expression.
I'm not too particular sure how to increment it for this use case though, since the scrolling as 3 steps (as opposed to 100 steps via 1/0.01)
This animation example may be a good starting point, but its variable updating is binded to an onClick function.
Alan Tan
@tanalan

I could see how we increment transformationStep in increments of 0.33 though (since there are 3 steps), with basing off the transformation prop of IdyllApparatusComponent via the scrollerIndex variable, since it'll be 1, 2, and 3, respectively:

[IdyllAppratusComponent
    ...other props
    transformation: `scrollerIndex / 3.0`
/]

But again, I'm unsure exactly how to get the 100 steps in here... I'll update if I think of something that could work

pravikaj
@pravikaj
thank you for your help!
Thomas Ansart
@TomBor
Hi, @pravikaj demand seem very similar to mine some weeks ago and @mathisonian create an issue for it: idyll-lang/idyll#589
avarobinson
@avarobinson
In my project, we have several button elements, and we would like to style them in multiple different ways. We originally adding styling to them in the style.css file by adding css to the .button tag. The problem with this is now we would like to add more buttons, but with different styles. Since we added the styling to ".button" they all end up looking the same. Is there any way to add classes or ids to built-in idyll components? Thanks!
Megan Vo
@megan-vo
@avarobinson I believe you can add the className property to a button like [button className:”newName”]...[/button]
And similarly to other built-in components as well!
avarobinson
@avarobinson
@megan-vo Thank you!!
Patrice Power
@plpower
I'm trying to make a button that will change its text value and variable value on click, but when I use this code I found in the documentation (https://idyll-lang.org/docs/components/default/conditional), my terminal tells me there is no 'Conditional' component. I've tried it with 'Case' similarly with no luck. Is there a way to download or access these components or a different way to write conditionals in Idyll?
Megan Vo
@megan-vo
Hmm do you know what current idyll version you are using? @plpower
You can find all the current default components here: https://github.com/idyll-lang/idyll/tree/master/packages/idyll-components/src . The most up-to-date version of idyll should be able to recognize Conditional I believe, but a quick fix should be to download the Conditional component file and put it in your components directory
Patrice Power
@plpower
thanks!
Also is there somewhere I can read or see an example of tooltips working in Idyll on a elements of a d3 component?