@kaspernj/api-maker 1.0.372 → 1.0.374

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaspernj/api-maker",
-  "version": "1.0.372",
+  "version": "1.0.374",
   "type": "module",
   "description": "",
   "main": "index.js",
@@ -35,7 +35,7 @@
     "on-location-changed": ">= 1.0.10",
     "qs": ">= 6.9.3",
     "replaceall": ">= 0.1.6",
-    "set-state-compare": "^1.0.42",
+    "set-state-compare": "^1.0.45",
     "spark-md5": "^3.0.2",
     "stacktrace-parser": "^0.1.10",
     "strftime": ">= 0.10.0",

package/src/cable-connection-pool.mjs

@@ -1,6 +1,7 @@
 import CableSubscriptionPool from "./cable-subscription-pool.mjs"
 import CableSubscription from "./cable-subscription.mjs"
 import {dig} from "diggerize"
+import RunLast from "./run-last.mjs"
 
 const shared = {}
 
@@ -96,7 +97,7 @@ export default class ApiMakerCableConnectionPool {
       currentSubscription[value].push(subscription)
     }
 
-    this.scheduleConnectUpcoming()
+    this.scheduleConnectUpcomingRunLast.queue()
 
     return subscription
   }
@@ -122,10 +123,5 @@ export default class ApiMakerCableConnectionPool {
     this.cableSubscriptionPools.push(cableSubscriptionPool)
   }
 
-  scheduleConnectUpcoming () {
-    if (this.scheduleConnectUpcomingTimeout)
-      clearTimeout(this.scheduleConnectUpcomingTimeout)
-
-    this.scheduleConnectUpcomingTimeout = setTimeout(this.connectUpcoming, 0)
-  }
+  scheduleConnectUpcomingRunLast = new RunLast(this.connectUpcoming)
 }

package/src/commands-pool.mjs

@@ -6,6 +6,7 @@ import Deserializer from "./deserializer.mjs"
 import {dig, digg} from "diggerize"
 import events from "./events.mjs"
 import FormDataObjectizer from "form-data-objectizer"
+import RunLast from "./run-last.mjs"
 import Serializer from "./serializer.mjs"
 import SessionStatusUpdater from "./session-status-updater.mjs"
 import ValidationError from "./validation-error.mjs"
@@ -26,9 +27,9 @@ export default class ApiMakerCommandsPool {
     const promiseResult = pool.addCommand(data)
 
     if (args.instant) {
-      pool.flush()
+      pool.flushRunLast.run()
     } else {
-      pool.setFlushTimeout()
+      pool.flushRunLast.queue()
     }
 
     return promiseResult
@@ -115,13 +116,11 @@ export default class ApiMakerCommandsPool {
     throw new Error("Couldnt successfully execute request")
   }
 
-  async flush() {
+  flush = async () => {
     if (this.commandsCount() == 0) {
       return
     }
 
-    this.clearTimeout()
-
     const currentPool = this.pool
     const currentPoolData = this.poolData
 
@@ -158,7 +157,8 @@ export default class ApiMakerCommandsPool {
         } else if (responseType == "error") {
           const error = new CustomError("Command error", {response: commandResponseData})
 
-          error.stack += commandData.stack
+          error.stack += "\n"
+          error.stack += commandData.stack.split("\n").slice(1).join("\n")
 
           commandData.reject(error)
         } else if (responseType == "failed") {
@@ -196,12 +196,6 @@ export default class ApiMakerCommandsPool {
     commandData.reject(error)
   }
 
-  clearTimeout() {
-    if (this.flushTimeout) {
-      clearTimeout(this.flushTimeout)
-    }
-  }
-
   isActive() {
     if (this.commandsCount() > 0) {
       return true
@@ -214,24 +208,5 @@ export default class ApiMakerCommandsPool {
     return false
   }
 
-  // Try to batch calls to backend while waiting for the event-queue-call to clear any other jobs before the request and reset on every flush call
-  // If only waiting a single time, then other event-queue-jobs might be before us and queue other jobs that might queue calls to the backend
-  setFlushTimeout() {
-    this.flushTriggerCount = 0
-    this.clearTimeout()
-    this.flushTrigger()
-  }
-
-  flushTrigger = () => {
-    if (this.flushTriggerCount >= 10) {
-      this.flush()
-    } else {
-      this.flushTriggerCount++
-      this.flushTriggerQueue()
-    }
-  }
-
-  flushTriggerQueue() {
-    this.flushTimeout = setTimeout(this.flushTrigger, 0)
-  }
+  flushRunLast = new RunLast(this.flush)
 }

package/src/run-last.mjs

@@ -0,0 +1,39 @@
+export default class RunLast {
+  constructor(callback) {
+    if (!callback) throw new Error("Empty callback given")
+
+    this.callback = callback
+  }
+
+  // Try to batch calls to backend while waiting for the event-queue-call to clear any other jobs before the request and reset on every flush call
+  // If only waiting a single time, then other event-queue-jobs might be before us and queue other jobs that might queue calls to the backend
+  queue() {
+    this.flushTriggerCount = 0
+    this.clearTimeout()
+    this.flushTrigger()
+  }
+
+  flushTrigger = () => {
+    if (this.flushTriggerCount >= 10) {
+      this.run()
+    } else {
+      this.flushTriggerCount++
+      this.flushTriggerQueue()
+    }
+  }
+
+  flushTriggerQueue() {
+    this.flushTimeout = setTimeout(this.flushTrigger, 0)
+  }
+
+  clearTimeout() {
+    if (this.flushTimeout) {
+      clearTimeout(this.flushTimeout)
+    }
+  }
+
+  run() {
+    clearTimeout(this.flushTimeout)
+    this.callback()
+  }
+}

package/src/source-maps-loader.mjs

@@ -13,21 +13,21 @@ if (SourceMapConsumer.initialize) {
 const logger = new Logger({name: "ApiMaker / SourceMapsLoader"})
 
 export default class SourceMapsLoader {
-  constructor () {
+  constructor() {
     this.isLoadingSourceMaps = false
     this.sourceMaps = []
     this.srcLoaded = {}
   }
 
-  loadSourceMapsForScriptTags (callback) {
+  loadSourceMapsForScriptTags(callback) {
     this.loadSourceMapsForScriptTagsCallback = callback
   }
 
-  sourceMapForSource (callback) {
+  sourceMapForSource(callback) {
     this.sourceMapForSourceCallback = callback
   }
 
-  async loadSourceMaps (error) {
+  async loadSourceMaps(error) {
     if (!error) throw new Error("No error was given to SourceMapsLoader#loadSourceMaps")
 
     this.isLoadingSourceMaps = true
@@ -111,11 +111,9 @@ export default class SourceMapsLoader {
     }
   }
 
-  includeMapURL(src) {
-    return src.includes("/packs/")
-  }
+  includeMapURL = (src) => src.includes("/packs/")
 
-  async loadSourceMapForSource ({originalUrl, sourceMapUrl}) {
+  async loadSourceMapForSource({originalUrl, sourceMapUrl}) {
     const xhr = new XMLHttpRequest()
 
     xhr.open("GET", sourceMapUrl, true)
@@ -127,26 +125,27 @@ export default class SourceMapsLoader {
     this.sourceMaps.push({consumer, originalUrl})
   }
 
-  loadUrl (url) {
+  loadUrl(url) {
     const parser = document.createElement("a")
+
     parser.href = url
 
     return parser
   }
 
-  loadXhr (xhr, postData) {
+  loadXhr(xhr, postData) {
     return new Promise((resolve) => {
       xhr.onload = () => resolve()
       xhr.send(postData)
     })
   }
 
-  parseStackTrace (stackTrace) {
+  parseStackTrace(stackTrace) {
     return this.getStackTraceData(stackTrace)
       .map((traceData) => `at ${traceData.methodName} (${traceData.fileString})`)
   }
 
-  getStackTraceData (stackTrace) {
+  getStackTraceData(stackTrace) {
     const stack = stackTraceParser.parse(stackTrace)
     const newSourceMap = []
 

package/src/table/filters/attribute-element.jsx

@@ -0,0 +1,42 @@
+import Attribute from "../../base-model/attribute"
+import {digg, digs} from "diggerize"
+import * as inflection from "inflection"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class AttributeElement extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    active: PropTypes.bool.isRequired,
+    attribute: PropTypes.instanceOf(Attribute).isRequired,
+    currentModelClass: PropTypes.func.isRequired,
+    fikter: PropTypes.object,
+    onClick: PropTypes.func.isRequired
+  })
+
+  render() {
+    const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <div
+        className="attribute-element"
+        data-attribute-name={attribute.name()}
+        data-model-class={currentModelClass.modelClassData().name}
+        onClick={digg(this, "onAttributeClicked")}
+        style={style}
+      >
+        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
+      </div>
+    )
+  }
+
+  onAttributeClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({attribute: digg(this, "props", "attribute")})
+  }
+}))

package/src/table/filters/filter-form.jsx

@@ -1,116 +1,17 @@
-import Attribute from "../../base-model/attribute"
+import AttributeElement from "./attribute-element"
 import {digg, digs} from "diggerize"
 import * as inflection from "inflection"
 import Input from "../../inputs/input"
 import PropTypes from "prop-types"
 import PropTypesExact from "prop-types-exact"
-import React from "react"
-import Reflection from "../../base-model/reflection"
+import {memo, useMemo, useRef} from "react"
+import ReflectionElement from "./reflection-element"
+import ScopeElement from "./scope-element"
 import Select from "../../inputs/select"
 import Services from "../../services.mjs"
-import Shape from "set-state-compare/src/shape"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
 
-class AttributeElement extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    active: PropTypes.bool.isRequired,
-    attribute: PropTypes.instanceOf(Attribute).isRequired,
-    currentModelClass: PropTypes.func.isRequired,
-    fikter: PropTypes.object,
-    onClick: PropTypes.func.isRequired
-  })
-
-  render() {
-    const {active, attribute, currentModelClass} = digs(this.props, "active", "attribute", "currentModelClass")
-    const style = {}
-
-    if (active) style.fontWeight = "bold"
-
-    return (
-      <div
-        className="attribute-element"
-        data-attribute-name={attribute.name()}
-        data-model-class={currentModelClass.modelClassData().name}
-        onClick={digg(this, "onAttributeClicked")}
-        style={style}
-      >
-        {currentModelClass.humanAttributeName(inflection.camelize(attribute.name(), true))}
-      </div>
-    )
-  }
-
-  onAttributeClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onClick({attribute: digg(this, "props", "attribute")})
-  }
-}
-
-class ReflectionElement extends React.PureComponent {
-  static propTypes = PropTypesExact({
-    currentModelClass: PropTypes.func.isRequired,
-    onClick: PropTypes.func.isRequired,
-    reflection: PropTypes.instanceOf(Reflection).isRequired
-  })
-
-  render() {
-    const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
-
-    return (
-      <div
-        className="reflection-element"
-        data-model-class={currentModelClass.modelClassData().name}
-        data-reflection-name={reflection.name()}
-        onClick={digg(this, "onReflectionClicked")}
-      >
-        {currentModelClass.humanAttributeName(reflection.name())}
-      </div>
-    )
-  }
-
-  onReflectionClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onClick({reflection: digg(this, "props", "reflection")})
-  }
-}
-
-class ScopeElement extends React.PureComponent {
-  static defaultProps = {
-    active: false
-  }
-
-  static propTypes = {
-    active: PropTypes.bool.isRequired,
-    scope: PropTypes.object.isRequired
-  }
-
-  render() {
-    const {active, scope} = this.props
-    const style = {}
-
-    if (active) style.fontWeight = "bold"
-
-    return (
-      <div
-        className="scope-element"
-        key={scope.name()}
-        onClick={digg(this, "onScopeClicked")}
-        style={style}
-      >
-        {scope.name()}
-      </div>
-    )
-  }
-
-  onScopeClicked = (e) => {
-    e.preventDefault()
-
-    this.props.onScopeClicked({scope: this.props.scope})
-  }
-}
-
-
-export default class ApiMakerTableFiltersFilterForm extends React.PureComponent {
+export default memo(shapeComponent(class ApiMakerTableFiltersFilterForm extends ShapeComponent {
   static propTypes = PropTypesExact({
     filter: PropTypes.object,
     modelClass: PropTypes.func.isRequired,
@@ -118,18 +19,22 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
     querySearchName: PropTypes.string.isRequired
   })
 
-  shape = new Shape(this, {
-    attribute: this.currentModelClassFromPath(this.props.filter.p || []).ransackableAttributes().find((attribute) => attribute.name() == this.props.filter.a),
-    path: this.props.filter.p || [],
-    predicate: undefined,
-    predicates: undefined,
-    scope: this.props.filter.sc,
-    value: this.props.filter.v
-  })
-  valueInputRef = React.createRef()
+  setup() {
+    this.useStates({
+      attribute: () => this.currentModelClassFromPath(this.props.filter.p || [])
+        .ransackableAttributes()
+        .find((attribute) => attribute.name() == this.props.filter.a),
+      path: this.props.filter.p || [],
+      predicate: undefined,
+      predicates: undefined,
+      scope: this.props.filter.sc,
+      value: this.props.filter.v
+    })
+    this.valueInputRef = useRef()
 
-  componentDidMount() {
-    this.loadRansackPredicates()
+    useMemo(() => {
+      this.loadRansackPredicates()
+    }, [])
   }
 
   async loadRansackPredicates() {
@@ -141,7 +46,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
       currentPredicate = predicates.find((predicate) => predicate.name == this.props.filter.pre)
     }
 
-    this.shape.set({
+    this.setState({
       predicate: currentPredicate,
       predicates
     })
@@ -150,7 +55,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   render() {
     const {valueInputRef} = digs(this, "valueInputRef")
     const currentModelClass = this.currentModelClass()
-    const {attribute, predicate, predicates, scope, value} = digs(this.shape, "attribute", "predicate", "scope", "predicates", "value")
+    const {attribute, predicate, predicates, scope, value} = digs(this.state, "attribute", "predicate", "scope", "predicates", "value")
     let submitEnabled = false
 
     if (attribute && predicate) {
@@ -188,7 +93,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
             <div>
               {this.sortedByName(currentModelClass.ransackableAttributes(), currentModelClass).map((attribute) =>
                 <AttributeElement
-                  active={attribute.name() == this.shape.attribute?.name()}
+                  active={attribute.name() == this.state.attribute?.name()}
                   attribute={attribute}
                   currentModelClass={currentModelClass}
                   key={attribute.name()}
@@ -197,7 +102,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
               )}
               {currentModelClass.ransackableScopes().map((scope) =>
                 <ScopeElement
-                  active={scope.name() == this.shape.scope?.name()}
+                  active={scope.name() == this.state.scope?.name()}
                   key={scope.name()}
                   scope={scope}
                   onScopeClicked={digg(this, "onScopeClicked")}
@@ -205,7 +110,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
               )}
             </div>
             <div>
-              {predicates && !this.shape.scope &&
+              {predicates && !this.state.scope &&
                 <Select
                   className="predicate-select"
                   defaultValue={predicate?.name}
@@ -232,7 +137,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   currentModelClass() {
-    const {path} = digs(this.shape, "path")
+    const {path} = digs(this.state, "path")
 
     return this.currentModelClassFromPath(path)
   }
@@ -259,7 +164,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
 
   currentPathParts() {
     const {modelClass} = digs(this.props, "modelClass")
-    const {path} = digs(this.shape, "path")
+    const {path} = digs(this.state, "path")
     const result = []
     let currentModelClass = modelClass
 
@@ -284,7 +189,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   onAttributeClicked = ({attribute}) => {
-    this.shape.set({
+    this.setState({
       attribute,
       predicate: undefined,
       scope: undefined
@@ -293,15 +198,15 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
 
   onPredicateChanged = (e) => {
     const chosenPredicateName = digg(e, "target", "value")
-    const predicate = this.shape.predicates.find((predicate) => predicate.name == chosenPredicateName)
+    const predicate = this.state.predicates.find((predicate) => predicate.name == chosenPredicateName)
 
-    this.shape.set({predicate})
+    this.setState({predicate})
   }
 
   onReflectionClicked = ({reflection}) => {
-    const newPath = this.shape.path.concat([inflection.underscore(reflection.name())])
+    const newPath = this.state.path.concat([inflection.underscore(reflection.name())])
 
-    this.shape.set({
+    this.setState({
       attribute: undefined,
       path: newPath,
       predicate: undefined
@@ -311,7 +216,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
   }
 
   onScopeClicked = ({scope}) => {
-    this.shape.set({
+    this.setState({
       attribute: undefined,
       scope
     })
@@ -321,7 +226,7 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
     e.preventDefault()
 
     const {filter, querySearchName} = digs(this.props, "filter", "querySearchName")
-    const {attribute, path, predicate, scope} = digs(this.shape, "attribute", "path", "predicate", "scope")
+    const {attribute, path, predicate, scope} = digs(this.state, "attribute", "path", "predicate", "scope")
     const {filterIndex} = digs(filter, "filterIndex")
     const searchParams = Params.parse()[querySearchName] || {}
     const value = digg(this, "valueInputRef", "current", "value")
@@ -367,4 +272,4 @@ export default class ApiMakerTableFiltersFilterForm extends React.PureComponent
       currentModelClass.humanAttributeName(a.name()).toLowerCase().localeCompare(currentModelClass.humanAttributeName(b.name()).toLowerCase())
     )
   }
-}
+}))

package/src/table/filters/filter.jsx

@@ -0,0 +1,55 @@
+import {digg, digs} from "diggerize"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    a: PropTypes.string,
+    filterIndex: PropTypes.number.isRequired,
+    onClick: PropTypes.func.isRequired,
+    onRemoveClicked: PropTypes.func.isRequired,
+    p: PropTypes.array.isRequired,
+    pre: PropTypes.string,
+    sc: PropTypes.string,
+    v: PropTypes.string.isRequired
+  })
+
+  render() {
+    const {p, v} = digs(this.props, "p", "v")
+    const {a, pre, sc} = this.props
+
+    return (
+      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
+        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
+          {p.length > 0 &&
+            `${p.join(".")}.`
+          }
+          {a} {sc} {pre} {v}
+        </span>
+        <span>
+          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
+            <i className="fa fa-remove la la-remove" />
+          </a>
+        </span>
+      </div>
+    )
+  }
+
+  onFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
+
+    this.props.onClick({a, filterIndex, p, pre, v})
+  }
+
+  onRemoveFilterClicked = (e) => {
+    e.preventDefault()
+
+    const {filterIndex} = digs(this.props, "filterIndex")
+
+    this.props.onRemoveClicked({filterIndex})
+  }
+}))

package/src/table/filters/index.jsx

@@ -1,4 +1,5 @@
 import {digg, digs} from "diggerize"
+import Filter from "./filter"
 import FilterForm from "./filter-form"
 import LoadSearchModal from "./load-search-modal"
 import SaveSearchModal from "./save-search-modal"
@@ -8,55 +9,6 @@ import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-compon
 import useI18n from "i18n-on-steroids/src/use-i18n.mjs"
 import useQueryParams from "on-location-changed/src/use-query-params"
 
-const ApiMakerTableFilter = memo(shapeComponent(class ApiMakerTableFilter extends ShapeComponent {
-  static propTypes = {
-    a: PropTypes.string.isRequired,
-    filterIndex: PropTypes.number.isRequired,
-    onClick: PropTypes.func.isRequired,
-    onRemoveClicked: PropTypes.func.isRequired,
-    p: PropTypes.array.isRequired,
-    pre: PropTypes.string.isRequired,
-    v: PropTypes.string.isRequired
-  }
-
-  render() {
-    const {p, v} = digs(this.props, "p", "v")
-    const {a, pre, sc} = this.props
-
-    return (
-      <div style={{display: "inline-block", backgroundColor: "grey", padding: "10px 6px"}}>
-        <span className="filter-label" onClick={digg(this, "onFilterClicked")} style={{cursor: "pointer"}}>
-          {p.length > 0 &&
-            `${p.join(".")}.`
-          }
-          {a} {sc} {pre} {v}
-        </span>
-        <span>
-          <a className="remove-filter-button" href="#" onClick={digg(this, "onRemoveFilterClicked")}>
-            <i className="fa fa-remove la la-remove" />
-          </a>
-        </span>
-      </div>
-    )
-  }
-
-  onFilterClicked = (e) => {
-    e.preventDefault()
-
-    const {a, filterIndex, p, pre, v} = digs(this.props, "a", "filterIndex", "p", "pre", "v")
-
-    this.props.onClick({a, filterIndex, p, pre, v})
-  }
-
-  onRemoveFilterClicked = (e) => {
-    e.preventDefault()
-
-    const {filterIndex} = digs(this.props, "filterIndex")
-
-    this.props.onRemoveClicked({filterIndex})
-  }
-}))
-
 export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeComponent {
   static propTypes = {
     currentUser: PropTypes.object,
@@ -110,7 +62,7 @@ export default memo(shapeComponent(class ApiMakerTableFilters extends ShapeCompo
           />
         }
         {currentFilters?.map((filterData, filterIndex) =>
-          <ApiMakerTableFilter
+          <Filter
             key={filterIndex}
             filterIndex={filterIndex}
             onClick={digg(this, "onFilterClicked")}

package/src/table/filters/reflection-element.jsx

@@ -0,0 +1,35 @@
+import {digg, digs} from "diggerize"
+import PropTypes from "prop-types"
+import PropTypesExact from "prop-types-exact"
+import {memo} from "react"
+import Reflection from "../../base-model/reflection"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ReflectionElement extends ShapeComponent {
+  static propTypes = PropTypesExact({
+    currentModelClass: PropTypes.func.isRequired,
+    onClick: PropTypes.func.isRequired,
+    reflection: PropTypes.instanceOf(Reflection).isRequired
+  })
+
+  render() {
+    const {currentModelClass, reflection} = digs(this.props, "currentModelClass", "reflection")
+
+    return (
+      <div
+        className="reflection-element"
+        data-model-class={currentModelClass.modelClassData().name}
+        data-reflection-name={reflection.name()}
+        onClick={digg(this, "onReflectionClicked")}
+      >
+        {currentModelClass.humanAttributeName(reflection.name())}
+      </div>
+    )
+  }
+
+  onReflectionClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onClick({reflection: digg(this, "props", "reflection")})
+  }
+}))

package/src/table/filters/scope-element.jsx

@@ -0,0 +1,39 @@
+import {digg} from "diggerize"
+import PropTypes from "prop-types"
+import {memo} from "react"
+import {shapeComponent, ShapeComponent} from "set-state-compare/src/shape-component"
+
+export default memo(shapeComponent(class ScopeElement extends ShapeComponent {
+  static defaultProps = {
+    active: false
+  }
+
+  static propTypes = {
+    active: PropTypes.bool.isRequired,
+    scope: PropTypes.object.isRequired
+  }
+
+  render() {
+    const {active, scope} = this.props
+    const style = {}
+
+    if (active) style.fontWeight = "bold"
+
+    return (
+      <div
+        className="scope-element"
+        key={scope.name()}
+        onClick={digg(this, "onScopeClicked")}
+        style={style}
+      >
+        {scope.name()}
+      </div>
+    )
+  }
+
+  onScopeClicked = (e) => {
+    e.preventDefault()
+
+    this.props.onScopeClicked({scope: this.props.scope})
+  }
+}))

package/src/table/table.jsx

@@ -22,6 +22,7 @@ import TableSettings from "./table-settings"
 import uniqunize from "uniqunize"
 import useBreakpoint from "./use-breakpoint"
 import useCollection from "../use-collection"
+import useQueryParams from "on-location-changed/src/use-query-params.js"
 
 const paginationOptions = [30, 60, 90, ["All", "all"]]
 const WorkerPluginsCheckAllCheckbox = React.lazy(() => import("./worker-plugins-check-all-checkbox"))
@@ -79,6 +80,7 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
 
   setup() {
     const {breakpoint} = useBreakpoint()
+    const queryParams = useQueryParams()
 
     this.setInstance({
       breakpoint,
@@ -91,18 +93,19 @@ export default memo(shapeComponent(class ApiMakerTable extends ShapeComponent {
     if (!queryName) queryName = collectionKey
 
     const columnsAsArray = this.columnsAsArray()
+    const querySName = `${queryName}_s`
 
     this.useStates({
       columns: columnsAsArray,
       currentWorkplace: undefined,
-      identifier: this.props.identifier || `${collectionKey}-default`,
+      identifier: () => this.props.identifier || `${collectionKey}-default`,
       preload: undefined,
       preparedColumns: undefined,
       queryName,
-      queryQName: `${queryName}_q`,
-      queryPageName: `${queryName}_page`,
-      querySName: `${queryName}_s`,
-      showFilters: false,
+      queryQName: () => `${queryName}_q`,
+      queryPageName: () => `${queryName}_page`,
+      querySName,
+      showFilters: () => Boolean(queryParams[querySName]),
       showSettings: false,
       tableSetting: undefined,
       tableSettingFullCacheKey: undefined