How does one add a custom Fingerprint and Detail for a new dataset?

[xge]

Hi,

thanks for the great work, I really like the Projection Space Explorer. Im at the point where I'd like to add custom vis for my own datasets to it. Is there any documentation on what steps are necessary? Or even more general: what is necessary for a development setup of Projection Path Explorer? The outline in the README seems outdated.

Thanks for your help, Hagen

[dvmoritzschoefl]

Hi, yes it seems outdated, I will create an issue for that.

Basically you define a plugin, add it to the registry and load a dataset. You need to override the fingerprint functions that will generate React components based on the selections. Here is a small example where I showed audio snippets of an album:

export const DATASETCONFIG = [
  {
    display: 'Andreas Album',
    path: './coverart/names2.csv',
    type: DatasetType.Sound,
  },
];

class SoundPlugin extends PSEPlugin {
  type = 'sound';

  createFingerprint(vectors: IVector[], scale: number, aggregate: boolean): JSX.Element {
    return <SoundPrint vectors={vectors} aggregate={aggregate}></SoundPrint>;
  }

  hasFileLayout(header: string[]) {
    return this.hasLayout(header, ['wav', 'stft']);
  }
}

PluginRegistry.getInstance().registerPlugin(new SoundPlugin());

const api = new API<RootState>(null, createRootReducer({})); //@ts-ignore

Note that this application uses the projection-space-explorer as a package in a seperate react app (see package.json) https://github.com/Aystein/coverart/blob/master/package.json

EDIT: createFingerprint creates the actual fingerprint and hasFileLayout will get called whenever a dataset is loaded to choose the correct plugin. The header in this function is a list of features that corresponds to the columns in a .csv file, here the plugin will only load for datasets with a 'wav' and 'stft' feature.

[xge]

Thanks for the pointers and the sample application.