Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
    Saul Shanabrook
    @saulshanabrook
    Screen Shot 2019-11-02 at 12.17.45 PM.png
    Hey all. I am interested in using Sprotty to visualize some program graphs. Currently I am using cytoscape JS.
    Could you point me to any standalone examples of rendering some data with sprotty in a web app?
    Philip Langer
    @planger
    @saulshanabrook Looking at your example, I think the npm-dependencies example seems to be the closest to what you are looking for. See https://github.com/TypeFox/npm-dependency-graph
    I'm not sure this example is up to date to the latest sprotty version, but still it should be a good starting point.
    A few more simpler examples wrt the model source are directly in the sprotty repo: https://github.com/eclipse/sprotty/tree/master/examples
    Saul Shanabrook
    @saulshanabrook
    Thank you!
    Philip Langer
    @planger
    @JanKoehnlein I think the automatic publishing of the npm packages is failing again. On https://www.npmjs.com/package/sprotty only 0.8.0-next.ff11b36 from 16th of Oct is available, even though there have been a couple of commits on master since then.
    Is there something I can do to retrigger? Thanks a lot in advance!
    Ghost
    @ghost~59425cfed73408ce4f678062
    Seems to be a failing test on our publishing server.
    1) ThunkView
    "before all" hook for "renders on change":
    Error: Timeout of 5000ms exceeded. For async tests and hooks, ensure "done()" is called; if returning a Promise, ensure it resolves. (/var/jenkins_home/jobs/sprotty/jobs/sprotty-next/workspace/src/base/views/thunk-view.spec.tsx)
    In the long run, it would be cool if we could publish from the Eclipse servers. If you want to help implementing that, that would be great.
    Ghost
    @ghost~59425cfed73408ce4f678062
    Last successful build was eclipse/sprotty@ff11b36
    First broken build eclipse/sprotty@71110c7
    Ghost
    @ghost~59425cfed73408ce4f678062
    I increased the timeout to 10s (!) Seems to work. I guess at Eclipse we'd have faster servers
    Philip Langer
    @planger
    @JanKoehnlein Great, thanks a lot for fixing the build! We're currently setting up the publishing process from the Eclipse servers for GLSP, so I guess, once this is done, we can let you know how it went and see if it can simply be adapted to Sprotty as well. (cc @tortmayr)
    Titouan Vervack
    @tivervac
    Just wondering, is there any ETA on a 0.8.0 release?
    Ghost
    @ghost~59425cfed73408ce4f678062
    @tivervac Not yet, do you have some special issues you need to have fixed?
    Titouan Vervack
    @tivervac
    I think most of the issues we need fixed are already merged, there's just no release with them in it yet
    Philip Langer
    @planger
    @JanKoehnlein As discussed a few weeks ago, @tortmayr outlined how we set up the NPM and Maven publishing from the Eclipse infrastructure in order to resolve the timeout issue preventing the publishing to npmjs. @tortmayr outlined the necessary steps here: eclipse/sprotty#150
    Does this help? Is this something you would like to pursue? I'm happy to help in any case.
    Maged Elaasar
    @melaasar
    Hi All. Is there an example of how a label can be anchored to different points on an edge as opposed to the center?
    Philip Langer
    @planger
    @melaasar Yes, in the classdiagram example. See edge schema and look out for the edgePlacement objects in the label schemas:
    https://github.com/eclipse/sprotty/blob/master/examples/classdiagram/src/model-source.ts#L309
    Sri
    @pamarti
    Is there an example using context menu? TIA
    Philip Langer
    @planger
    @pamarti Unfortunately not yet in the Sprotty examples directly, as currently there only exists an implementation of the context menu service for Theia.
    An example of how to use it is e.g. in the GLSP example (GLSP, being a framework that uses Sprotty):
    https://github.com/eclipse-glsp/glsp-client/blob/master/src/features/context-menu/delete-element-context-menu.ts
    You'll have to bind the context menu service implementation for Theia accordingly:
    https://github.com/eclipse-glsp/glsp-examples/blob/6a28dcfe91bfd4647b1ec9c767eec6444abcf07f/client/workflow/workflow-theia/src/browser/diagram/workflow-diagram-configuration.ts#L42
    Sri
    @pamarti
    @planger thank you.
    Johannes Albrecht
    @albrechtjohannes
    Hi all,
    I just found sprotty via the examples of elkjs and find it pretty interesting.
    As the project I'm currently working on is written in React (with Typescript), I'm curious to know, if there is some kind of an example for a React integration.
    I saw that this somehow was mentioned in the old repo (theia-ide/sprotty#203).
    Ghost
    @ghost~59425cfed73408ce4f678062
    Sprotty itself uses snabbdom as the virtual dom framework, but it can be embedded in React apps. If you want to use JSX for both, React and Sprotty, you have to currently separate the Sprotty/JSX classes into a separate npm package in order to avoid type annotation clashes. Apart from that, all interaction between a Sprotty diagram and a React app should be via Sprotty's ModelSource interface exchanging Actions in both directions.
    Theia is based on React, so all sprotty-theia examples demonstrate what's possible here, e.g. https://github.com/TypeFox/theia-xtext-sprotty-example, https://medium.com/@jan.koehnlein/domain-specific-languages-in-theia-8838aee1279
    I would like to do a sprotty release in coordination with the next Theia release, such that we have a compatible released version of both. Theia is likely to release next Thursday. Any opinions?
    Philip Langer
    @planger
    @JanKoehnlein Sounds great, thanks! :+1:
    Jacob Hrbek
    @Kreyren
    hey, did anyone experiment with deploying sprotty through github-pages ?
    Kreyren @Kreyren is having hard time with the deployment atm
    Kreyren @Kreyren is also slowly losing a mind trying to make a class diagram in using sprotty in theia
    Kreyren @Kreyren me is eating chocolate, is depressed and gave up for today
    Ghost
    @ghost~59425cfed73408ce4f678062
    Good things come to those who wait: I've released sprotty 0.8.0 (incl. sprotty-server, sprotty-theia, sprotty-elk, sprotty-vscode and the theia-xtext-sprotty-example). Please upgrade and let me know if there are any problems.
    Philip Langer
    @planger
    @JanKoehnlein \o/ Thanks a lot!
    Tom Vandenbussche
    @tomvdbussche
    It seems that support for older ELK versions has been dropped?
    Miro Spönemann
    @spoenemann
    @tomvdbussche I think the dependency on ELK is not “hard”, i.e. you can safely force an earlier ELK version. The ELK API is very stable.
    Jan set a fixed version just to avoid having a version range (some folks seem to be allergic to that in Java world)
    Tom Vandenbussche
    @tomvdbussche
    Is that true for the OSGi as well? Afaik their versioning is a lot more strict
    Miro Spönemann
    @spoenemann
    That might be, and version ranges are much more common in OSGi. If it turns out to be a problem, we can change the OSGi dependency to a range.
    Miro Spönemann
    @spoenemann
    Hi @/all, I’ll release 0.9.0 today so we can consume the recent improvements.
    Cagdas Yetim
    @CagdasYetim

    Hello i am a newbie in Theia, Sprotty and xtext.

    I created a simple dsl, and connected it with theia and Sprotty Server.(sprotty in Theia) What I did not understand is, trace of Attribute.

    Change from text to graphic works good, but if I change text of a label (which is a STRING in DSL) it doesn't affect to text.

    sprotty version is 0.8.0

    dsl -->
    Code: [Select all] [Show/ hide]
    Point:
    'point' name=ID
    '{'
    ('description:' description=STRING)?
    'abbreviation:' abbreviation=STRING
    '}'
    ;

    theia -->
    Code: [Select all] [Show/ hide]
    export class RuleLabel extends SLabel implements EditableLabel {
    hasFeature(feature: symbol): boolean {
    return feature === editLabelFeature || super.hasFeature(feature);
    }
    }

    @injectable()
    export class RuleLabelView implements SLabelView {
    render(label: Readonly<RuleLabel>, context: RenderingContext): VNode {
    const vnode =
    <text class-sprotty-label={true}>
    {label.text}
    </text>;
    const subType = getSubType(label);
    if (subType)
    setAttr(vnode, 'class', subType);
    return vnode;
    }
    }

    register in theia
    configureModelElement(context, 'label:rule', RuleLabel, RuleLabelView);

    Sprotty graphic generator -->
    Code: [Select all] [Show/ hide]
    def SModelElement createPoint(Point point, extension Context context){
    val theId = idCache.uniqueId('point_' + point.name)
    (new SNode[
    id = theId
    children = #[
    (new SLabel[
    id= theId + '.description'
    type = 'label:rule'
    text = point.description
    layoutOptions = new LayoutOptions [
    VGap = 1.0
    ]
    ]).trace(point, RulePackage.Literals.POINT__DESCRIPTION, -1)
    ]
    layout = 'vbox'
    layoutOptions = new LayoutOptions [
    paddingTop = 10.0
    paddingBottom = 10.0
    paddingLeft = 10.0
    paddingRight = 10.0
    ]
    ]).traceAndMark(point,context)
    }

    Can somebody help to me please ? what am I doing wrong ?

    Graphic to Text.JPG
    Eric Subah
    @esubah_gitlab
    Hello, I'm new to sprotty. I have cloned sprotty vscode extension and I want to display a graph for a simple json object e.g: {name:"balance, value:100}. I'm able to open sprotty webview and I just want to display a simple graph base on my simple json data. How can I go about this ?
    Tom Vandenbussche
    @tomvdbussche
    @esubah_gitlab You will have to create some kind of converter to map your JSON to a model Sprotty can understand. You can find more info here: https://github.com/eclipse/sprotty/wiki/Getting-Started
    Eric Subah
    @esubah_gitlab

    @tomvdbussche I actually followed the step by step instructions from the repository link you posted above and I used the sample model they provide.

    here is di.config.ts file. The model source (graph) is define in another file. Still nothing show up in the view. What am I doing wrong?

    import '../css/diagram.css';
    import 'sprotty/css/sprotty.css';
    import { Container, ContainerModule } from 'inversify';
    import {
    configureModelElement, overrideViewerOptions, SEdge, SGraphView, TYPES, SGraph, boundsModule, defaultModule, exportModule, graphModule, moveModule, PolylineEdgeView, routingModule, selectModule, SGraphFactory, undoRedoModule, updateModule, viewportModule, LocalModelSource} from 'sprotty';
    import { TaskNode, TaskNodeView } from './views';
    import { graph } from './modelInit';

    const flowModule = new ContainerModule((bind, unbind, isBound, rebind) => {
    rebind(TYPES.IModelFactory).to(SGraphFactory).inSingletonScope();
    const context = { bind, unbind, isBound, rebind };
    configureModelElement(context, 'graph', SGraph, SGraphView);
    configureModelElement(context, 'task', TaskNode, TaskNodeView);
    configureModelElement(context, 'edge', SEdge, PolylineEdgeView);
    bind(TYPES.ModelSource).to(LocalModelSource).inSingletonScope()
    });

    export function createSampleDiagramContainer(widgetId: string): Container {
    const container = new Container();
    container.load(defaultModule, selectModule, moveModule, boundsModule, undoRedoModule, viewportModule,
    exportModule, updateModule, graphModule, routingModule, flowModule);

    const modelSource = container.get<LocalModelSource>(TYPES.ModelSource)
    modelSource.setModel(graph);
    overrideViewerOptions(container, {
    needsClientLayout: false,
    baseDiv: widgetId
    });
    return container;
    }

    8 replies
    Eric Subah
    @esubah_gitlab
    Is there any sprotty-vscode extension example without language server?
    Tobias Ortmayr
    @tortmayr
    @JanKoehnlein @spoenemann It looks like the automatic publishing of the npm packages for sprotty-theia is failing. On https://www.npmjs.com/package/sprotty-theia the most recent version is 0.9.0 from 3 months ago. There are no next versions for the commits that have been added to the master since then.
    Is there something I can do to retrigger this? Thanks a lot in advance!
    Ghost
    @ghost~59425cfed73408ce4f678062
    @tortmayr We used to publish from our internal Jenkins, but it seems like it is hopelessly outdated now (it uses node 8). It'd take me half a day to fix it and would probably break other stuff. I'd rather publish from the Eclipse JIRO directly, but I haven't got the time to dig into that ATM (in particular, managing the accesss token). Would you be able to do that? Adding you to the npmjs.org project is not a problem
    Tobias Ortmayr
    @tortmayr
    @JanKoehnlein Yes of course, I already have setup something similar for Eclipse GLSP so I'm familiar with the process. To be able to publish from the Eclipse JIRO, I need to ask the Eclipse IT Team to create a npm bot account. This bot account than has to be added to the sprotty npm org. So there is no need, to add my personal account. There is already an open issue for that eclipse/sprotty#150, so I will track my progress there.
    Ghost
    @ghost~59425cfed73408ce4f678062
    Awesome. Ping me when you need my action.
    esubah1989
    @esubah1989
    I have a created Sprotty VS Code extension which does not involve LSP but nothing shows in the view. Can somebody explain what I need to do to have something (like one circle node) show up in the view in VS Code?