npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@rgbkrk/synchronized-object-diff-spec

v1.0.0

Published

Exploring synchronized objects for Jupyter kernels, extracting the core of what ipywidgets provides.

Downloads

2

Readme

Thinking on Synchronized Objects for Jupyter

I'd love to see a general synchronized objects specification for Jupyter/nteract, extracting the core of what ipywidgets provides.

Model reduction

Let's think about how a model could get updates.

const simpleUpdate = (model, change) =>
  Object.assign({}, model, change);

If they rely on Immutable.js

const mergedUpdate = (model, change) =>
  model.merge(Immutable.fromJS(change))

Or if they like assuming the change is the whole thing

const directed = (model, change) =>
  change

The :key: here would be that this is a contract for a frontend component to coordinate with a backend. They could be using protobufs, bitmasks on binary arrays, etc. - it's up to the libraries! The component expects updates to their model and that it too may send updates.

It's up to the implementer for how big or small they want to be in terms of what's diff'ed.

Out-of-synchronization

Could these get out of sync? Yes!

We probably want some lineage so an actor can ask for the whole model again. If they missed a dependent, they ask for either the entire model or all the patches they need.

Truth:  A --> B --> C --> D

Kernel: A --> B --> C --> D

Client: A --> B --> D       ❌
 "Ruh roh, I have up to B, just got D."

Kernel:              C

Client:  A --> B --> C --> D ✅

All actors can send to request the whole model or a collection of patches - all while receiving patches on top of the initial model. Similar to other real-time models, the resolution is done by one actor, the kernel, amongst "competing" actors while providing an optimistic "merged" view to clients. If the model gets out of sync, the kernel can request either the model or all the changes they missed and vice versa.

Things to think on

  • Is it good/bad that we expect the component to have a local state?
    • Should they provide the reducer, we pass them the final model state -- so its in the state tree and notebook doc, potentially easier for synchronization amongst multiple users

Proposed plugin API for nteract

We'll extend on top of the transform API

class Transform extends React.Component {
  ...
}

Transform.mimetype = 'application/vnd.tf.v1+json'

To provide an optional reducer:

Transform.reducer = (model, update) =>
  Object.assign({}, model, update);

Note that it's up to the implementer to declare this reducer.

When a new model is created, with a modelID, we register the reducer and apply it to our list of models. Later, as changes flow through, we update the state of that model.

  [MODEL_UPDATE]: (state, action) => {
    const id = action.modelID;
    const model = state.getIn(['models', id]);
    return state.setIn(['models', id, 'state'],
      model.reducer(model.state, action.change));
  }
}

Changes to that model get reflected back to registered views. React (and the component itself) handle the rest of the changes.

Initiating the model

It's tempting to rely on any of the messages that return a mime bundle, so that we can display interactive models anywhere that has a display-like area.

I'd like the first message to both provide the initial model state and the model id.

content = {
  "data" : {
    "application/custom+json": {
      "value": 2
    }
  },
  "metadata" : {
    "model_id": "e191c04e-4428-4648-9f76-dc7e643bd980"
  }
}

In our case, this means that the frontend can now track this model_id.

Knowing whether or not to use this model_id is a matter of checking to see if Transform.reducer exists for the Transform with this mimetype (yes, I'm ignoring the bundle).

Perhaps if we want to be explicit about a matching model_id to the mimetype given:

content = {
  "data" : {
    "application/custom+json": {
      "value": 2
    }
  },
  "metadata" : {
    "models": {
      "application/custom+json": "e191c04e-4428-4648-9f76-dc7e643bd980"
    }
  }
}

We now have enough to register a new model (or ensure a prior one).

Questions to explore and answer

Questions to answer:

  • What's the message spec?
  • How do we handle differences?
  • How do we initiate the model?
    • Tempted to rely on display_data/execute_reply/pager, relying on the mimebundles
  • How do we handle binary payloads (from the message spec)?