@webwriter/neural-network/src/components/cards/start_get_started_card.ts

Deep learning visualization for feed-forward networks with custom datasets, training and prediction.

import { LitElementWw } from '@webwriter/lit'
import { CSSResult, TemplateResult, html, css } from 'lit'
import { customElement } from 'lit/decorators.js'
import { consume } from '@lit/context'
import boston from '@/assets/bostonConfig.json'
import pima from '@/assets/pimaIndiansConfig.json'

import { globalStyles } from '@/global_styles'

import { editableContext } from '@/contexts/editable_context'
import type { Settings } from '@/types/settings'
import { settingsContext } from '@/contexts/settings_context'

import { FileConfig } from '@/types/file_config'
import { CCard } from '../reusables/c-card'

import SlTag from '@shoelace-style/shoelace/dist/components/tag/tag.component.js'
import SlButton from '@shoelace-style/shoelace/dist/components/button/button.component.js'
import IconFileEarmarkArrowUp from 'bootstrap-icons/icons/file-earmark-arrow-up.svg'
import { msg } from '@lit/localize'

export class GetStartedCard extends LitElementWw {
  static scopedElements = {
    'c-card': CCard,
    'sl-button': SlButton,
    'sl-tag': SlTag,
  }

  @consume({ context: editableContext, subscribe: true })
  accessor editable: boolean

  @consume({ context: settingsContext, subscribe: true })
  accessor settings: Settings

  // METHODS - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  handleCustomImport() {
    this.dispatchEvent(
      new Event('initiate-import', {
        bubbles: true,
        composed: true,
      }),
    )
  }

  async handleDefaultImport(key: string) {
    let config: any
    if (key === 'boston') {
      config = boston
    } else if (key === 'pima') {
      config = pima
    }
    this.dispatchEvent(
      new CustomEvent('import-config', {
        detail: config,
        bubbles: true,
        composed: true,
      }),
    )
  }

  // STYLES  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  static styles: CSSResult[] = [
    globalStyles,
    css`
      #getStartedGrid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 10px;
      }
    `,
  ]

  // RENDER  - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
  render(): TemplateResult<1> {
    return html`
      <c-card>
        <div slot="title">${msg('Get started')}</div>
        <div slot="content">
          <sl-button
            @click="${(_e: MouseEvent) => {
              void this.handleCustomImport()
            }}"
          >
            <sl-icon slot="prefix" src=${IconFileEarmarkArrowUp}></sl-icon>
            ${msg('Import JSON configuration')}
          </sl-button>
          ${this.editable || this.settings.showDefaultConfs
            ? html` <div id="getStartedGrid">
                <c-card>
                  <div slot="title">Pima Indians</div>
                  <div slot="content">
                    <div class="tag-group">
                      <sl-tag variant="warning">${msg('Intermediate')}</sl-tag>
                      <sl-tag variant="neutral"
                        >${msg('Classification')}</sl-tag
                      >
                      <sl-tag variant="neutral">${msg('Feed Forward')}</sl-tag>
                    </div>
                    <sl-button
                      @click=${(_e: MouseEvent) =>
                        this.handleDefaultImport('pima')}
                      >${msg('Create')}</sl-button
                    >
                  </div>
                </c-card>
                <c-card>
                  <div slot="title">Boston House Pricing</div>
                  <div slot="content">
                    <div class="tag-group">
                      <sl-tag variant="warning">${msg('Intermediate')}</sl-tag>
                      <sl-tag variant="neutral">${msg('Regression')}</sl-tag>
                      <sl-tag variant="neutral">${msg('Feed Forward')}</sl-tag>
                    </div>
                    <sl-button
                      @click=${(_e: MouseEvent) =>
                        this.handleDefaultImport('boston')}
                      >${msg('Create')}</sl-button
                    >
                  </div>
                </c-card>
              </div>`
            : html``}
          ${this.editable || this.settings.mayAddAndRemoveLayers
            ? html`<p>
                ${msg(
                  'You can create a custom configuration by using the options in the corresponding right panels.',
                )}
              </p>`
            : html``}
        </div>
      </c-card>
    `
  }
}